shared components

ui/v2.5/src/components/Shared/AutoTagConfirmDialog.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+import { ModalComponent } from "./Modal";
+
+interface IAutoTagConfirmDialog {
+  show: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export const AutoTagConfirmDialog: React.FC<IAutoTagConfirmDialog> = ({
+  show,
+  onConfirm,
+  onCancel,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <ModalComponent
+      show={show}
+      icon={faExclamationTriangle}
+      header={intl.formatMessage({ id: "actions.auto_tag" })}
+      accept={{
+        text: intl.formatMessage({ id: "actions.confirm" }),
+        variant: "danger",
+        onClick: onConfirm,
+      }}
+      cancel={{
+        onClick: onCancel,
+      }}
+    >
+      <p>
+        {intl.formatMessage({
+          id: "config.tasks.auto_tag_based_on_filenames",
+        })}
+      </p>
+      <p>{intl.formatMessage({ id: "config.tasks.auto_tag_confirm" })}</p>
+    </ModalComponent>
+  );
+};

ui/v2.5/src/components/Shared/DetailsEditNavbar.tsx

@@ -2,6 +2,7 @@ import { Button, Dropdown, Modal, SplitButton } from "react-bootstrap";
 import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { ImageInput } from "./ImageInput";
+import { AutoTagConfirmDialog } from "./AutoTagConfirmDialog";
 import cx from "classnames";
 
 interface IProps {
@@ -30,6 +31,7 @@ interface IProps {
 export const DetailsEditNavbar: React.FC<IProps> = (props: IProps) => {
   const intl = useIntl();
   const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState<boolean>(false);
+  const [isAutoTagAlertOpen, setIsAutoTagAlertOpen] = useState<boolean>(false);
 
   function renderEditButton() {
     if (props.isNew) return;
@@ -114,14 +116,20 @@ export const DetailsEditNavbar: React.FC<IProps> = (props: IProps) => {
           <Button
             variant="secondary"
             disabled={props.autoTagDisabled}
-            onClick={() => {
+            onClick={() => setIsAutoTagAlertOpen(true)}
+          >
+            <FormattedMessage id="actions.auto_tag" />…
+          </Button>
+          <AutoTagConfirmDialog
+            show={isAutoTagAlertOpen}
+            onConfirm={() => {
+              setIsAutoTagAlertOpen(false);
               if (props.onAutoTag) {
                 props.onAutoTag();
               }
             }}
-          >
-            <FormattedMessage id="actions.auto_tag" />
-          </Button>
+            onCancel={() => setIsAutoTagAlertOpen(false)}
+          />
         </div>
       );
     }