Share one SyncModal between the repository sync actions

src/actions/ansible-repository-sync.tsx

@@ -1,106 +1,12 @@
 import { msg, t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
-import { Button, FormGroup, Modal, Switch } from '@patternfly/react-core';
-import { useEffect, useState } from 'react';
 import { Link } from 'react-router';
 import { AnsibleRepositoryAPI } from 'src/api';
-import { HelpButton, Spinner } from 'src/components';
+import { SyncModal } from 'src/components';
 import { Paths, formatPath } from 'src/paths';
 import { handleHttpError, parsePulpIDFromURL, taskAlert } from 'src/utilities';
 import { Action } from './action';
 
-const SyncModal = ({
-  closeAction,
-  syncAction,
-  name,
-}: {
-  closeAction: () => null;
-  syncAction: (syncParams) => Promise<void>;
-  name: string;
-}) => {
-  const [pending, setPending] = useState(false);
-  const [syncParams, setSyncParams] = useState({
-    mirror: true,
-    optimize: true,
-  });
-
-  useEffect(() => {
-    setPending(false);
-    setSyncParams({ mirror: true, optimize: true });
-  }, [name]);
-
-  if (!name) {
-    return null;
-  }
-
-  return (
-    <Modal
-      actions={[
-        <div data-cy='sync-button' key='sync'>
-          <Button
-            key='sync'
-            onClick={() => {
-              setPending(true);
-              syncAction(syncParams)
-                .then(closeAction)
-                .finally(() => setPending(false));
-            }}
-            variant='primary'
-            isDisabled={pending}
-          >
-            {t`Sync`}
-            {pending && <Spinner size='sm' />}
-          </Button>
-        </div>,
-        <Button key='close' onClick={closeAction} variant='link'>
-          {t`Close`}
-        </Button>,
-      ]}
-      isOpen
-      onClose={closeAction}
-      title={t`Sync repository "${name}"`}
-      variant='medium'
-    >
-      <FormGroup
-        label={t`Mirror`}
-        labelIcon={
-          <HelpButton
-            content={t`If selected, all content that is not present in the remote repository will be removed from the local repository; otherwise, sync will add missing content.`}
-          />
-        }
-      >
-        <Switch
-          isChecked={syncParams.mirror}
-          onChange={(_event, mirror) =>
-            setSyncParams({ ...syncParams, mirror })
-          }
-          label={t`Content not present in remote repository will be removed from the local repository`}
-          labelOff={t`Sync will only add missing content`}
-        />
-      </FormGroup>
-      <br />
-      <FormGroup
-        label={t`Optimize`}
-        labelIcon={
-          <HelpButton
-            content={t`Only perform the sync if changes are reported by the remote server. To force a sync to happen, deselect this option.`}
-          />
-        }
-      >
-        <Switch
-          isChecked={syncParams.optimize}
-          onChange={(_event, optimize) =>
-            setSyncParams({ ...syncParams, optimize })
-          }
-          label={t`Only perform the sync if changes are reported by the remote server.`}
-          labelOff={t`Force a sync to happen.`}
-        />
-      </FormGroup>
-      <br />
-    </Modal>
-  );
-};
-
 export const ansibleRepositorySyncAction = Action({
   title: msg`Sync`,
   modal: ({ addAlert, query, setState, state }) =>

src/actions/file-repository-sync.tsx

@@ -1,103 +1,9 @@
 import { msg, t } from '@lingui/core/macro';
-import { Button, FormGroup, Modal, Switch } from '@patternfly/react-core';
-import { useEffect, useState } from 'react';
 import { FileRepositoryAPI } from 'src/api';
-import { HelpButton, Spinner } from 'src/components';
+import { SyncModal } from 'src/components';
 import { handleHttpError, parsePulpIDFromURL, taskAlert } from 'src/utilities';
 import { Action } from './action';
 
-const SyncModal = ({
-  closeAction,
-  syncAction,
-  name,
-}: {
-  closeAction: () => null;
-  syncAction: (syncParams) => Promise<void>;
-  name: string;
-}) => {
-  const [pending, setPending] = useState(false);
-  const [syncParams, setSyncParams] = useState({
-    mirror: true,
-    optimize: true,
-  });
-
-  useEffect(() => {
-    setPending(false);
-    setSyncParams({ mirror: true, optimize: true });
-  }, [name]);
-
-  if (!name) {
-    return null;
-  }
-
-  return (
-    <Modal
-      actions={[
-        <div data-cy='sync-button' key='sync'>
-          <Button
-            key='sync'
-            onClick={() => {
-              setPending(true);
-              syncAction(syncParams)
-                .then(closeAction)
-                .finally(() => setPending(false));
-            }}
-            variant='primary'
-            isDisabled={pending}
-          >
-            {t`Sync`}
-            {pending && <Spinner size='sm' />}
-          </Button>
-        </div>,
-        <Button key='close' onClick={closeAction} variant='link'>
-          {t`Close`}
-        </Button>,
-      ]}
-      isOpen
-      onClose={closeAction}
-      title={t`Sync repository "${name}"`}
-      variant='medium'
-    >
-      <FormGroup
-        label={t`Mirror`}
-        labelIcon={
-          <HelpButton
-            content={t`If selected, all content that is not present in the remote repository will be removed from the local repository; otherwise, sync will add missing content.`}
-          />
-        }
-      >
-        <Switch
-          isChecked={syncParams.mirror}
-          onChange={(_event, mirror) =>
-            setSyncParams({ ...syncParams, mirror })
-          }
-          label={t`Content not present in remote repository will be removed from the local repository`}
-          labelOff={t`Sync will only add missing content`}
-        />
-      </FormGroup>
-      <br />
-      <FormGroup
-        label={t`Optimize`}
-        labelIcon={
-          <HelpButton
-            content={t`Only perform the sync if changes are reported by the remote server. To force a sync to happen, deselect this option.`}
-          />
-        }
-      >
-        <Switch
-          isChecked={syncParams.optimize}
-          onChange={(_event, optimize) =>
-            setSyncParams({ ...syncParams, optimize })
-          }
-          label={t`Only perform the sync if changes are reported by the remote server.`}
-          labelOff={t`Force a sync to happen.`}
-        />
-      </FormGroup>
-      <br />
-    </Modal>
-  );
-};
-
 export const fileRepositorySyncAction = Action({
   title: msg`Sync`,
   modal: ({ addAlert, query, setState, state }) =>

src/components/index.ts

@@ -137,6 +137,7 @@ export { Sort, type SortFieldType } from './sort';
 export { SortTable } from './sort-table';
 export { StatefulDropdown } from './stateful-dropdown';
 export { StatusIndicator } from './status-indicator';
+export { SyncModal } from './sync-modal';
 export { TableOfContents } from './table-of-contents';
 export { Tag } from './tag';
 export { TagLabel } from './tag-label';

src/components/sync-modal.tsx

@@ -0,0 +1,94 @@
+import { t } from '@lingui/core/macro';
+import { Button, FormGroup, Modal, Switch } from '@patternfly/react-core';
+import { useEffect, useState } from 'react';
+import { HelpButton, Spinner } from 'src/components';
+
+interface IProps {
+  closeAction: () => null;
+  syncAction: (syncParams) => Promise<void>;
+  name: string;
+}
+
+export const SyncModal = ({ closeAction, syncAction, name }: IProps) => {
+  const [pending, setPending] = useState(false);
+  const [syncParams, setSyncParams] = useState({
+    mirror: true,
+    optimize: true,
+  });
+
+  useEffect(() => {
+    setPending(false);
+    setSyncParams({ mirror: true, optimize: true });
+  }, [name]);
+
+  if (!name) {
+    return null;
+  }
+
+  return (
+    <Modal
+      actions={[
+        <div data-cy='sync-button' key='sync'>
+          <Button
+            key='sync'
+            onClick={() => {
+              setPending(true);
+              syncAction(syncParams)
+                .then(closeAction)
+                .finally(() => setPending(false));
+            }}
+            variant='primary'
+            isDisabled={pending}
+          >
+            {t`Sync`}
+            {pending && <Spinner size='sm' />}
+          </Button>
+        </div>,
+        <Button key='close' onClick={closeAction} variant='link'>
+          {t`Close`}
+        </Button>,
+      ]}
+      isOpen
+      onClose={closeAction}
+      title={t`Sync repository "${name}"`}
+      variant='medium'
+    >
+      <FormGroup
+        label={t`Mirror`}
+        labelIcon={
+          <HelpButton
+            content={t`If selected, all content that is not present in the remote repository will be removed from the local repository; otherwise, sync will add missing content.`}
+          />
+        }
+      >
+        <Switch
+          isChecked={syncParams.mirror}
+          onChange={(_event, mirror) =>
+            setSyncParams({ ...syncParams, mirror })
+          }
+          label={t`Content not present in remote repository will be removed from the local repository`}
+          labelOff={t`Sync will only add missing content`}
+        />
+      </FormGroup>
+      <br />
+      <FormGroup
+        label={t`Optimize`}
+        labelIcon={
+          <HelpButton
+            content={t`Only perform the sync if changes are reported by the remote server. To force a sync to happen, deselect this option.`}
+          />
+        }
+      >
+        <Switch
+          isChecked={syncParams.optimize}
+          onChange={(_event, optimize) =>
+            setSyncParams({ ...syncParams, optimize })
+          }
+          label={t`Only perform the sync if changes are reported by the remote server.`}
+          labelOff={t`Force a sync to happen.`}
+        />
+      </FormGroup>
+      <br />
+    </Modal>
+  );
+};