From 114dfbe98ab749709d191c48da9b6568bbed8adb Mon Sep 17 00:00:00 2001
From: dklimpel <5740567+dklimpel@users.noreply.github.com>
Date: Wed, 18 Aug 2021 19:07:31 +0200
Subject: [PATCH] rearrange columns

---
 src/components/media.js | 60 ++++++++++++++++++++++++++++++++---------
 src/components/users.js |  3 +--
 src/i18n/de.js          |  5 ++--
 src/i18n/en.js          |  5 ++--
 4 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/src/components/media.js b/src/components/media.js
index 0595f8f..a4691f7 100644
--- a/src/components/media.js
+++ b/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 && (
-        <Button
-          label="resources.protect_media.action.create"
-          onClick={handleProtect}
-          disabled={loading}
+      {record.quarantined_by && (
+        <Tooltip
+          title={translate("resources.protect_media.action.none", {
+            _: "resources.protect_media.action.none",
+          })}
         >
-          <LockIcon />
-        </Button>
+          <div>
+            {/*
+            Button instead BooleanField for
+            consistent appearance and position in the column
+            */}
+            <Button disabled={true}>
+              <ClearIcon />
+            </Button>
+          </div>
+        </Tooltip>
       )}
       {record.safe_from_quarantine && (
-        <Button
-          label="resources.protect_media.action.delete"
-          onClick={handleUnprotect}
-          disabled={loading}
+        <Tooltip
+          title={translate("resources.protect_media.action.delete", {
+            _: "resources.protect_media.action.delete",
+          })}
+          arrow
         >
-          <LockOpenIcon />
-        </Button>
+          <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>
   );
diff --git a/src/components/users.js b/src/components/users.js
index 9f6ca9f..32cbdd6 100644
--- a/src/components/users.js
+++ b/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 />
+              <ProtectMediaButton label="resources.users_media.fields.safe_from_quarantine" />
               <DeleteButton mutationMode="pessimistic" redirect={false} />
             </Datagrid>
           </ReferenceManyField>
diff --git a/src/i18n/de.js b/src/i18n/de.js
index 0165474..7a9139f 100644
--- a/src/i18n/de.js
+++ b/src/i18n/de.js
@@ -265,8 +265,9 @@ const de = {
     },
     protect_media: {
       action: {
-        create: "Schützen",
-        delete: "Schutz aufheben",
+        create: "Ungeschützt, Schutz erstellen",
+        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.",
       },
diff --git a/src/i18n/en.js b/src/i18n/en.js
index 49fbf01..680fcc5 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -261,8 +261,9 @@ const en = {
     },
     protect_media: {
       action: {
-        create: "Protect",
-        delete: "Unprotect",
+        create: "Unprotected, create protection",
+        delete: "Protected, remove protection",
+        none: "In quarantine",
         send_success: "Successfully changed the protection status.",
         send_failure: "An error has occurred.",
       },