New: Add individual edit to Manage Custom Formats

(cherry picked from commit e006b405323c276eb5b7f2dd97b97c80394a6930)

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalConnector.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
 import EditCustomFormatModal from './EditCustomFormatModal';
+import EditCustomFormatModalContentConnector from './EditCustomFormatModalContentConnector';
 
 function mapStateToProps() {
   return {};
@@ -36,6 +37,7 @@ class EditCustomFormatModalConnector extends Component {
 }
 
 EditCustomFormatModalConnector.propTypes = {
+  ...EditCustomFormatModalContentConnector.propTypes,
   onModalClose: PropTypes.func.isRequired,
   clearPendingChanges: PropTypes.func.isRequired
 };

frontend/src/Settings/CustomFormats/CustomFormats/Manage/ManageCustomFormatsModalContent.tsx

@@ -47,6 +47,11 @@ const COLUMNS = [
     isSortable: true,
     isVisible: true,
   },
+  {
+    name: 'actions',
+    label: '',
+    isVisible: true,
+  },
 ];
 
 interface ManageCustomFormatsModalContentProps {

frontend/src/Settings/CustomFormats/CustomFormats/Manage/ManageCustomFormatsModalRow.css

@@ -4,3 +4,9 @@
 
   word-break: break-all;
 }
+
+.actions {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 40px;
+}

frontend/src/Settings/CustomFormats/CustomFormats/Manage/ManageCustomFormatsModalRow.css.d.ts

@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'actions': string;
   'includeCustomFormatWhenRenaming': string;
   'name': string;
 }

frontend/src/Settings/CustomFormats/CustomFormats/Manage/ManageCustomFormatsModalRow.tsx

@@ -1,10 +1,18 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import IconButton from 'Components/Link/IconButton';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import Column from 'Components/Table/Column';
 import TableRow from 'Components/Table/TableRow';
+import { icons } from 'Helpers/Props';
+import { deleteCustomFormat } from 'Store/Actions/settingsActions';
 import { SelectStateInputProps } from 'typings/props';
 import translate from 'Utilities/String/translate';
+import EditCustomFormatModalConnector from '../EditCustomFormatModalConnector';
 import styles from './ManageCustomFormatsModalRow.css';
 
 interface ManageCustomFormatsModalRowProps {
@@ -16,6 +24,15 @@ interface ManageCustomFormatsModalRowProps {
   onSelectedChange(result: SelectStateInputProps): void;
 }
 
+function isDeletingSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.customFormats.isDeleting,
+    (isDeleting) => {
+      return isDeleting;
+    }
+  );
+}
+
 function ManageCustomFormatsModalRow(props: ManageCustomFormatsModalRowProps) {
   const {
     id,
@@ -25,7 +42,16 @@ function ManageCustomFormatsModalRow(props: ManageCustomFormatsModalRowProps) {
     onSelectedChange,
   } = props;
 
-  const onSelectedChangeWrapper = useCallback(
+  const dispatch = useDispatch();
+  const isDeleting = useSelector(isDeletingSelector());
+
+  const [isEditCustomFormatModalOpen, setIsEditCustomFormatModalOpen] =
+    useState(false);
+
+  const [isDeleteCustomFormatModalOpen, setIsDeleteCustomFormatModalOpen] =
+    useState(false);
+
+  const handlelectedChange = useCallback(
     (result: SelectStateInputProps) => {
       onSelectedChange({
         ...result,
@@ -34,12 +60,33 @@ function ManageCustomFormatsModalRow(props: ManageCustomFormatsModalRowProps) {
     [onSelectedChange]
   );
 
+  const handleEditCustomFormatModalOpen = useCallback(() => {
+    setIsEditCustomFormatModalOpen(true);
+  }, [setIsEditCustomFormatModalOpen]);
+
+  const handleEditCustomFormatModalClose = useCallback(() => {
+    setIsEditCustomFormatModalOpen(false);
+  }, [setIsEditCustomFormatModalOpen]);
+
+  const handleDeleteCustomFormatPress = useCallback(() => {
+    setIsEditCustomFormatModalOpen(false);
+    setIsDeleteCustomFormatModalOpen(true);
+  }, [setIsEditCustomFormatModalOpen, setIsDeleteCustomFormatModalOpen]);
+
+  const handleDeleteCustomFormatModalClose = useCallback(() => {
+    setIsDeleteCustomFormatModalOpen(false);
+  }, [setIsDeleteCustomFormatModalOpen]);
+
+  const handleConfirmDeleteCustomFormat = useCallback(() => {
+    dispatch(deleteCustomFormat({ id }));
+  }, [id, dispatch]);
+
   return (
     <TableRow>
       <TableSelectCell
         id={id}
         isSelected={isSelected}
-        onSelectedChange={onSelectedChangeWrapper}
+        onSelectedChange={handlelectedChange}
       />
 
       <TableRowCell className={styles.name}>{name}</TableRowCell>
@@ -47,6 +94,31 @@ function ManageCustomFormatsModalRow(props: ManageCustomFormatsModalRowProps) {
       <TableRowCell className={styles.includeCustomFormatWhenRenaming}>
         {includeCustomFormatWhenRenaming ? translate('Yes') : translate('No')}
       </TableRowCell>
+
+      <TableRowCell className={styles.actions}>
+        <IconButton
+          name={icons.EDIT}
+          onPress={handleEditCustomFormatModalOpen}
+        />
+      </TableRowCell>
+
+      <EditCustomFormatModalConnector
+        id={id}
+        isOpen={isEditCustomFormatModalOpen}
+        onModalClose={handleEditCustomFormatModalClose}
+        onDeleteCustomFormatPress={handleDeleteCustomFormatPress}
+      />
+
+      <ConfirmModal
+        isOpen={isDeleteCustomFormatModalOpen}
+        kind="danger"
+        title={translate('DeleteCustomFormat')}
+        message={translate('DeleteCustomFormatMessageText', { name })}
+        confirmLabel={translate('Delete')}
+        isSpinning={isDeleting}
+        onConfirm={handleConfirmDeleteCustomFormat}
+        onCancel={handleDeleteCustomFormatModalClose}
+      />
     </TableRow>
   );
 }