Misc improvements related to allow config branch not mapped in environment

biome.json

@@ -10,7 +10,8 @@
       "build/",
       "dist/",
       "src/store/*.ts",
-      ".idea"
+      ".idea",
+      "src/utils/config/index.ts"
     ]
   },
   "formatter": {

src/components/alerting/index.tsx

@@ -14,6 +14,7 @@ import type {
   UpdateAlertingConfig,
 } from '../../store/radix-api';
 import { Alert } from '../alert';
+import { ExternalLink } from '../link/external-link';
 
 interface Props {
   isSaving: boolean;
@@ -53,15 +54,13 @@ export const Alerting = ({
         <Icon data={info_circle} color="primary" />
         <div>
           <Typography>
-            You can setup Radix to send alerts to a Slack channel. See{' '}
-            <Typography
-              link
-              href={externalUrls.alertingGuide}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
+            You can setup Radix to send alerts to a Slack channel.
+          </Typography>
+          <Typography>
+            See{' '}
+            <ExternalLink href={externalUrls.alertingGuide}>
               Radix documentation on alert setup
-            </Typography>
+            </ExternalLink>
           </Typography>
         </div>
       </Alert>

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

@@ -1,9 +1,9 @@
-import { Icon, Popover, Typography } from '@equinor/eds-core-react';
-import { external_link } from '@equinor/eds-icons';
+import { Popover, Typography } from '@equinor/eds-core-react';
 import { type FunctionComponent, useEffect } from 'react';
 
 import type { Application } from '../../store/service-now-api';
 import { configVariables } from '../../utils/config';
+import { ExternalLink } from '../link/external-link';
 
 export interface ConfigurationItemPopoverProps {
   open?: boolean;
@@ -42,14 +42,9 @@ export const ConfigurationItemPopover: FunctionComponent<
               <Typography group="input" variant="label">
                 Name
               </Typography>
-              <Typography
-                rel="noopener noreferrer"
-                target="_blank"
-                {...(!!externalUrl && { link: true, href: externalUrl })}
-              >
-                {configurationItem.name}{' '}
-                {externalUrl && <Icon data={external_link} size={16} />}
-              </Typography>
+              <ExternalLink href={externalUrl}>
+                {configurationItem.name}
+              </ExternalLink>
             </div>
             <div>
               <Typography group="input" variant="label">

src/components/app-navbar/index.tsx

@@ -30,6 +30,7 @@ import { AppBadge } from '../app-badge';
 import './style.css';
 import { uniq } from 'lodash';
 import useLocalStorage from '../../effects/use-local-storage';
+import { ExternalLink } from '../link/external-link';
 
 type NavbarLinkItem = {
   label: string;
@@ -124,20 +125,17 @@ const NavbarExpanded = ({ appName, links }: NavbarProps) => {
       {links.map((link) => (
         <NavbarLink key={link.to} {...link} />
       ))}
-
-      <Typography
-        link
-        className="app-navbar__link"
+      <ExternalLink
         href={urlToAppMonitoring(appName)}
+        icon={null}
+        className="app-navbar__link"
         color="currentColor"
-        target="_blank"
-        rel="noopener noreferrer"
       >
         <Typography variant="drawer_inactive" group="navigation">
           <Icon data={desktop_mac} /> Monitoring
         </Typography>
         <Icon data={external_link} style={{ justifySelf: 'right' }} />
-      </Typography>
+      </ExternalLink>
     </nav>
   );
 };
@@ -157,16 +155,11 @@ const NavbarMinimized = ({ appName, links }: NavbarProps) => (
     ))}
 
     <Tooltip title="Monitoring" placement="right" enterDelay={0}>
-      <Typography
-        link
-        href={urlToAppMonitoring(appName)}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <ExternalLink href={urlToAppMonitoring(appName)} icon={null}>
         <Button variant="ghost_icon" color="secondary">
           <Icon data={desktop_mac} />
         </Button>
-      </Typography>
+      </ExternalLink>
     </Tooltip>
   </nav>
 );

src/components/async-resource/async-resource.tsx

@@ -5,6 +5,7 @@ import { externalUrls } from '../../externalUrls';
 import type { FetchQueryResult } from '../../store/types';
 import { getFetchErrorCode, getFetchErrorData } from '../../store/utils';
 import { Alert } from '../alert';
+import { ExternalLink } from '../link/external-link';
 
 type AnotherAsyncResourceProps = PropsWithChildren<{
   asyncState: Pick<FetchQueryResult, 'error' | 'isError' | 'isLoading'>;
@@ -57,14 +58,9 @@ export default function AsyncResource({
               <Typography>
                 You may want to refresh the page. If the problem persists, get
                 in touch on our Slack{' '}
-                <Typography
-                  link
-                  href={externalUrls.slackRadixSupport}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
+                <ExternalLink href={externalUrls.slackRadixSupport}>
                   support channel
-                </Typography>
+                </ExternalLink>
               </Typography>
             </div>
           </Alert>

src/components/commit-hash/index.tsx

@@ -1,29 +1,34 @@
-import { Icon, Typography } from '@equinor/eds-core-react';
+import { Icon } from '@equinor/eds-core-react';
 import { github } from '@equinor/eds-icons';
-import type { FunctionComponent } from 'react';
+import type { PropsWithChildren } from 'react';
 
 import { smallGithubCommitHash } from '../../utils/string';
+import { ExternalLink } from '../link/external-link';
 
-export interface CommitHashProps {
+type CommitHashProps = {
   commit: string;
   repo?: string;
-}
+};
 
-export const CommitHash: FunctionComponent<CommitHashProps> = ({
-  commit,
+const ExternalLinkWrapper = ({
   repo,
-}) =>
-  commit?.length > 0 ? (
-    <Typography
-      link={!!repo}
-      {...(repo
-        ? {
-            title: 'Open commit in repository',
-            href: `${repo}/commit/${commit}`,
-            token: { textDecoration: 'none' },
-          }
-        : { as: 'span', token: { color: 'currentColor' } })}
+  commit,
+  children,
+}: PropsWithChildren<CommitHashProps>) =>
+  repo ? (
+    <ExternalLink
+      href={`${repo}/commit/${commit}`}
+      title="Open commit in repository"
     >
-      {smallGithubCommitHash(commit)} {repo && <Icon data={github} size={18} />}
-    </Typography>
+      {children}
+    </ExternalLink>
+  ) : (
+    <>{children}</>
+  );
+
+export const CommitHash = ({ repo, commit }: CommitHashProps) =>
+  commit?.length > 0 ? (
+    <ExternalLinkWrapper {...{ repo, commit }}>
+      {repo && <Icon data={github} size={18} />} {smallGithubCommitHash(commit)}
+    </ExternalLinkWrapper>
   ) : null;

src/components/component/default-app-alias.tsx

@@ -1,10 +1,10 @@
-import { Icon, Typography } from '@equinor/eds-core-react';
-import { link } from '@equinor/eds-icons';
+import { Typography } from '@equinor/eds-core-react';
 import type { FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 
 import type { ApplicationAlias } from '../../store/radix-api';
 import { getActiveComponentUrl, getEnvUrl } from '../../utils/routing';
+import { ExternalLink } from '../link/external-link';
 
 export interface DefaultAppAliasProps {
   appName: string;
@@ -18,11 +18,8 @@ export const DefaultAppAlias: FunctionComponent<DefaultAppAliasProps> = ({
   <div className="grid grid--gap-small">
     <Typography variant="h4">Default alias</Typography>
     <Typography>
-      <Icon data={link} />
-      <Typography link href={`https://${url}`}>
-        {url}
-      </Typography>{' '}
-      is mapped to component{' '}
+      <ExternalLink href={`https://${url}`}>{url}</ExternalLink> is mapped to
+      component{' '}
       <Typography
         as={Link}
         to={getActiveComponentUrl(appName, environmentName, componentName)}

src/components/component/dns_alias.tsx

@@ -1,9 +1,9 @@
-import { Icon, Typography } from '@equinor/eds-core-react';
-import { link } from '@equinor/eds-icons';
+import { Typography } from '@equinor/eds-core-react';
 import type { FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 
 import { getActiveComponentUrl, getEnvUrl } from '../../utils/routing';
+import { ExternalLink } from '../link/external-link';
 export interface EnvironmentComponentProps {
   appName: string;
   url: string;
@@ -18,11 +18,8 @@ export const DNSAlias: FunctionComponent<EnvironmentComponentProps> = ({
   environmentName,
 }) => (
   <>
-    <Icon data={link} />
-    <Typography link href={`https://${url}`}>
-      {url}
-    </Typography>{' '}
-    is mapped to component{' '}
+    <ExternalLink href={`https://${url}`}>{url}</ExternalLink> is mapped to
+    component{' '}
     <Typography
       as={Link}
       to={getActiveComponentUrl(appName, environmentName, componentName)}

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

@@ -20,6 +20,7 @@ export default (
       onDeployKeyChange={() => void 0}
       refetch={() => void 0}
       initialSecretPollInterval={5000}
+      useOtherCiToolOptionVisible={true}
     />
   </div>
 );

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

@@ -28,6 +28,7 @@ import {
 } from '../../store/radix-api';
 import { getFetchErrorMessage } from '../../store/utils';
 import { handlePromiseWithToast } from '../global-top-nav/styled-toaster';
+import { ExternalLink } from '../link/external-link';
 import { ScrimPopup } from '../scrim-popup';
 
 const radixZoneDNS = configVariables.RADIX_CLUSTER_BASE;
@@ -91,14 +92,9 @@ export const ConfigureApplicationGithub = ({
               <div className="grid grid--gap-medium">
                 <Typography>
                   This allows Radix to clone the repository. Open the{' '}
-                  <Typography
-                    link
-                    href={`${app.repository}/settings/keys/new`}
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
+                  <ExternalLink href={`${app.repository}/settings/keys/new`}>
                     Add New Deploy Key page
-                  </Typography>{' '}
+                  </ExternalLink>{' '}
                   and follow the steps below
                 </Typography>
                 <div className="grid grid--gap-medium o-body-text">
@@ -197,7 +193,7 @@ export const ConfigureApplicationGithub = ({
               checked={useOtherCiTool}
               onChange={() => setUseOtherCiTool(!useOtherCiTool)}
             />{' '}
-            <span>
+            <span className="grid grid--gap-small">
               <Typography
                 className="label"
                 group="input"
@@ -206,26 +202,14 @@ export const ConfigureApplicationGithub = ({
               >
                 Use other CI tool than Radix
               </Typography>
-              <Typography
-                group="navigation"
-                variant="label"
-                token={{ color: 'currentColor' }}
-              >
+              <Typography token={{ color: 'currentColor' }}>
                 Select this option if your project is hosted on multiple
                 repositories and/or requires external control of building. Radix
                 will no longer need a webhook and will instead deploy your app
-                through the API/CLI.
-                <br />
-                See{' '}
-                <Typography
-                  link
-                  href={externalUrls.deployOnlyGuide}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  token={{ fontSize: 'inherit' }}
-                >
+                through the API/CLI. Read the{' '}
+                <ExternalLink href={externalUrls.deployOnlyGuide}>
                   Deployment Guide
-                </Typography>{' '}
+                </ExternalLink>{' '}
                 for details.
               </Typography>
             </span>
@@ -245,14 +229,9 @@ export const ConfigureApplicationGithub = ({
                   <Typography>
                     GitHub notifies Radix using a webhook whenever a code push
                     is made. Open the{' '}
-                    <Typography
-                      link
-                      href={`${app.repository}/settings/hooks/new`}
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
+                    <ExternalLink href={`${app.repository}/settings/hooks/new`}>
                       Add Webhook page
-                    </Typography>{' '}
+                    </ExternalLink>{' '}
                     and follow the steps below
                   </Typography>
                   <div className="grid grid--gap-medium o-body-text">

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

@@ -31,6 +31,7 @@ import {
   warningToast,
 } from '../global-top-nav/styled-toaster';
 import type { HandleAdGroupsChangeCB } from '../graph/adGroups';
+import { ExternalLink } from '../link/external-link';
 
 function sanitizeName(name: string): string {
   // force name to lowercase, no spaces
@@ -135,35 +136,20 @@ export default function CreateApplicationForm({ onCreated }: Props) {
           </Typography>
           <Typography>
             You can read about{' '}
-            <Typography
-              link
-              href={externalUrls.referenceRadixConfig}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
+            <ExternalLink href={externalUrls.referenceRadixConfig}>
               radixconfig.yaml
-            </Typography>{' '}
+            </ExternalLink>{' '}
             and{' '}
-            <Typography
-              link
-              href={externalUrls.guideDockerfileComponent}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
+            <ExternalLink href={externalUrls.guideDockerfileComponent}>
               Dockerfile best practices
-            </Typography>
+            </ExternalLink>
             .
           </Typography>
           <Typography>
             Need help? Get in touch on our{' '}
-            <Typography
-              link
-              href={externalUrls.slackRadixSupport}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
+            <ExternalLink href={externalUrls.slackRadixSupport}>
               Slack support channel
-            </Typography>
+            </ExternalLink>
           </Typography>
         </div>
       </Alert>