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 = ({
- You can setup Radix to send alerts to a Slack channel. See{' '} - + You can setup Radix to send alerts to a Slack channel. + + + See{' '} + Radix documentation on alert setup - +
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< Name - - {configurationItem.name}{' '} - {externalUrl && } - + + {configurationItem.name} +
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) => ( ))} - - Monitoring - + ); }; @@ -157,16 +155,11 @@ const NavbarMinimized = ({ appName, links }: NavbarProps) => ( ))} - + - + ); 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; @@ -57,14 +58,9 @@ export default function AsyncResource({ You may want to refresh the page. If the problem persists, get in touch on our Slack{' '} - + support channel - +
diff --git a/src/components/commit-hash/index.tsx b/src/components/commit-hash/index.tsx index 88e7b8af9..ed05d8e5a 100644 --- a/src/components/commit-hash/index.tsx +++ b/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 = ({ - commit, +const ExternalLinkWrapper = ({ repo, -}) => - commit?.length > 0 ? ( - ) => + repo ? ( + - {smallGithubCommitHash(commit)} {repo && } - + {children} + + ) : ( + <>{children} + ); + +export const CommitHash = ({ repo, commit }: CommitHashProps) => + commit?.length > 0 ? ( + + {repo && } {smallGithubCommitHash(commit)} + ) : null; 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 = ({
Default alias - - - {url} - {' '} - is mapped to component{' '} + {url} is mapped to + component{' '} = ({ environmentName, }) => ( <> - - - {url} - {' '} - is mapped to component{' '} + {url} is mapped to + component{' '} void 0} refetch={() => void 0} initialSecretPollInterval={5000} + useOtherCiToolOptionVisible={true} />
); diff --git a/src/components/configure-application-github/index.tsx b/src/components/configure-application-github/index.tsx index d3620daca..0b3226919 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 = ({
This allows Radix to clone the repository. Open the{' '} - + Add New Deploy Key page - {' '} + {' '} and follow the steps below
@@ -197,7 +193,7 @@ export const ConfigureApplicationGithub = ({ checked={useOtherCiTool} onChange={() => setUseOtherCiTool(!useOtherCiTool)} />{' '} - + Use other CI tool than Radix - + 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. -
- See{' '} - + through the API/CLI. Read the{' '} + Deployment Guide - {' '} + {' '} for details. @@ -245,14 +229,9 @@ export const ConfigureApplicationGithub = ({ GitHub notifies Radix using a webhook whenever a code push is made. Open the{' '} - + Add Webhook page - {' '} + {' '} and follow the steps below
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) { You can read about{' '} - + radixconfig.yaml - {' '} + {' '} and{' '} - + Dockerfile best practices - + . Need help? Get in touch on our{' '} - + Slack support channel - +
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 = () => {
For more information on availability, please check the{' '} - - documentation. - + + documentation + + . {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< )} {deployment.pipelineJobType} - - - + diff --git a/src/components/deployments-list/index.tsx b/src/components/deployments-list/index.tsx index 9f87d0224..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'; @@ -101,9 +101,7 @@ export const DeploymentsList: FunctionComponent = ({ Type of job - - Github commit - + Github commit Promoted from diff --git a/src/components/environments-summary/environment-card.tsx b/src/components/environments-summary/environment-card.tsx index b7c883748..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'; @@ -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 }; @@ -52,29 +53,30 @@ const DeploymentDetails: FunctionComponent<{ deployment: Readonly; }> = ({ appName, deployment }) => !deployment ? ( - + + + No active deployment + ) : ( - + + ); function CardContentBuilder( @@ -159,12 +161,13 @@ export const EnvironmentCard: FunctionComponent = ({ ? { header: <>, body: ( - + + + No link available + ), } : 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 8dc82cde9..5250cbcb3 100644 --- a/src/components/environments-summary/environment-ingress.tsx +++ b/src/components/environments-summary/environment-ingress.tsx @@ -1,13 +1,15 @@ -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'; +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; }> = ({ icon, component }) => ( - <> + {component.name} - {component.status === 'Outdated' && ( - - outdated image - - )} - + ); export const EnvironmentIngress: FunctionComponent = ({ @@ -86,33 +79,37 @@ export const EnvironmentIngress: FunctionComponent = ({ <> {comps.public.length > 0 ? ( comps.public.map((component) => ( - + )) ) : ( - + + + + No link available + + )} {comps.passive .filter(({ status }) => status === 'Outdated') .map((component) => ( - + ))} {tooManyPublic && tooManyPassive &&
…
} 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< )) ) : ( - - No environments. Please run a pipeline job to deploy - one or define at least one environment in{' '} - - radixconfig.yaml + + No enironments. + + Please run the{' '} + + apply-config + {' '} + pipeline job to apply{' '} + + radixconfig.yaml + - + )}
); 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; 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 = () => ( @@ -11,14 +12,9 @@ export const ExternalDnsAliasHelp: FunctionComponent = () => (
Please refer to guide{' '} - + Configure External DNS Alias - {' '} + {' '} for information about configuration and troubleshooting
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 }) => ( - +
{tagTitle}
- + ); 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 = () => (
Please refer to guide{' '} - + Configure Workload Identity - {' '} + {' '} for information about configuration and troubleshooting
diff --git a/src/components/link/external-link.tsx b/src/components/link/external-link.tsx new file mode 100644 index 000000000..481dde492 --- /dev/null +++ b/src/components/link/external-link.tsx @@ -0,0 +1,50 @@ +import { Icon, Tooltip, Typography } from '@equinor/eds-core-react'; +import { type IconData, external_link } from '@equinor/eds-icons'; +import type { PropsWithChildren } from 'react'; + +type ToolTipWrapperProps = { toolTip?: string }; + +const ToolTipWrapper = ({ + toolTip, + children, +}: PropsWithChildren) => + toolTip ? ( + + {children} + + ) : ( + <>{children} + ); + +type ExternalLinkProps = { + href: string; + icon?: IconData; + color?: string; + className?: string; + toolTip?: string; + title?: string; +}; + +export const ExternalLink = ({ + href, + children, + icon = external_link, + className = 'whitespace-nowrap', + color, + toolTip, + title, +}: PropsWithChildren) => ( + + + {children} {icon && } + + +); 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 && ( This component is the{' '} - - default alias - + + default alias + )} 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 = ({ url, }) => ( <> - - {url} - + {url} ); 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] && ( Publicly available{' '} - - link - + link + )} {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({ Open the{' '} - + Deploy Key page - {' '} + {' '} to delete the Deploy Key from the previous repository Open the{' '} - + Add New Deploy Key - {' '} + {' '} and follow the steps below @@ -198,26 +189,16 @@ export function ChangeRepositoryForm({ Open the{' '} - + Webhook page - {' '} + {' '} of the previous repository and delete the existing Webhook Open the{' '} - + Add Webhook page - {' '} + {' '} and follow the steps below diff --git a/src/components/page-configuration/index.tsx b/src/components/page-configuration/index.tsx index 8cd5fb1d2..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,21 +77,21 @@ export function PageConfiguration({ appName }: { appName: string }) { GitHub Cloned from{' '} - + {registration.repository} - + Config branch{' '} - + {getConfigBranch(registration.configBranch)} - + Config file{' '} - + {getRadixConfigFullName(registration.radixConfigFullName)} - + ; @@ -64,26 +65,20 @@ export function Overview({ adGroups, adUsers, appName }: Props) { {groups?.map(({ id, displayName }) => ( - {displayName} - + ))} - {SPs?.map(({ id, displayName }) => ( + {SPs?.map(({ id, displayName, appId }) => ( - {displayName} - + ))} 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} /> - Now you can{' '} + Now you can run the{' '} - create the first pipeline job + apply-config pipeline job {' '} - or go to{' '} + to apply radixconfig.yaml, or go to{' '} ( {deployment.gitCommitHash && ( Built from commit{' '} - - {smallGithubCommitHash(deployment.gitCommitHash)}{' '} - - + )}
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 ? ( Built and deployed from{' '} - - {environment.branchMapping} branch{' '} - - + {environment.branchMapping} + {' '} + branch ) : ( Not automatically deployed @@ -175,17 +173,10 @@ export const EnvironmentOverview: FunctionComponent<{ {deployment?.gitCommitHash && ( Built from commit{' '} - - {smallGithubCommitHash(deployment.gitCommitHash)}{' '} - - + )} {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 = ({
Used resources - - - - - + icon={library_books} + toolTip="Read more in the documentation" + />
{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; @@ -81,27 +82,21 @@ const VulnerabilityMetadata: FunctionComponent<{ {vulnerability.cwe?.length > 0 && ( CWE - {vulnerability.cwe[0]} - + )} {vulnerability.cve?.length > 0 && ( CVE - {vulnerability.cve[0]} - + )} {vulnerability.cvss && ( @@ -151,9 +146,7 @@ const VulnerabilityItem: FunctionComponent<{ {vulnerability.references.map((href, i) => ( - - {formatLinkTitle(href)} - + {formatLinkTitle(href)} ))} 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[];