From 52ae2a6e1b972c0f4c8c6a724d91fb868d259f8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nils=20Gustav=20Str=C3=A5b=C3=B8?= <nst@equinor.com>
Date: Fri, 22 Nov 2024 11:37:20 +0100
Subject: [PATCH 1/8] improve gui for pipeline job creation

---
 src/components/create-job-form/index.tsx      | 80 ++++++++++++++-----
 .../pipeline-form-apply-config.tsx            | 10 +--
 .../pipeline-form-build-branches.tsx          | 57 +++++++------
 .../create-job-form/pipeline-form-deploy.tsx  | 22 ++---
 .../create-job-form/pipeline-form-promote.tsx | 26 +++---
 .../use-get-application-branches.ts           | 31 ++-----
 src/components/environments-summary/index.tsx | 65 +++++++--------
 .../link/apply-config-pipeline-link.tsx       | 26 ++++++
 .../link/radix-config-file-link.tsx           | 24 ++++++
 src/components/page-configuration/index.tsx   | 23 +-----
 .../page-create-application/index.tsx         | 17 +---
 11 files changed, 203 insertions(+), 178 deletions(-)
 create mode 100644 src/components/link/apply-config-pipeline-link.tsx
 create mode 100644 src/components/link/radix-config-file-link.tsx

diff --git a/src/components/create-job-form/index.tsx b/src/components/create-job-form/index.tsx
index 7a1626d66..e720c727a 100644
--- a/src/components/create-job-form/index.tsx
+++ b/src/components/create-job-form/index.tsx
@@ -3,17 +3,23 @@ import * as PropTypes from 'prop-types';
 import {
   type ComponentProps,
   type FunctionComponent,
-  type PropsWithChildren,
-  useState,
+  useCallback,
+  useMemo,
 } from 'react';
 
-import { PipelineFormPromote } from './pipeline-form-promote';
-
-import './style.css';
 import { useSearchParams } from 'react-router-dom';
+import { pollingInterval } from '../../store/defaults';
+import {
+  type Application,
+  useGetApplicationQuery,
+} from '../../store/radix-api';
 import { PipelineFormApplyConfig } from './pipeline-form-apply-config';
 import { PipelineFormBuildBranches } from './pipeline-form-build-branches';
 import { PipelineFormDeploy } from './pipeline-form-deploy';
+import { PipelineFormPromote } from './pipeline-form-promote';
+import { useGetApplicationBranches } from './use-get-application-branches';
+import './style.css';
+import AsyncResource from '../async-resource/async-resource';
 
 export interface CreateJobFormProps {
   appName: string;
@@ -25,11 +31,11 @@ type SupportedPipelineNames =
   | ComponentProps<typeof PipelineFormPromote>['pipelineName']
   | ComponentProps<typeof PipelineFormApplyConfig>['pipelineName'];
 
-export type FormProp = PropsWithChildren<{
-  appName: string;
+export type FormProp = {
+  application: Application;
   onSuccess: (jobName: string) => void;
   pipelineName: string;
-}>;
+};
 
 const Pipelines = {
   build: PipelineFormBuildBranches,
@@ -39,28 +45,53 @@ const Pipelines = {
   'apply-config': PipelineFormApplyConfig,
 } satisfies Record<SupportedPipelineNames, FunctionComponent<FormProp>>;
 
+const pipelineSearchParam = 'pipeline';
+
 export default function CreateJobForm({
   appName,
   onSuccess,
 }: CreateJobFormProps) {
-  const [searchParams] = useSearchParams();
-  const [pipeline, setPipeline] = useState<SupportedPipelineNames>(() => {
-    const urlPipeline = searchParams.get('pipeline');
+  const { data: application, ...appState } = useGetApplicationQuery(
+    { appName },
+    { pollingInterval }
+  );
+
+  const hasEnvironments = useMemo(
+    () => application?.environments?.length > 0,
+    [application]
+  );
+  const buildBranches = useGetApplicationBranches(application);
+  const hasBuildBranches = useMemo(
+    () => Object.keys(buildBranches).length > 0,
+    [buildBranches]
+  );
+  const [searchParams, setSearchParams] = useSearchParams();
+  const setPipelineType = useCallback(
+    (pipeline: string) => {
+      setSearchParams((prev) => {
+        prev.set(pipelineSearchParam, pipeline);
+        return prev;
+      });
+    },
+    [setSearchParams]
+  );
+  const pipeline = useMemo(() => {
+    const urlPipeline = searchParams.get(pipelineSearchParam);
     if (Object.keys(Pipelines).includes(urlPipeline)) {
-      return urlPipeline as SupportedPipelineNames;
+      return urlPipeline;
     }
 
-    return 'build-deploy';
-  });
+    return !hasEnvironments
+      ? 'apply-config'
+      : hasBuildBranches
+        ? 'build-deploy'
+        : '';
+  }, [searchParams, hasEnvironments, hasBuildBranches]);
 
   const PipelineForm = Pipelines[pipeline];
 
   return (
-    <PipelineForm
-      onSuccess={onSuccess}
-      appName={appName}
-      pipelineName={pipeline}
-    >
+    <AsyncResource asyncState={appState}>
       <Typography
         group="input"
         variant="text"
@@ -72,7 +103,7 @@ export default function CreateJobForm({
         id="PipelineNameSelect"
         label=""
         value={pipeline}
-        onChange={(e) => setPipeline(e.target.value as SupportedPipelineNames)}
+        onChange={(e) => setPipelineType(e.target.value)}
       >
         <option disabled value="">
           — Please select —
@@ -83,7 +114,14 @@ export default function CreateJobForm({
           </option>
         ))}
       </NativeSelect>
-    </PipelineForm>
+      {PipelineForm && (
+        <PipelineForm
+          onSuccess={onSuccess}
+          application={application}
+          pipelineName={pipeline}
+        />
+      )}
+    </AsyncResource>
   );
 }
 CreateJobForm.propTypes = {
diff --git a/src/components/create-job-form/pipeline-form-apply-config.tsx b/src/components/create-job-form/pipeline-form-apply-config.tsx
index 4dcbbd45b..04f427778 100644
--- a/src/components/create-job-form/pipeline-form-apply-config.tsx
+++ b/src/components/create-job-form/pipeline-form-apply-config.tsx
@@ -12,19 +12,16 @@ import { Alert } from '../alert';
 import { handlePromiseWithToast } from '../global-top-nav/styled-toaster';
 import type { FormProp } from './index';
 
-export function PipelineFormApplyConfig({
-  children,
-  appName,
-  onSuccess,
-}: FormProp) {
+export function PipelineFormApplyConfig({ application, onSuccess }: FormProp) {
   const [trigger, state] = useTriggerPipelineApplyConfigMutation();
   const [deployExternalDNS, setDeployExternalDNS] = useState(false);
+
   const handleSubmit = handlePromiseWithToast(
     async (e: FormEvent<HTMLFormElement>) => {
       e.preventDefault();
 
       const response = await trigger({
-        appName,
+        appName: application.name,
         pipelineParametersApplyConfig: {
           deployExternalDNS: deployExternalDNS,
         },
@@ -37,7 +34,6 @@ export function PipelineFormApplyConfig({
     <form onSubmit={handleSubmit}>
       <fieldset disabled={state.isLoading} className="grid grid--gap-medium">
         <div className="grid grid--gap-small input">
-          {children}
           <Typography
             className="input-label"
             as="span"
diff --git a/src/components/create-job-form/pipeline-form-build-branches.tsx b/src/components/create-job-form/pipeline-form-build-branches.tsx
index 16f99fc31..8368bb9dd 100644
--- a/src/components/create-job-form/pipeline-form-build-branches.tsx
+++ b/src/components/create-job-form/pipeline-form-build-branches.tsx
@@ -18,22 +18,20 @@ import { TargetEnvs } from './target-envs';
 import { useGetApplicationBranches } from './use-get-application-branches';
 
 export function PipelineFormBuildBranches({
-  children,
   onSuccess,
-  appName,
+  application,
   pipelineName,
 }: FormProp) {
+  const isBuildDeployPipeline = pipelineName === 'build-deploy';
   const [triggerBuild, buildState] = useTriggerPipelineBuildMutation();
   const [triggerBuildDeploy, buildDeployState] =
     useTriggerPipelineBuildDeployMutation();
-
-  const state = pipelineName === 'build-deploy' ? buildDeployState : buildState;
-
+  const createJobState = isBuildDeployPipeline ? buildDeployState : buildState;
   const [branch, setBranch] = useState('');
   const [selectedBranch, setSelectedBranch] = useState('');
   const [branchFullName, setBranchFullName] = useState('');
   const [toEnvironment, setToEnvironment] = useState('');
-  const branches = useGetApplicationBranches(appName);
+  const branches = useGetApplicationBranches(application);
   const [filteredBranches, setFilteredBranches] = useState([]);
 
   const handleOnTextChange = ({
@@ -73,11 +71,11 @@ export function PipelineFormBuildBranches({
       e.preventDefault();
 
       const body = {
-        appName,
+        appName: application.name,
         pipelineParametersBuild: { branch, toEnvironment },
       };
       let jobName: string;
-      if (pipelineName === 'build-deploy') {
+      if (isBuildDeployPipeline) {
         jobName = (await triggerBuildDeploy(body).unwrap()).name;
       } else {
         jobName = (await triggerBuild(body).unwrap()).name;
@@ -94,9 +92,11 @@ export function PipelineFormBuildBranches({
   };
   return (
     <form onSubmit={handleSubmit}>
-      <fieldset disabled={state.isLoading} className="grid grid--gap-medium">
+      <fieldset
+        disabled={createJobState.isLoading}
+        className="grid grid--gap-medium"
+      >
         <div className="grid grid--gap-small input">
-          {children}
           <Typography
             className="input-label"
             as="span"
@@ -104,7 +104,11 @@ export function PipelineFormBuildBranches({
             variant="label"
             token={{ color: 'currentColor' }}
           >
-            Build (but do not deploy) a git branch
+            {isBuildDeployPipeline ? (
+              <>Build and deploy a git branch</>
+            ) : (
+              <>Build (but do not deploy) a git branch</>
+            )}
           </Typography>
           <Typography
             group="input"
@@ -113,8 +117,15 @@ export function PipelineFormBuildBranches({
           >
             Git branch to build
           </Typography>
-          <NativeSelect id="BranchSelect" label="" onChange={handleChange}>
-            <option value="">— Please select —</option>
+          <NativeSelect
+            value={branch}
+            id="BranchSelect"
+            label=""
+            onChange={handleChange}
+          >
+            <option hidden value="">
+              — Please select —
+            </option>
             {Object.keys(branches ?? {}).map((branch, i) => (
               <option key={i} value={branch}>
                 {branch}
@@ -170,25 +181,23 @@ export function PipelineFormBuildBranches({
                 </NativeSelect>
               </div>
             )}
-          {pipelineName === 'build-deploy' &&
-            branch &&
-            !isAnyValidRegex(branch) && (
-              <TargetEnvs
-                targetEnvs={toEnvironment ? [toEnvironment] : filteredBranches}
-                branch={branch}
-              />
-            )}
+          {isBuildDeployPipeline && branch && !isAnyValidRegex(branch) && (
+            <TargetEnvs
+              targetEnvs={toEnvironment ? [toEnvironment] : filteredBranches}
+              branch={branch}
+            />
+          )}
         </div>
 
         <div className="o-action-bar">
-          {state.isLoading && (
+          {createJobState.isLoading && (
             <div>
               <CircularProgress size={16} /> Creating…
             </div>
           )}
-          {state.isError && (
+          {createJobState.isError && (
             <Alert type="danger">
-              Failed to create job. {getFetchErrorMessage(state.error)}
+              Failed to create job. {getFetchErrorMessage(createJobState.error)}
             </Alert>
           )}
           <div>
diff --git a/src/components/create-job-form/pipeline-form-deploy.tsx b/src/components/create-job-form/pipeline-form-deploy.tsx
index 397b5e85d..5ebcdb977 100644
--- a/src/components/create-job-form/pipeline-form-deploy.tsx
+++ b/src/components/create-job-form/pipeline-form-deploy.tsx
@@ -5,31 +5,22 @@ import {
   Typography,
 } from '@equinor/eds-core-react';
 import { type FormEvent, useState } from 'react';
-import { pollingInterval } from '../../store/defaults';
-import {
-  useGetEnvironmentSummaryQuery,
-  useTriggerPipelineDeployMutation,
-} from '../../store/radix-api';
+import { useTriggerPipelineDeployMutation } from '../../store/radix-api';
 
 import { getFetchErrorMessage } from '../../store/utils';
 import { Alert } from '../alert';
 import { handlePromiseWithToast } from '../global-top-nav/styled-toaster';
 import type { FormProp } from './index';
 
-export function PipelineFormDeploy({ children, appName, onSuccess }: FormProp) {
+export function PipelineFormDeploy({ application, onSuccess }: FormProp) {
   const [trigger, state] = useTriggerPipelineDeployMutation();
-  const { data: environments } = useGetEnvironmentSummaryQuery(
-    { appName },
-    { pollingInterval }
-  );
   const [toEnvironment, setToEnvironment] = useState('');
-
   const handleSubmit = handlePromiseWithToast(
     async (e: FormEvent<HTMLFormElement>) => {
       e.preventDefault();
 
       const response = await trigger({
-        appName,
+        appName: application.name,
         pipelineParametersDeploy: {
           toEnvironment,
         },
@@ -45,7 +36,6 @@ export function PipelineFormDeploy({ children, appName, onSuccess }: FormProp) {
     <form onSubmit={handleSubmit}>
       <fieldset disabled={state.isLoading} className="grid grid--gap-medium">
         <div className="grid grid--gap-small input">
-          {children}
           <Typography
             className="input-label"
             as="span"
@@ -70,8 +60,10 @@ export function PipelineFormDeploy({ children, appName, onSuccess }: FormProp) {
               onChange={(e) => setToEnvironment(e.target.value)}
               value={toEnvironment}
             >
-              <option value="">— Please select —</option>
-              {environments?.map(({ name }, i) => (
+              <option hidden value="">
+                — Please select —
+              </option>
+              {application.environments?.map(({ name }, i) => (
                 <option key={i} value={name}>
                   {name}
                 </option>
diff --git a/src/components/create-job-form/pipeline-form-promote.tsx b/src/components/create-job-form/pipeline-form-promote.tsx
index 1bd65479d..c4051b9a5 100644
--- a/src/components/create-job-form/pipeline-form-promote.tsx
+++ b/src/components/create-job-form/pipeline-form-promote.tsx
@@ -11,7 +11,6 @@ import { pollingInterval } from '../../store/defaults';
 import {
   type DeploymentSummary,
   useGetDeploymentsQuery,
-  useGetEnvironmentSummaryQuery,
   useTriggerPipelinePromoteMutation,
 } from '../../store/radix-api';
 import { formatDateTime } from '../../utils/datetime';
@@ -23,19 +22,11 @@ import { Alert } from '../alert';
 import { handlePromiseWithToast } from '../global-top-nav/styled-toaster';
 import type { FormProp } from './index';
 
-export function PipelineFormPromote({
-  children,
-  appName,
-  onSuccess,
-}: FormProp) {
+export function PipelineFormPromote({ application, onSuccess }: FormProp) {
   const [searchParams] = useSearchParams();
   const [trigger, state] = useTriggerPipelinePromoteMutation();
   const { data: deployments } = useGetDeploymentsQuery(
-    { appName },
-    { pollingInterval }
-  );
-  const { data: environments } = useGetEnvironmentSummaryQuery(
-    { appName },
+    { appName: application.name },
     { pollingInterval }
   );
   const [toEnvironment, setToEnvironment] = useState('');
@@ -53,7 +44,7 @@ export function PipelineFormPromote({
       e.preventDefault();
 
       const response = await trigger({
-        appName,
+        appName: application.name,
         pipelineParametersPromote: {
           toEnvironment,
           deploymentName,
@@ -81,7 +72,6 @@ export function PipelineFormPromote({
     <form onSubmit={handleSubmit}>
       <fieldset disabled={state.isLoading} className="grid grid--gap-medium">
         <div className="grid grid--gap-small input">
-          {children}
           <Typography
             className="input-label"
             as="span"
@@ -105,7 +95,9 @@ export function PipelineFormPromote({
             name="deploymentName"
             value={deploymentName}
           >
-            <option value="">— Please select —</option>
+            <option hidden value="">
+              — Please select —
+            </option>
             {Object.keys(groupedDeployments).map((key, i) => (
               <optgroup key={i} label={key}>
                 {groupedDeployments[key].map((x, j) => (
@@ -158,8 +150,10 @@ export function PipelineFormPromote({
             onChange={(e) => setToEnvironment(e.target.value)}
             value={toEnvironment}
           >
-            <option value="">— Please select —</option>
-            {environments?.map(({ name, activeDeployment }, i) => (
+            <option hidden value="">
+              — Please select —
+            </option>
+            {application.environments?.map(({ name, activeDeployment }, i) => (
               <option
                 key={i}
                 value={name}
diff --git a/src/components/create-job-form/use-get-application-branches.ts b/src/components/create-job-form/use-get-application-branches.ts
index 19da2006b..555d97d81 100644
--- a/src/components/create-job-form/use-get-application-branches.ts
+++ b/src/components/create-job-form/use-get-application-branches.ts
@@ -1,20 +1,8 @@
-import { pollingInterval } from '../../store/defaults';
-import {
-  useGetApplicationQuery,
-  useGetEnvironmentSummaryQuery,
-} from '../../store/radix-api';
+import type { Application } from '../../store/radix-api';
 
-export function useGetApplicationBranches(appName: string) {
-  const { data: envSummary } = useGetEnvironmentSummaryQuery(
-    { appName },
-    { pollingInterval }
-  );
-  const { data: application } = useGetApplicationQuery(
-    { appName },
-    { pollingInterval }
-  );
-  const branches =
-    envSummary
+export function useGetApplicationBranches(application: Application) {
+  return (
+    application?.environments
       ?.filter(({ branchMapping }) => !!branchMapping)
       .reduce<Record<string, Array<string>>>(
         (obj, { branchMapping, name }) => ({
@@ -22,13 +10,6 @@ export function useGetApplicationBranches(appName: string) {
           [branchMapping]: [...(obj[branchMapping] || []), name],
         }),
         {}
-      ) ?? {};
-
-  if (Object.keys(branches).length === 0 && envSummary?.length === 0) {
-    const configBranch = application?.registration?.configBranch;
-    if (configBranch) {
-      branches[configBranch] = [];
-    }
-  }
-  return branches;
+      ) ?? {}
+  );
 }
diff --git a/src/components/environments-summary/index.tsx b/src/components/environments-summary/index.tsx
index d07ab171b..d6d4242b9 100644
--- a/src/components/environments-summary/index.tsx
+++ b/src/components/environments-summary/index.tsx
@@ -7,12 +7,9 @@ import { EnvironmentCard } from './environment-card';
 import { externalUrls } from '../../externalUrls';
 import type { EnvironmentSummary } from '../../store/radix-api';
 
-import { Link } from 'react-router-dom';
-import { routes } from '../../routes';
-import { routeWithParams } from '../../utils/string';
-
-import './style.css';
+import { NewApplyConfigPipelineLink } from '../link/apply-config-pipeline-link';
 import { ExternalLink } from '../link/external-link';
+import './style.css';
 
 export interface EnvironmentsSummaryProps {
   appName: string;
@@ -22,39 +19,31 @@ export interface EnvironmentsSummaryProps {
 
 export const EnvironmentsSummary: FunctionComponent<
   EnvironmentsSummaryProps
-> = ({ appName, envs, repository }) => (
-  <div className="environments-summary">
-    {envs?.length > 0 ? (
-      envs.map((env, i) => (
-        <EnvironmentCard key={i} {...{ appName, env, repository }} />
-      ))
-    ) : (
-      <span>
-        <Typography bold>No enironments.</Typography>
-        <Typography>
-          Please run the{' '}
-          <Typography
-            as={Link}
-            to={routeWithParams(
-              routes.appJobNew,
-              {
-                appName: appName,
-              },
-              { pipeline: 'apply-config' }
-            )}
-            link
-          >
-            apply-config
-          </Typography>{' '}
-          pipeline job to apply{' '}
-          <ExternalLink href={externalUrls.referenceRadixConfig}>
-            radixconfig.yaml
-          </ExternalLink>
-        </Typography>
-      </span>
-    )}
-  </div>
-);
+> = ({ appName, envs, repository }) => {
+  return (
+    <div className="environments-summary">
+      {envs?.length > 0 ? (
+        envs.map((env, i) => (
+          <EnvironmentCard key={i} {...{ appName, env, repository }} />
+        ))
+      ) : (
+        <span>
+          <Typography bold>No enironments.</Typography>
+          <Typography>
+            Please run the{' '}
+            <NewApplyConfigPipelineLink appName={appName}>
+              apply-config
+            </NewApplyConfigPipelineLink>{' '}
+            pipeline job to apply{' '}
+            <ExternalLink href={externalUrls.referenceRadixConfig}>
+              radixconfig.yaml
+            </ExternalLink>
+          </Typography>
+        </span>
+      )}
+    </div>
+  );
+};
 
 EnvironmentsSummary.propTypes = {
   appName: PropTypes.string.isRequired,
diff --git a/src/components/link/apply-config-pipeline-link.tsx b/src/components/link/apply-config-pipeline-link.tsx
new file mode 100644
index 000000000..c69d36964
--- /dev/null
+++ b/src/components/link/apply-config-pipeline-link.tsx
@@ -0,0 +1,26 @@
+import { Typography } from '@equinor/eds-core-react';
+import type { PropsWithChildren } from 'react';
+import { Link } from 'react-router-dom';
+import { routes } from '../../routes';
+import { routeWithParams } from '../../utils/string';
+
+type Props = { appName: string };
+
+export const NewApplyConfigPipelineLink = ({
+  appName,
+  children,
+}: PropsWithChildren<Props>) => (
+  <Typography
+    as={Link}
+    to={routeWithParams(
+      routes.appJobNew,
+      {
+        appName: appName,
+      },
+      { pipeline: 'apply-config' }
+    )}
+    link
+  >
+    {children}
+  </Typography>
+);
diff --git a/src/components/link/radix-config-file-link.tsx b/src/components/link/radix-config-file-link.tsx
new file mode 100644
index 000000000..f33abb6db
--- /dev/null
+++ b/src/components/link/radix-config-file-link.tsx
@@ -0,0 +1,24 @@
+import type { ApplicationRegistration } from '../../store/radix-api';
+import { ExternalLink } from './external-link';
+
+type Props = { registration?: ApplicationRegistration };
+
+function configFileFullName(radixConfigFullName: string): string {
+  return radixConfigFullName || 'radixconfig.yaml';
+}
+
+function configFileUrl({
+  configBranch,
+  radixConfigFullName,
+  repository,
+}: ApplicationRegistration): string {
+  return `${repository}/blob/${configBranch}/${configFileFullName(
+    radixConfigFullName
+  )}`;
+}
+
+export const RadixConfigFileLink = ({ registration }: Props) => (
+  <ExternalLink href={configFileUrl(registration)}>
+    {configFileFullName(registration.radixConfigFullName)}
+  </ExternalLink>
+);
diff --git a/src/components/page-configuration/index.tsx b/src/components/page-configuration/index.tsx
index c1d0b127a..5f49c5d12 100644
--- a/src/components/page-configuration/index.tsx
+++ b/src/components/page-configuration/index.tsx
@@ -18,18 +18,16 @@ import { Breadcrumb } from '../breadcrumb';
 import { ConfigureApplicationGithub } from '../configure-application-github';
 import { DocumentTitle } from '../document-title';
 
-import './style.css';
 import { pollingInterval } from '../../store/defaults';
 import { type ApplicationRegistration, radixApi } from '../../store/radix-api';
 import { ExternalLink } from '../link/external-link';
+import { RadixConfigFileLink } from '../link/radix-config-file-link';
+import './style.css';
+
 function getConfigBranch(configBranch: string): string {
   return configBranch || 'master';
 }
 
-function getRadixConfigFullName(radixConfigFullName: string): string {
-  return radixConfigFullName || 'radixconfig.yaml';
-}
-
 function getConfigBranchUrl({
   configBranch,
   repository,
@@ -37,16 +35,6 @@ function getConfigBranchUrl({
   return `${repository}/tree/${getConfigBranch(configBranch)}`;
 }
 
-function getConfigFileUrl({
-  configBranch,
-  radixConfigFullName,
-  repository,
-}: ApplicationRegistration): string {
-  return `${repository}/blob/${configBranch}/${getRadixConfigFullName(
-    radixConfigFullName
-  )}`;
-}
-
 export function PageConfiguration({ appName }: { appName: string }) {
   const {
     data: application,
@@ -88,10 +76,7 @@ export function PageConfiguration({ appName }: { appName: string }) {
                 </ExternalLink>
               </Typography>
               <Typography>
-                Config file{' '}
-                <ExternalLink href={getConfigFileUrl(registration)}>
-                  {getRadixConfigFullName(registration.radixConfigFullName)}
-                </ExternalLink>
+                Config file <RadixConfigFileLink registration={registration} />
               </Typography>
               <ConfigureApplicationGithub
                 refetch={refetch}
diff --git a/src/components/page-create-application/index.tsx b/src/components/page-create-application/index.tsx
index 25373943f..3ecb3adf7 100644
--- a/src/components/page-create-application/index.tsx
+++ b/src/components/page-create-application/index.tsx
@@ -9,8 +9,9 @@ import { ConfigureApplicationGithub } from '../configure-application-github';
 import CreateApplicationForm from '../create-application-form';
 import { ScrimPopup } from '../scrim-popup';
 
-import './style.css';
 import type { ApplicationRegistration } from '../../store/radix-api';
+import { NewApplyConfigPipelineLink } from '../link/apply-config-pipeline-link';
+import './style.css';
 
 function scrollToPosition(elementRef: Element, x: number, y: number): void {
   elementRef.scrollTo?.(x, y);
@@ -66,19 +67,9 @@ export default function PageCreateApplication() {
               />
               <Typography>
                 Now you can run the{' '}
-                <Typography
-                  as={Link}
-                  to={routeWithParams(
-                    routes.appJobNew,
-                    {
-                      appName: registration.name,
-                    },
-                    { pipeline: 'apply-config' }
-                  )}
-                  link
-                >
+                <NewApplyConfigPipelineLink appName={registration.name}>
                   apply-config pipeline job
-                </Typography>{' '}
+                </NewApplyConfigPipelineLink>
                 to apply radixconfig.yaml, or go to{' '}
                 <Typography
                   as={Link}

From 06830399c3b2b3769f909c69e9b3a8c3b4f6bb02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nils=20Gustav=20Str=C3=A5b=C3=B8?= <nst@equinor.com>
Date: Fri, 22 Nov 2024 13:00:25 +0100
Subject: [PATCH 2/8] prevent screen "flickering" when fetching data when
 current fetch has failed

---
 src/components/async-resource/async-resource.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/async-resource/async-resource.tsx b/src/components/async-resource/async-resource.tsx
index 7489b8244..39547eed8 100644
--- a/src/components/async-resource/async-resource.tsx
+++ b/src/components/async-resource/async-resource.tsx
@@ -35,8 +35,9 @@ export default function AsyncResource({
   }
 
   if (
-    asyncState.isError &&
-    !nonErrorCodes?.includes(getFetchErrorCode(asyncState.error))
+    asyncState.isError ||
+    (asyncState.error &&
+      !nonErrorCodes?.includes(getFetchErrorCode(asyncState.error)))
   ) {
     const { code, message } = getFetchErrorData(asyncState.error);
 

From 6b60ff482d1dbc311c3dce68acd10a6c0f3203d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nils=20Gustav=20Str=C3=A5b=C3=B8?= <nst@equinor.com>
Date: Fri, 22 Nov 2024 15:12:06 +0100
Subject: [PATCH 3/8] hide pipeline inputs when radixconfig is not applied, and
 show information about what to do with it

---
 src/components/alert/dev.tsx                  |  12 +-
 .../async-resource/async-resource.tsx         |   4 +-
 src/components/create-job-form/index.tsx      |  11 +-
 .../missing-radix-config-alert.tsx            |  28 +++
 .../pipeline-form-build-branches.tsx          | 192 ++++++++++--------
 .../create-job-form/pipeline-form-deploy.tsx  |  90 ++++----
 .../create-job-form/pipeline-form-promote.tsx | 176 ++++++++--------
 7 files changed, 282 insertions(+), 231 deletions(-)
 create mode 100644 src/components/create-job-form/missing-radix-config-alert.tsx

diff --git a/src/components/alert/dev.tsx b/src/components/alert/dev.tsx
index c33a1adb7..30e7725df 100644
--- a/src/components/alert/dev.tsx
+++ b/src/components/alert/dev.tsx
@@ -55,9 +55,7 @@ const testData: Array<ComponentType> = [
   ),
   () => (
     <Alert type="danger">
-      <Typography variant="h4">
-        That didn't work <image aria-label="Sad">😞</image>
-      </Typography>
+      <Typography variant="h4">That didn't work 😞</Typography>
       <div>
         The error message was <samp>error_msg</samp>
       </div>
@@ -72,9 +70,7 @@ const testData: Array<ComponentType> = [
   ),
   () => (
     <Alert type="danger">
-      <Typography variant="h4">
-        That didn't work <image aria-label="Sad">😞</image>
-      </Typography>
+      <Typography variant="h4">That didn't work 😞</Typography>
       <div>
         Error subscribing to resource <code>some resource</code> with parameter{' '}
         <code>some parameter</code>
@@ -118,9 +114,7 @@ const testData: Array<ComponentType> = [
   ),
   () => (
     <Alert type="danger">
-      <Typography variant="h4">
-        That didn't work <image aria-label="Sad">😞</image>
-      </Typography>
+      <Typography variant="h4">That didn't work 😞</Typography>
       <div>
         Error subscribing to resource <code>some_resource</code> with parameters{' '}
         <code>some_parameter</code>, <code>some_other_parameter</code>,{' '}
diff --git a/src/components/async-resource/async-resource.tsx b/src/components/async-resource/async-resource.tsx
index 39547eed8..9f47455d3 100644
--- a/src/components/async-resource/async-resource.tsx
+++ b/src/components/async-resource/async-resource.tsx
@@ -46,9 +46,7 @@ export default function AsyncResource({
         content={errorContent}
         defaultContent={
           <Alert type="danger">
-            <Typography variant="h4">
-              That didn't work <image aria-label="Sad">😞</image>
-            </Typography>
+            <Typography variant="h4">That didn't work 😞</Typography>
             <div className="grid grid--gap-small">
               <div>
                 <Typography variant="caption">Error message:</Typography>
diff --git a/src/components/create-job-form/index.tsx b/src/components/create-job-form/index.tsx
index e720c727a..d49e4f70e 100644
--- a/src/components/create-job-form/index.tsx
+++ b/src/components/create-job-form/index.tsx
@@ -55,16 +55,9 @@ export default function CreateJobForm({
     { appName },
     { pollingInterval }
   );
-
-  const hasEnvironments = useMemo(
-    () => application?.environments?.length > 0,
-    [application]
-  );
+  const hasEnvironments = application?.environments?.length;
   const buildBranches = useGetApplicationBranches(application);
-  const hasBuildBranches = useMemo(
-    () => Object.keys(buildBranches).length > 0,
-    [buildBranches]
-  );
+  const hasBuildBranches = Object.keys(buildBranches).length > 0;
   const [searchParams, setSearchParams] = useSearchParams();
   const setPipelineType = useCallback(
     (pipeline: string) => {
diff --git a/src/components/create-job-form/missing-radix-config-alert.tsx b/src/components/create-job-form/missing-radix-config-alert.tsx
new file mode 100644
index 000000000..3f5f32ea6
--- /dev/null
+++ b/src/components/create-job-form/missing-radix-config-alert.tsx
@@ -0,0 +1,28 @@
+import { Icon, Typography } from '@equinor/eds-core-react';
+import { info_circle } from '@equinor/eds-icons';
+import type { Application } from '../../store/radix-api';
+import { Alert } from '../alert';
+import { NewApplyConfigPipelineLink } from '../link/apply-config-pipeline-link';
+import { RadixConfigFileLink } from '../link/radix-config-file-link';
+
+type Props = { application: Application };
+
+export const MissingRadixConfigAlert = ({ application }: Props) => (
+  <Alert className="icon">
+    <Icon data={info_circle} color="primary" />
+    <div>
+      <Typography>
+        The <RadixConfigFileLink registration={application?.registration} />{' '}
+        file must be read by Radix before using this pipeline job.
+      </Typography>
+      <Typography>
+        Please run{' '}
+        <NewApplyConfigPipelineLink appName={application.name}>
+          apply-config
+        </NewApplyConfigPipelineLink>{' '}
+        to read <RadixConfigFileLink registration={application?.registration} />{' '}
+        from the application's GitHub repository.
+      </Typography>
+    </div>
+  </Alert>
+);
diff --git a/src/components/create-job-form/pipeline-form-build-branches.tsx b/src/components/create-job-form/pipeline-form-build-branches.tsx
index 8368bb9dd..ceacae98d 100644
--- a/src/components/create-job-form/pipeline-form-build-branches.tsx
+++ b/src/components/create-job-form/pipeline-form-build-branches.tsx
@@ -1,10 +1,12 @@
 import {
   Button,
   CircularProgress,
+  Icon,
   NativeSelect,
   TextField,
   Typography,
 } from '@equinor/eds-core-react';
+import { info_circle } from '@equinor/eds-icons';
 import { type ChangeEvent, type FormEvent, useState } from 'react';
 import {
   useTriggerPipelineBuildDeployMutation,
@@ -14,6 +16,7 @@ import { getFetchErrorMessage } from '../../store/utils';
 import { Alert } from '../alert';
 import { handlePromiseWithToast } from '../global-top-nav/styled-toaster';
 import type { FormProp } from './index';
+import { MissingRadixConfigAlert } from './missing-radix-config-alert';
 import { TargetEnvs } from './target-envs';
 import { useGetApplicationBranches } from './use-get-application-branches';
 
@@ -22,6 +25,7 @@ export function PipelineFormBuildBranches({
   application,
   pipelineName,
 }: FormProp) {
+  const hasEnvironments = application?.environments?.length > 0;
   const isBuildDeployPipeline = pipelineName === 'build-deploy';
   const [triggerBuild, buildState] = useTriggerPipelineBuildMutation();
   const [triggerBuildDeploy, buildDeployState] =
@@ -32,6 +36,7 @@ export function PipelineFormBuildBranches({
   const [branchFullName, setBranchFullName] = useState('');
   const [toEnvironment, setToEnvironment] = useState('');
   const branches = useGetApplicationBranches(application);
+  const hasBranches = Object.keys(branches).length > 0;
   const [filteredBranches, setFilteredBranches] = useState([]);
 
   const handleOnTextChange = ({
@@ -96,98 +101,119 @@ export function PipelineFormBuildBranches({
         disabled={createJobState.isLoading}
         className="grid grid--gap-medium"
       >
-        <div className="grid grid--gap-small input">
-          <Typography
-            className="input-label"
-            as="span"
-            group="navigation"
-            variant="label"
-            token={{ color: 'currentColor' }}
-          >
-            {isBuildDeployPipeline ? (
-              <>Build and deploy a git branch</>
-            ) : (
-              <>Build (but do not deploy) a git branch</>
-            )}
-          </Typography>
-          <Typography
-            group="input"
-            variant="text"
-            token={{ color: 'currentColor' }}
-          >
-            Git branch to build
-          </Typography>
-          <NativeSelect
-            value={branch}
-            id="BranchSelect"
-            label=""
-            onChange={handleChange}
-          >
-            <option hidden value="">
-              — Please select —
-            </option>
-            {Object.keys(branches ?? {}).map((branch, i) => (
-              <option key={i} value={branch}>
-                {branch}
+        {hasEnvironments && hasBranches ? (
+          <div className="grid grid--gap-small input">
+            <Typography
+              className="input-label"
+              as="span"
+              group="navigation"
+              variant="label"
+              token={{ color: 'currentColor' }}
+            >
+              {isBuildDeployPipeline ? (
+                <>Build and deploy a git branch</>
+              ) : (
+                <>Build (but do not deploy) a git branch</>
+              )}
+            </Typography>
+            <Typography
+              group="input"
+              variant="text"
+              token={{ color: 'currentColor' }}
+            >
+              Git branch to build
+            </Typography>
+            <NativeSelect
+              value={branch}
+              id="BranchSelect"
+              label=""
+              onChange={handleChange}
+            >
+              <option hidden value="">
+                — Please select —
               </option>
-            ))}
-          </NativeSelect>
-          {isAnyValidRegex(selectedBranch) && (
-            <>
-              <Typography
-                group="input"
-                variant="text"
-                token={{ color: 'currentColor' }}
-              >
-                Git branch full name
-              </Typography>
-              <fieldset>
-                <TextField
-                  id="branch_full_name_field"
-                  helperText={`Pattern: ${selectedBranch}`}
-                  name="branchFullName"
-                  value={branchFullName}
-                  onChange={handleOnTextChange}
-                />
-              </fieldset>
-            </>
-          )}
-          {!isAnyValidRegex(branch) &&
-            branch &&
-            filteredBranches?.length > 0 && (
-              <div className="grid grid--gap-small input">
+              {Object.keys(branches ?? {}).map((branch, i) => (
+                <option key={i} value={branch}>
+                  {branch}
+                </option>
+              ))}
+            </NativeSelect>
+            {isAnyValidRegex(selectedBranch) && (
+              <>
                 <Typography
                   group="input"
                   variant="text"
                   token={{ color: 'currentColor' }}
                 >
-                  Environment (optional)
+                  Git branch full name
                 </Typography>
-                <NativeSelect
-                  id="ToEnvironmentSelect"
-                  label=""
-                  name="toEnvironment"
-                  onChange={(e) => setToEnvironment(e.target.value)}
-                  value={toEnvironment}
-                >
-                  <option value="">
-                    All environments build from the branch {branch}
-                  </option>
-                  {filteredBranches?.map((envName) => (
-                    <option key={envName} value={envName}>
-                      {envName}
+                <fieldset>
+                  <TextField
+                    id="branch_full_name_field"
+                    helperText={`Pattern: ${selectedBranch}`}
+                    name="branchFullName"
+                    value={branchFullName}
+                    onChange={handleOnTextChange}
+                  />
+                </fieldset>
+              </>
+            )}
+            {!isAnyValidRegex(branch) &&
+              branch &&
+              filteredBranches?.length > 0 && (
+                <div className="grid grid--gap-small input">
+                  <Typography
+                    group="input"
+                    variant="text"
+                    token={{ color: 'currentColor' }}
+                  >
+                    Environment (optional)
+                  </Typography>
+                  <NativeSelect
+                    id="ToEnvironmentSelect"
+                    label=""
+                    name="toEnvironment"
+                    onChange={(e) => setToEnvironment(e.target.value)}
+                    value={toEnvironment}
+                  >
+                    <option value="">
+                      All environments build from the branch {branch}
                     </option>
-                  ))}
-                </NativeSelect>
-              </div>
+                    {filteredBranches?.map((envName) => (
+                      <option key={envName} value={envName}>
+                        {envName}
+                      </option>
+                    ))}
+                  </NativeSelect>
+                </div>
+              )}
+            {isBuildDeployPipeline && branch && !isAnyValidRegex(branch) && (
+              <TargetEnvs
+                targetEnvs={toEnvironment ? [toEnvironment] : filteredBranches}
+                branch={branch}
+              />
             )}
-          {isBuildDeployPipeline && branch && !isAnyValidRegex(branch) && (
-            <TargetEnvs
-              targetEnvs={toEnvironment ? [toEnvironment] : filteredBranches}
-              branch={branch}
-            />
-          )}
-        </div>
+          </div>
+        ) : (
+          <>
+            {!hasEnvironments ? (
+              <MissingRadixConfigAlert application={application} />
+            ) : (
+              <>
+                {!hasBranches && (
+                  <Alert className="icon">
+                    <Icon data={info_circle} color="primary" />
+                    <div>
+                      <Typography>
+                        No environments are configured to be built by Radix.
+                      </Typography>
+                    </div>
+                  </Alert>
+                )}
+              </>
+            )}
+          </>
+        )}
 
         <div className="o-action-bar">
           {createJobState.isLoading && (
diff --git a/src/components/create-job-form/pipeline-form-deploy.tsx b/src/components/create-job-form/pipeline-form-deploy.tsx
index 5ebcdb977..ced4c862d 100644
--- a/src/components/create-job-form/pipeline-form-deploy.tsx
+++ b/src/components/create-job-form/pipeline-form-deploy.tsx
@@ -11,8 +11,10 @@ import { getFetchErrorMessage } from '../../store/utils';
 import { Alert } from '../alert';
 import { handlePromiseWithToast } from '../global-top-nav/styled-toaster';
 import type { FormProp } from './index';
+import { MissingRadixConfigAlert } from './missing-radix-config-alert';
 
 export function PipelineFormDeploy({ application, onSuccess }: FormProp) {
+  const hasEnvironments = application?.environments?.length > 0;
   const [trigger, state] = useTriggerPipelineDeployMutation();
   const [toEnvironment, setToEnvironment] = useState('');
   const handleSubmit = handlePromiseWithToast(
@@ -35,57 +37,61 @@ export function PipelineFormDeploy({ application, onSuccess }: FormProp) {
   return (
     <form onSubmit={handleSubmit}>
       <fieldset disabled={state.isLoading} className="grid grid--gap-medium">
-        <div className="grid grid--gap-small input">
-          <Typography
-            className="input-label"
-            as="span"
-            group="navigation"
-            variant="label"
-            token={{ color: 'currentColor' }}
-          >
-            Deploy an application
-          </Typography>
+        {hasEnvironments ? (
           <div className="grid grid--gap-small input">
             <Typography
-              group="input"
-              variant="text"
+              className="input-label"
+              as="span"
+              group="navigation"
+              variant="label"
               token={{ color: 'currentColor' }}
             >
-              Environment
+              Deploy an application
             </Typography>
-            <NativeSelect
-              id="ToEnvironmentSelect"
-              label=""
-              name="toEnvironment"
-              onChange={(e) => setToEnvironment(e.target.value)}
-              value={toEnvironment}
-            >
-              <option hidden value="">
-                — Please select —
-              </option>
-              {application.environments?.map(({ name }, i) => (
-                <option key={i} value={name}>
-                  {name}
+            <div className="grid grid--gap-small input">
+              <Typography
+                group="input"
+                variant="text"
+                token={{ color: 'currentColor' }}
+              >
+                Environment
+              </Typography>
+              <NativeSelect
+                id="ToEnvironmentSelect"
+                label=""
+                name="toEnvironment"
+                onChange={(e) => setToEnvironment(e.target.value)}
+                value={toEnvironment}
+              >
+                <option hidden value="">
+                  — Please select —
                 </option>
-              ))}
-            </NativeSelect>
+                {application.environments?.map(({ name }, i) => (
+                  <option key={i} value={name}>
+                    {name}
+                  </option>
+                ))}
+              </NativeSelect>
+            </div>
           </div>
-          <div className="o-action-bar">
-            {state.isLoading && (
-              <div>
-                <CircularProgress size={16} /> Creating…
-              </div>
-            )}
-            {state.isError && (
-              <Alert type="danger">
-                Failed to create job. {getFetchErrorMessage(state.error)}
-              </Alert>
-            )}
+        ) : (
+          <MissingRadixConfigAlert application={application} />
+        )}
+        <div className="o-action-bar">
+          {state.isLoading && (
             <div>
-              <Button disabled={!isValid} type="submit">
-                Create job
-              </Button>
+              <CircularProgress size={16} /> Creating…
             </div>
+          )}
+          {state.isError && (
+            <Alert type="danger">
+              Failed to create job. {getFetchErrorMessage(state.error)}
+            </Alert>
+          )}
+          <div>
+            <Button disabled={!isValid} type="submit">
+              Create job
+            </Button>
           </div>
         </div>
       </fieldset>
diff --git a/src/components/create-job-form/pipeline-form-promote.tsx b/src/components/create-job-form/pipeline-form-promote.tsx
index c4051b9a5..7193853ab 100644
--- a/src/components/create-job-form/pipeline-form-promote.tsx
+++ b/src/components/create-job-form/pipeline-form-promote.tsx
@@ -21,8 +21,10 @@ import { getFetchErrorMessage } from '../../store/utils';
 import { Alert } from '../alert';
 import { handlePromiseWithToast } from '../global-top-nav/styled-toaster';
 import type { FormProp } from './index';
+import { MissingRadixConfigAlert } from './missing-radix-config-alert';
 
 export function PipelineFormPromote({ application, onSuccess }: FormProp) {
+  const hasEnvironments = application?.environments?.length > 0;
   const [searchParams] = useSearchParams();
   const [trigger, state] = useTriggerPipelinePromoteMutation();
   const { data: deployments } = useGetDeploymentsQuery(
@@ -71,101 +73,105 @@ export function PipelineFormPromote({ application, onSuccess }: FormProp) {
   return (
     <form onSubmit={handleSubmit}>
       <fieldset disabled={state.isLoading} className="grid grid--gap-medium">
-        <div className="grid grid--gap-small input">
-          <Typography
-            className="input-label"
-            as="span"
-            group="navigation"
-            variant="label"
-            token={{ color: 'currentColor' }}
-          >
-            Promote an existing deployment to an environment
-          </Typography>
-          <Typography
-            group="input"
-            variant="text"
-            token={{ color: 'currentColor' }}
-          >
-            Deployment to promote
-          </Typography>
-          <NativeSelect
-            id="DeploymentNameSelect"
-            label=""
-            onChange={(e) => setDeploymentName(e.target.value)}
-            name="deploymentName"
-            value={deploymentName}
-          >
-            <option hidden value="">
-              — Please select —
-            </option>
-            {Object.keys(groupedDeployments).map((key, i) => (
-              <optgroup key={i} label={key}>
-                {groupedDeployments[key].map((x, j) => (
-                  <option key={j} value={x.name}>
-                    {smallDeploymentName(x.name)}{' '}
-                    {x.activeTo
-                      ? `(${formatDateTime(x.activeFrom)})`
-                      : '(currently active)'}
-                    {x.gitCommitHash &&
-                      ` ${smallGithubCommitHash(x.gitCommitHash)}`}
-                    {x.gitTags && `, ${x.gitTags}`}
-                  </option>
-                ))}
-              </optgroup>
-            ))}
-          </NativeSelect>
-
-          {selectedDeployment && (
+        {hasEnvironments ? (
+          <div className="grid grid--gap-small input">
             <Typography
-              className="input input-label"
+              className="input-label"
               as="span"
               group="navigation"
               variant="label"
               token={{ color: 'currentColor' }}
             >
-              Active {selectedDeployment.activeTo ? 'from' : 'since'}{' '}
-              <RelativeToNow time={selectedDeployment.activeFrom} />{' '}
-              {selectedDeployment.activeTo && (
-                <>
-                  to <RelativeToNow time={selectedDeployment.activeTo} />{' '}
-                </>
-              )}
-              on environment {selectedDeployment.environment}
+              Promote an existing deployment to an environment
             </Typography>
-          )}
-        </div>
+            <Typography
+              group="input"
+              variant="text"
+              token={{ color: 'currentColor' }}
+            >
+              Deployment to promote
+            </Typography>
+            <NativeSelect
+              id="DeploymentNameSelect"
+              label=""
+              onChange={(e) => setDeploymentName(e.target.value)}
+              name="deploymentName"
+              value={deploymentName}
+            >
+              <option hidden value="">
+                — Please select —
+              </option>
+              {Object.keys(groupedDeployments).map((key, i) => (
+                <optgroup key={i} label={key}>
+                  {groupedDeployments[key].map((x, j) => (
+                    <option key={j} value={x.name}>
+                      {smallDeploymentName(x.name)}{' '}
+                      {x.activeTo
+                        ? `(${formatDateTime(x.activeFrom)})`
+                        : '(currently active)'}
+                      {x.gitCommitHash &&
+                        ` ${smallGithubCommitHash(x.gitCommitHash)}`}
+                      {x.gitTags && `, ${x.gitTags}`}
+                    </option>
+                  ))}
+                </optgroup>
+              ))}
+            </NativeSelect>
 
-        <div className="grid grid--gap-small input">
-          <Typography
-            group="input"
-            variant="text"
-            token={{ color: 'currentColor' }}
-          >
-            Target environment
-          </Typography>
-          <NativeSelect
-            id="ToEnvironmentSelect"
-            label=""
-            name="toEnvironment"
-            onChange={(e) => setToEnvironment(e.target.value)}
-            value={toEnvironment}
-          >
-            <option hidden value="">
-              — Please select —
-            </option>
-            {application.environments?.map(({ name, activeDeployment }, i) => (
-              <option
-                key={i}
-                value={name}
-                disabled={
-                  activeDeployment && activeDeployment.name === deploymentName
-                }
+            {selectedDeployment && (
+              <Typography
+                className="input input-label"
+                as="span"
+                group="navigation"
+                variant="label"
+                token={{ color: 'currentColor' }}
               >
-                {name}
+                Active {selectedDeployment.activeTo ? 'from' : 'since'}{' '}
+                <RelativeToNow time={selectedDeployment.activeFrom} />{' '}
+                {selectedDeployment.activeTo && (
+                  <>
+                    to <RelativeToNow time={selectedDeployment.activeTo} />{' '}
+                  </>
+                )}
+                on environment {selectedDeployment.environment}
+              </Typography>
+            )}
+            <Typography
+              group="input"
+              variant="text"
+              token={{ color: 'currentColor' }}
+            >
+              Target environment
+            </Typography>
+            <NativeSelect
+              id="ToEnvironmentSelect"
+              label=""
+              name="toEnvironment"
+              onChange={(e) => setToEnvironment(e.target.value)}
+              value={toEnvironment}
+            >
+              <option hidden value="">
+                — Please select —
               </option>
-            ))}
-          </NativeSelect>
-        </div>
+              {application.environments?.map(
+                ({ name, activeDeployment }, i) => (
+                  <option
+                    key={i}
+                    value={name}
+                    disabled={
+                      activeDeployment &&
+                      activeDeployment.name === deploymentName
+                    }
+                  >
+                    {name}
+                  </option>
+                )
+              )}
+            </NativeSelect>
+          </div>
+        ) : (
+          <MissingRadixConfigAlert application={application} />
+        )}
         <div className="o-action-bar">
           {state.isLoading && (
             <div>

From 18ff6ba03146c6a965607483ba42da87e5afbf9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nils=20Gustav=20Str=C3=A5b=C3=B8?= <nst@equinor.com>
Date: Mon, 25 Nov 2024 10:01:13 +0100
Subject: [PATCH 4/8] make links in environment card wrap

---
 .../environments-summary/environment-card.tsx | 31 ++++++++-----------
 .../environment-ingress.tsx                   | 24 +++++++-------
 2 files changed, 24 insertions(+), 31 deletions(-)

diff --git a/src/components/environments-summary/environment-card.tsx b/src/components/environments-summary/environment-card.tsx
index 22e4f5692..6128c4f6a 100644
--- a/src/components/environments-summary/environment-card.tsx
+++ b/src/components/environments-summary/environment-card.tsx
@@ -53,11 +53,8 @@ const DeploymentDetails: FunctionComponent<{
   deployment: Readonly<DeploymentSummary>;
 }> = ({ appName, deployment }) =>
   !deployment ? (
-    <Typography
-      color="disabled"
-      className="grid grid--auto-columns grid--gap-small grid--align-center"
-    >
-      <Icon data={link} />
+    <Typography color="disabled">
+      <Icon data={link} style={{ marginRight: 'var(--eds_spacing_small)' }} />
       No active deployment
     </Typography>
   ) : (
@@ -67,15 +64,13 @@ const DeploymentDetails: FunctionComponent<{
       link
       token={{ textDecoration: 'none' }}
     >
-      <span className="grid grid--auto-columns grid--gap-small grid--align-center">
-        <Icon data={send} />
-        <Typography as="span" color="primary">
-          deployment{' '}
-          <Typography as="span" color="gray">
-            (<RelativeToNow time={new Date(deployment.activeFrom)} />)
-          </Typography>
+      <Icon data={send} style={{ marginRight: 'var(--eds_spacing_small)' }} />
+      <Typography as="span" color="primary">
+        deployment{' '}
+        <Typography as="span" color="gray">
+          (<RelativeToNow time={new Date(deployment.activeFrom)} />)
         </Typography>
-      </span>
+      </Typography>
     </Typography>
   );
 
@@ -161,11 +156,11 @@ export const EnvironmentCard: FunctionComponent<EnvironmentCardProps> = ({
     ? {
         header: <></>,
         body: (
-          <Typography
-            color="disabled"
-            className="grid grid--auto-columns grid--gap-small grid--align-center"
-          >
-            <Icon data={link} />
+          <Typography color="disabled">
+            <Icon
+              data={link}
+              style={{ marginRight: 'var(--eds_spacing_small)' }}
+            />
             No link available
           </Typography>
         ),
diff --git a/src/components/environments-summary/environment-ingress.tsx b/src/components/environments-summary/environment-ingress.tsx
index 5250cbcb3..b6fe384e3 100644
--- a/src/components/environments-summary/environment-ingress.tsx
+++ b/src/components/environments-summary/environment-ingress.tsx
@@ -34,8 +34,8 @@ const ComponentDetails: FunctionComponent<{
   icon: IconData;
   component: Readonly<Component>;
 }> = ({ icon, component }) => (
-  <span className="grid grid--auto-columns grid--gap-small grid--align-center">
-    <Icon data={icon} />
+  <>
+    <Icon data={icon} style={{ marginRight: 'var(--eds_spacing_small)' }} />
     <Typography
       as="span"
       token={{
@@ -46,7 +46,7 @@ const ComponentDetails: FunctionComponent<{
     >
       {component.name}
     </Typography>
-  </span>
+  </>
 );
 
 export const EnvironmentIngress: FunctionComponent<EnvironmentIngressProps> = ({
@@ -82,21 +82,19 @@ export const EnvironmentIngress: FunctionComponent<EnvironmentIngressProps> = ({
           <ExternalLink
             key={component.name}
             href={`https://${component.variables[URL_VAR_NAME]}`}
-            className="grid grid--auto-columns grid--gap-x-small grid--align-center"
+            className=""
           >
             <ComponentDetails icon={link} component={component} />
           </ExternalLink>
         ))
       ) : (
-        <span>
-          <Typography
-            color="disabled"
-            className="grid grid--auto-columns grid--gap-small grid--align-center"
-          >
-            <Icon data={link} />
-            No link available
-          </Typography>
-        </span>
+        <Typography color="disabled">
+          <Icon
+            data={link}
+            style={{ marginRight: 'var(--eds_spacing_small)' }}
+          />
+          No link available
+        </Typography>
       )}
       {comps.passive
         .filter(({ status }) => status === 'Outdated')

From 6a41e00775553a6c179bf13f5a9cec13f4c172bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nils=20Gustav=20Str=C3=A5b=C3=B8?= <nst@equinor.com>
Date: Mon, 25 Nov 2024 12:26:39 +0100
Subject: [PATCH 5/8] environment info when no radixconfig

---
 src/components/app-overview/index.tsx         | 18 ++--
 src/components/component/dns-aliases.tsx      | 20 ++--
 .../missing-radix-config-alert.tsx            |  9 +-
 src/components/environments-summary/index.tsx | 34 ++++---
 src/components/jobs-list/index.tsx            | 91 ++++++++++---------
 5 files changed, 84 insertions(+), 88 deletions(-)

diff --git a/src/components/app-overview/index.tsx b/src/components/app-overview/index.tsx
index e045612e3..5e776cb1a 100644
--- a/src/components/app-overview/index.tsx
+++ b/src/components/app-overview/index.tsx
@@ -69,18 +69,14 @@ export function AppOverview({ appName }: { appName: string }) {
             title={'DNS external aliases'}
           />
         )}
-        {environments?.length > 0 && (
+        <span className="grid grid--gap-small">
           <Typography variant="h4">Environments</Typography>
-        )}
-        <EnvironmentsSummary
-          appName={appName}
-          envs={environments}
-          repository={registration?.repository}
-        />
-
-        {jobs?.length > 0 && (
-          <Typography variant="h4">Latest pipeline jobs</Typography>
-        )}
+          <EnvironmentsSummary
+            appName={appName}
+            envs={environments}
+            repository={registration?.repository}
+          />
+        </span>
         <JobsList appName={appName} jobs={jobs} limit={LATEST_JOBS_LIMIT} />
       </AsyncResource>
     </main>
diff --git a/src/components/component/dns-aliases.tsx b/src/components/component/dns-aliases.tsx
index f9ebf0d10..cfddf7ab3 100644
--- a/src/components/component/dns-aliases.tsx
+++ b/src/components/component/dns-aliases.tsx
@@ -17,10 +17,10 @@ export const DNSAliases: FunctionComponent<DefaultAppAliasProps> = ({
   title,
 }) => (
   <>
-    {dnsAliases?.length > 0 &&
-      (dnsAliases.length == 1 ? (
-        <div className="grid grid--gap-x-small">
-          <Typography variant="h4">{title}</Typography>
+    {dnsAliases?.length > 0 && (
+      <div className="grid grid--gap-small">
+        <Typography variant="h4">{title}</Typography>
+        {dnsAliases.length == 1 ? (
           <Typography as="span">
             <DNSAlias
               appName={appName}
@@ -29,12 +29,7 @@ export const DNSAliases: FunctionComponent<DefaultAppAliasProps> = ({
               environmentName={dnsAliases[0].environmentName}
             />
           </Typography>
-        </div>
-      ) : (
-        <>
-          <Typography className="whitespace-nowrap" variant="h4" as="span">
-            {title}
-          </Typography>
+        ) : (
           <Accordion className="accordion elevated" chevronPosition="right">
             <Accordion.Item isExpanded={false}>
               <Accordion.Header>
@@ -60,7 +55,8 @@ export const DNSAliases: FunctionComponent<DefaultAppAliasProps> = ({
               </Accordion.Panel>
             </Accordion.Item>
           </Accordion>
-        </>
-      ))}
+        )}
+      </div>
+    )}
   </>
 );
diff --git a/src/components/create-job-form/missing-radix-config-alert.tsx b/src/components/create-job-form/missing-radix-config-alert.tsx
index 3f5f32ea6..3fcf7868c 100644
--- a/src/components/create-job-form/missing-radix-config-alert.tsx
+++ b/src/components/create-job-form/missing-radix-config-alert.tsx
@@ -10,19 +10,18 @@ type Props = { application: Application };
 export const MissingRadixConfigAlert = ({ application }: Props) => (
   <Alert className="icon">
     <Icon data={info_circle} color="primary" />
-    <div>
+    <span className="grid grid--gap-small">
       <Typography>
         The <RadixConfigFileLink registration={application?.registration} />{' '}
         file must be read by Radix before using this pipeline job.
       </Typography>
       <Typography>
-        Please run{' '}
+        Run the{' '}
         <NewApplyConfigPipelineLink appName={application.name}>
           apply-config
         </NewApplyConfigPipelineLink>{' '}
-        to read <RadixConfigFileLink registration={application?.registration} />{' '}
-        from the application's GitHub repository.
+        pipeline job to read the file from the application's GitHub repository.
       </Typography>
-    </div>
+    </span>
   </Alert>
 );
diff --git a/src/components/environments-summary/index.tsx b/src/components/environments-summary/index.tsx
index d6d4242b9..1e36890cc 100644
--- a/src/components/environments-summary/index.tsx
+++ b/src/components/environments-summary/index.tsx
@@ -1,14 +1,9 @@
 import { Typography } from '@equinor/eds-core-react';
 import * as PropTypes from 'prop-types';
 import type { FunctionComponent } from 'react';
-
-import { EnvironmentCard } from './environment-card';
-
-import { externalUrls } from '../../externalUrls';
 import type { EnvironmentSummary } from '../../store/radix-api';
-
 import { NewApplyConfigPipelineLink } from '../link/apply-config-pipeline-link';
-import { ExternalLink } from '../link/external-link';
+import { EnvironmentCard } from './environment-card';
 import './style.css';
 
 export interface EnvironmentsSummaryProps {
@@ -21,27 +16,30 @@ export const EnvironmentsSummary: FunctionComponent<
   EnvironmentsSummaryProps
 > = ({ appName, envs, repository }) => {
   return (
-    <div className="environments-summary">
+    <>
       {envs?.length > 0 ? (
-        envs.map((env, i) => (
-          <EnvironmentCard key={i} {...{ appName, env, repository }} />
-        ))
+        <div className="environments-summary">
+          {envs.map((env, i) => (
+            <EnvironmentCard key={i} {...{ appName, env, repository }} />
+          ))}
+        </div>
       ) : (
-        <span>
-          <Typography bold>No enironments.</Typography>
+        <span className="grid grid--gap-x-small">
+          <Typography>
+            The radixconfig.yaml file must be read by Radix in order to show
+            information about environments.
+          </Typography>
           <Typography>
-            Please run the{' '}
+            Run the{' '}
             <NewApplyConfigPipelineLink appName={appName}>
               apply-config
             </NewApplyConfigPipelineLink>{' '}
-            pipeline job to apply{' '}
-            <ExternalLink href={externalUrls.referenceRadixConfig}>
-              radixconfig.yaml
-            </ExternalLink>
+            pipeline job to read the file from the application's GitHub
+            repository.
           </Typography>
         </span>
       )}
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/jobs-list/index.tsx b/src/components/jobs-list/index.tsx
index 508c7d935..eb9ecf076 100644
--- a/src/components/jobs-list/index.tsx
+++ b/src/components/jobs-list/index.tsx
@@ -55,48 +55,55 @@ export const JobsList: FunctionComponent<JobsListProps> = ({
     );
   }, [dateSort, envSort, jobs, limit, pipelineSort]);
 
-  return sortedData.length > 0 ? (
-    <div className="jobs-list grid grid--table-overflow">
-      <Table>
-        <Table.Head>
-          <Table.Row>
-            <Table.Cell>ID</Table.Cell>
-            <Table.Cell
-              sort="none"
-              onClick={() => setDateSort(getNewSortDir(dateSort))}
-            >
-              Date/Time
-              <TableSortIcon direction={dateSort} />
-            </Table.Cell>
-            <Table.Cell
-              sort="none"
-              onClick={() => setEnvSort(getNewSortDir(envSort, true))}
-            >
-              Environment
-              <TableSortIcon direction={envSort} />
-            </Table.Cell>
-            <Table.Cell>Status</Table.Cell>
-            <Table.Cell
-              sort="none"
-              onClick={() => setPipelineSort(getNewSortDir(pipelineSort, true))}
-            >
-              Pipeline
-              <TableSortIcon direction={pipelineSort} />
-            </Table.Cell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          {sortedData.map((x) => (
-            <JobSummaryTableRow key={x.name} appName={appName} job={x} />
-          ))}
-        </Table.Body>
-      </Table>
-    </div>
-  ) : (
-    <>
-      <Typography variant="h4">No pipeline jobs yet</Typography>
-      <Typography>Push to GitHub to trigger a job</Typography>
-    </>
+  return (
+    <span className="grid grid--gap-small">
+      <Typography variant="h4">Latest pipeline jobs</Typography>
+      {sortedData.length > 0 ? (
+        <div className="jobs-list grid grid--table-overflow">
+          <Table>
+            <Table.Head>
+              <Table.Row>
+                <Table.Cell>ID</Table.Cell>
+                <Table.Cell
+                  sort="none"
+                  onClick={() => setDateSort(getNewSortDir(dateSort))}
+                >
+                  Date/Time
+                  <TableSortIcon direction={dateSort} />
+                </Table.Cell>
+                <Table.Cell
+                  sort="none"
+                  onClick={() => setEnvSort(getNewSortDir(envSort, true))}
+                >
+                  Environment
+                  <TableSortIcon direction={envSort} />
+                </Table.Cell>
+                <Table.Cell>Status</Table.Cell>
+                <Table.Cell
+                  sort="none"
+                  onClick={() =>
+                    setPipelineSort(getNewSortDir(pipelineSort, true))
+                  }
+                >
+                  Pipeline
+                  <TableSortIcon direction={pipelineSort} />
+                </Table.Cell>
+              </Table.Row>
+            </Table.Head>
+            <Table.Body>
+              {sortedData.map((x) => (
+                <JobSummaryTableRow key={x.name} appName={appName} job={x} />
+              ))}
+            </Table.Body>
+          </Table>
+        </div>
+      ) : (
+        <span className="grid grid--gap-small">
+          <Typography>No pipeline jobs yet</Typography>
+          <Typography>Push to GitHub to trigger a job</Typography>
+        </span>
+      )}
+    </span>
   );
 };
 

From 0b2a870099dde70b2594b4a4e03e6956507e9f9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nils=20Gustav=20Str=C3=A5b=C3=B8?= <nst@equinor.com>
Date: Mon, 25 Nov 2024 12:29:16 +0100
Subject: [PATCH 6/8] show info alert when no environments

---
 src/components/environments-summary/index.tsx | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/components/environments-summary/index.tsx b/src/components/environments-summary/index.tsx
index 1e36890cc..4988142f9 100644
--- a/src/components/environments-summary/index.tsx
+++ b/src/components/environments-summary/index.tsx
@@ -1,10 +1,12 @@
-import { Typography } from '@equinor/eds-core-react';
+import { Icon, Typography } from '@equinor/eds-core-react';
 import * as PropTypes from 'prop-types';
 import type { FunctionComponent } from 'react';
 import type { EnvironmentSummary } from '../../store/radix-api';
 import { NewApplyConfigPipelineLink } from '../link/apply-config-pipeline-link';
 import { EnvironmentCard } from './environment-card';
 import './style.css';
+import { info_circle } from '@equinor/eds-icons';
+import { Alert } from '../alert';
 
 export interface EnvironmentsSummaryProps {
   appName: string;
@@ -24,20 +26,23 @@ export const EnvironmentsSummary: FunctionComponent<
           ))}
         </div>
       ) : (
-        <span className="grid grid--gap-x-small">
-          <Typography>
-            The radixconfig.yaml file must be read by Radix in order to show
-            information about environments.
-          </Typography>
-          <Typography>
-            Run the{' '}
-            <NewApplyConfigPipelineLink appName={appName}>
-              apply-config
-            </NewApplyConfigPipelineLink>{' '}
-            pipeline job to read the file from the application's GitHub
-            repository.
-          </Typography>
-        </span>
+        <Alert className="icon">
+          <Icon data={info_circle} color="primary" />
+          <span className="grid grid--gap-x-small">
+            <Typography>
+              The radixconfig.yaml file must be read by Radix in order to show
+              information about environments.
+            </Typography>
+            <Typography>
+              Run the{' '}
+              <NewApplyConfigPipelineLink appName={appName}>
+                apply-config
+              </NewApplyConfigPipelineLink>{' '}
+              pipeline job to read the file from the application's GitHub
+              repository.
+            </Typography>
+          </span>
+        </Alert>
       )}
     </>
   );

From 9cb91a7145f80ba7c85fc8ac0e2bc4b72333ffee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nils=20Gustav=20Str=C3=A5b=C3=B8?= <nst@equinor.com>
Date: Mon, 25 Nov 2024 13:09:55 +0100
Subject: [PATCH 7/8] show info box on empty environments

---
 src/components/app-overview/index.tsx         | 15 +-----
 src/components/environments-summary/dev.tsx   |  4 +-
 src/components/environments-summary/index.tsx | 46 +++++++++----------
 src/components/page-environments/index.tsx    |  7 +--
 4 files changed, 27 insertions(+), 45 deletions(-)

diff --git a/src/components/app-overview/index.tsx b/src/components/app-overview/index.tsx
index 5e776cb1a..af6977b22 100644
--- a/src/components/app-overview/index.tsx
+++ b/src/components/app-overview/index.tsx
@@ -26,14 +26,7 @@ export function AppOverview({ appName }: { appName: string }) {
     { skip: !appName, pollingInterval }
   );
 
-  const {
-    appAlias,
-    dnsAliases,
-    dnsExternalAliases,
-    environments,
-    jobs,
-    registration,
-  } = application ?? {};
+  const { appAlias, dnsAliases, dnsExternalAliases, jobs } = application ?? {};
 
   return (
     <main className="grid grid--gap-medium">
@@ -71,11 +64,7 @@ export function AppOverview({ appName }: { appName: string }) {
         )}
         <span className="grid grid--gap-small">
           <Typography variant="h4">Environments</Typography>
-          <EnvironmentsSummary
-            appName={appName}
-            envs={environments}
-            repository={registration?.repository}
-          />
+          {application && <EnvironmentsSummary application={application} />}
         </span>
         <JobsList appName={appName} jobs={jobs} limit={LATEST_JOBS_LIMIT} />
       </AsyncResource>
diff --git a/src/components/environments-summary/dev.tsx b/src/components/environments-summary/dev.tsx
index eec12be9e..b3facfa8e 100644
--- a/src/components/environments-summary/dev.tsx
+++ b/src/components/environments-summary/dev.tsx
@@ -80,7 +80,9 @@ export default (
   >
     {testData.map((x, i) => (
       <div key={i}>
-        <EnvironmentsSummary appName="appName" envs={x} />
+        <EnvironmentsSummary
+          application={{ environments: x, userIsAdmin: true }}
+        />
         {i !== testData.length - 1 && <Divider />}
       </div>
     ))}
diff --git a/src/components/environments-summary/index.tsx b/src/components/environments-summary/index.tsx
index 4988142f9..56e233509 100644
--- a/src/components/environments-summary/index.tsx
+++ b/src/components/environments-summary/index.tsx
@@ -1,28 +1,30 @@
 import { Icon, Typography } from '@equinor/eds-core-react';
-import * as PropTypes from 'prop-types';
-import type { FunctionComponent } from 'react';
-import type { EnvironmentSummary } from '../../store/radix-api';
+import type { Application } from '../../store/radix-api';
 import { NewApplyConfigPipelineLink } from '../link/apply-config-pipeline-link';
 import { EnvironmentCard } from './environment-card';
 import './style.css';
 import { info_circle } from '@equinor/eds-icons';
 import { Alert } from '../alert';
+import { RadixConfigFileLink } from '../link/radix-config-file-link';
 
-export interface EnvironmentsSummaryProps {
-  appName: string;
-  envs?: Readonly<Array<EnvironmentSummary>>;
-  repository?: string;
-}
+export type EnvironmentsSummaryProps = {
+  application: Application;
+};
 
-export const EnvironmentsSummary: FunctionComponent<
-  EnvironmentsSummaryProps
-> = ({ appName, envs, repository }) => {
+export const EnvironmentsSummary = ({
+  application,
+}: EnvironmentsSummaryProps) => {
   return (
     <>
-      {envs?.length > 0 ? (
+      {application.environments?.length > 0 ? (
         <div className="environments-summary">
-          {envs.map((env, i) => (
-            <EnvironmentCard key={i} {...{ appName, env, repository }} />
+          {application.environments?.map((env, i) => (
+            <EnvironmentCard
+              key={i}
+              appName={application.name}
+              env={env}
+              repository={application.registration?.repository}
+            />
           ))}
         </div>
       ) : (
@@ -30,12 +32,14 @@ export const EnvironmentsSummary: FunctionComponent<
           <Icon data={info_circle} color="primary" />
           <span className="grid grid--gap-x-small">
             <Typography>
-              The radixconfig.yaml file must be read by Radix in order to show
-              information about environments.
+              The{' '}
+              <RadixConfigFileLink registration={application.registration} />{' '}
+              file must be read by Radix in order to show information about
+              environments.
             </Typography>
             <Typography>
               Run the{' '}
-              <NewApplyConfigPipelineLink appName={appName}>
+              <NewApplyConfigPipelineLink appName={application.name}>
                 apply-config
               </NewApplyConfigPipelineLink>{' '}
               pipeline job to read the file from the application's GitHub
@@ -47,11 +51,3 @@ export const EnvironmentsSummary: FunctionComponent<
     </>
   );
 };
-
-EnvironmentsSummary.propTypes = {
-  appName: PropTypes.string.isRequired,
-  envs: PropTypes.arrayOf(
-    PropTypes.object as PropTypes.Validator<EnvironmentSummary>
-  ),
-  repository: PropTypes.string,
-};
diff --git a/src/components/page-environments/index.tsx b/src/components/page-environments/index.tsx
index e5cf7c131..71f33e1cc 100644
--- a/src/components/page-environments/index.tsx
+++ b/src/components/page-environments/index.tsx
@@ -16,7 +16,6 @@ export function PageEnvironments({ appName }: Props) {
     { appName },
     { skip: !appName, pollingInterval }
   );
-  const { environments, registration } = application ?? {};
 
   return (
     <>
@@ -29,11 +28,7 @@ export function PageEnvironments({ appName }: Props) {
       />
 
       <AsyncResource asyncState={state}>
-        <EnvironmentsSummary
-          appName={appName}
-          envs={environments}
-          repository={registration?.repository}
-        />
+        {application && <EnvironmentsSummary application={application} />}
       </AsyncResource>
     </>
   );

From d44ce14cd07584bd0eb83e6137a0238a0ce0d9f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nils=20Gustav=20Str=C3=A5b=C3=B8?= <nst@equinor.com>
Date: Mon, 25 Nov 2024 13:11:43 +0100
Subject: [PATCH 8/8] hide "please select" from pipeline job type drop down

---
 src/components/create-job-form/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/create-job-form/index.tsx b/src/components/create-job-form/index.tsx
index d49e4f70e..07fd13c5a 100644
--- a/src/components/create-job-form/index.tsx
+++ b/src/components/create-job-form/index.tsx
@@ -98,7 +98,7 @@ export default function CreateJobForm({
         value={pipeline}
         onChange={(e) => setPipelineType(e.target.value)}
       >
-        <option disabled value="">
+        <option hidden value="">
           — Please select —
         </option>
         {Object.keys(Pipelines).map((pipeline) => (