Organization user affiliation error (canada-ca#2520)

* add isAdmin check to Users Tab

* add API support

Author: EveningStarlight

frontend/mocking/faked_schema.js

@@ -96,7 +96,10 @@ export const getTypeNames = () => gql`
     ): SharedUser
 
     # Query used to check if the user has an admin role.
-    isUserAdmin: Boolean
+    isUserAdmin(
+      # The organization that you want to check for admin permissions on.
+      orgId: ID!
+    ): Boolean
 
     # Query used to check if the user has a super admin role.
     isUserSuperAdmin: Boolean

frontend/src/OrganizationDetails.js

@@ -14,7 +14,7 @@ import {
   Tabs,
   useToast,
 } from '@chakra-ui/core'
-import { ORG_DETAILS_PAGE } from './graphql/queries'
+import { ORG_DETAILS_PAGE, IS_USER_ADMIN } from './graphql/queries'
 import { Link as RouteLink, useParams } from 'react-router-dom'
 import { OrganizationSummary } from './OrganizationSummary'
 import { ErrorBoundary } from 'react-error-boundary'
@@ -46,6 +46,29 @@ export default function OrganizationDetails() {
     },
   })
 
+  const orgId = data?.organization?.id
+  const { data: isAdminData } = useQuery(IS_USER_ADMIN, {
+    skip: !orgId,
+    variables: { orgId: orgId },
+
+    onError: (error) => {
+      const [_, message] = error.message.split(': ')
+      toast({
+        title: 'Error',
+        description: message,
+        status: 'error',
+        duration: 9000,
+        isClosable: true,
+        position: 'top-left',
+      })
+    },
+  })
+
+  let isAdmin = false
+  if (isAdminData?.isUserAdmin) {
+    isAdmin = isAdminData.isUserAdmin
+  }
+
   let orgName = ''
   if (data?.organization) {
     orgName = data.organization.name
@@ -85,9 +108,11 @@ export default function OrganizationDetails() {
           <Tab>
             <Trans>Domains</Trans>
           </Tab>
-          <Tab>
-            <Trans>Users</Trans>
-          </Tab>
+          {isAdmin && (
+            <Tab>
+              <Trans>Users</Trans>
+            </Tab>
+          )}
         </TabList>
 
         <TabPanels>
@@ -107,11 +132,13 @@ export default function OrganizationDetails() {
               <OrganizationDomains orgSlug={orgSlug} domainsPerPage={10} />
             </ErrorBoundary>
           </TabPanel>
-          <TabPanel>
-            <ErrorBoundary FallbackComponent={ErrorFallbackMessage}>
-              <OrganizationAffiliations orgSlug={orgSlug} usersPerPage={10} />
-            </ErrorBoundary>
-          </TabPanel>
+          {isAdmin && (
+            <TabPanel>
+              <ErrorBoundary FallbackComponent={ErrorFallbackMessage}>
+                <OrganizationAffiliations orgSlug={orgSlug} usersPerPage={10} />
+              </ErrorBoundary>
+            </TabPanel>
+          )}
         </TabPanels>
       </Tabs>
     </Layout>

frontend/src/__tests__/OrganizationDetails.test.js

@@ -4,7 +4,7 @@ import { MockedProvider } from '@apollo/client/testing'
 import { MemoryRouter, Route } from 'react-router-dom'
 import { theme, ThemeProvider } from '@chakra-ui/core'
 import { UserVarProvider } from '../UserState'
-import { ORG_DETAILS_PAGE } from '../graphql/queries'
+import { ORG_DETAILS_PAGE, IS_USER_ADMIN } from '../graphql/queries'
 import { I18nProvider } from '@lingui/react'
 import { setupI18n } from '@lingui/core'
 import OrganizationDetails from '../OrganizationDetails'
@@ -110,6 +110,17 @@ describe('<OrganizationDetails />', () => {
             },
           },
         },
+        {
+          request: {
+            query: IS_USER_ADMIN,
+            variables: { orgId: 'ODk3MDg5MzI2MA==' },
+          },
+          result: {
+            data: {
+              isUserAdmin: true,
+            },
+          },
+        },
       ]
 
       const { getByText } = render(
@@ -139,6 +150,7 @@ describe('<OrganizationDetails />', () => {
 
       await waitFor(() => {
         expect(getByText(name)).toBeInTheDocument()
+        expect(getByText('Users')).toBeInTheDocument()
       })
     })
   })

frontend/src/graphql/queries.js

@@ -1368,3 +1368,9 @@ export const IS_USER_SUPER_ADMIN = gql`
     isUserSuperAdmin
   }
 `
+
+export const IS_USER_ADMIN = gql`
+  query IsUserAdmin($orgId: ID!) {
+    isUserAdmin(orgId: $orgId)
+  }
+`