TT-7017 Handle Flat projects

- Update PlanView to show flat projects
- Update PassageCard to include FlatTitle
- FlatTitle logic to render section titles based on cardInfo.
- Created a comprehensive guide for Cypress component testing in the APM Vite application, detailing setup patterns, Material-UI testing strategies, common test categories, and debugging tips.
- Added Cypress tests for the FlatTitle component, covering various scenarios including rendering based on section kind, handling empty titles, and special character support.
- Integrated FlatTitle component into PassageCard and updated tests to verify its rendering and behavior.
- Enhanced PlanView tests to ensure correct rendering of PassageCard for different kinds.
- Cleaned up unused ESLint comments and improved code structure for better readability.

Author: Greg Trihus

.github/instructions/cypress-testing.instructions.md

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import { ISheet, SectionD, IwsKind } from '../../model';
+import { findRecord } from '../../crud';
+import { useGlobal } from '../../context/useGlobal';
+import { Box, Typography } from '@mui/material';
+
+interface IFlatTitleProps {
+  cardInfo: ISheet;
+}
+export const FlatTitle = (props: IFlatTitleProps) => {
+  const { cardInfo } = props;
+  const [memory] = useGlobal('memory');
+
+  const sectionTitle = useMemo(() => {
+    if (cardInfo.kind === IwsKind.SectionPassage && cardInfo?.sectionId) {
+      const section = findRecord(memory, 'section', cardInfo.sectionId?.id) as
+        | SectionD
+        | undefined;
+      return section?.attributes.name || '';
+    }
+    return '';
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cardInfo]);
+
+  return cardInfo.kind === IwsKind.SectionPassage ? (
+    <Box
+      sx={{ display: 'flex', alignItems: 'center', width: '100%' }}
+      data-cy="flat-title-box"
+    >
+      <Typography
+        variant="body2"
+        color="grey"
+        sx={{ marginLeft: '0.5rem' }}
+        data-cy="flat-title-typography"
+      >
+        <sup>{` \u21B3 `}</sup>
+        {sectionTitle}
+      </Typography>
+    </Box>
+  ) : (
+    <></>
+  );
+};

src/renderer/src/components/Sheet/FlatTitle.cy.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import { PassageCard } from './PassageCard';
-import { ISheet, PassageTypeEnum, IwsKind, SheetLevel } from '../../model';
-import { RecordIdentity } from '@orbit/records';
+import {
+  ISheet,
+  PassageTypeEnum,
+  IwsKind,
+  SheetLevel,
+  SectionD,
+} from '../../model';
+import { RecordIdentity, RecordRelationship } from '@orbit/records';
 import { GlobalProvider } from '../../context/GlobalContext';
 import { Provider } from 'react-redux';
 import { legacy_createStore as createStore, combineReducers } from 'redux';
@@ -124,13 +130,57 @@ describe('PassageCard', () => {
       onPlayStatus?: () => void;
       isPlaying: boolean;
       isPersonal?: boolean;
-    }
+    },
+    mockSections: SectionD[] = []
   ) => {
     const initialState = createInitialState();
+
+    // Mock memory with sections for FlatTitle component
+    const mockMemoryWithSections =
+      mockSections.length > 0
+        ? ({
+            ...mockMemory,
+            cache: {
+              ...mockMemory.cache,
+              query: (queryBuilder: any) => {
+                // Handle function-style queries (like findRecord uses)
+                if (typeof queryBuilder === 'function') {
+                  const mockQueryBuilderInstance = {
+                    findRecord: (identity: { type: string; id: string }) => {
+                      return mockSections.find(
+                        (section) =>
+                          identity.type === 'section' &&
+                          section.id === identity.id
+                      );
+                    },
+                    findRecords: (type: string) => {
+                      if (type === 'section') return mockSections;
+                      return [];
+                    },
+                  };
+                  return queryBuilder(mockQueryBuilderInstance);
+                }
+                return mockSections;
+              },
+            },
+          } as unknown as Memory)
+        : mockMemory;
+
+    const finalInitialState =
+      mockSections.length > 0
+        ? {
+            ...initialState,
+            memory: mockMemoryWithSections,
+            coordinator: {
+              getSource: () => mockMemoryWithSections,
+            } as unknown as Coordinator,
+          }
+        : initialState;
+
     cy.mount(
       <Provider store={mockStore}>
-        <GlobalProvider init={initialState}>
-          <DataProvider dataStore={mockMemory}>
+        <GlobalProvider init={finalInitialState}>
+          <DataProvider dataStore={mockMemoryWithSections}>
             <PassageCard
               cardInfo={cardInfo}
               getBookName={props.getBookName}
@@ -190,6 +240,39 @@ describe('PassageCard', () => {
     type,
   });
 
+  const createMockSection = (overrides: Partial<SectionD> = {}): SectionD => {
+    return {
+      id: 'section-1',
+      type: 'section',
+      attributes: {
+        sequencenum: 1,
+        name: 'Test Section Title',
+        graphics: '',
+        published: false,
+        publishTo: '',
+        level: 1,
+        state: '',
+        dateCreated: '2024-01-01T00:00:00Z',
+        dateUpdated: '2024-01-01T00:00:00Z',
+        lastModifiedBy: 1,
+      },
+      keys: {
+        remoteId: '1',
+      },
+      relationships: {
+        plan: {} as RecordRelationship,
+        passages: {} as RecordRelationship,
+        transcriber: {} as RecordRelationship,
+        editor: {} as RecordRelationship,
+        group: {} as RecordRelationship,
+        titleMediafile: {} as RecordRelationship,
+        lastModifiedByUser: {} as RecordRelationship,
+        organizationScheme: {} as RecordRelationship,
+      },
+      ...overrides,
+    };
+  };
+
   it('should render card with basic information', () => {
     const cardInfo = createMockSheet();
     mountPassageCard(cardInfo, {
@@ -1380,4 +1463,67 @@ describe('PassageCard', () => {
       cy.get('div[class*="MuiAvatar-root"]').should('not.exist');
     });
   });
+
+  describe('FlatTitle Integration', () => {
+    it('should render FlatTitle component for SectionPassage kind', () => {
+      const mockSection = createMockSection({
+        id: 'section-1',
+        attributes: {
+          sequencenum: 1,
+          name: 'Test Section for FlatTitle',
+          graphics: '',
+          published: false,
+          publishTo: '',
+          level: 1,
+          state: '',
+          dateCreated: '2024-01-01T00:00:00Z',
+          dateUpdated: '2024-01-01T00:00:00Z',
+          lastModifiedBy: 1,
+        },
+      });
+
+      const cardInfo = createMockSheet({
+        kind: IwsKind.SectionPassage,
+        sectionId: {
+          id: 'section-1',
+          type: 'section',
+        },
+      });
+
+      mountPassageCard(
+        cardInfo,
+        {
+          getBookName: mockGetBookName,
+          handleViewStep: mockHandleViewStep,
+          isPlaying: false,
+        },
+        [mockSection]
+      );
+
+      // Should render FlatTitle component with section title
+      cy.get('[data-cy="flat-title-box"]').should('be.visible');
+      cy.get('[data-cy="flat-title-typography"]')
+        .should('be.visible')
+        .and('contain.text', 'Test Section for FlatTitle');
+
+      // Should contain the arrow symbol
+      cy.get('sup').should('contain.text', ' ↳ ');
+    });
+
+    it('should not render FlatTitle component for non-SectionPassage kind', () => {
+      const cardInfo = createMockSheet({
+        kind: IwsKind.Passage, // Regular passage, not section passage
+      });
+
+      mountPassageCard(cardInfo, {
+        getBookName: mockGetBookName,
+        handleViewStep: mockHandleViewStep,
+        isPlaying: false,
+      });
+
+      // Should not render FlatTitle component
+      cy.get('[data-cy="flat-title-box"]').should('not.exist');
+      cy.get('[data-cy="flat-title-typography"]').should('not.exist');
+    });
+  });
 });

src/renderer/src/components/Sheet/FlatTitle.tsx

@@ -17,6 +17,7 @@ import { PlayButton } from '../PlayButton';
 import { cardsSelector } from '../../selector';
 import { shallowEqual, useSelector } from 'react-redux';
 import { stringAvatar } from '../../utils';
+import { FlatTitle } from './FlatTitle';
 
 interface IProps {
   cardInfo: ISheet;
@@ -39,11 +40,8 @@ export function PassageCard(props: IProps) {
     isPersonal,
   } = props;
   const t: ICardsStrings = useSelector(cardsSelector, shallowEqual);
-
   const fullBookName = getBookName(cardInfo.book);
-
   const noteTitle = cardInfo?.sharedResource?.attributes.title;
-
   const ref = noteTitle || cardInfo.passage?.attributes.reference;
 
   const comment =
@@ -127,6 +125,7 @@ export function PassageCard(props: IProps) {
             <></>
           )}
         </Box>
+        <FlatTitle cardInfo={cardInfo} />
         {psgType !== PassageTypeEnum.CHAPTERNUMBER ? (
           <>
             <Typography variant="body2" color="grey">

src/renderer/src/components/Sheet/PassageCard.cy.tsx

@@ -703,7 +703,6 @@ export function PlanSheet(props: IProps) {
     onFilterChange({ ...filterState, disabled: true }, false);
   };
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   const filtered = useMemo(() => {
     return (
       !filterState.disabled &&

src/renderer/src/components/Sheet/PassageCard.tsx

@@ -625,7 +625,7 @@ describe('PlanView', () => {
     cy.get('div[class*="MuiCard-root"]').should('not.exist');
   });
 
-  it('should return null for rows with kind other than 0 or 1', () => {
+  it('should return null for rows with kind other than IwsKind.Section, IwsKind.Passage, or IwsKind.SectionPassage', () => {
     const invalidRow = {
       ...createMockSection(),
       kind: 99 as any, // Invalid kind
@@ -676,4 +676,44 @@ describe('PlanView', () => {
       .eq(1)
       .should('have.css', 'margin-left');
   });
+
+  it('should render PassageCard for IwsKind.Passage', () => {
+    const passageRow = createMockPassage({
+      kind: IwsKind.Passage,
+    });
+    const rowInfo: ISheet[] = [passageRow];
+    const bookMap = createMockBookNameMap();
+
+    mountPlanView({
+      rowInfo,
+      bookMap,
+      publishingView: false,
+      handleOpenPublishDialog: mockHandleOpenPublishDialog,
+      handleGraphic: mockHandleGraphic,
+    });
+
+    cy.wait(100);
+    // Should render PassageCard for IwsKind.Passage
+    cy.get('div[class*="MuiCard-root"]').should('be.visible');
+  });
+
+  it('should render PassageCard for IwsKind.SectionPassage', () => {
+    const sectionPassageRow = createMockPassage({
+      kind: IwsKind.SectionPassage,
+    });
+    const rowInfo: ISheet[] = [sectionPassageRow];
+    const bookMap = createMockBookNameMap();
+
+    mountPlanView({
+      rowInfo,
+      bookMap,
+      publishingView: false,
+      handleOpenPublishDialog: mockHandleOpenPublishDialog,
+      handleGraphic: mockHandleGraphic,
+    });
+
+    cy.wait(100);
+    // Should render PassageCard for IwsKind.SectionPassage
+    cy.get('div[class*="MuiCard-root"]').should('be.visible');
+  });
 });

src/renderer/src/components/Sheet/PlanSheet.tsx

@@ -7,6 +7,7 @@ import {
   PassageTypeEnum,
   IPlanSheetStrings,
   OrganizationD,
+  IwsKind,
 } from '../../model';
 import { Button, Box, Typography, Grid } from '@mui/material';
 import PublishOnIcon from '@mui/icons-material/PublicOutlined';
@@ -164,7 +165,10 @@ export function PlanView(props: IProps) {
               ) : null}
             </Box>
           );
-        } else if (row.kind === 1) {
+        } else if (
+          row.kind === IwsKind.Passage ||
+          row.kind === IwsKind.SectionPassage
+        ) {
           const mediaId = row.mediaId?.id;
           return (
             <PassageCard

src/renderer/src/components/Sheet/PlanView.cy.tsx

@@ -343,10 +343,10 @@ export function ScriptureTable(props: IProps) {
         filterState.maxStep !== '' ||
         filterState.hideDone ||
         filterState.minSection > minSection ||
-        (filterState.maxSection > -1 && filterState.maxSection < maximumSection) ||
+        (filterState.maxSection > -1 &&
+          filterState.maxSection < maximumSection) ||
         filterState.assignedToMe)
     );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filterState, minSection, maximumSection]);
 
   const publishingTitle = (passageType: PassageTypeEnum) =>
@@ -1277,7 +1277,6 @@ export function ScriptureTable(props: IProps) {
     return () => {
       window.removeEventListener('resize', handleResize);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); //do this once to get the default;
 
   useEffect(() => {

src/renderer/src/components/Sheet/PlanView.tsx

@@ -219,7 +219,6 @@ export const usePlanSheetFill = ({
   const ActivateCell: ICellEditor = (props: any) => {
     doSetActive();
     props.onRevert();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     return <></>;
   };