feat: added quickedit to publishing stations (#388)

axisuru · web-flow · commit 9e6e5c8c6429 · 2024-11-22T13:27:33.000Z
diff --git a/services/channel/workflows/src/stations/Channels/ChannelPublishing/ChannelPublishing.tsx b/services/channel/workflows/src/stations/Channels/ChannelPublishing/ChannelPublishing.tsx
@@ -1,15 +1,6 @@
-import { FormStation, MessageBar } from '@axinom/mosaic-ui';
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { client } from '../../../apolloClient';
-import {
-  PublishValidationStatus,
-  useValidateChannelQuery,
-} from '../../../generated/graphql';
-import { ValidationResultsTable } from '../../../util/Publishing/ValidationResultsTable';
-import { useActions } from './ChannelPublishing.actions';
-import classes from './ChannelPublishing.module.scss';
-import { FormData } from './ChannelPublishing.types';
+import { ChannelPublishingForm } from './ChannelPublishingForm';
 
 interface UrlParams {
   channelId: string;
@@ -18,42 +9,5 @@ interface UrlParams {
 export const ChannelPublishing: React.FC = () => {
   const { channelId } = useParams<UrlParams>();
 
-  const { loading, data, error } = useValidateChannelQuery({
-    client,
-    variables: { id: channelId },
-    fetchPolicy: 'no-cache',
-  });
-
-  const { actions } = useActions(
-    channelId,
-    data?.validateChannel?.validationStatus,
-    data?.validateChannel?.publishHash,
-  );
-
-  return (
-    <FormStation<FormData>
-      defaultTitle="Publishing"
-      initialData={{
-        loading,
-        data: data?.validateChannel,
-        error: error?.message,
-      }}
-      actions={actions}
-      saveData={() => {
-        // We don't need to save the data, since this station only displays the validation status.
-      }}
-      edgeToEdgeContent={true}
-    >
-      {data?.validateChannel?.validationStatus ===
-        PublishValidationStatus.Errors && (
-        <MessageBar
-          type="info"
-          title="Channel cannot be published. Please check validation errors and fix related data accordingly."
-        />
-      )}
-      <div className={classes.content}>
-        <ValidationResultsTable />
-      </div>
-    </FormStation>
-  );
+  return <ChannelPublishingForm channelId={channelId} />;
 };
diff --git a/services/channel/workflows/src/stations/Channels/ChannelPublishing/ChannelPublishingForm.tsx b/services/channel/workflows/src/stations/Channels/ChannelPublishing/ChannelPublishingForm.tsx
@@ -0,0 +1,58 @@
+import { FormStation, MessageBar } from '@axinom/mosaic-ui';
+import React from 'react';
+import { client } from '../../../apolloClient';
+import {
+  PublishValidationStatus,
+  useValidateChannelQuery,
+} from '../../../generated/graphql';
+import { ValidationResultsTable } from '../../../util/Publishing/ValidationResultsTable';
+import { useActions } from './ChannelPublishing.actions';
+import classes from './ChannelPublishing.module.scss';
+import { FormData } from './ChannelPublishing.types';
+
+interface ChannelPublishingFormProps {
+  channelId: string;
+}
+
+export const ChannelPublishingForm: React.FC<ChannelPublishingFormProps> = ({
+  channelId,
+}) => {
+  const { loading, data, error } = useValidateChannelQuery({
+    client,
+    variables: { id: channelId },
+    fetchPolicy: 'no-cache',
+  });
+
+  const { actions } = useActions(
+    channelId,
+    data?.validateChannel?.validationStatus,
+    data?.validateChannel?.publishHash,
+  );
+
+  return (
+    <FormStation<FormData>
+      defaultTitle="Publishing"
+      initialData={{
+        loading,
+        data: data?.validateChannel,
+        error: error?.message,
+      }}
+      actions={actions}
+      saveData={() => {
+        // We don't need to save the data, since this station only displays the validation status.
+      }}
+      edgeToEdgeContent={true}
+    >
+      {data?.validateChannel?.validationStatus ===
+        PublishValidationStatus.Errors && (
+        <MessageBar
+          type="info"
+          title="Channel cannot be published. Please check validation errors and fix related data accordingly."
+        />
+      )}
+      <div className={classes.content}>
+        <ValidationResultsTable />
+      </div>
+    </FormStation>
+  );
+};
diff --git a/services/channel/workflows/src/stations/Channels/ChannelPublishing/ChannelPublishingQuickEdit.tsx b/services/channel/workflows/src/stations/Channels/ChannelPublishing/ChannelPublishingQuickEdit.tsx
@@ -0,0 +1,11 @@
+import { QuickEditContext, QuickEditContextType } from '@axinom/mosaic-ui';
+import React, { useContext } from 'react';
+import { ChannelsData } from '../ChannelsExplorer/Channels.types';
+import { ChannelPublishingForm } from './ChannelPublishingForm';
+
+export const ChannelPublishingQuickEdit: React.FC = () => {
+  const { selectedItem } =
+    useContext<QuickEditContextType<ChannelsData>>(QuickEditContext);
+
+  return <ChannelPublishingForm channelId={selectedItem.id} />;
+};
diff --git a/services/channel/workflows/src/stations/Channels/ChannelsExplorer/Channels.tsx b/services/channel/workflows/src/stations/Channels/ChannelsExplorer/Channels.tsx
@@ -22,6 +22,7 @@ import {
 import { publicationStateMap } from '../../../util/Publishing/publicationStateMap';
 import { ChannelDetailsQuickEdit } from '../ChannelDetails/ChannelDetailsQuickEdit';
 import { ChannelImageManagementQuickEdit } from '../ChannelImageManagement/ChannelImageManagementQuickEdit';
+import { ChannelPublishingQuickEdit } from '../ChannelPublishing/ChannelPublishingQuickEdit';
 import { ChannelVideoManagementQuickEdit } from '../ChannelVideoManagement/ChannelVideoManagementQuickEdit';
 import { routes } from '../routes';
 import { filterOptions, transformFilters } from './Channels.filters';
@@ -178,6 +179,12 @@ export const Channels: React.FC = () => {
           generateDetailsLink: (item) =>
             routes.generate(routes.channelVideos, { channelId: item.id }),
         },
+        {
+          component: <ChannelPublishingQuickEdit />,
+          label: 'Publishing Validation',
+          generateDetailsLink: (item) =>
+            routes.generate(routes.channelPublishing, { channelId: item.id }),
+        },
       ]}
     />
   );
diff --git a/services/channel/workflows/src/stations/Channels/PlaylistPublishing/PlaylistPublishing.tsx b/services/channel/workflows/src/stations/Channels/PlaylistPublishing/PlaylistPublishing.tsx
@@ -1,15 +1,6 @@
-import { FormStation, MessageBar } from '@axinom/mosaic-ui';
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { client } from '../../../apolloClient';
-import {
-  PublishValidationStatus,
-  useValidatePlaylistQuery,
-} from '../../../generated/graphql';
-import { ValidationResultsTable } from '../../../util/Publishing/ValidationResultsTable';
-import { useActions } from './PlaylistPublishing.actions';
-import classes from './PlaylistPublishing.module.scss';
-import { FormData } from './PlaylistPublishing.types';
+import { PlaylistPublishingForm } from './PlaylistPublishingForm';
 
 interface UrlParams {
   playlistId: string;
@@ -18,42 +9,5 @@ interface UrlParams {
 export const PlaylistPublishing: React.FC = () => {
   const { playlistId } = useParams<UrlParams>();
 
-  const { loading, data, error } = useValidatePlaylistQuery({
-    client,
-    variables: { id: playlistId },
-    fetchPolicy: 'no-cache',
-  });
-
-  const { actions } = useActions(
-    playlistId,
-    data?.validatePlaylist?.validationStatus,
-    data?.validatePlaylist?.publishHash,
-  );
-
-  return (
-    <FormStation<FormData>
-      defaultTitle="Publishing"
-      initialData={{
-        loading,
-        data: data?.validatePlaylist,
-        error: error?.message,
-      }}
-      actions={actions}
-      saveData={() => {
-        // We don't need to save the data, since this station only displays the validation status.
-      }}
-      edgeToEdgeContent={true}
-    >
-      {data?.validatePlaylist?.validationStatus ===
-        PublishValidationStatus.Errors && (
-        <MessageBar
-          type="info"
-          title="Playlist cannot be published. Please check validation errors and fix related data accordingly."
-        />
-      )}
-      <div className={classes.content}>
-        <ValidationResultsTable />
-      </div>
-    </FormStation>
-  );
+  return <PlaylistPublishingForm playlistId={playlistId} />;
 };
diff --git a/services/channel/workflows/src/stations/Channels/PlaylistPublishing/PlaylistPublishingForm.tsx b/services/channel/workflows/src/stations/Channels/PlaylistPublishing/PlaylistPublishingForm.tsx
@@ -0,0 +1,58 @@
+import { FormStation, MessageBar } from '@axinom/mosaic-ui';
+import React from 'react';
+import { client } from '../../../apolloClient';
+import {
+  PublishValidationStatus,
+  useValidatePlaylistQuery,
+} from '../../../generated/graphql';
+import { ValidationResultsTable } from '../../../util/Publishing/ValidationResultsTable';
+import { useActions } from './PlaylistPublishing.actions';
+import classes from './PlaylistPublishing.module.scss';
+import { FormData } from './PlaylistPublishing.types';
+
+export interface PlaylistPublishingFormProps {
+  playlistId: string;
+}
+
+export const PlaylistPublishingForm: React.FC<PlaylistPublishingFormProps> = ({
+  playlistId,
+}) => {
+  const { loading, data, error } = useValidatePlaylistQuery({
+    client,
+    variables: { id: playlistId },
+    fetchPolicy: 'no-cache',
+  });
+
+  const { actions } = useActions(
+    playlistId,
+    data?.validatePlaylist?.validationStatus,
+    data?.validatePlaylist?.publishHash,
+  );
+
+  return (
+    <FormStation<FormData>
+      defaultTitle="Publishing"
+      initialData={{
+        loading,
+        data: data?.validatePlaylist,
+        error: error?.message,
+      }}
+      actions={actions}
+      saveData={() => {
+        // We don't need to save the data, since this station only displays the validation status.
+      }}
+      edgeToEdgeContent={true}
+    >
+      {data?.validatePlaylist?.validationStatus ===
+        PublishValidationStatus.Errors && (
+        <MessageBar
+          type="info"
+          title="Playlist cannot be published. Please check validation errors and fix related data accordingly."
+        />
+      )}
+      <div className={classes.content}>
+        <ValidationResultsTable />
+      </div>
+    </FormStation>
+  );
+};
diff --git a/services/channel/workflows/src/stations/Channels/PlaylistPublishing/PlaylistPublishingQuickEdit.tsx b/services/channel/workflows/src/stations/Channels/PlaylistPublishing/PlaylistPublishingQuickEdit.tsx
@@ -0,0 +1,11 @@
+import { QuickEditContext, QuickEditContextType } from '@axinom/mosaic-ui';
+import React, { useContext } from 'react';
+import { PlaylistsData } from '../PlaylistsExplorer/Playlists.types';
+import { PlaylistPublishingForm } from './PlaylistPublishingForm';
+
+export const PlaylistPublishingQuickEdit: React.FC = () => {
+  const { selectedItem } =
+    useContext<QuickEditContextType<PlaylistsData>>(QuickEditContext);
+
+  return <PlaylistPublishingForm playlistId={selectedItem.id} />;
+};
diff --git a/services/channel/workflows/src/stations/Channels/PlaylistsExplorer/Playlists.tsx b/services/channel/workflows/src/stations/Channels/PlaylistsExplorer/Playlists.tsx
@@ -23,6 +23,7 @@ import {
 } from '../../../generated/graphql';
 import { publicationStateMap } from '../../../util/Publishing/publicationStateMap';
 import { PlaylistDetailsQuickEdit } from '../PlaylistDetails/PlaylistDetailsQuickEdit';
+import { PlaylistPublishingQuickEdit } from '../PlaylistPublishing/PlaylistPublishingQuickEdit';
 import { ProgramManagementQuickEdit } from '../ProgramManagement/ProgramManagementQuickEdit';
 import { routes } from '../routes';
 import { filterOptions, transformFilters } from './Playlists.filters';
@@ -198,6 +199,15 @@ export const Playlists: React.FC = () => {
               playlistId: item.id,
             }),
         },
+        {
+          component: <PlaylistPublishingQuickEdit />,
+          label: 'Publishing Validation',
+          generateDetailsLink: (item) =>
+            routes.generate(routes.playlistPublishing, {
+              channelId,
+              playlistId: item.id,
+            }),
+        },
       ]}
     />
   );
diff --git a/services/media/workflows/src/Stations/Publishing/PublishingSnapshotDetails/PublishingSnapshotQuickEdit.tsx b/services/media/workflows/src/Stations/Publishing/PublishingSnapshotDetails/PublishingSnapshotQuickEdit.tsx
@@ -0,0 +1,17 @@
+import { QuickEditContext, QuickEditContextType } from '@axinom/mosaic-ui';
+import React, { useContext } from 'react';
+import { EntityType } from '../../../generated/graphql';
+import { SnapshotData } from '../PublishingSnapshotExplorer/PublishingSnapshotExplorer.types';
+import { PublishingSnapshotDetails } from './PublishingSnapshotDetails';
+
+export interface PublishingSnapshotQuickEditProps {
+  type: EntityType;
+}
+export const PublishingSnapshotQuickEdit: React.FC<
+  PublishingSnapshotQuickEditProps
+> = ({ type }) => {
+  const { selectedItem } =
+    useContext<QuickEditContextType<SnapshotData>>(QuickEditContext);
+
+  return <PublishingSnapshotDetails snapshotId={selectedItem.id} type={type} />;
+};
diff --git a/services/media/workflows/src/Stations/Publishing/PublishingSnapshotExplorer/PublishingSnapshotExplorer.tsx b/services/media/workflows/src/Stations/Publishing/PublishingSnapshotExplorer/PublishingSnapshotExplorer.tsx
@@ -22,6 +22,7 @@ import {
 } from '../../../generated/graphql';
 import { ValidationResultsRenderer } from '../../../Util/PublishingSnapshots/ValidationResultsRenderer/ValidationResultsRenderer';
 import { StringEnumRenderer } from '../../../Util/StringEnumRenderer/StringEnumRenderer';
+import { PublishingSnapshotQuickEdit } from '../PublishingSnapshotDetails/PublishingSnapshotQuickEdit';
 import { usePublishingSnapshotActions } from './PublishingSnapshotExplorer.actions';
 import { usePublishingSnapshotFilters } from './PublishingSnapshotExplorer.filter';
 import {
@@ -170,6 +171,12 @@ export const PublishingSnapshotExplorer: React.FC<
       dataProvider={dataProvider}
       defaultSortOrder={{ column: 'createdDate', direction: 'desc' }}
       inlineMenuActions={generateInlineMenuActions}
+      quickEditRegistrations={[
+        {
+          component: <PublishingSnapshotQuickEdit type={entityType} />,
+          label: 'Publishing Validation',
+        },
+      ]}
     />
   );
 };
diff --git a/services/media/workflows/src/Stations/Publishing/SnapshotRegistryExplorer/SnapshotRegistry.tsx b/services/media/workflows/src/Stations/Publishing/SnapshotRegistryExplorer/SnapshotRegistry.tsx
@@ -29,6 +29,7 @@ import { StringEnumRenderer } from '../../../Util/StringEnumRenderer/StringEnumR
 import { useSnapshotRegistryActions } from './SnapshotRegistry.actions';
 import { useSnapshotRegistryFilters } from './SnapshotRegistry.filters';
 import { SnapshotData } from './SnapshotRegistry.types';
+import { SnapshotRegistryQuickEdit } from './SnapshotRegistryQuickEdit';
 
 export const SnapshotRegistry: React.FC = () => {
   const { filterOptions, transformFilters } = useSnapshotRegistryFilters();
@@ -209,6 +210,12 @@ export const SnapshotRegistry: React.FC = () => {
       filterOptions={filterOptions}
       defaultSortOrder={{ column: 'updatedDate', direction: 'desc' }}
       inlineMenuActions={generateInlineMenuActions}
+      quickEditRegistrations={[
+        {
+          component: <SnapshotRegistryQuickEdit />,
+          label: 'Publishing Validation',
+        },
+      ]}
     />
   );
 };
diff --git a/services/media/workflows/src/Stations/Publishing/SnapshotRegistryExplorer/SnapshotRegistryQuickEdit.tsx b/services/media/workflows/src/Stations/Publishing/SnapshotRegistryExplorer/SnapshotRegistryQuickEdit.tsx
@@ -0,0 +1,16 @@
+import { QuickEditContext, QuickEditContextType } from '@axinom/mosaic-ui';
+import React, { useContext } from 'react';
+import { PublishingSnapshotDetails } from '../PublishingSnapshotDetails/PublishingSnapshotDetails';
+import { SnapshotData } from './SnapshotRegistry.types';
+
+export const SnapshotRegistryQuickEdit: React.FC = () => {
+  const { selectedItem } =
+    useContext<QuickEditContextType<SnapshotData>>(QuickEditContext);
+
+  return (
+    <PublishingSnapshotDetails
+      snapshotId={selectedItem.id}
+      type={selectedItem.entityType}
+    />
+  );
+};
