From 0562a7011fac67bae23273ea9a0734ac49b93d83 Mon Sep 17 00:00:00 2001
From: Camila Belo <camilaibs@gmail.com>
Date: Tue, 13 Feb 2024 09:57:17 +0100
Subject: [PATCH] feat(core-compat-api): create system icon abstraction

Signed-off-by: Camila Belo <camilaibs@gmail.com>
---
 .../src/components/SystemIcon.tsx             | 52 +++++++++++++++++++
 .../core-compat-api/src/components/index.ts   | 17 ++++++
 packages/core-compat-api/src/index.ts         |  2 +
 3 files changed, 71 insertions(+)
 create mode 100644 packages/core-compat-api/src/components/SystemIcon.tsx
 create mode 100644 packages/core-compat-api/src/components/index.ts

diff --git a/packages/core-compat-api/src/components/SystemIcon.tsx b/packages/core-compat-api/src/components/SystemIcon.tsx
new file mode 100644
index 0000000000..00c20da5db
--- /dev/null
+++ b/packages/core-compat-api/src/components/SystemIcon.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * 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 { useApp } from '@backstage/core-plugin-api';
+import React from 'react';
+import { compatWrapper } from '../compatWrapper';
+
+/**
+ * @public
+ * Props for the System Icon component.
+ */
+export type SystemIconProps = {
+  // The id of the system icon to render.
+  id: string;
+  // An optional fallback element to render when the system icon is not found.
+  fallback?: JSX.Element;
+};
+
+function SystemIcon(props: SystemIconProps) {
+  const { id, fallback = null } = props;
+  const app = useApp();
+  const Component = app.getSystemIcon(id);
+  return Component ? <Component /> : fallback;
+}
+
+/**
+ * @public
+ * SystemIcon is a component that renders a system icon by its id.
+ * @example
+ * Rendering the "kind:api" icon:
+ * ```tsx
+ * <SystemIcon id="kind:api" />
+ * ```
+ */
+function CompatSystemIcon(props: SystemIconProps) {
+  return compatWrapper(<SystemIcon {...props} />);
+}
+
+export { CompatSystemIcon as SystemIcon };
diff --git a/packages/core-compat-api/src/components/index.ts b/packages/core-compat-api/src/components/index.ts
new file mode 100644
index 0000000000..e02ab727c6
--- /dev/null
+++ b/packages/core-compat-api/src/components/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * 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.
+ */
+
+export { SystemIcon, type SystemIconProps } from './SystemIcon';
diff --git a/packages/core-compat-api/src/index.ts b/packages/core-compat-api/src/index.ts
index 88e1892eac..3da227e554 100644
--- a/packages/core-compat-api/src/index.ts
+++ b/packages/core-compat-api/src/index.ts
@@ -17,6 +17,8 @@ export * from './compatWrapper';
 
 export * from './apis';
 
+export * from './components';
+
 export { convertLegacyApp } from './convertLegacyApp';
 export {
   convertLegacyRouteRef,