MC-1659: display section items per section (#1229)

Author: katerinachinnappan

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

@@ -51,6 +51,35 @@ describe('The CardActionButtonRow component', () => {
     userEvent.click(moveToBottomButton);
     expect(onMoveToBottom).toHaveBeenCalled();
 
+    //assert for reject button and onReject callback
+    const rejectButton = screen.getByRole('button', {
+      name: 'reject',
+    });
+    expect(rejectButton).toBeInTheDocument();
+    userEvent.click(rejectButton);
+    expect(onReject).toHaveBeenCalled();
+  });
+  it('should only render card actions that are passed', () => {
+    render(<CardActionButtonRow onEdit={onEdit} onReject={onReject} />);
+
+    // assert edit button is present and calls its callback
+    const editButton = screen.getByRole('button', { name: 'edit' });
+    expect(editButton).toBeInTheDocument();
+    userEvent.click(editButton);
+    expect(onEdit).toHaveBeenCalled();
+
+    // assert unscheduleButton button is NOT present
+    const unscheduleButton = screen.queryByLabelText('unschedule');
+    expect(unscheduleButton).not.toBeInTheDocument();
+
+    // assert re-schedule button is NOT present
+    const rescheduleButton = screen.queryByLabelText('re-schedule');
+    expect(rescheduleButton).not.toBeInTheDocument();
+
+    // assert move to bottom button is is NOT present
+    const moveToBottomButton = screen.queryByLabelText('move to bottom');
+    expect(moveToBottomButton).not.toBeInTheDocument();
+
     //assert for reject button and onReject callback
     const rejectButton = screen.getByRole('button', {
       name: 'reject',

src/_shared/components/CardActionButtonRow/CardActionButtonRow.tsx

@@ -12,12 +12,12 @@ interface CardActionButtonRowProps {
   /**
    * Callback for the "Unschedule" button
    */
-  onUnschedule: VoidFunction;
+  onUnschedule?: VoidFunction;
 
   /**
    * Callback for the "Reschedule" button
    */
-  onReschedule: VoidFunction;
+  onReschedule?: VoidFunction;
 
   /**
    * Callback for the "Edit" button
@@ -27,7 +27,7 @@ interface CardActionButtonRowProps {
   /**
    * Callback for the "Move to bottom" button
    */
-  onMoveToBottom: VoidFunction;
+  onMoveToBottom?: VoidFunction;
 
   /**
    * Callback for the "Reject" (trash) button
@@ -60,15 +60,17 @@ export const CardActionButtonRow: React.FC<CardActionButtonRowProps> = (
           </IconButton>
         </Tooltip>
 
-        <Tooltip title="Move to bottom" placement="bottom">
-          <IconButton
-            aria-label="move to bottom"
-            onClick={onMoveToBottom}
-            sx={{ color: curationPalette.jetBlack }}
-          >
-            <KeyboardDoubleArrowDownOutlinedIcon />
-          </IconButton>
-        </Tooltip>
+        {onMoveToBottom && (
+          <Tooltip title="Move to bottom" placement="bottom">
+            <IconButton
+              aria-label="move to bottom"
+              onClick={onMoveToBottom}
+              sx={{ color: curationPalette.jetBlack }}
+            >
+              <KeyboardDoubleArrowDownOutlinedIcon />
+            </IconButton>
+          </Tooltip>
+        )}
 
         <Tooltip title="Edit" placement="bottom">
           <IconButton
@@ -80,27 +82,31 @@ export const CardActionButtonRow: React.FC<CardActionButtonRowProps> = (
           </IconButton>
         </Tooltip>
 
-        <Tooltip title="Re-schedule" placement="bottom">
-          <IconButton
-            aria-label="re-schedule"
-            onClick={onReschedule}
-            sx={{ color: curationPalette.jetBlack }}
-          >
-            <ScheduleIcon />
-          </IconButton>
-        </Tooltip>
+        {onReschedule && (
+          <Tooltip title="Re-schedule" placement="bottom">
+            <IconButton
+              aria-label="re-schedule"
+              onClick={onReschedule}
+              sx={{ color: curationPalette.jetBlack }}
+            >
+              <ScheduleIcon />
+            </IconButton>
+          </Tooltip>
+        )}
       </Stack>
 
       <Stack direction="row" justifyContent="flex-start">
-        <Tooltip title="Unschedule" placement="bottom">
-          <IconButton
-            aria-label="unschedule"
-            onClick={onUnschedule}
-            sx={{ color: curationPalette.jetBlack }}
-          >
-            <EventBusyOutlinedIcon />
-          </IconButton>
-        </Tooltip>
+        {onUnschedule && (
+          <Tooltip title="Unschedule" placement="bottom">
+            <IconButton
+              aria-label="unschedule"
+              onClick={onUnschedule}
+              sx={{ color: curationPalette.jetBlack }}
+            >
+              <EventBusyOutlinedIcon />
+            </IconButton>
+          </Tooltip>
+        )}
       </Stack>
     </Stack>
   );

src/curated-corpus/components/ScheduledItemCardWrapper/ScheduledItemCardWrapper.tsx

@@ -6,7 +6,8 @@ import {
 } from '../../../api/generatedTypes';
 
 import { StyledScheduledItemCard } from '../../../_shared/styled';
-import { SuggestedScheduleItemListCard } from '../SuggestedScheduleItemListCard/SuggestedScheduleItemListCard';
+import { StoryItemListCard } from '../StoryItemListCard/StoryItemListCard';
+import { CardActionButtonRow } from '../../../_shared/components';
 
 interface ScheduledItemCardWrapperProps {
   /**
@@ -67,16 +68,20 @@ export const ScheduledItemCardWrapper: React.FC<
   return (
     <Grid item xs={12} sm={6} md={3}>
       <StyledScheduledItemCard variant="outlined">
-        <SuggestedScheduleItemListCard
+        <StoryItemListCard
           item={item.approvedItem}
+          cardActionButtonRow={
+            <CardActionButtonRow
+              onEdit={onEdit}
+              onUnschedule={onUnschedule}
+              onReschedule={onReschedule}
+              onMoveToBottom={onMoveToBottom}
+              onReject={onReject}
+            />
+          }
           isMlScheduled={item.source === ActivitySource.Ml}
           currentScheduledDate={currentScheduledDate}
           scheduledSurfaceGuid={scheduledSurfaceGuid}
-          onEdit={onEdit}
-          onUnschedule={onUnschedule}
-          onReschedule={onReschedule}
-          onMoveToBottom={onMoveToBottom}
-          onReject={onReject}
         />
       </StyledScheduledItemCard>
     </Grid>

src/curated-corpus/components/SectionDetails/SectionDetails.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SectionDetails } from './SectionDetails';
+import {
+  ActivitySource,
+  ApprovedCorpusItem,
+  Section,
+} from '../../../api/generatedTypes';
+import { getTestApprovedItem } from '../../helpers/approvedItem';
+
+describe('The SectionDetails component', () => {
+  const item: ApprovedCorpusItem = getTestApprovedItem();
+  const mockSections: Section[] = [
+    {
+      externalId: '1',
+      title: 'Section 1',
+      active: true,
+      sectionItems: [
+        {
+          externalId: 'item-1',
+          approvedItem: item,
+          createdAt: Date.now(),
+          updatedAt: Date.now(),
+        },
+      ],
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      createSource: ActivitySource.Ml,
+      scheduledSurfaceGuid: 'NEW_TAB_EN_US',
+    },
+    {
+      externalId: '2',
+      title: 'Section 2',
+      active: false,
+      sectionItems: [
+        {
+          externalId: 'item-2',
+          approvedItem: item,
+          createdAt: Date.now(),
+          updatedAt: Date.now(),
+        },
+      ],
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      createSource: ActivitySource.Ml,
+      scheduledSurfaceGuid: 'NEW_TAB_EN_US',
+    },
+  ];
+
+  it('should render all sections when currentSection is "all"', () => {
+    render(
+      <SectionDetails
+        sections={mockSections}
+        currentSection="all"
+        currentScheduledSurfaceGuid="NEW_TAB_EN_US"
+      />,
+    );
+
+    expect(screen.getByText('Section 1')).toBeInTheDocument();
+    expect(screen.getByText('Section 2')).toBeInTheDocument();
+  });
+
+  it('should render only the selected section', () => {
+    render(
+      <SectionDetails
+        sections={mockSections}
+        currentSection="Section 1"
+        currentScheduledSurfaceGuid="NEW_TAB_EN_US"
+      />,
+    );
+
+    expect(screen.getByText('Section 1')).toBeInTheDocument();
+    expect(screen.queryByText('Section 2')).not.toBeInTheDocument();
+  });
+
+  it('should not render sections when there are no matching sections', () => {
+    render(
+      <SectionDetails
+        sections={mockSections}
+        currentSection="section-does-not-exist"
+        currentScheduledSurfaceGuid="NEW_TAB_EN_US"
+      />,
+    );
+
+    expect(screen.queryByText('Section 1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Section 2')).not.toBeInTheDocument();
+  });
+});

src/curated-corpus/components/SectionDetails/SectionDetails.tsx

@@ -0,0 +1,69 @@
+import React, { ReactElement } from 'react';
+import { Section, SectionItem } from '../../../api/generatedTypes';
+import { Box, Grid } from '@mui/material';
+import { SectionItemCardWrapper } from '../SectionItemCardWrapper/SectionItemCardWrapper';
+
+interface SectionDetailsProps {
+  /**
+   * All sections for a selected scheduled surface
+   */
+  sections: Section[];
+  /**
+   * The current section selected by user
+   */
+  currentSection: string;
+  /**
+   * The current surface selected by user
+   */
+  currentScheduledSurfaceGuid: string;
+}
+export const SectionDetails: React.FC<SectionDetailsProps> = (
+  props,
+): ReactElement => {
+  const { sections, currentSection, currentScheduledSurfaceGuid } = props;
+  return (
+    <>
+      {sections &&
+        sections
+          .filter(
+            (section) =>
+              currentSection === 'all' || section.title === currentSection,
+          )
+          .map((section: Section) => (
+            <>
+              <Box mt={9} mb={3}>
+                <h2>{section.title}</h2>
+                <p>{section.active}</p>
+              </Box>
+              <Grid
+                container
+                alignItems="stretch"
+                spacing={3}
+                justifyContent="flex-start"
+                key={section.externalId}
+              >
+                <Grid item xs={12}>
+                  <Grid container spacing={2}>
+                    {section.sectionItems.map((item: SectionItem) => {
+                      {
+                        return (
+                          <SectionItemCardWrapper
+                            key={item.externalId}
+                            item={item.approvedItem}
+                            // TODO: wire up edit action https://mozilla-hub.atlassian.net/browse/MC-1656
+                            onEdit={() => {}}
+                            // TODO: wire up reject/remove action https://mozilla-hub.atlassian.net/browse/MC-1656
+                            onReject={() => {}}
+                            scheduledSurfaceGuid={currentScheduledSurfaceGuid}
+                          />
+                        );
+                      }
+                    })}
+                  </Grid>
+                </Grid>
+              </Grid>
+            </>
+          ))}
+    </>
+  );
+};

src/curated-corpus/components/SectionItemCardWrapper/SectionItemCardWrapper.tsx

@@ -0,0 +1,53 @@
+import React, { ReactElement } from 'react';
+import { Grid } from '@mui/material';
+import {
+  ApprovedCorpusItem,
+  CorpusItemSource,
+} from '../../../api/generatedTypes';
+
+import { StyledScheduledItemCard } from '../../../_shared/styled';
+import { StoryItemListCard } from '../StoryItemListCard/StoryItemListCard';
+import { CardActionButtonRow } from '../../../_shared/components';
+
+interface SectionItemCardWrapperProps {
+  /**
+   * An approved corpus item
+   */
+  item: ApprovedCorpusItem;
+
+  /**
+   * Callback for the "Edit" button
+   */
+  onEdit: VoidFunction;
+
+  /**
+   * Callback for the "Reject" (trash) button
+   */
+  onReject: VoidFunction;
+
+  /**
+   * The surface the card is displayed on, e.g. EN_US
+   */
+  scheduledSurfaceGuid: string;
+}
+
+export const SectionItemCardWrapper: React.FC<SectionItemCardWrapperProps> = (
+  props,
+): ReactElement => {
+  const { item, onEdit, onReject, scheduledSurfaceGuid } = props;
+
+  return (
+    <Grid item xs={12} sm={6} md={3}>
+      <StyledScheduledItemCard variant="outlined">
+        <StoryItemListCard
+          item={item}
+          cardActionButtonRow={
+            <CardActionButtonRow onEdit={onEdit} onReject={onReject} />
+          }
+          isMlScheduled={item.source === CorpusItemSource.Ml}
+          scheduledSurfaceGuid={scheduledSurfaceGuid}
+        />
+      </StyledScheduledItemCard>
+    </Grid>
+  );
+};