From b07ec70c90331bde0473d0ffe1d3b37dfb07de0f Mon Sep 17 00:00:00 2001 From: Patrick Jungermann Date: Wed, 24 Jan 2024 16:04:37 +0100 Subject: [PATCH] feat(scaffolder): Use more distinguishable icons for link and text output Use more distinguishable icons for link (`Link`) and text output (`Description`). Currently, both use the same icon `Web` (until specified explicitly at the template). For a user, it is not really clear which of these will open more output below it vs open a URL/a new tab. Signed-off-by: Patrick Jungermann --- .changeset/twelve-hounds-know.md | 5 +++++ .../src/next/components/TemplateOutputs/LinkOutputs.tsx | 4 ++-- .../src/next/components/TemplateOutputs/TextOutputs.tsx | 4 ++-- 3 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 .changeset/twelve-hounds-know.md diff --git a/.changeset/twelve-hounds-know.md b/.changeset/twelve-hounds-know.md new file mode 100644 index 0000000000..3c95c71ddb --- /dev/null +++ b/.changeset/twelve-hounds-know.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': minor +--- + +Use more distinguishable icons for link (`Link`) and text output (`Description`). diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/LinkOutputs.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/LinkOutputs.tsx index d172aa9cb3..7877653197 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/LinkOutputs.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/LinkOutputs.tsx @@ -17,7 +17,7 @@ import { IconComponent, useApp, useRouteRef } from '@backstage/core-plugin-api'; import { entityRouteRef } from '@backstage/plugin-catalog-react'; import { Button, makeStyles } from '@material-ui/core'; import React from 'react'; -import WebIcon from '@material-ui/icons/Web'; +import LinkIcon from '@material-ui/icons/Link'; import { parseEntityRef } from '@backstage/catalog-model'; import { Link } from '@backstage/core-components'; import { ScaffolderTaskOutput } from '../../../api'; @@ -37,7 +37,7 @@ export const LinkOutputs = (props: { output: ScaffolderTaskOutput }) => { const entityRoute = useRouteRef(entityRouteRef); const iconResolver = (key?: string): IconComponent => - app.getSystemIcon(key!) ?? WebIcon; + app.getSystemIcon(key!) ?? LinkIcon; return ( <> diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx index 8f61aa6a30..74a5eabb8f 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx @@ -15,7 +15,7 @@ */ import { IconComponent, useApp } from '@backstage/core-plugin-api'; import { Button } from '@material-ui/core'; -import WebIcon from '@material-ui/icons/Web'; +import DescriptionIcon from '@material-ui/icons/Description'; import React from 'react'; import { ScaffolderTaskOutput } from '../../../api'; @@ -33,7 +33,7 @@ export const TextOutputs = (props: { const app = useApp(); const iconResolver = (key?: string): IconComponent => - app.getSystemIcon(key!) ?? WebIcon; + app.getSystemIcon(key!) ?? DescriptionIcon; return ( <>