rearrange columns

src/components/media.js

@@ -2,7 +2,9 @@ import React, { Fragment, useState } from "react";
 import classnames from "classnames";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import { makeStyles } from "@material-ui/core/styles";
+import { Tooltip } from "@material-ui/core";
 import {
+  BooleanField,
   BooleanInput,
   Button,
   DateTimeInput,
@@ -16,6 +18,7 @@ import {
   useRefresh,
   useTranslate,
 } from "react-admin";
+import ClearIcon from "@material-ui/icons/Clear";
 import DeleteSweepIcon from "@material-ui/icons/DeleteSweep";
 import Dialog from "@material-ui/core/Dialog";
 import DialogContent from "@material-ui/core/DialogContent";
@@ -150,6 +153,7 @@ export const DeleteMediaButton = props => {
 
 export const ProtectMediaButton = props => {
   const { record } = props;
+  const translate = useTranslate();
   const refresh = useRefresh();
   const notify = useNotify();
   const [create, { loading }] = useCreate("protect_media");
@@ -186,24 +190,54 @@ export const ProtectMediaButton = props => {
   };
 
   return (
+    /*
+    Wrapping Tooltip with <div>
+    https://github.com/marmelab/react-admin/issues/4349#issuecomment-578594735
+    */
     <Fragment>
-      {!record.safe_from_quarantine && !record.quarantined_by && (
+      {record.quarantined_by && (
-        <Button
+        <Tooltip
-          label="resources.protect_media.action.create"
+          title={translate("resources.protect_media.action.none", {
-          onClick={handleProtect}
+            _: "resources.protect_media.action.none",
-          disabled={loading}
+          })}
         >
-          <LockIcon />
+          <div>
+            {/*
+            Button instead BooleanField for
+            consistent appearance and position in the column
+            */}
+            <Button disabled={true}>
+              <ClearIcon />
             </Button>
+          </div>
+        </Tooltip>
       )}
       {record.safe_from_quarantine && (
-        <Button
+        <Tooltip
-          label="resources.protect_media.action.delete"
+          title={translate("resources.protect_media.action.delete", {
-          onClick={handleUnprotect}
+            _: "resources.protect_media.action.delete",
-          disabled={loading}
+          })}
+          arrow
         >
+          <div>
+            <Button onClick={handleUnprotect} disabled={loading}>
+              <LockIcon />
+            </Button>
+          </div>
+        </Tooltip>
+      )}
+      {!record.safe_from_quarantine && !record.quarantined_by && (
+        <Tooltip
+          title={translate("resources.protect_media.action.create", {
+            _: "resources.protect_media.action.create",
+          })}
+        >
+          <div>
+            <Button onClick={handleProtect} disabled={loading}>
               <LockOpenIcon />
             </Button>
+          </div>
+        </Tooltip>
       )}
     </Fragment>
   );

src/components/users.js

@@ -466,8 +466,7 @@ export const UserEdit = props => {
               <TextField source="media_type" />
               <TextField source="upload_name" />
               <TextField source="quarantined_by" />
-              <BooleanField source="safe_from_quarantine" />
+              <ProtectMediaButton label="resources.users_media.fields.safe_from_quarantine" />
-              <ProtectMediaButton />
               <DeleteButton mutationMode="pessimistic" redirect={false} />
             </Datagrid>
           </ReferenceManyField>

src/i18n/de.js

@@ -265,8 +265,9 @@ const de = {
     },
     protect_media: {
       action: {
-        create: "Schützen",
+        create: "Ungeschützt, Schutz erstellen",
-        delete: "Schutz aufheben",
+        delete: "Geschützt, Schutz aufheben",
+        none: "In Quarantäne",
         send_success: "Erfolgreich den Schutz-Status geändert.",
         send_failure: "Beim Versenden ist ein Fehler aufgetreten.",
       },

src/i18n/en.js

@@ -261,8 +261,9 @@ const en = {
     },
     protect_media: {
       action: {
-        create: "Protect",
+        create: "Unprotected, create protection",
-        delete: "Unprotect",
+        delete: "Protected, remove protection",
+        none: "In quarantine",
         send_success: "Successfully changed the protection status.",
         send_failure: "An error has occurred.",
       },