Configure Service Principals (#1099)

* Cleanup types

* Cleanup types

* Cleanup types

* fix test

* cleanup proxy

* Added color and unknown users

* revert proxy

proxy/server.dev.conf

@@ -10,7 +10,6 @@ server {
 
     location /api/ {
         proxy_pass https://server-radix-api-qa.dev.radix.equinor.com;
-        # proxy_pass http://172.19.0.1:3002;
         proxy_set_header Authorization "Bearer $http_x_forwarded_access_token";
         proxy_set_header x-forwarded-access-token "";
     }

src/components/app-config-ad-groups/index.tsx

@@ -1,35 +1,36 @@
 import { AuthenticatedTemplate } from '@azure/msal-react';
 import { Typography } from '@equinor/eds-core-react';
 import * as PropTypes from 'prop-types';
-import type { FunctionComponent } from 'react';
 
 import { ADGroups, type HandleAdGroupsChangeCB } from '../graph/adGroups';
 
 import './style.css';
 
-export interface AppConfigAdGroupsProps {
+interface Props {
   labeling: string;
   adGroups?: Array<string>;
+  adUsers?: Array<string>;
   isDisabled?: boolean;
-  handleAdGroupsChange: HandleAdGroupsChangeCB;
+  onChange: HandleAdGroupsChangeCB;
 }
-
-export const AppConfigAdGroups: FunctionComponent<AppConfigAdGroupsProps> = ({
+export const AppConfigAdGroups = ({
   labeling,
   adGroups,
+  adUsers,
   isDisabled,
-  handleAdGroupsChange,
-}) => (
+  onChange,
+}: Props) => (
   <div className="ad-groups">
     <Typography className="label">{labeling}</Typography>
     <Typography className="label meta">
       User authentication is your application's responsibility; it is not
-      related to these groups
+      related to these Entra objects
     </Typography>
     <AuthenticatedTemplate>
       <ADGroups
-        handleAdGroupsChange={handleAdGroupsChange}
-        adGroups={adGroups}
+        onChange={onChange}
+        adGroups={adGroups ?? []}
+        adUsers={adUsers ?? []}
         isDisabled={isDisabled}
       />
     </AuthenticatedTemplate>
@@ -40,5 +41,5 @@ AppConfigAdGroups.propTypes = {
   labeling: PropTypes.string.isRequired,
   adGroups: PropTypes.arrayOf(PropTypes.string),
   isDisabled: PropTypes.bool,
-  handleAdGroupsChange: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
 };

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

@@ -1,22 +1,30 @@
-import { List } from '@equinor/eds-core-react';
+import { Icon, List } from '@equinor/eds-core-react';
+import { computer, group } from '@equinor/eds-icons';
 import { Alert } from '../alert';
 
 interface Props {
   unknownADGroups?: Array<string>;
+  unknownADUsers?: Array<string>;
 }
-export function UnknownADGroupsAlert({ unknownADGroups }: Props) {
+export function UnknownADGroupsAlert({
+  unknownADGroups,
+  unknownADUsers,
+}: 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>
-      )}
-    </>
+    <Alert type="danger">
+      Unknown or deleted Entra object(s)
+      <List className="o-indent-list">
+        {unknownADGroups.map((adGroup) => (
+          <List.Item key={adGroup}>
+            <Icon data={group} size={16} /> {adGroup}
+          </List.Item>
+        ))}
+        {unknownADUsers.map((adSp) => (
+          <List.Item key={adSp}>
+            <Icon data={computer} size={16} /> {adSp}
+          </List.Item>
+        ))}
+      </List>
+    </Alert>
   );
 }

src/components/configure-application-github/dev.tsx

@@ -5,6 +5,9 @@ export default (
     <ConfigureApplicationGithub
       app={{
         adGroups: ['Group 1', 'Group 2'],
+        adUsers: ['User 1', 'user 2'],
+        readerAdGroups: ['Reader 1', 'Reader 2'],
+        readerAdUsers: ['Reader User 1', 'Reader User 2'],
         name: 'a-name-thing',
         repository: 'https://some/path/to/a/repo',
         sharedSecret: 'a long shared secret',

src/components/create-application-form/index.tsx

@@ -56,6 +56,8 @@ export default function CreateApplicationForm({ onCreated }: Props) {
       radixConfigFullName: 'radixconfig.yaml',
       configurationItem: '',
       readerAdGroups: [],
+      adUsers: [],
+      readerAdUsers: [],
     });
 
   const [refreshApps] = radixApi.endpoints.showApplications.useLazyQuery({});
@@ -68,7 +70,8 @@ export default function CreateApplicationForm({ onCreated }: Props) {
   const handleAdGroupsChange: HandleAdGroupsChangeCB = (value) => {
     setAppRegistration((current) => ({
       ...current,
-      adGroups: value.map((x) => x.id),
+      adGroups: value.filter((x) => x.type === 'Group').map((x) => x.id),
+      adUsers: value.filter((x) => x.type !== 'Group').map((x) => x.id),
     }));
   };
 
@@ -205,7 +208,7 @@ export default function CreateApplicationForm({ onCreated }: Props) {
         />
         <AppConfigAdGroups
           adGroups={applicationRegistration.adGroups}
-          handleAdGroupsChange={handleAdGroupsChange}
+          onChange={handleAdGroupsChange}
           labeling="Administrators"
         />
         {creationState.isError && (