face_cluster (#6470)

* face_cluster

* update

* update

* feat: update ui

* feat: optimize code

* feat: update code

* feat: optimize ui

* feat: optimize view name

---------

Co-authored-by: zheng.shen <zheng.shen@seafile.com>
Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/src/metadata/components/dialog/metadata-face-recognition-dialog/index.js

@@ -0,0 +1,51 @@
+import React, { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { gettext } from '../../../../utils/constants';
+import metadataAPI from '../../../api';
+import toaster from '../../../../components/toast';
+import { Utils } from '../../../../utils/utils';
+
+const MetadataFaceRecognitionDialog = ({ value, repoID, toggle, submit }) => {
+  const [submitting, setSubmitting] = useState(false);
+
+  const onToggle = useCallback(() => {
+    toggle();
+  }, [toggle]);
+
+  const onSubmit = useCallback(() => {
+    setSubmitting(true);
+    metadataAPI.openFaceRecognition(repoID).then(res => {
+      submit(true);
+      toggle();
+    }).catch(error => {
+      const errorMsg = Utils.getErrorMsg(error);
+      toaster.danger(errorMsg);
+      setSubmitting(false);
+    });
+  }, [repoID, submit, toggle]);
+
+  return (
+    <Modal className="metadata-face-recognition-dialog" isOpen={true} toggle={onToggle}>
+      <ModalHeader toggle={onToggle}>{gettext('Face recognition')}</ModalHeader>
+      <ModalBody>
+        {value ? gettext('Face recognition enabled.') : gettext('Whether to enable face recognition?')}
+      </ModalBody>
+      {!value && (
+        <ModalFooter>
+          <Button color="secondary" onClick={onToggle}>{gettext('Cancel')}</Button>
+          <Button color="primary" disabled={submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      )}
+    </Modal>
+  );
+};
+
+MetadataFaceRecognitionDialog.propTypes = {
+  value: PropTypes.bool.isRequired,
+  repoID: PropTypes.string.isRequired,
+  toggle: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
+};
+
+export default MetadataFaceRecognitionDialog;