Hide remove domain button on verified orgs for non-super-admins (unless NXDOMAIN) (canada-ca#6008)

Author: FestiveKyle

frontend/src/admin/AdminDomains.js

@@ -27,7 +27,7 @@ import {
 import { AddIcon, EditIcon, MinusIcon, PlusSquareIcon } from '@chakra-ui/icons'
 import { useMutation } from '@apollo/client'
 import { useLingui } from '@lingui/react'
-import { number, string } from 'prop-types'
+import { bool, number, string } from 'prop-types'
 
 import { AdminDomainModal } from './AdminDomainModal'
 import { AdminDomainCard } from './AdminDomainCard'
@@ -48,7 +48,7 @@ import { InfoBox, InfoButton, InfoPanel } from '../components/InfoPanel'
 import { FilterList } from '../domains/FilterList'
 import { domainSearchTip } from '../domains/DomainsPage'
 
-export function AdminDomains({ orgSlug, orgId }) {
+export function AdminDomains({ orgSlug, orgId, verified, permission }) {
   const toast = useToast()
   const { i18n } = useLingui()
 
@@ -326,17 +326,19 @@ export function AdminDomains({ orgSlug, orgId }) {
             {index === 0 && <Divider borderBottomColor="gray.400" />}
             <Flex p="1" align="center" rounded="md" mb="1">
               <Stack direction="row" flexGrow="0" mr="2">
-                <IconButton
-                  data-testid={`remove-${index}`}
-                  onClick={() => {
-                    setSelectedRemoveProps({ domain, domainId, rcode })
-                    removeOnOpen()
-                  }}
-                  variant="danger"
-                  px="2"
-                  icon={<MinusIcon />}
-                  aria-label={'Remove ' + domain}
-                />
+                {(!verified || permission === 'SUPER_ADMIN' || rcode === 'NXDOMAIN') && (
+                  <IconButton
+                    data-testid={`remove-${index}`}
+                    onClick={() => {
+                      setSelectedRemoveProps({ domain, domainId, rcode })
+                      removeOnOpen()
+                    }}
+                    variant="danger"
+                    px="2"
+                    icon={<MinusIcon />}
+                    aria-label={'Remove ' + domain}
+                  />
+                )}
                 <IconButton
                   data-testid={`edit-${index}`}
                   variant="primary"
@@ -594,6 +596,7 @@ export function AdminDomains({ orgSlug, orgId }) {
 AdminDomains.propTypes = {
   orgSlug: string.isRequired,
   orgId: string.isRequired,
+  verified: bool,
   domainsPerPage: number,
   permission: string,
 }

frontend/src/admin/AdminPage.js

@@ -69,6 +69,7 @@ export default function AdminPage() {
       setOrgDetails({
         slug: data?.findMyOrganizations?.edges[0]?.node?.slug,
         id: data?.findMyOrganizations?.edges[0]?.node?.id,
+        verified: data?.findMyOrganizations?.edges[0]?.node?.verified,
       })
       setSelectedOrg(data?.findMyOrganizations?.edges[0]?.node?.name || 'none')
     }
@@ -95,8 +96,8 @@ export default function AdminPage() {
   } else {
     options = []
     data.findMyOrganizations?.edges.forEach((edge) => {
-      const { slug, name, id } = edge.node
-      options.push({ label: name, value: { slug: slug, id: id } })
+      const { slug, name, id, verified } = edge.node
+      options.push({ label: name, value: { slug: slug, id: id, verified: verified } })
     })
     dropdown = (
       <Dropdown
@@ -177,6 +178,7 @@ export default function AdminPage() {
             activeMenu={activeMenu}
             orgSlug={orgDetails.slug}
             orgId={orgDetails.id}
+            verified={orgDetails.verified}
             permission={data?.isUserSuperAdmin ? 'SUPER_ADMIN' : 'ADMIN'}
             mr="4"
           />

frontend/src/admin/AdminPanel.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Stack, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react'
 import { Trans } from '@lingui/macro'
-import { string } from 'prop-types'
+import { bool, string } from 'prop-types'
 import { ErrorBoundary } from 'react-error-boundary'
 
 import { AdminDomains } from './AdminDomains'
@@ -11,7 +11,7 @@ import { ErrorFallbackMessage } from '../components/ErrorFallbackMessage'
 import { AuditLogTable } from './AuditLogTable'
 import { TourComponent } from '../userOnboarding/components/TourComponent'
 
-export function AdminPanel({ activeMenu, orgSlug, permission, orgId }) {
+export function AdminPanel({ activeMenu, orgSlug, permission, orgId, verified }) {
   return (
     <Stack spacing={10}>
       <TourComponent />
@@ -31,7 +31,7 @@ export function AdminPanel({ activeMenu, orgSlug, permission, orgId }) {
         <TabPanels>
           <TabPanel>
             <ErrorBoundary FallbackComponent={ErrorFallbackMessage}>
-              <AdminDomains orgSlug={orgSlug} orgId={orgId} />
+              <AdminDomains orgSlug={orgSlug} orgId={orgId} verified={verified} permission={permission} />
             </ErrorBoundary>
           </TabPanel>
           <TabPanel>
@@ -61,4 +61,5 @@ AdminPanel.propTypes = {
   orgSlug: string.isRequired,
   permission: string.isRequired,
   orgId: string,
+  verified: bool,
 }

frontend/src/graphql/queries.js

@@ -1145,6 +1145,7 @@ export const ADMIN_PAGE = gql`
           acronym
           slug
           name
+          verified
         }
       }
     }