MC-1656: adding edit & remove section item actions (#1231)

* MC-1656: adding edit & remove section item actions

Author: katerinachinnappan

src/_shared/components/CardActionButtonRow/CardActionButtonRow.test.tsx

@@ -10,16 +10,18 @@ describe('The CardActionButtonRow component', () => {
   const onReschedule = jest.fn();
   const onUnschedule = jest.fn();
   const onReject = jest.fn();
+  const onRemove = jest.fn();
 
   //TODO update when reject button flow ready
-  it('should render all four card action buttons and call their callbacks', () => {
+  it('should render all five card action buttons and call their callbacks', () => {
     render(
       <CardActionButtonRow
         onEdit={onEdit}
         onUnschedule={onUnschedule}
         onReschedule={onReschedule}
         onMoveToBottom={onMoveToBottom}
         onReject={onReject}
+        onRemove={onRemove}
       />,
     );
 
@@ -58,6 +60,14 @@ describe('The CardActionButtonRow component', () => {
     expect(rejectButton).toBeInTheDocument();
     userEvent.click(rejectButton);
     expect(onReject).toHaveBeenCalled();
+
+    //assert for remove button and onRemove callback
+    const removeButton = screen.getByRole('button', {
+      name: 'remove',
+    });
+    expect(removeButton).toBeInTheDocument();
+    userEvent.click(rejectButton);
+    expect(onReject).toHaveBeenCalled();
   });
   it('should only render card actions that are passed', () => {
     render(<CardActionButtonRow onEdit={onEdit} onReject={onReject} />);
@@ -87,5 +97,9 @@ describe('The CardActionButtonRow component', () => {
     expect(rejectButton).toBeInTheDocument();
     userEvent.click(rejectButton);
     expect(onReject).toHaveBeenCalled();
+
+    // assert removeButton button is NOT present
+    const removeButton = screen.queryByLabelText('remove');
+    expect(removeButton).not.toBeInTheDocument();
   });
 });

src/_shared/components/CardActionButtonRow/CardActionButtonRow.tsx

@@ -6,6 +6,7 @@ import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import EventBusyOutlinedIcon from '@mui/icons-material/EventBusyOutlined';
 import KeyboardDoubleArrowDownOutlinedIcon from '@mui/icons-material/KeyboardDoubleArrowDownOutlined';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import ClearIcon from '@mui/icons-material/Clear';
 import { curationPalette } from '../../../theme';
 
 interface CardActionButtonRowProps {
@@ -32,14 +33,25 @@ interface CardActionButtonRowProps {
   /**
    * Callback for the "Reject" (trash) button
    */
-  onReject: VoidFunction;
+  onReject?: VoidFunction;
+
+  /**
+   * Callback for the "Remove" (X) button
+   */
+  onRemove?: VoidFunction;
 }
 
 export const CardActionButtonRow: React.FC<CardActionButtonRowProps> = (
   props,
 ): JSX.Element => {
-  const { onEdit, onUnschedule, onReschedule, onMoveToBottom, onReject } =
-    props;
+  const {
+    onEdit,
+    onUnschedule,
+    onReschedule,
+    onMoveToBottom,
+    onReject,
+    onRemove,
+  } = props;
 
   return (
     <Stack
@@ -50,15 +62,17 @@ export const CardActionButtonRow: React.FC<CardActionButtonRowProps> = (
       ml="0.5rem"
     >
       <Stack direction="row" justifyContent="flex-start">
-        <Tooltip title="Reject" placement="bottom">
-          <IconButton
-            aria-label="reject"
-            onClick={onReject}
-            sx={{ color: curationPalette.jetBlack }}
-          >
-            <DeleteOutlinedIcon />
-          </IconButton>
-        </Tooltip>
+        {onReject && (
+          <Tooltip title="Reject" placement="bottom">
+            <IconButton
+              aria-label="reject"
+              onClick={onReject}
+              sx={{ color: curationPalette.jetBlack }}
+            >
+              <DeleteOutlinedIcon />
+            </IconButton>
+          </Tooltip>
+        )}
 
         {onMoveToBottom && (
           <Tooltip title="Move to bottom" placement="bottom">
@@ -107,6 +121,17 @@ export const CardActionButtonRow: React.FC<CardActionButtonRowProps> = (
             </IconButton>
           </Tooltip>
         )}
+        {onRemove && (
+          <Tooltip title="Remove" placement="bottom">
+            <IconButton
+              aria-label="remove"
+              onClick={onRemove}
+              sx={{ color: curationPalette.jetBlack }}
+            >
+              <ClearIcon />
+            </IconButton>
+          </Tooltip>
+        )}
       </Stack>
     </Stack>
   );

src/api/generatedTypes.ts

@@ -53,6 +53,8 @@ export enum ActionScreen {
   Prospecting = 'PROSPECTING',
   /** This action took place from the schedule screen in the admin tool */
   Schedule = 'SCHEDULE',
+  /** This action took place from the sections screen in the admin tool */
+  Sections = 'SECTIONS',
 }
 
 /** The source of en entity */
@@ -1234,7 +1236,10 @@ export type Mutation = {
   moderateShareableList?: Maybe<ShareableListComplete>;
   /** Refresh an Item's article content. */
   refreshItemArticle: Item;
-  /** Rejects an Approved Item: deletes it from the corpus and creates a Rejected Item instead. */
+  /**
+   * Rejects an Approved Item: deletes it from the corpus and creates a Rejected Item instead.
+   * Also deletes all associated SectionItems.
+   */
   rejectApprovedCorpusItem: ApprovedCorpusItem;
   /**
    * Marks a prospect as 'curated' in the database, preventing it from being displayed for prospecting.
@@ -3512,6 +3517,56 @@ export type RemoveProspectMutation = {
   } | null;
 };
 
+export type RemoveSectionItemMutationVariables = Exact<{
+  externalId: Scalars['String'];
+}>;
+
+export type RemoveSectionItemMutation = {
+  __typename?: 'Mutation';
+  removeSectionItem: {
+    __typename?: 'SectionItem';
+    createdAt: number;
+    updatedAt: number;
+    externalId: string;
+    rank?: number | null;
+    approvedItem: {
+      __typename?: 'ApprovedCorpusItem';
+      externalId: string;
+      prospectId?: string | null;
+      title: string;
+      language: CorpusLanguage;
+      publisher: string;
+      datePublished?: any | null;
+      url: any;
+      hasTrustedDomain: boolean;
+      imageUrl: any;
+      excerpt: string;
+      status: CuratedStatus;
+      source: CorpusItemSource;
+      topic: string;
+      isCollection: boolean;
+      isTimeSensitive: boolean;
+      isSyndicated: boolean;
+      createdBy: string;
+      createdAt: number;
+      updatedBy?: string | null;
+      updatedAt: number;
+      authors: Array<{
+        __typename?: 'CorpusItemAuthor';
+        name: string;
+        sortOrder: number;
+      }>;
+      scheduledSurfaceHistory: Array<{
+        __typename?: 'ApprovedCorpusItemScheduledSurfaceHistory';
+        externalId: string;
+        createdBy: string;
+        scheduledDate: any;
+        scheduledSurfaceGuid: string;
+      }>;
+    };
+  };
+};
+
 export type RescheduleScheduledCorpusItemMutationVariables = Exact<{
   externalId: Scalars['ID'];
   scheduledDate: Scalars['Date'];
@@ -6267,6 +6322,57 @@ export type RemoveProspectMutationOptions = Apollo.BaseMutationOptions<
   RemoveProspectMutation,
   RemoveProspectMutationVariables
 >;
+export const RemoveSectionItemDocument = gql`
+  mutation RemoveSectionItem($externalId: String!) {
+    removeSectionItem(externalId: $externalId) {
+      ...SectionItemData
+    }
+  }
+  ${SectionItemDataFragmentDoc}
+`;
+export type RemoveSectionItemMutationFn = Apollo.MutationFunction<
+  RemoveSectionItemMutation,
+  RemoveSectionItemMutationVariables
+>;
+
+/**
+ * __useRemoveSectionItemMutation__
+ *
+ * To run a mutation, you first call `useRemoveSectionItemMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useRemoveSectionItemMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [removeSectionItemMutation, { data, loading, error }] = useRemoveSectionItemMutation({
+ *   variables: {
+ *      externalId: // value for 'externalId'
+ *   },
+ * });
+ */
+export function useRemoveSectionItemMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    RemoveSectionItemMutation,
+    RemoveSectionItemMutationVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useMutation<
+    RemoveSectionItemMutation,
+    RemoveSectionItemMutationVariables
+  >(RemoveSectionItemDocument, options);
+}
+export type RemoveSectionItemMutationHookResult = ReturnType<
+  typeof useRemoveSectionItemMutation
+>;
+export type RemoveSectionItemMutationResult =
+  Apollo.MutationResult<RemoveSectionItemMutation>;
+export type RemoveSectionItemMutationOptions = Apollo.BaseMutationOptions<
+  RemoveSectionItemMutation,
+  RemoveSectionItemMutationVariables
+>;
 export const RescheduleScheduledCorpusItemDocument = gql`
   mutation rescheduleScheduledCorpusItem(
     $externalId: ID!

src/api/mutations/removeSectionItem.ts

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+import { SectionItemData } from '../fragments/SectionItemData';
+
+export const removeSectionItem = gql`
+  mutation RemoveSectionItem($externalId: String!) {
+    removeSectionItem(externalId: $externalId) {
+      ...SectionItemData
+    }
+  }
+  ${SectionItemData}
+`;