From a6e20f7d4481f37544ec27d4447cc249a062fe82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nils=20Gustav=20Str=C3=A5b=C3=B8?= <nst@equinor.com>
Date: Thu, 14 Nov 2024 16:13:16 +0100
Subject: [PATCH 1/5] use apply-config as initial pipeline job

---
 biome.json                                    |  3 +-
 src/components/alerting/index.tsx             | 15 ++++----
 src/components/app-navbar/index.tsx           | 21 ++++------
 .../async-resource/async-resource.tsx         | 10 ++---
 .../component/default-app-alias.tsx           | 11 ++----
 src/components/component/dns_alias.tsx        |  8 ++--
 .../configure-application-github/index.tsx    | 10 ++---
 src/components/deployments-list/index.tsx     |  4 +-
 src/components/environments-summary/index.tsx | 38 +++++++++++++------
 src/components/link/external-link.tsx         | 29 ++++++++++++++
 src/components/page-configuration/index.tsx   |  7 +++-
 .../page-create-application/index.tsx         | 16 +++++---
 12 files changed, 102 insertions(+), 70 deletions(-)
 create mode 100644 src/components/link/external-link.tsx

diff --git a/biome.json b/biome.json
index f3262af67..64ffb0e57 100644
--- a/biome.json
+++ b/biome.json
@@ -10,7 +10,8 @@
       "build/",
       "dist/",
       "src/store/*.ts",
-      ".idea"
+      ".idea",
+      "src/utils/config/index.ts"
     ]
   },
   "formatter": {
diff --git a/src/components/alerting/index.tsx b/src/components/alerting/index.tsx
index 5cc89a7d8..ba37b152f 100644
--- a/src/components/alerting/index.tsx
+++ b/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>
diff --git a/src/components/app-navbar/index.tsx b/src/components/app-navbar/index.tsx
index d9ec6c01b..add9f58d5 100644
--- a/src/components/app-navbar/index.tsx
+++ b/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>
 );
diff --git a/src/components/async-resource/async-resource.tsx b/src/components/async-resource/async-resource.tsx
index b5fe4c78c..7489b8244 100644
--- a/src/components/async-resource/async-resource.tsx
+++ b/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>
diff --git a/src/components/component/default-app-alias.tsx b/src/components/component/default-app-alias.tsx
index f866145c6..4e70a943d 100644
--- a/src/components/component/default-app-alias.tsx
+++ b/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)}
diff --git a/src/components/component/dns_alias.tsx b/src/components/component/dns_alias.tsx
index 96742f94c..0cf4fec3b 100644
--- a/src/components/component/dns_alias.tsx
+++ b/src/components/component/dns_alias.tsx
@@ -4,6 +4,7 @@ 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 +19,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)}
diff --git a/src/components/configure-application-github/index.tsx b/src/components/configure-application-github/index.tsx
index d3620daca..290e53c15 100644
--- a/src/components/configure-application-github/index.tsx
+++ b/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">
diff --git a/src/components/deployments-list/index.tsx b/src/components/deployments-list/index.tsx
index 9f87d0224..f9b19bff5 100644
--- a/src/components/deployments-list/index.tsx
+++ b/src/components/deployments-list/index.tsx
@@ -101,9 +101,7 @@ export const DeploymentsList: FunctionComponent<DeploymentsListProps> = ({
                   Type of job
                   <TableSortIcon direction={pipelineSort} />
                 </Table.Cell>
-                <Table.Cell>
-                  Github commit <Icon data={external_link} />
-                </Table.Cell>
+                <Table.Cell>Github commit</Table.Cell>
                 <Table.Cell>Promoted from</Table.Cell>
               </Table.Row>
             </Table.Head>
diff --git a/src/components/environments-summary/index.tsx b/src/components/environments-summary/index.tsx
index e9ef57702..d07ab171b 100644
--- a/src/components/environments-summary/index.tsx
+++ b/src/components/environments-summary/index.tsx
@@ -7,7 +7,12 @@ 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 { ExternalLink } from '../link/external-link';
 
 export interface EnvironmentsSummaryProps {
   appName: string;
@@ -24,18 +29,29 @@ export const EnvironmentsSummary: FunctionComponent<
         <EnvironmentCard key={i} {...{ appName, env, repository }} />
       ))
     ) : (
-      <Typography>
-        <strong>No environments.</strong> Please run a pipeline job to deploy
-        one or define at least one environment in{' '}
-        <Typography
-          link
-          href={externalUrls.referenceRadixConfig}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          radixconfig.yaml
+      <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>
-      </Typography>
+      </span>
     )}
   </div>
 );
diff --git a/src/components/link/external-link.tsx b/src/components/link/external-link.tsx
new file mode 100644
index 000000000..9d85fb700
--- /dev/null
+++ b/src/components/link/external-link.tsx
@@ -0,0 +1,29 @@
+import { Icon, Typography } from '@equinor/eds-core-react';
+import { type IconData, external_link } from '@equinor/eds-icons';
+import type { FunctionComponent, PropsWithChildren } from 'react';
+
+export const ExternalLink: FunctionComponent<
+  PropsWithChildren<{
+    href: string;
+    icon?: IconData;
+    color?: string;
+    className?: string;
+  }>
+> = ({
+  href,
+  children,
+  icon = external_link,
+  className = 'whitespace-nowrap',
+  color,
+}) => (
+  <Typography
+    link
+    href={href}
+    rel="noopener noreferrer"
+    target="_blank"
+    color={color}
+    className={className}
+  >
+    {children} {icon && <Icon data={icon} size={16} />}
+  </Typography>
+);
diff --git a/src/components/page-configuration/index.tsx b/src/components/page-configuration/index.tsx
index 8cd5fb1d2..f982ed76d 100644
--- a/src/components/page-configuration/index.tsx
+++ b/src/components/page-configuration/index.tsx
@@ -76,7 +76,12 @@ export function PageConfiguration({ appName }: { appName: string }) {
               <Typography variant="h4">GitHub</Typography>
               <Typography>
                 Cloned from{' '}
-                <Typography link href={registration.repository}>
+                <Typography
+                  link
+                  href={registration.repository}
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
                   {registration.repository}
                 </Typography>
               </Typography>
diff --git a/src/components/page-create-application/index.tsx b/src/components/page-create-application/index.tsx
index 1340d034b..25373943f 100644
--- a/src/components/page-create-application/index.tsx
+++ b/src/components/page-create-application/index.tsx
@@ -65,17 +65,21 @@ export default function PageCreateApplication() {
                 initialSecretPollInterval={1500}
               />
               <Typography>
-                Now you can{' '}
+                Now you can run the{' '}
                 <Typography
                   as={Link}
-                  to={routeWithParams(routes.appJobNew, {
-                    appName: registration.name,
-                  })}
+                  to={routeWithParams(
+                    routes.appJobNew,
+                    {
+                      appName: registration.name,
+                    },
+                    { pipeline: 'apply-config' }
+                  )}
                   link
                 >
-                  create the first pipeline job
+                  apply-config pipeline job
                 </Typography>{' '}
-                or go to{' '}
+                to apply radixconfig.yaml, or go to{' '}
                 <Typography
                   as={Link}
                   to={routeWithParams(routes.app, {

From 1d8ffc45e82a10ff2174b0d89e6410ad3163ad76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nils=20Gustav=20Str=C3=A5b=C3=B8?= <nst@equinor.com>
Date: Thu, 14 Nov 2024 16:18:13 +0100
Subject: [PATCH 2/5] fix lint errors

---
 src/components/component/dns_alias.tsx    | 3 +--
 src/components/deployments-list/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/component/dns_alias.tsx b/src/components/component/dns_alias.tsx
index 0cf4fec3b..663895a29 100644
--- a/src/components/component/dns_alias.tsx
+++ b/src/components/component/dns_alias.tsx
@@ -1,5 +1,4 @@
-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';
 
diff --git a/src/components/deployments-list/index.tsx b/src/components/deployments-list/index.tsx
index f9b19bff5..4048c143e 100644
--- a/src/components/deployments-list/index.tsx
+++ b/src/components/deployments-list/index.tsx
@@ -1,5 +1,5 @@
 import { Icon, Table, Typography } from '@equinor/eds-core-react';
-import { external_link, send } from '@equinor/eds-icons';
+import { send } from '@equinor/eds-icons';
 import * as PropTypes from 'prop-types';
 import { type FunctionComponent, useEffect, useState } from 'react';
 

From 93b083ae77d03c5567a6ebf82be713723ad9d05f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nils=20Gustav=20Str=C3=A5b=C3=B8?= <nst@equinor.com>
Date: Fri, 15 Nov 2024 16:04:10 +0100
Subject: [PATCH 3/5] use ExternalLink component for all external links

---
 src/components/app-config-ci/ci-popover.tsx   | 15 +++----
 src/components/commit-hash/index.tsx          | 36 ++++++++++-------
 .../configure-application-github/dev.tsx      |  1 +
 .../configure-application-github/index.tsx    | 31 ++++----------
 .../create-application-form/index.tsx         | 28 ++++---------
 src/components/data-chart/index.tsx           | 13 +++---
 .../deployment-summary-table-row.tsx          | 17 +-------
 .../environments-summary/environment-card.tsx | 33 ++++++++-------
 .../environment-ingress.tsx                   | 35 +++++++---------
 .../external-dns-alias-help/index.tsx         | 10 ++---
 src/components/git-tags/git-tag-links.tsx     | 13 ++----
 src/components/identity/azure-identity.tsx    | 10 ++---
 src/components/link/external-link.tsx         | 40 ++++++++++++++-----
 .../page-active-component/default-alias.tsx   | 15 +++----
 .../page-active-component/dns-alias.tsx       |  7 +---
 .../page-active-component/overview.tsx        | 13 +++---
 .../change-repository-form.tsx                | 37 +++++------------
 src/components/page-configuration/index.tsx   | 18 ++++-----
 .../page-configuration/overview.tsx           | 19 ++++-----
 .../page-deployment/deployment-summary.tsx    | 23 +++--------
 .../page-environment/environment-overview.tsx | 29 +++++---------
 src/components/resources/index.tsx            | 17 ++++----
 src/components/vulnerability-list/index.tsx   | 19 +++------
 src/store/ms-graph-api.ts                     | 10 ++---
 24 files changed, 187 insertions(+), 302 deletions(-)

diff --git a/src/components/app-config-ci/ci-popover.tsx b/src/components/app-config-ci/ci-popover.tsx
index 4b05a01c3..a49fd7b90 100644
--- a/src/components/app-config-ci/ci-popover.tsx
+++ b/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">
diff --git a/src/components/commit-hash/index.tsx b/src/components/commit-hash/index.tsx
index 88e7b8af9..528d34227 100644
--- a/src/components/commit-hash/index.tsx
+++ b/src/components/commit-hash/index.tsx
@@ -1,29 +1,35 @@
-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 { FunctionComponent, PropsWithChildren } from 'react';
 
 import { smallGithubCommitHash } from '../../utils/string';
+import { ExternalLink } from '../link/external-link';
 
 export interface CommitHashProps {
   commit: string;
   repo?: string;
 }
 
+const ExternalLinkWrapper: FunctionComponent<
+  PropsWithChildren<CommitHashProps>
+> = ({ repo, commit, children }) =>
+  repo ? (
+    <ExternalLink
+      href={`${repo}/commit/${commit}`}
+      title="Open commit in repository"
+    >
+      {children}
+    </ExternalLink>
+  ) : (
+    <>{children}</>
+  );
+
 export const CommitHash: FunctionComponent<CommitHashProps> = ({
-  commit,
   repo,
+  commit,
 }) =>
   commit?.length > 0 ? (
-    <Typography
-      link={!!repo}
-      {...(repo
-        ? {
-            title: 'Open commit in repository',
-            href: `${repo}/commit/${commit}`,
-            token: { textDecoration: 'none' },
-          }
-        : { as: 'span', token: { color: 'currentColor' } })}
-    >
-      {smallGithubCommitHash(commit)} {repo && <Icon data={github} size={18} />}
-    </Typography>
+    <ExternalLinkWrapper {...{ repo, commit }}>
+      {repo && <Icon data={github} size={18} />} {smallGithubCommitHash(commit)}
+    </ExternalLinkWrapper>
   ) : null;
diff --git a/src/components/configure-application-github/dev.tsx b/src/components/configure-application-github/dev.tsx
index 60e744fe7..de85d40fd 100644
--- a/src/components/configure-application-github/dev.tsx
+++ b/src/components/configure-application-github/dev.tsx
@@ -20,6 +20,7 @@ export default (
       onDeployKeyChange={() => void 0}
       refetch={() => void 0}
       initialSecretPollInterval={5000}
+      useOtherCiToolOptionVisible={true}
     />
   </div>
 );
diff --git a/src/components/configure-application-github/index.tsx b/src/components/configure-application-github/index.tsx
index 290e53c15..0b3226919 100644
--- a/src/components/configure-application-github/index.tsx
+++ b/src/components/configure-application-github/index.tsx
@@ -193,7 +193,7 @@ export const ConfigureApplicationGithub = ({
               checked={useOtherCiTool}
               onChange={() => setUseOtherCiTool(!useOtherCiTool)}
             />{' '}
-            <span>
+            <span className="grid grid--gap-small">
               <Typography
                 className="label"
                 group="input"
@@ -202,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>
@@ -241,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">
diff --git a/src/components/create-application-form/index.tsx b/src/components/create-application-form/index.tsx
index e5381cb64..f3b81c769 100644
--- a/src/components/create-application-form/index.tsx
+++ b/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>
diff --git a/src/components/data-chart/index.tsx b/src/components/data-chart/index.tsx
index 42f58185d..4103a26f3 100644
--- a/src/components/data-chart/index.tsx
+++ b/src/components/data-chart/index.tsx
@@ -7,6 +7,7 @@ import './style.css';
 import type { ChartWrapperOptions } from 'react-google-charts/dist/types';
 import { externalUrls } from '../../externalUrls';
 import { useGetUptimeQuery } from '../../store/uptime-api';
+import { ExternalLink } from '../link/external-link';
 
 export const AvailabilityCharts = () => {
   const { data: uptime, isLoading, isError } = useGetUptimeQuery();
@@ -62,14 +63,10 @@ export const AvailabilityCharts = () => {
         <div className="chart-container grid grid--gap-medium">
           <Typography>
             For more information on availability, please check the{' '}
-            <Typography
-              link
-              href={externalUrls.uptimeDocs}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              documentation.
-            </Typography>
+            <ExternalLink href={externalUrls.uptimeDocs}>
+              documentation
+            </ExternalLink>
+            .
           </Typography>
 
           {visibleScrim && uptime.length > 0 ? (
diff --git a/src/components/deployments-list/deployment-summary-table-row.tsx b/src/components/deployments-list/deployment-summary-table-row.tsx
index 735ed7193..a70633d73 100644
--- a/src/components/deployments-list/deployment-summary-table-row.tsx
+++ b/src/components/deployments-list/deployment-summary-table-row.tsx
@@ -5,11 +5,7 @@ import { Link } from 'react-router-dom';
 
 import { routes } from '../../routes';
 import type { DeploymentSummary } from '../../store/radix-api';
-import {
-  linkToGitHubCommit,
-  routeWithParams,
-  smallDeploymentName,
-} from '../../utils/string';
+import { routeWithParams, smallDeploymentName } from '../../utils/string';
 import { CommitHash } from '../commit-hash';
 import { StatusBadge } from '../status-badges';
 import { RelativeToNow } from '../time/relative-to-now';
@@ -75,16 +71,7 @@ export const DeploymentSummaryTableRow: FunctionComponent<
       )}
       <Table.Cell>{deployment.pipelineJobType}</Table.Cell>
       <Table.Cell>
-        <Typography
-          {...(repo && {
-            link: true,
-            href: `${linkToGitHubCommit(repo, commitHash)}`,
-            rel: 'noopener noreferrer',
-            target: '_blank',
-          })}
-        >
-          <CommitHash commit={commitHash} />
-        </Typography>
+        <CommitHash commit={commitHash} repo={repo} />
       </Table.Cell>
       <Table.Cell>
         <Typography as={Link} to={promotedFromLink} link>
diff --git a/src/components/environments-summary/environment-card.tsx b/src/components/environments-summary/environment-card.tsx
index b7c883748..3137bf2e6 100644
--- a/src/components/environments-summary/environment-card.tsx
+++ b/src/components/environments-summary/environment-card.tsx
@@ -33,6 +33,7 @@ import { GitTagLinks } from '../git-tags/git-tag-links';
 import { RelativeToNow } from '../time/relative-to-now';
 
 import './style.css';
+import { getAppDeploymentUrl } from '../../utils/routing';
 
 type CardContent = { header: React.JSX.Element; body: React.JSX.Element };
 
@@ -59,22 +60,24 @@ const DeploymentDetails: FunctionComponent<{
       </Typography>
     </Button>
   ) : (
-    <Button
-      className="button_link"
-      variant="ghost"
-      href={routeWithParams(routes.appDeployment, {
-        appName: appName,
-        deploymentName: deployment.name,
-      })}
+    <Typography
+      as={Link}
+      to={getAppDeploymentUrl(appName, deployment.name)}
+      link
+      token={{ textDecoration: 'none' }}
     >
-      <Icon data={send} />
-      <Typography group="navigation" variant="button" color="primary">
-        deployment{' '}
-        <Typography group="navigation" variant="button" as="span" color="gray">
-          (<RelativeToNow time={new Date(deployment.activeFrom)} />)
-        </Typography>
-      </Typography>
-    </Button>
+      <span className="o-key-values">
+        <Icon data={send} />
+        <span>
+          <Typography as="span" color="primary">
+            deployment{' '}
+          </Typography>
+          <Typography as="span" color="gray">
+            (<RelativeToNow time={new Date(deployment.activeFrom)} />)
+          </Typography>
+        </span>
+      </span>
+    </Typography>
   );
 
 function CardContentBuilder(
diff --git a/src/components/environments-summary/environment-ingress.tsx b/src/components/environments-summary/environment-ingress.tsx
index 8dc82cde9..d27f94c3e 100644
--- a/src/components/environments-summary/environment-ingress.tsx
+++ b/src/components/environments-summary/environment-ingress.tsx
@@ -3,11 +3,13 @@ import { type IconData, link, memory } from '@equinor/eds-icons';
 import * as PropTypes from 'prop-types';
 import type { FunctionComponent } from 'react';
 
+import { Link } from 'react-router-dom';
 import type { Component } from '../../store/radix-api';
 import {
   getActiveComponentUrl,
   getActiveJobComponentUrl,
 } from '../../utils/routing';
+import { ExternalLink } from '../link/external-link';
 
 export interface EnvironmentIngressProps {
   appName: string;
@@ -32,10 +34,10 @@ const ComponentDetails: FunctionComponent<{
   icon: IconData;
   component: Readonly<Component>;
 }> = ({ icon, component }) => (
-  <>
+  <span className="o-key-values">
     <Icon data={icon} />
     <Typography
-      className="component_details"
+      as="span"
       token={{
         color: 'inherit',
         fontSize: 'inherit',
@@ -44,16 +46,7 @@ const ComponentDetails: FunctionComponent<{
     >
       {component.name}
     </Typography>
-    {component.status === 'Outdated' && (
-      <Typography
-        color="warning"
-        variant="caption"
-        token={{ textAlign: 'right' }}
-      >
-        outdated image
-      </Typography>
-    )}
-  </>
+  </span>
 );
 
 export const EnvironmentIngress: FunctionComponent<EnvironmentIngressProps> = ({
@@ -86,14 +79,13 @@ export const EnvironmentIngress: FunctionComponent<EnvironmentIngressProps> = ({
     <>
       {comps.public.length > 0 ? (
         comps.public.map((component) => (
-          <Button
+          <ExternalLink
             key={component.name}
-            className="button_link"
-            variant="ghost"
             href={`https://${component.variables[URL_VAR_NAME]}`}
+            icon={null}
           >
             <ComponentDetails icon={link} component={component} />
-          </Button>
+          </ExternalLink>
         ))
       ) : (
         <Button variant="ghost" className="button_link" disabled>
@@ -105,14 +97,15 @@ export const EnvironmentIngress: FunctionComponent<EnvironmentIngressProps> = ({
       {comps.passive
         .filter(({ status }) => status === 'Outdated')
         .map((component) => (
-          <Button
+          <Typography
             key={component.name}
-            className="button_link"
-            variant="ghost"
-            href={getComponentUrl(appName, envName, component)}
+            as={Link}
+            to={getComponentUrl(appName, envName, component)}
+            link
+            token={{ textDecoration: 'none' }}
           >
             <ComponentDetails icon={memory} component={component} />
-          </Button>
+          </Typography>
         ))}
       {tooManyPublic && tooManyPassive && <div>…</div>}
     </>
diff --git a/src/components/external-dns-alias-help/index.tsx b/src/components/external-dns-alias-help/index.tsx
index 6e1d15a56..2ca8807b2 100644
--- a/src/components/external-dns-alias-help/index.tsx
+++ b/src/components/external-dns-alias-help/index.tsx
@@ -4,6 +4,7 @@ import type { FunctionComponent } from 'react';
 
 import { externalUrls } from '../../externalUrls';
 import { Alert } from '../alert';
+import { ExternalLink } from '../link/external-link';
 
 export const ExternalDnsAliasHelp: FunctionComponent = () => (
   <Alert className="icon">
@@ -11,14 +12,9 @@ export const ExternalDnsAliasHelp: FunctionComponent = () => (
     <div>
       <Typography>
         Please refer to guide{' '}
-        <Typography
-          link
-          href={externalUrls.externalDNSGuide}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
+        <ExternalLink href={externalUrls.externalDNSGuide}>
           Configure External DNS Alias
-        </Typography>{' '}
+        </ExternalLink>{' '}
         for information about configuration and troubleshooting
       </Typography>
     </div>
diff --git a/src/components/git-tags/git-tag-links.tsx b/src/components/git-tags/git-tag-links.tsx
index a6e49c349..29aadf86a 100644
--- a/src/components/git-tags/git-tag-links.tsx
+++ b/src/components/git-tags/git-tag-links.tsx
@@ -4,23 +4,16 @@ import { linkToGitHubTag } from '../../utils/string';
 import { ScrimPopup } from '../scrim-popup';
 
 import './style.css';
+import { ExternalLink } from '../link/external-link';
 
 const Tag: FunctionComponent<{
   repository: string;
   tag: string;
   tagTitle: string;
 }> = ({ repository, tag, tagTitle }) => (
-  <Typography
-    token={{ textDecoration: 'none' }}
-    {...(repository && {
-      link: true,
-      href: linkToGitHubTag(repository, tag),
-      rel: 'noopener noreferrer',
-      target: '_blank',
-    })}
-  >
+  <ExternalLink href={linkToGitHubTag(repository, tag)} icon={null}>
     <div className="tags">{tagTitle}</div>
-  </Typography>
+  </ExternalLink>
 );
 
 const ShortenedTag: FunctionComponent<{ repository: string; tag: string }> = ({
diff --git a/src/components/identity/azure-identity.tsx b/src/components/identity/azure-identity.tsx
index 26b6f7f09..775ece050 100644
--- a/src/components/identity/azure-identity.tsx
+++ b/src/components/identity/azure-identity.tsx
@@ -6,6 +6,7 @@ import type { FunctionComponent } from 'react';
 import { externalUrls } from '../../externalUrls';
 import { Alert } from '../alert';
 import { CompactCopyButton } from '../compact-copy-button';
+import { ExternalLink } from '../link/external-link';
 
 export interface AzureIdentityProps {
   oidcIssuerUrl: string;
@@ -20,14 +21,9 @@ const WorkloadIdentityHelp: FunctionComponent = () => (
     <div>
       <Typography as="span">
         Please refer to guide{' '}
-        <Typography
-          link
-          href={externalUrls.workloadIdentityGuide}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
+        <ExternalLink href={externalUrls.workloadIdentityGuide}>
           Configure Workload Identity
-        </Typography>{' '}
+        </ExternalLink>{' '}
         for information about configuration and troubleshooting
       </Typography>
     </div>
diff --git a/src/components/link/external-link.tsx b/src/components/link/external-link.tsx
index 9d85fb700..e12d03ce0 100644
--- a/src/components/link/external-link.tsx
+++ b/src/components/link/external-link.tsx
@@ -1,13 +1,26 @@
-import { Icon, Typography } from '@equinor/eds-core-react';
+import { Icon, Tooltip, Typography } from '@equinor/eds-core-react';
 import { type IconData, external_link } from '@equinor/eds-icons';
 import type { FunctionComponent, PropsWithChildren } from 'react';
 
+const ToolTipWrapper: FunctionComponent<
+  PropsWithChildren<{ toolTip?: string }>
+> = ({ toolTip, children }) =>
+  toolTip ? (
+    <Tooltip title={toolTip}>
+      <span>{children}</span>
+    </Tooltip>
+  ) : (
+    <>{children}</>
+  );
+
 export const ExternalLink: FunctionComponent<
   PropsWithChildren<{
     href: string;
     icon?: IconData;
     color?: string;
     className?: string;
+    toolTip?: string;
+    title?: string;
   }>
 > = ({
   href,
@@ -15,15 +28,20 @@ export const ExternalLink: FunctionComponent<
   icon = external_link,
   className = 'whitespace-nowrap',
   color,
+  toolTip,
+  title,
 }) => (
-  <Typography
-    link
-    href={href}
-    rel="noopener noreferrer"
-    target="_blank"
-    color={color}
-    className={className}
-  >
-    {children} {icon && <Icon data={icon} size={16} />}
-  </Typography>
+  <ToolTipWrapper toolTip={toolTip}>
+    <Typography
+      link
+      href={href}
+      rel="noopener noreferrer"
+      target="_blank"
+      color={color}
+      className={className}
+      title={title}
+    >
+      {children} {icon && <Icon data={icon} size={16} />}
+    </Typography>
+  </ToolTipWrapper>
 );
diff --git a/src/components/page-active-component/default-alias.tsx b/src/components/page-active-component/default-alias.tsx
index 12b9a9ab1..d80da41ac 100644
--- a/src/components/page-active-component/default-alias.tsx
+++ b/src/components/page-active-component/default-alias.tsx
@@ -1,7 +1,7 @@
-import { Icon, Typography } from '@equinor/eds-core-react';
-import { external_link } from '@equinor/eds-icons';
+import { Typography } from '@equinor/eds-core-react';
 import * as PropTypes from 'prop-types';
 import type { ApplicationAlias } from '../../store/radix-api';
+import { ExternalLink } from '../link/external-link';
 
 export interface Props {
   appAlias?: ApplicationAlias;
@@ -17,14 +17,9 @@ export function DefaultAlias({ appAlias, envName, componentName }: Props) {
         appAlias.environmentName === envName && (
           <Typography>
             This component is the{' '}
-            <Typography
-              link
-              href={`https://${appAlias.url}`}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              default alias <Icon data={external_link} size={16} />
-            </Typography>
+            <ExternalLink href={`https://${appAlias.url}`}>
+              default alias
+            </ExternalLink>
           </Typography>
         )}
     </>
diff --git a/src/components/page-active-component/dns-alias.tsx b/src/components/page-active-component/dns-alias.tsx
index 5a96c2c4c..6791db1a1 100644
--- a/src/components/page-active-component/dns-alias.tsx
+++ b/src/components/page-active-component/dns-alias.tsx
@@ -1,6 +1,5 @@
-import { Icon, Typography } from '@equinor/eds-core-react';
-import { external_link } from '@equinor/eds-icons';
 import type { FunctionComponent } from 'react';
+import { ExternalLink } from '../link/external-link';
 
 export interface EnvironmentComponentProps {
   url: string;
@@ -10,8 +9,6 @@ export const DNSAlias: FunctionComponent<EnvironmentComponentProps> = ({
   url,
 }) => (
   <>
-    <Typography link href={`https://${url}`}>
-      {url} <Icon data={external_link} size={16} />
-    </Typography>
+    <ExternalLink href={`https://${url}`}>{url}</ExternalLink>
   </>
 );
diff --git a/src/components/page-active-component/overview.tsx b/src/components/page-active-component/overview.tsx
index ba1e59b9c..d1693102b 100644
--- a/src/components/page-active-component/overview.tsx
+++ b/src/components/page-active-component/overview.tsx
@@ -1,5 +1,4 @@
-import { Icon, Typography } from '@equinor/eds-core-react';
-import { external_link } from '@equinor/eds-icons';
+import { Typography } from '@equinor/eds-core-react';
 import * as PropTypes from 'prop-types';
 
 import { DefaultAlias } from './default-alias';
@@ -18,6 +17,7 @@ import type {
 } from '../../store/radix-api';
 import './style.css';
 import { IngressAllowList } from '../component/ingress-allow-list';
+import { ExternalLink } from '../link/external-link';
 import { ResourceRequirements } from '../resource-requirements';
 import { Runtime } from '../runtime';
 import { DNSAliases } from './dns-aliases';
@@ -72,14 +72,11 @@ export const Overview = ({
           {component.variables?.[URL_VAR_NAME] && (
             <Typography>
               Publicly available{' '}
-              <Typography
-                link
+              <ExternalLink
                 href={`https://${component.variables[URL_VAR_NAME]}`}
-                rel="noopener noreferrer"
-                target="_blank"
               >
-                link <Icon data={external_link} size={16} />
-              </Typography>
+                link
+              </ExternalLink>
             </Typography>
           )}
           {appAlias && (
diff --git a/src/components/page-configuration/change-repository-form.tsx b/src/components/page-configuration/change-repository-form.tsx
index 7b76182db..cdcef79af 100644
--- a/src/components/page-configuration/change-repository-form.tsx
+++ b/src/components/page-configuration/change-repository-form.tsx
@@ -25,6 +25,7 @@ import AsyncResource from '../async-resource/async-resource';
 import { Code } from '../code';
 import { CompactCopyButton } from '../compact-copy-button';
 import { handlePromiseWithToast } from '../global-top-nav/styled-toaster';
+import { ExternalLink } from '../link/external-link';
 
 const radixZoneDNS = configVariables.RADIX_CLUSTER_BASE;
 
@@ -152,26 +153,16 @@ export function ChangeRepositoryForm({
                   <List variant="numbered">
                     <List.Item>
                       Open the{' '}
-                      <Typography
-                        link
-                        href={`${repository}/settings/keys`}
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
+                      <ExternalLink href={`${repository}/settings/keys`}>
                         Deploy Key page
-                      </Typography>{' '}
+                      </ExternalLink>{' '}
                       to delete the Deploy Key from the previous repository
                     </List.Item>
                     <List.Item>
                       Open the{' '}
-                      <Typography
-                        link
-                        href={`${repository}/settings/keys/new`}
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
+                      <ExternalLink href={`${repository}/settings/keys/new`}>
                         Add New Deploy Key
-                      </Typography>{' '}
+                      </ExternalLink>{' '}
                       and follow the steps below
                     </List.Item>
                   </List>
@@ -198,26 +189,16 @@ export function ChangeRepositoryForm({
                   <List variant="numbered" start="6">
                     <List.Item>
                       Open the{' '}
-                      <Typography
-                        link
-                        href={`${repository}/settings/hooks`}
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
+                      <ExternalLink href={`${repository}/settings/hooks`}>
                         Webhook page
-                      </Typography>{' '}
+                      </ExternalLink>{' '}
                       of the previous repository and delete the existing Webhook
                     </List.Item>
                     <List.Item>
                       Open the{' '}
-                      <Typography
-                        link
-                        href={`${repository}/settings/hooks/new`}
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
+                      <ExternalLink href={`${repository}/settings/hooks/new`}>
                         Add Webhook page
-                      </Typography>{' '}
+                      </ExternalLink>{' '}
                       and follow the steps below
                     </List.Item>
                   </List>
diff --git a/src/components/page-configuration/index.tsx b/src/components/page-configuration/index.tsx
index f982ed76d..c1d0b127a 100644
--- a/src/components/page-configuration/index.tsx
+++ b/src/components/page-configuration/index.tsx
@@ -21,6 +21,7 @@ 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';
 function getConfigBranch(configBranch: string): string {
   return configBranch || 'master';
 }
@@ -76,26 +77,21 @@ export function PageConfiguration({ appName }: { appName: string }) {
               <Typography variant="h4">GitHub</Typography>
               <Typography>
                 Cloned from{' '}
-                <Typography
-                  link
-                  href={registration.repository}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
+                <ExternalLink href={registration.repository}>
                   {registration.repository}
-                </Typography>
+                </ExternalLink>
               </Typography>
               <Typography>
                 Config branch{' '}
-                <Typography link href={getConfigBranchUrl(registration)}>
+                <ExternalLink href={getConfigBranchUrl(registration)}>
                   {getConfigBranch(registration.configBranch)}
-                </Typography>
+                </ExternalLink>
               </Typography>
               <Typography>
                 Config file{' '}
-                <Typography link href={getConfigFileUrl(registration)}>
+                <ExternalLink href={getConfigFileUrl(registration)}>
                   {getRadixConfigFullName(registration.radixConfigFullName)}
-                </Typography>
+                </ExternalLink>
               </Typography>
               <ConfigureApplicationGithub
                 refetch={refetch}
diff --git a/src/components/page-configuration/overview.tsx b/src/components/page-configuration/overview.tsx
index ed1de7cd6..085d603ff 100644
--- a/src/components/page-configuration/overview.tsx
+++ b/src/components/page-configuration/overview.tsx
@@ -14,6 +14,7 @@ import {
 import { Alert } from '../alert';
 import AsyncResource from '../async-resource/async-resource';
 import { UnknownADGroupsAlert } from '../component/unknown-ad-groups-alert';
+import { ExternalLink } from '../link/external-link';
 
 interface Props {
   adGroups: Array<string>;
@@ -64,26 +65,20 @@ export function Overview({ adGroups, adUsers, appName }: Props) {
                     <List className="grid grid--gap-small">
                       {groups?.map(({ id, displayName }) => (
                         <List.Item key={id}>
-                          <Typography
-                            link
+                          <ExternalLink
                             href={`https://portal.azure.com/#blade/Microsoft_AAD_IAM/GroupDetailsMenuBlade/Overview/groupId/${id}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
                           >
                             <Icon data={group} size={16} /> {displayName}
-                          </Typography>
+                          </ExternalLink>
                         </List.Item>
                       ))}
-                      {SPs?.map(({ id, displayName }) => (
+                      {SPs?.map(({ id, displayName, appId }) => (
                         <List.Item key={id}>
-                          <Typography
-                            link
-                            href={`https://portal.azure.com/#blade/Microsoft_AAD_IAM/GroupDetailsMenuBlade/Overview/groupId/${id}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
+                          <ExternalLink
+                            href={`https://portal.azure.com/#view/Microsoft_AAD_IAM/ManagedAppMenuBlade/~/Overview/objectId/${id}/appId/${appId}`}
                           >
                             <Icon data={computer} size={16} /> {displayName}
-                          </Typography>
+                          </ExternalLink>
                         </List.Item>
                       ))}
                     </List>
diff --git a/src/components/page-deployment/deployment-summary.tsx b/src/components/page-deployment/deployment-summary.tsx
index e459337c3..5e16edcdd 100644
--- a/src/components/page-deployment/deployment-summary.tsx
+++ b/src/components/page-deployment/deployment-summary.tsx
@@ -5,16 +5,12 @@ import { Link } from 'react-router-dom';
 
 import { routes } from '../../routes';
 import type { Deployment } from '../../store/radix-api';
-import {
-  linkToGitHubCommit,
-  routeWithParams,
-  smallGithubCommitHash,
-  smallJobName,
-} from '../../utils/string';
+import { routeWithParams, smallJobName } from '../../utils/string';
 import { GitTagLinks } from '../git-tags/git-tag-links';
 import { RelativeToNow } from '../time/relative-to-now';
 
 import './style.css';
+import { CommitHash } from '../commit-hash';
 
 type Props = {
   appName: string;
@@ -67,17 +63,10 @@ export const DeploymentSummary = ({ appName, deployment }: Props) => (
         {deployment.gitCommitHash && (
           <Typography>
             Built from commit{' '}
-            <Typography
-              link
-              href={linkToGitHubCommit(
-                deployment.repository,
-                deployment.gitCommitHash
-              )}
-              token={{ textDecoration: 'none' }}
-            >
-              {smallGithubCommitHash(deployment.gitCommitHash)}{' '}
-              <Icon data={github} size={24} />
-            </Typography>
+            <CommitHash
+              repo={deployment.repository}
+              commit={deployment.gitCommitHash}
+            />
           </Typography>
         )}
       </div>
diff --git a/src/components/page-environment/environment-overview.tsx b/src/components/page-environment/environment-overview.tsx
index cbb960a85..cab90658a 100644
--- a/src/components/page-environment/environment-overview.tsx
+++ b/src/components/page-environment/environment-overview.tsx
@@ -26,10 +26,8 @@ import {
 import { dataSorter, sortCompareDate } from '../../utils/sort-utils';
 import {
   linkToGitHubBranch,
-  linkToGitHubCommit,
   routeWithParams,
   smallDeploymentName,
-  smallGithubCommitHash,
 } from '../../utils/string';
 import { Alert } from '../alert';
 import AsyncResource from '../async-resource/async-resource';
@@ -41,9 +39,11 @@ import { RelativeToNow } from '../time/relative-to-now';
 
 import './style.css';
 import useLocalStorage from '../../effects/use-local-storage';
+import { CommitHash } from '../commit-hash';
 import { DefaultAppAlias } from '../component/default-app-alias';
 import { DNSAliases } from '../component/dns-aliases';
 import { GitCommitTags } from '../component/git-commit-tags';
+import { ExternalLink } from '../link/external-link';
 
 export const EnvironmentOverview: FunctionComponent<{
   appName: string;
@@ -157,17 +157,15 @@ export const EnvironmentOverview: FunctionComponent<{
                   {environment.branchMapping && environment.activeDeployment ? (
                     <Typography>
                       Built and deployed from{' '}
-                      <Typography
-                        link
+                      <ExternalLink
                         href={linkToGitHubBranch(
                           application.registration.repository,
                           environment.branchMapping
                         )}
-                        token={{ textDecoration: 'none' }}
                       >
-                        {environment.branchMapping} branch{' '}
-                        <Icon data={github} size={24} />
-                      </Typography>
+                        {environment.branchMapping}
+                      </ExternalLink>{' '}
+                      branch
                     </Typography>
                   ) : (
                     <Typography>Not automatically deployed</Typography>
@@ -175,17 +173,10 @@ export const EnvironmentOverview: FunctionComponent<{
                   {deployment?.gitCommitHash && (
                     <Typography>
                       Built from commit{' '}
-                      <Typography
-                        link
-                        href={linkToGitHubCommit(
-                          application.registration.repository,
-                          deployment.gitCommitHash
-                        )}
-                        token={{ textDecoration: 'none' }}
-                      >
-                        {smallGithubCommitHash(deployment.gitCommitHash)}{' '}
-                        <Icon data={github} size={24} />
-                      </Typography>
+                      <CommitHash
+                        repo={application.registration.repository}
+                        commit={deployment.gitCommitHash}
+                      />
                     </Typography>
                   )}
                   {skippedDeployComponents && (
diff --git a/src/components/resources/index.tsx b/src/components/resources/index.tsx
index d82ab9ef7..c83e7d7f7 100644
--- a/src/components/resources/index.tsx
+++ b/src/components/resources/index.tsx
@@ -1,5 +1,4 @@
-import { Icon, Tooltip, Typography } from '@equinor/eds-core-react';
-import { library_books } from '@equinor/eds-icons';
+import { Typography } from '@equinor/eds-core-react';
 import * as PropTypes from 'prop-types';
 import type { FunctionComponent } from 'react';
 import { externalUrls } from '../../externalUrls';
@@ -11,6 +10,8 @@ import { formatDateTimeYear } from '../../utils/datetime';
 import AsyncResource from '../async-resource/async-resource';
 
 import './style.css';
+import { library_books } from '@equinor/eds-icons';
+import { ExternalLink } from '../link/external-link';
 
 function getPeriod({ from, to }: GetResourcesApiResponse): string {
   return `${formatDateTimeYear(new Date(from))} - ${formatDateTimeYear(
@@ -111,15 +112,11 @@ export const UsedResources: FunctionComponent<UsedResourcesProps> = ({
     <div className="grid grid--gap-medium">
       <div className="grid grid--gap-medium grid--auto-columns">
         <Typography variant="h6"> Used resources</Typography>
-        <Typography
-          link
+        <ExternalLink
           href={externalUrls.resourcesDocs}
-          rel="noopener noreferrer"
-        >
-          <Tooltip title="Read more in the documentation">
-            <Icon data={library_books} />
-          </Tooltip>
-        </Typography>
+          icon={library_books}
+          toolTip="Read more in the documentation"
+        />
       </div>
       <AsyncResource asyncState={state}>
         {resources ? (
diff --git a/src/components/vulnerability-list/index.tsx b/src/components/vulnerability-list/index.tsx
index 59bca8ebb..b922834f0 100644
--- a/src/components/vulnerability-list/index.tsx
+++ b/src/components/vulnerability-list/index.tsx
@@ -8,6 +8,7 @@ import type { Vulnerability } from '../../store/scan-api';
 import { formatDateTimeYear } from '../../utils/datetime';
 
 import './style.css';
+import { ExternalLink } from '../link/external-link';
 
 export interface VulnerabilityListProps {
   vulnerabilityList: Array<Vulnerability>;
@@ -81,27 +82,21 @@ const VulnerabilityMetadata: FunctionComponent<{
     {vulnerability.cwe?.length > 0 && (
       <List.Item>
         <Typography variant="overline">CWE</Typography>
-        <Typography
-          link
-          rel="noopener noreferrer"
-          target="_blank"
+        <ExternalLink
           href={externalUrls.cweVulnerabilityInformation(vulnerability.cwe[0])}
         >
           {vulnerability.cwe[0]}
-        </Typography>
+        </ExternalLink>
       </List.Item>
     )}
     {vulnerability.cve?.length > 0 && (
       <List.Item>
         <Typography variant="overline">CVE</Typography>
-        <Typography
-          link
-          rel="noopener noreferrer"
-          target="_blank"
+        <ExternalLink
           href={externalUrls.cveVulnerabilityInformation(vulnerability.cve[0])}
         >
           {vulnerability.cve[0]}
-        </Typography>
+        </ExternalLink>
       </List.Item>
     )}
     {vulnerability.cvss && (
@@ -151,9 +146,7 @@ const VulnerabilityItem: FunctionComponent<{
         <List className="o-indent-list" variant="bullet">
           {vulnerability.references.map((href, i) => (
             <List.Item key={i}>
-              <MdComponents.a href={href}>
-                {formatLinkTitle(href)}
-              </MdComponents.a>
+              <ExternalLink href={href}>{formatLinkTitle(href)}</ExternalLink>
             </List.Item>
           ))}
         </List>
diff --git a/src/store/ms-graph-api.ts b/src/store/ms-graph-api.ts
index 718855c8c..55e830a4f 100644
--- a/src/store/ms-graph-api.ts
+++ b/src/store/ms-graph-api.ts
@@ -95,7 +95,7 @@ const injectedRtkApi = api.injectEndpoints({
           const idFilter = ids.map((s) => `'${s}'`).join(',');
           const response: SearchResponse = await graphClient
             .api(`/servicePrincipals`)
-            .select('displayName,id')
+            .select('displayName,id,appId')
             .filter(`id in (${idFilter})`)
             .get();
 
@@ -126,7 +126,7 @@ const injectedRtkApi = api.injectEndpoints({
           const idFilter = ids.map((s) => `'${s}'`).join(',');
           const response: SearchResponse = await graphClient
             .api(`/applications`)
-            .select('displayName,id')
+            .select('displayName,id,appId')
             .filter(`id in (${idFilter})`)
             .get();
 
@@ -163,7 +163,7 @@ const injectedRtkApi = api.injectEndpoints({
 
           const groups: SearchResponse = await graphClient
             .api('/servicePrincipals')
-            .select('displayName,id')
+            .select('displayName,id,appId')
             .filter(displayName ? `startswith(displayName,'${displayName}')` : '')
             .top(limit)
             .get();
@@ -182,7 +182,7 @@ const injectedRtkApi = api.injectEndpoints({
 
           const groups: SearchResponse = await graphClient
             .api('/applications')
-            .select('displayName,id')
+            .select('displayName,id,appId')
             .filter(displayName ? `startswith(displayName,'${displayName}')` : '')
             .top(limit)
             .get();
@@ -198,7 +198,6 @@ const injectedRtkApi = api.injectEndpoints({
 
 export { injectedRtkApi as msGraphApi };
 export const {
-  useGetAdGroupQuery,
   useGetAdGroupsQuery,
   useGetAdApplicationQuery,
   useGetAdServicePrincipalQuery,
@@ -216,6 +215,7 @@ type GetAdGroupArg = {
 export type EntraItem = {
   displayName: string;
   id: string;
+  appId?: string;
 };
 type GetEntraArg = {
   ids: string[];

From b313d08000884326015bfac437c0d1fca886005b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nils=20Gustav=20Str=C3=A5b=C3=B8?= <nst@equinor.com>
Date: Mon, 18 Nov 2024 11:04:41 +0100
Subject: [PATCH 4/5] cleanup environment card links and spacing

---
 .../environments-summary/environment-card.tsx | 38 +++++++++----------
 .../environment-ingress.tsx                   | 20 ++++++----
 src/components/environments-summary/style.css | 23 -----------
 3 files changed, 31 insertions(+), 50 deletions(-)

diff --git a/src/components/environments-summary/environment-card.tsx b/src/components/environments-summary/environment-card.tsx
index 3137bf2e6..22e4f5692 100644
--- a/src/components/environments-summary/environment-card.tsx
+++ b/src/components/environments-summary/environment-card.tsx
@@ -1,4 +1,4 @@
-import { Button, Divider, Icon, Typography } from '@equinor/eds-core-react';
+import { Divider, Icon, Typography } from '@equinor/eds-core-react';
 import { github, link, send } from '@equinor/eds-icons';
 import * as PropTypes from 'prop-types';
 import type React from 'react';
@@ -53,12 +53,13 @@ const DeploymentDetails: FunctionComponent<{
   deployment: Readonly<DeploymentSummary>;
 }> = ({ appName, deployment }) =>
   !deployment ? (
-    <Button className="button_link" variant="ghost" disabled>
-      <Icon data={send} />{' '}
-      <Typography group="navigation" variant="button" color="inherit">
-        No active deployment
-      </Typography>
-    </Button>
+    <Typography
+      color="disabled"
+      className="grid grid--auto-columns grid--gap-small grid--align-center"
+    >
+      <Icon data={link} />
+      No active deployment
+    </Typography>
   ) : (
     <Typography
       as={Link}
@@ -66,16 +67,14 @@ const DeploymentDetails: FunctionComponent<{
       link
       token={{ textDecoration: 'none' }}
     >
-      <span className="o-key-values">
+      <span className="grid grid--auto-columns grid--gap-small grid--align-center">
         <Icon data={send} />
-        <span>
-          <Typography as="span" color="primary">
-            deployment{' '}
-          </Typography>
+        <Typography as="span" color="primary">
+          deployment{' '}
           <Typography as="span" color="gray">
             (<RelativeToNow time={new Date(deployment.activeFrom)} />)
           </Typography>
-        </span>
+        </Typography>
       </span>
     </Typography>
   );
@@ -162,12 +161,13 @@ export const EnvironmentCard: FunctionComponent<EnvironmentCardProps> = ({
     ? {
         header: <></>,
         body: (
-          <Button className="button_link" variant="ghost" disabled>
-            <Icon data={link} />{' '}
-            <Typography group="navigation" variant="button" color="inherit">
-              No link available
-            </Typography>
-          </Button>
+          <Typography
+            color="disabled"
+            className="grid grid--auto-columns grid--gap-small grid--align-center"
+          >
+            <Icon data={link} />
+            No link available
+          </Typography>
         ),
       }
     : CardContentBuilder(appName, env.name, deployment.name);
diff --git a/src/components/environments-summary/environment-ingress.tsx b/src/components/environments-summary/environment-ingress.tsx
index d27f94c3e..5250cbcb3 100644
--- a/src/components/environments-summary/environment-ingress.tsx
+++ b/src/components/environments-summary/environment-ingress.tsx
@@ -1,4 +1,4 @@
-import { Button, Icon, Typography } from '@equinor/eds-core-react';
+import { Icon, Typography } from '@equinor/eds-core-react';
 import { type IconData, link, memory } from '@equinor/eds-icons';
 import * as PropTypes from 'prop-types';
 import type { FunctionComponent } from 'react';
@@ -34,7 +34,7 @@ const ComponentDetails: FunctionComponent<{
   icon: IconData;
   component: Readonly<Component>;
 }> = ({ icon, component }) => (
-  <span className="o-key-values">
+  <span className="grid grid--auto-columns grid--gap-small grid--align-center">
     <Icon data={icon} />
     <Typography
       as="span"
@@ -82,17 +82,21 @@ export const EnvironmentIngress: FunctionComponent<EnvironmentIngressProps> = ({
           <ExternalLink
             key={component.name}
             href={`https://${component.variables[URL_VAR_NAME]}`}
-            icon={null}
+            className="grid grid--auto-columns grid--gap-x-small grid--align-center"
           >
             <ComponentDetails icon={link} component={component} />
           </ExternalLink>
         ))
       ) : (
-        <Button variant="ghost" className="button_link" disabled>
-          <span>
-            <Icon data={link} /> No link available
-          </span>
-        </Button>
+        <span>
+          <Typography
+            color="disabled"
+            className="grid grid--auto-columns grid--gap-small grid--align-center"
+          >
+            <Icon data={link} />
+            No link available
+          </Typography>
+        </span>
       )}
       {comps.passive
         .filter(({ status }) => status === 'Outdated')
diff --git a/src/components/environments-summary/style.css b/src/components/environments-summary/style.css
index 701ce66e0..9ca10a2b9 100644
--- a/src/components/environments-summary/style.css
+++ b/src/components/environments-summary/style.css
@@ -31,29 +31,6 @@
   padding: 0 var(--eds_spacing_medium);
   margin-bottom: var(--eds_spacing_medium);
 }
-.env_card_content > .button_link {
-  padding: initial;
-}
-.env_card_content > .button_link > span {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: var(--eds_spacing_small);
-  align-items: center;
-  text-align: left;
-}
-.env_card_content > .button_link .error {
-  fill: var(--eds_interactive_danger__resting);
-  z-index: 1;
-}
-.env_card_content > .button_link .component_details {
-  display: block;
-  white-space: nowrap;
-}
-.env_card_content .env_actions {
-  display: grid;
-  grid-auto-flow: column;
-  grid-gap: var(--eds_spacing_small);
-}
 
 .env_card_tags {
   align-items: center;

From e6ad8e62bf7018272786cbced82d0f33feb52577 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nils=20Gustav=20Str=C3=A5b=C3=B8?= <nst@equinor.com>
Date: Tue, 19 Nov 2024 09:51:29 +0100
Subject: [PATCH 5/5] remove use of FunctionComponent

---
 src/components/commit-hash/index.tsx  | 19 ++++++++-------
 src/components/link/external-link.tsx | 33 +++++++++++++++------------
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/components/commit-hash/index.tsx b/src/components/commit-hash/index.tsx
index 528d34227..ed05d8e5a 100644
--- a/src/components/commit-hash/index.tsx
+++ b/src/components/commit-hash/index.tsx
@@ -1,18 +1,20 @@
 import { Icon } from '@equinor/eds-core-react';
 import { github } from '@equinor/eds-icons';
-import type { FunctionComponent, PropsWithChildren } 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;
-}
+};
 
-const ExternalLinkWrapper: FunctionComponent<
-  PropsWithChildren<CommitHashProps>
-> = ({ repo, commit, children }) =>
+const ExternalLinkWrapper = ({
+  repo,
+  commit,
+  children,
+}: PropsWithChildren<CommitHashProps>) =>
   repo ? (
     <ExternalLink
       href={`${repo}/commit/${commit}`}
@@ -24,10 +26,7 @@ const ExternalLinkWrapper: FunctionComponent<
     <>{children}</>
   );
 
-export const CommitHash: FunctionComponent<CommitHashProps> = ({
-  repo,
-  commit,
-}) =>
+export const CommitHash = ({ repo, commit }: CommitHashProps) =>
   commit?.length > 0 ? (
     <ExternalLinkWrapper {...{ repo, commit }}>
       {repo && <Icon data={github} size={18} />} {smallGithubCommitHash(commit)}
diff --git a/src/components/link/external-link.tsx b/src/components/link/external-link.tsx
index e12d03ce0..481dde492 100644
--- a/src/components/link/external-link.tsx
+++ b/src/components/link/external-link.tsx
@@ -1,10 +1,13 @@
 import { Icon, Tooltip, Typography } from '@equinor/eds-core-react';
 import { type IconData, external_link } from '@equinor/eds-icons';
-import type { FunctionComponent, PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 
-const ToolTipWrapper: FunctionComponent<
-  PropsWithChildren<{ toolTip?: string }>
-> = ({ toolTip, children }) =>
+type ToolTipWrapperProps = { toolTip?: string };
+
+const ToolTipWrapper = ({
+  toolTip,
+  children,
+}: PropsWithChildren<ToolTipWrapperProps>) =>
   toolTip ? (
     <Tooltip title={toolTip}>
       <span>{children}</span>
@@ -13,16 +16,16 @@ const ToolTipWrapper: FunctionComponent<
     <>{children}</>
   );
 
-export const ExternalLink: FunctionComponent<
-  PropsWithChildren<{
-    href: string;
-    icon?: IconData;
-    color?: string;
-    className?: string;
-    toolTip?: string;
-    title?: string;
-  }>
-> = ({
+type ExternalLinkProps = {
+  href: string;
+  icon?: IconData;
+  color?: string;
+  className?: string;
+  toolTip?: string;
+  title?: string;
+};
+
+export const ExternalLink = ({
   href,
   children,
   icon = external_link,
@@ -30,7 +33,7 @@ export const ExternalLink: FunctionComponent<
   color,
   toolTip,
   title,
-}) => (
+}: PropsWithChildren<ExternalLinkProps>) => (
   <ToolTipWrapper toolTip={toolTip}>
     <Typography
       link