split components out in seperate files

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,56 @@
+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. Open the and follow the steps
+        below
+      </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>Give the key a name, e.g. "Radix deploy key"</List.Item>
+          <List.Item>
+            Press "Add key" on Github's{' '}
+            <ExternalLink href={`${app.repository}/settings/keys/new`}>
+              Add New Deploy Key page
+            </ExternalLink>
+          </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,55 @@
+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>
+        GitHub notifies Radix using a webhook whenever a code push is made.
+      </Typography>
+      <div className="grid grid--gap-medium o-body-text">
+        <List variant="numbered">
+          <List.Item>
+            Open the{' '}
+            <ExternalLink href={`${repository}/settings/hooks/new`}>
+              Add Webhook page
+            </ExternalLink>{' '}
+          </List.Item>
+          <List.Item>
+            As Payload URL, use{' '}
+            <code>{`https://webhook.${radixZoneDNS}/events/github?appName=${appName}`}</code>{' '}
+            <CompactCopyButton
+              content={`https://webhook.${radixZoneDNS}/events/github?appName=${appName}`}
+            />
+          </List.Item>
+          <List.Item>
+            Choose <code>application/json</code> as Content type
+          </List.Item>
+          <List.Item>
+            The Shared Secret for this application is{' '}
+            <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, ConfigureGithubWebhook } 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'],