UX: Enhance the webhook/deploykey walktrough

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

@@ -4,13 +4,15 @@ import { ADGroups, type HandleAdGroupsChangeCB } from '../graph/adGroups';
 import './style.css';
 
 interface Props {
+  name?: string;
   labeling: string;
   adGroups?: Array<string>;
   adUsers?: Array<string>;
   isDisabled?: boolean;
-  onChange: HandleAdGroupsChangeCB;
+  onChange?: HandleAdGroupsChangeCB;
 }
 export const AppConfigAdGroups = ({
+  name,
   labeling,
   adGroups,
   adUsers,
@@ -25,6 +27,7 @@ export const AppConfigAdGroups = ({
     </Typography>
     <AuthenticatedTemplate>
       <ADGroups
+        name={name}
         onChange={onChange}
         adGroups={adGroups ?? []}
         adUsers={adUsers ?? []}

src/components/app-config-ci/index.tsx

@@ -46,14 +46,16 @@ async function filterOptions(
 }
 
 export interface Props {
-  configurationItemChangeCallback: OnConfigurationItemChangeCallback;
+  name?: string;
+  configurationItemChangeCallback?: OnConfigurationItemChangeCallback;
   disabled?: boolean;
   configurationItem?: string;
 }
 export function AppConfigConfigurationItem({
   configurationItem,
   configurationItemChangeCallback,
   disabled,
+  name = 'ConfigurationItem',
 }: Props) {
   const [selectedCI, setSelectedCI] = useState<Application | null | undefined>(
     undefined
@@ -73,7 +75,7 @@ export function AppConfigConfigurationItem({
   const containerRef = useRef<HTMLDivElement>();
 
   function onChange(newValue: Application | null): void {
-    configurationItemChangeCallback(newValue);
+    configurationItemChangeCallback?.(newValue);
     setSelectedCI(newValue);
     setPopoverOpen(false);
   }
@@ -106,7 +108,7 @@ export function AppConfigConfigurationItem({
         components={{ IndicatorsContainer }}
         onInfoIconClick={onInfoIconClick}
         containerRef={containerRef}
-        name="ConfigurationItem"
+        name={name}
         menuPosition="fixed"
         closeMenuOnScroll={({ target }: Event) =>
           !(target as HTMLElement)?.parentElement?.className?.match(/menu/)

src/components/app-list/index.tsx

@@ -10,7 +10,7 @@ import { radixApi, useGetSearchApplicationsQuery } from '../../store/radix-api';
 import { dataSorter, sortCompareString } from '../../utils/sort-utils';
 import { AppListItem } from '../app-list-item';
 import AsyncResource from '../async-resource/async-resource';
-import PageCreateApplication from '../page-create-application';
+import CreateApplication from '../create-application';
 
 import './style.css';
 import { refresh } from '@equinor/eds-icons';
@@ -124,7 +124,7 @@ export default function AppList() {
     <article className="grid grid--gap-medium">
       <div className="app-list__header">
         <Typography variant="body_short_bold">Favourites</Typography>
-        <PageCreateApplication />
+        <CreateApplication />
       </div>
       <div className="app-list">
         {favouriteNames?.length > 0 ? (

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

@@ -0,0 +1,58 @@
+import { List, Progress, Typography } from '@equinor/eds-core-react';
+import { Code } from '../code';
+import imageDeployKey from './deploy-key02.png';
+
+import './style.css';
+import type {
+  ApplicationRegistration,
+  DeployKeyAndSecret,
+} from '../../store/radix-api';
+import { ExternalLink } from '../link/external-link';
+
+interface Props {
+  app: ApplicationRegistration;
+  secrets?: DeployKeyAndSecret;
+}
+
+export const ConfigureGithubDeploykey = ({ app, secrets }: Props) => {
+  return (
+    <div className="grid grid--gap-medium">
+      <Typography>This allows Radix to clone the repository.</Typography>
+      <div className="grid grid--gap-medium o-body-text">
+        <List variant="numbered">
+          <List.Item>
+            {secrets?.publicDeployKey ? (
+              <section className="deploy-key">
+                Copy this key:
+                <Code copy>{secrets?.publicDeployKey}</Code>
+              </section>
+            ) : (
+              <>
+                <Progress.Circular size={16} /> Please wait…
+              </>
+            )}
+          </List.Item>
+          <List.Item>
+            Open Github's{' '}
+            <ExternalLink href={`${app.repository}/settings/keys/new`}>
+              Add New Deploy Key page
+            </ExternalLink>{' '}
+            and paste in your key
+          </List.Item>
+          <List.Item>Give the key a name, e.g. "Radix deploy key"</List.Item>
+          <List.Item>
+            Make sure "Allow write access" is <strong>not</strong> checked
+          </List.Item>
+          <List.Item>Press "Add key"</List.Item>
+        </List>
+        <div className={'screenshot'}>
+          <img
+            alt="Add deploy key' steps on GitHub"
+            src={imageDeployKey}
+            srcSet={`${imageDeployKey} 2x`}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,57 @@
+import { List, Typography } from '@equinor/eds-core-react';
+import { configVariables } from '../../utils/config';
+import { CompactCopyButton } from '../compact-copy-button';
+import { ExternalLink } from '../link/external-link';
+import imageWebhook from './webhook02.png';
+
+type Props = { repository: string; appName: string; sharedSecret?: string };
+
+export function ConfigureGithubWebhook({
+  repository,
+  appName,
+  sharedSecret,
+}: Props) {
+  const radixZoneDNS = configVariables.RADIX_CLUSTER_BASE;
+  return (
+    <div className="grid grid--gap-medium">
+      <Typography>
+        <strong>Optionally</strong> add a Webhook to GitHub, Radix will then be
+        notified when new code is pushed to your repository and trigger a{' '}
+        <em>build-deploy</em> job.
+      </Typography>
+      <div className="grid grid--gap-medium o-body-text">
+        <List variant="numbered">
+          <List.Item>
+            Copy your <em>Payload URL</em>
+            <code>{`https://webhook.${radixZoneDNS}/events/github?appName=${appName}`}</code>{' '}
+            <CompactCopyButton
+              content={`https://webhook.${radixZoneDNS}/events/github?appName=${appName}`}
+            />
+          </List.Item>
+          <List.Item>
+            Open the{' '}
+            <ExternalLink href={`${repository}/settings/hooks/new`}>
+              Add Webhook page
+            </ExternalLink>{' '}
+            and add your <em>Payload URL</em>.
+          </List.Item>
+          <List.Item>
+            Choose <code>application/json</code> as Content type
+          </List.Item>
+          <List.Item>
+            Set <em>Secret</em> to <code>{sharedSecret}</code>{' '}
+            <CompactCopyButton content={sharedSecret ?? ''} />
+          </List.Item>
+          <List.Item>Press "Add webhook"</List.Item>
+        </List>
+        <div className={'screenshot'}>
+          <img
+            alt="'Add webhook' steps on GitHub"
+            src={imageWebhook}
+            srcSet={`${imageWebhook} 2x`}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,8 +1,9 @@
-import { ConfigureApplicationGithub } from '.';
+import { ConfigureGithubDeploykey } from './configure-github-deploykey';
+import { ConfigureGithubWebhook } from './configure-github-webhook';
 
 export default (
   <div className="o-layout-single">
-    <ConfigureApplicationGithub
+    <ConfigureGithubDeploykey
       app={{
         adGroups: ['Group 1', 'Group 2'],
         adUsers: ['User 1', 'user 2'],
@@ -17,10 +18,11 @@ export default (
         wbs: 'wbs123',
         radixConfigFullName: 'radixconfig.yaml',
       }}
-      onDeployKeyChange={() => void 0}
-      refetch={() => void 0}
-      initialSecretPollInterval={5000}
-      useOtherCiToolOptionVisible={true}
+    />
+    <ConfigureGithubWebhook
+      appName={'a-name-thing'}
+      repository={'https://some/path/to/a/repo'}
+      sharedSecret={crypto.randomUUID()}
     />
   </div>
 );