fix-missed-ad-group-message

src/components/component/unknown-ad-groups-alert.tsx

@@ -0,0 +1,22 @@
+import { Alert } from '../alert';
+import { List } from '@equinor/eds-core-react';
+
+interface Props {
+  unknownADGroups?: Array<string>;
+}
+export function UnknownADGroupsAlert({ unknownADGroups }: Props) {
+  return (
+    <>
+      {unknownADGroups?.length > 0 && (
+        <Alert type="danger">
+          Unknown or deleted AD group(s)
+          <List className="o-indent-list">
+            {unknownADGroups.map((adGroup) => (
+              <List.Item key={adGroup}>{adGroup}</List.Item>
+            ))}
+          </List>
+        </Alert>
+      )}
+    </>
+  );
+}

src/components/graph/adGroups.tsx

@@ -1,23 +1,26 @@
 import { Typography } from '@equinor/eds-core-react';
 import { debounce } from 'lodash';
 import * as PropTypes from 'prop-types';
-import { ActionMeta, OnChangeValue } from 'react-select';
+import { ActionMeta, CSSObjectWithLabel, OnChangeValue } from 'react-select';
 import AsyncSelect from 'react-select/async';
 
 import {
   AdGroup,
   msGraphApi,
   useGetAdGroupsQuery,
 } from '../../store/ms-graph-api';
+import { UnknownADGroupsAlert } from '../component/unknown-ad-groups-alert';
 import AsyncResource from '../async-resource/async-resource';
 
+type DisplayAdGroups = AdGroup & { deleted?: boolean };
+
 type SearchGroupFunctionType = ReturnType<
   typeof msGraphApi.endpoints.searchAdGroups.useLazyQuery
 >[0];
 
 const loadOptions = debounce(
   (
-    callback: (options: Array<AdGroup>) => void,
+    callback: (options: Array<DisplayAdGroups>) => void,
     searchGroup: SearchGroupFunctionType,
     value: string
   ) => filterOptions(searchGroup, value).then(callback),
@@ -31,9 +34,19 @@ async function filterOptions(
   return (await searchGroups({ groupName, limit: 10 }).unwrap()).value;
 }
 
+function selectValueStyle(
+  base: CSSObjectWithLabel,
+  props: { data: DisplayAdGroups }
+): CSSObjectWithLabel {
+  if (props.data.deleted) {
+    base.backgroundColor = 'var(--eds_interactive_danger__highlight)';
+  }
+  return base;
+}
+
 export type HandleAdGroupsChangeCB = (
-  value: OnChangeValue<AdGroup, true>,
-  actionMeta: ActionMeta<AdGroup>
+  value: OnChangeValue<DisplayAdGroups, true>,
+  actionMeta: ActionMeta<DisplayAdGroups>
 ) => void;
 interface Props {
   handleAdGroupsChange: HandleAdGroupsChangeCB;
@@ -49,37 +62,48 @@ export function ADGroups({
     ids: adGroups ?? [],
   });
   const [searchGroups] = msGraphApi.endpoints.searchAdGroups.useLazyQuery();
+  const displayGroups = adGroups
+    ?.map((id) => ({ id, info: groupsInfo?.find((g) => g.id === id) }))
+    .map<DisplayAdGroups>((g) => ({
+      id: g.id,
+      displayName: g.info?.displayName ?? g.id,
+      deleted: !g.info,
+    }));
+
+  const unknownADGroups = adGroups?.filter(
+    (adGroupId) => !groupsInfo?.some((adGroup) => adGroup.id === adGroupId)
+  );
 
   return (
     <AsyncResource asyncState={state}>
-      {groupsInfo && (
-        <>
-          <AsyncSelect
-            isMulti
-            name="ADGroups"
-            menuPosition="fixed"
-            closeMenuOnScroll={(e: Event) => {
-              const target = e.target as HTMLInputElement;
-              return (
-                target?.parentElement?.className &&
-                !target.parentElement.className.match(/menu/)
-              );
-            }}
-            noOptionsMessage={() => null}
-            loadOptions={(inputValue, callback) => {
-              inputValue?.length < 3
-                ? callback([])
-                : loadOptions(callback, searchGroups, inputValue);
-            }}
-            onChange={handleAdGroupsChange}
-            getOptionLabel={({ displayName }) => displayName}
-            getOptionValue={({ id }) => id}
-            closeMenuOnSelect={false}
-            defaultValue={groupsInfo}
-            isDisabled={isDisabled}
-          />
-        </>
-      )}
+      <AsyncSelect
+        isMulti
+        name="ADGroups"
+        menuPosition="fixed"
+        closeMenuOnScroll={(e: Event) => {
+          const target = e.target as HTMLInputElement;
+          return (
+            target?.parentElement?.className &&
+            !target.parentElement.className.match(/menu/)
+          );
+        }}
+        noOptionsMessage={() => null}
+        loadOptions={(inputValue, callback) => {
+          inputValue?.length < 3
+            ? callback([])
+            : loadOptions(callback, searchGroups, inputValue);
+        }}
+        onChange={handleAdGroupsChange}
+        getOptionLabel={({ displayName }) => displayName}
+        getOptionValue={({ id }) => id}
+        closeMenuOnSelect={false}
+        defaultValue={displayGroups}
+        isDisabled={isDisabled}
+        styles={{
+          multiValueLabel: selectValueStyle,
+          multiValueRemove: selectValueStyle,
+        }}
+      />
       <Typography
         className="helpertext"
         group="input"
@@ -88,6 +112,11 @@ export function ADGroups({
       >
         Azure Active Directory groups (type 3 characters to search)
       </Typography>
+      {!state.isFetching && unknownADGroups?.length > 0 && (
+        <UnknownADGroupsAlert
+          unknownADGroups={unknownADGroups}
+        ></UnknownADGroupsAlert>
+      )}
     </AsyncResource>
   );
 }

src/components/page-configuration/change-admin-form.tsx

@@ -58,7 +58,7 @@ export default function ChangeAdminForm({ registration, refetch }: Props) {
 
   return (
     <Accordion className="accordion" chevronPosition="right">
-      <Accordion.Item style={{ overflow: 'visible' }}>
+      <Accordion.Item style={{ overflow: 'visible' }} isExpanded={true}>
         <Accordion.Header>
           <Accordion.HeaderTitle>
             <Typography>Access control</Typography>

src/components/page-configuration/overview.tsx

@@ -1,9 +1,15 @@
-import { List, Tooltip, Typography } from '@equinor/eds-core-react';
+import {
+  CircularProgress,
+  List,
+  Tooltip,
+  Typography,
+} from '@equinor/eds-core-react';
 import * as PropTypes from 'prop-types';
 
 import { Alert } from '../alert';
-import AsyncResource from '../async-resource/async-resource';
 import { useGetAdGroupsQuery } from '../../store/ms-graph-api';
+import { UnknownADGroupsAlert } from '../component/unknown-ad-groups-alert';
+import AsyncResource from '../async-resource/async-resource';
 
 interface Props {
   adGroups?: Array<string>;
@@ -12,6 +18,9 @@ interface Props {
 
 export function Overview({ adGroups, appName }: Props) {
   const { data, ...state } = useGetAdGroupsQuery({ ids: adGroups });
+  const unknownADGroups = adGroups?.filter(
+    (adGroupId) => !data?.some((adGroup) => adGroup.id === adGroupId)
+  );
 
   return (
     <div className="grid grid--gap-medium">
@@ -32,22 +41,33 @@ export function Overview({ adGroups, appName }: Props) {
                 </Tooltip>{' '}
                 groups):
               </Typography>
-              <AsyncResource asyncState={state}>
-                <List className="grid grid--gap-small">
-                  {data?.map(({ id, displayName }) => (
-                    <List.Item key={id}>
-                      <Typography
-                        link
-                        href={`https://portal.azure.com/#blade/Microsoft_AAD_IAM/GroupDetailsMenuBlade/Overview/groupId/${id}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        {displayName}
-                      </Typography>
-                    </List.Item>
-                  ))}
-                </List>
-              </AsyncResource>
+              {state.isLoading ? (
+                <>
+                  <CircularProgress size={24} /> Updating…
+                </>
+              ) : (
+                <AsyncResource asyncState={state}>
+                  <List className="grid grid--gap-small">
+                    {data?.map(({ id, displayName }) => (
+                      <List.Item key={id}>
+                        <Typography
+                          link
+                          href={`https://portal.azure.com/#blade/Microsoft_AAD_IAM/GroupDetailsMenuBlade/Overview/groupId/${id}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          {displayName}
+                        </Typography>
+                      </List.Item>
+                    ))}
+                  </List>
+                  {!state.isFetching && unknownADGroups?.length > 0 && (
+                    <UnknownADGroupsAlert
+                      unknownADGroups={unknownADGroups}
+                    ></UnknownADGroupsAlert>
+                  )}
+                </AsyncResource>
+              )}
             </>
           ) : (
             <Alert type="warning">

src/store/ms-graph-api.ts

@@ -97,7 +97,6 @@ type GetAdGroupArg = {
 };
 type GetAdGroupResponse = AdGroup;
 export type AdGroup = {
-  '@odaga.context': string;
   displayName: string;
   id: string;
 };