TT-6891b conditionally display Add New Project... button based on admin status (#176)

- Updated ProjectsScreenInner to include isAdmin check for showing the `Add New Project...` button.
- Refactored mountProjectsScreen helper to support mock TeamContext for testing.
- Added tests to verify button visibility based on admin status.

These changes improve user experience by ensuring that only authorized users can add new projects.

Co-authored-by: Greg Trihus <[email protected]>

Author: gtryus

src/renderer/src/context/TeamContext.tsx

@@ -286,6 +286,7 @@ const TeamProvider = (props: IProps) => {
   };
 
   const isAdmin = (org: OrganizationD) => {
+    if (isPersonalTeam(org.id, organizations)) return true;
     const role = getMyOrgRole(org.id);
     return role === RoleNames.Admin;
   };

src/renderer/src/routes/ProjectsScreen.cy.tsx

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 import React from 'react';
-import ProjectsScreen from './ProjectsScreen';
+import ProjectsScreen, { ProjectsScreenInner } from './ProjectsScreen';
 import { GlobalProvider } from '../context/GlobalContext';
 import { Provider } from 'react-redux';
 import {
@@ -19,6 +19,7 @@ import localizationReducer from '../store/localization/reducers';
 import DataProvider from '../hoc/DataProvider';
 import { UnsavedProvider } from '../context/UnsavedContext';
 import { TokenContext } from '../context/TokenProvider';
+import { TeamContext } from '../context/TeamContext';
 
 // Create a mock liveQuery object with subscribe and query methods
 const createMockLiveQuery = () => ({
@@ -147,10 +148,22 @@ describe('ProjectsScreen', () => {
   // Helper function to mount ProjectsScreen with all required providers
   const mountProjectsScreen = (
     initialState: ReturnType<typeof createInitialState>,
-    initialEntries: string[] = ['/projects']
+    initialEntries: string[] = ['/projects'],
+    options?: {
+      isAdmin?: (team: any) => boolean;
+      personalTeam?: string;
+      teams?: any[];
+    }
   ) => {
     const memory = createMockMemory();
 
+    // Default options
+    const {
+      isAdmin = () => false,
+      personalTeam = 'personal-team-id',
+      teams = [],
+    } = options || {};
+
     // Create mock TokenContext value
     const mockTokenContextValue = {
       state: {
@@ -166,19 +179,80 @@ describe('ProjectsScreen', () => {
       setState: cy.stub(),
     };
 
+    // Create mock TeamContext value
+    const mockTeamContextValue = {
+      state: {
+        lang: 'en',
+        ts: {} as any,
+        resetOrbitError: cy.stub(),
+        bookSuggestions: [],
+        bookMap: {} as any,
+        allBookData: [],
+        planTypes: [],
+        isDeleting: false,
+        teams: teams,
+        personalTeam: personalTeam,
+        personalProjects: [],
+        teamProjects: () => [],
+        teamMembers: () => 0,
+        loadProject: () => {},
+        setProjectParams: () => ['', ''],
+        projectType: () => '',
+        projectSections: () => '',
+        projectDescription: () => '',
+        projectLanguage: () => '',
+        projectCreate: async () => '',
+        projectUpdate: () => {},
+        projectDelete: () => {},
+        teamCreate: () => {},
+        teamUpdate: () => {},
+        teamDelete: async () => {},
+        isAdmin: isAdmin,
+        isProjectAdmin: () => false,
+        flatAdd: async () => {},
+        cardStrings: mockCardStrings,
+        sharedStrings: {} as any,
+        vProjectStrings: {} as any,
+        pickerStrings: {} as any,
+        projButtonStrings: {} as any,
+        newProjectStrings: {} as any,
+        importOpen: false,
+        setImportOpen: () => {},
+        importProject: undefined,
+        doImport: () => {},
+        resetProjectPermissions: async () => {},
+        generalBook: () => '000',
+        updateGeneralBooks: async () => {},
+        checkScriptureBooks: () => {},
+        tab: 0,
+        setTab: () => {},
+      },
+      setState: cy.stub(),
+    };
+
     const stateWithMemory = {
       ...initialState,
       memory,
     };
 
+    // If options are provided, use ProjectsScreenInner with mock TeamContext
+    // Otherwise, use ProjectsScreen with real TeamProvider
+    const screenElement = options ? (
+      <TeamContext.Provider value={mockTeamContextValue as any}>
+        <ProjectsScreenInner />
+      </TeamContext.Provider>
+    ) : (
+      <ProjectsScreen />
+    );
+
     cy.mount(
       <MemoryRouter initialEntries={initialEntries}>
         <Provider store={mockStore}>
           <GlobalProvider init={stateWithMemory}>
             <DataProvider dataStore={memory}>
               <UnsavedProvider>
                 <TokenContext.Provider value={mockTokenContextValue as any}>
-                  <ProjectsScreen />
+                  {screenElement}
                 </TokenContext.Provider>
               </UnsavedProvider>
             </DataProvider>
@@ -203,22 +277,73 @@ describe('ProjectsScreen', () => {
     cy.contains('No projects yet.').should('be.visible');
   });
 
-  it('should show "Add New Project..." button', () => {
-    mountProjectsScreen(createInitialState());
+  it('should show "Add New Project..." button when isAdmin returns true', () => {
+    const teamId = 'test-team-id';
+    const mockTeam = {
+      id: teamId,
+      type: 'organization',
+      attributes: { name: 'Test Team' },
+    };
+
+    cy.window().then((win) => {
+      win.localStorage.setItem(localUserKey(LocalKey.team), teamId);
+    });
+
+    mountProjectsScreen(createInitialState(), ['/projects'], {
+      isAdmin: (team: any) => team?.id === teamId,
+      personalTeam: 'personal-team-id',
+      teams: [mockTeam],
+    });
 
     cy.get('#ProjectActAdd').should('be.visible');
     cy.contains('Add New Project...').should('be.visible');
   });
 
   it('should open ProjectDialog when "Add New Project..." button is clicked', () => {
-    mountProjectsScreen(createInitialState());
+    const teamId = 'test-team-id';
+    const mockTeam = {
+      id: teamId,
+      type: 'organization',
+      attributes: { name: 'Test Team' },
+    };
+
+    cy.window().then((win) => {
+      win.localStorage.setItem(localUserKey(LocalKey.team), teamId);
+    });
+
+    mountProjectsScreen(createInitialState(), ['/projects'], {
+      isAdmin: (team: any) => team?.id === teamId,
+      personalTeam: 'personal-team-id',
+      teams: [mockTeam],
+    });
 
     cy.get('#ProjectActAdd').click();
 
     // ProjectDialog should open (check for dialog role or form elements)
     cy.get('[role="dialog"]').should('be.visible');
   });
 
+  it('should not show "Add New Project..." button when isAdmin returns false', () => {
+    const teamId = 'test-team-id';
+    const mockTeam = {
+      id: teamId,
+      type: 'organization',
+      attributes: { name: 'Test Team' },
+    };
+
+    cy.window().then((win) => {
+      win.localStorage.setItem(localUserKey(LocalKey.team), teamId);
+    });
+
+    mountProjectsScreen(createInitialState(), ['/projects'], {
+      isAdmin: () => false, // Not admin
+      personalTeam: 'personal-team-id',
+      teams: [mockTeam],
+    });
+
+    cy.get('#ProjectActAdd').should('not.exist');
+  });
+
   it('should show "Switch Teams" button', () => {
     mountProjectsScreen(createInitialState());
 

src/renderer/src/routes/ProjectsScreen.tsx

@@ -37,12 +37,18 @@ const ProjectsBox = styled(Box)<ProjectBoxProps>(({ theme, isMobile }) => ({
   }),
 }));
 
-const ProjectsScreenInner: React.FC = () => {
+export const ProjectsScreenInner: React.FC = () => {
   const navigate = useMyNavigate();
   const teamId = localStorage.getItem(localUserKey(LocalKey.team));
   const ctx = React.useContext(TeamContext);
-  const { teamProjects, personalProjects, personalTeam, cardStrings, teams } =
-    ctx.state;
+  const {
+    teamProjects,
+    personalProjects,
+    personalTeam,
+    cardStrings,
+    teams,
+    isAdmin,
+  } = ctx.state;
   const t = cardStrings;
   const { pathname } = useLocation();
   const [plan] = useGlobal('plan');
@@ -181,6 +187,10 @@ const ProjectsScreenInner: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [plan, pathname, home]);
 
+  const showAddButton = React.useMemo(() => {
+    return thisTeam && isAdmin(thisTeam);
+  }, [thisTeam, isAdmin]);
+
   return (
     <Box sx={{ width: '100%' }}>
       <AppHead />
@@ -227,18 +237,20 @@ const ProjectsScreenInner: React.FC = () => {
           spacing={2}
           sx={{ pointerEvents: 'auto', alignItems: 'center' }}
         >
-          <Button
-            id="ProjectActAdd"
-            data-testid="add-project-button"
-            variant="outlined"
-            onClick={handleAddProject}
-            sx={(theme) => ({
-              minWidth: 160,
-              bgcolor: theme.palette.common.white,
-            })}
-          >
-            {t.addNewProject || 'Add New Project...'}
-          </Button>
+          {showAddButton && (
+            <Button
+              id="ProjectActAdd"
+              data-testid="add-project-button"
+              variant="outlined"
+              onClick={handleAddProject}
+              sx={(theme) => ({
+                minWidth: 160,
+                bgcolor: theme.palette.common.white,
+              })}
+            >
+              {t.addNewProject || 'Add New Project...'}
+            </Button>
+          )}
           <Button
             id="ProjectActSwitch"
             variant="outlined"