feat(x2a): icon for the X2A (#2631)

Signed-off-by: Marek Libra <marek.libra@gmail.com>
Co-authored-by: Elai Shalev <129178340+elai-shalev@users.noreply.github.com>

Author: mareklibra

workspaces/x2a/.changeset/silly-views-change.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-x2a': patch
+---
+
+Icon for the X2A left side menu.

workspaces/x2a/catalog-info.yaml

@@ -1,13 +1,22 @@
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
 apiVersion: backstage.io/v1alpha1
 kind: Component
 metadata:
-  name: x2a
-  description: An example of a Backstage application.
-  # Example for optional annotations
-  # annotations:
-  #   github.com/project-slug: backstage/backstage
-  #   backstage.io/techdocs-ref: dir:.
+  name: red-hat-developer-hub-x2a-frontend
+  title: '@red-hat-developer-hub/backstage-plugin-x2a'
+  description: Conversion Hub Plugin for Backstage
+  annotations:
+    github.com/project-slug: red-hat-developer-hub/backstage-plugins
+    github.com/team-slug: red-hat-developer-hub/x2a-codeowners
+    sonarqube.org/project-key: red_hat_developer_hub_plugins
+  links:
+    - url: https://github.com/redhat-developer/rhdh-plugins/tree/main/workspaces/x2a/plugins/x2a
+      title: GitHub Source
+      icon: source
+      type: source
 spec:
-  type: website
-  owner: john@example.com
-  lifecycle: experimental
+  type: backstage-frontend-plugin
+  lifecycle: active
+  owner: x2a-team
+  system: rhdh
+  subcomponentOf: rhdh-plugins

workspaces/x2a/packages/app/src/components/Root/Root.tsx

@@ -43,7 +43,10 @@ import SearchIcon from '@material-ui/icons/Search';
 import { MyGroupsSidebarItem } from '@backstage/plugin-org';
 import GroupIcon from '@material-ui/icons/People';
 import { NotificationsSidebarItem } from '@backstage/plugin-notifications';
-import { useX2ATranslation } from '@red-hat-developer-hub/backstage-plugin-x2a';
+import {
+  useX2ATranslation,
+  X2AIcon,
+} from '@red-hat-developer-hub/backstage-plugin-x2a';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -101,11 +104,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
           />
           {/* End global nav */}
           <SidebarDivider />
-          <SidebarItem
-            icon={ExtensionIcon}
-            to="x2a"
-            text={t('sidebar.x2a.title')}
-          />
+          <SidebarItem icon={X2AIcon} to="x2a" text={t('sidebar.x2a.title')} />
           <SidebarScrollWrapper>
             {/* Items in this group will be scrollable if they run out of space */}
           </SidebarScrollWrapper>

workspaces/x2a/plugins/x2a/report.api.md

@@ -8,6 +8,7 @@ import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { FieldExtensionComponent } from '@backstage/plugin-scaffolder-react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { RouteRef } from '@backstage/core-plugin-api';
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import { TranslationFunction } from '@backstage/core-plugin-api/alpha';
 import { TranslationRef } from '@backstage/core-plugin-api/alpha';
 import { TranslationResource } from '@backstage/core-plugin-api/alpha';
@@ -23,6 +24,9 @@ export const useX2ATranslation: () => {
     t: TFuncX2A;
 };
 
+// @public
+export const X2AIcon: (props: SvgIconProps) => JSX_2.Element;
+
 // @public (undocumented)
 export const X2APage: () => JSX_2.Element;
 

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+/**
+ * Application icon (for the left side menu)
+ *
+ * @public
+ */
+export const X2AIcon = (props: SvgIconProps) => (
+  <SvgIcon viewBox="0 -960 960 960" {...props}>
+    <path d="M400-280h160v-80H400v80Zm0-160h280v-80H400v80ZM280-600h400v-80H280v80Zm200 120ZM80-80v-80h102q-48-23-77.5-68T75-330q0-79 55.5-134.5T265-520v80q-45 0-77.5 32T155-330q0 39 24 69t61 38v-97h80v240H80Zm320-40v-80h360v-560H200v160h-80v-160q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H400Z" />
+  </SvgIcon>
+);

workspaces/x2a/plugins/x2a/src/index.ts

@@ -19,3 +19,4 @@ export {
   useTranslation as useX2ATranslation,
   type TFuncX2A,
 } from './hooks/useTranslation';
+export { X2AIcon } from './components/x2aIcon';