Add alt text to icons and use ui-shared version (#4499)

apps/admin-ui/package.json

@@ -16,6 +16,7 @@
     "dev": {
       "command": "vite --host",
       "dependencies": [
+        "../../libs/ui-shared:build",
         "../../libs/keycloak-js:build",
         "../../libs/keycloak-admin-client:build"
       ]
@@ -23,6 +24,7 @@
     "preview": {
       "command": "vite preview",
       "dependencies": [
+        "../../libs/ui-shared:build",
         "../../libs/keycloak-js:build",
         "../../libs/keycloak-admin-client:build"
       ]
@@ -30,6 +32,7 @@
     "build": {
       "command": "vite build",
       "dependencies": [
+        "../../libs/ui-shared:build",
         "../../libs/keycloak-js:build",
         "../../libs/keycloak-admin-client:build"
       ]
@@ -37,6 +40,7 @@
     "lint": {
       "command": "eslint . --ext js,jsx,mjs,ts,tsx",
       "dependencies": [
+        "../../libs/ui-shared:build",
         "../../libs/keycloak-js:build",
         "../../libs/keycloak-admin-client:build"
       ]
@@ -44,6 +48,7 @@
     "test": {
       "command": "vitest",
       "dependencies": [
+        "../../libs/ui-shared:build",
         "../../libs/keycloak-js:build",
         "../../libs/keycloak-admin-client:build"
       ]
@@ -83,6 +88,7 @@
     "react-i18next": "^12.2.0",
     "react-router-dom": "6.8.2",
     "reactflow": "^11.5.6",
+    "ui-shared": "999.0.0-dev",
     "use-react-router-breadcrumbs": "^4.0.1"
   },
   "devDependencies": {

apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx

@@ -1,7 +1,3 @@
-import { Fragment, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { sortBy, groupBy } from "lodash-es";
 import {
   AlertVariant,
   Badge,
@@ -22,22 +18,54 @@ import {
   TextVariants,
   ToolbarItem,
 } from "@patternfly/react-core";
+import { groupBy, sortBy } from "lodash-es";
+import { Fragment, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useNavigate } from "react-router-dom";
 
 import type IdentityProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderRepresentation";
-import { ViewHeader } from "../components/view-header/ViewHeader";
-import { useFetch, useAdminClient } from "../context/auth/AdminClient";
-import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
-import { useRealm } from "../context/realm-context/RealmContext";
+import { IconMapper } from "ui-shared";
 import { useAlerts } from "../components/alert/Alerts";
-import { useServerInfo } from "../context/server-info/ServerInfoProvider";
-import { upperCaseFormatter } from "../util";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
-import { ProviderIconMapper } from "./ProviderIconMapper";
+import { ClickableCard } from "../components/keycloak-card/ClickableCard";
+import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
+import { ViewHeader } from "../components/view-header/ViewHeader";
+import { useAdminClient, useFetch } from "../context/auth/AdminClient";
+import { useRealm } from "../context/realm-context/RealmContext";
+import { useServerInfo } from "../context/server-info/ServerInfoProvider";
+import helpUrls from "../help-urls";
+import { upperCaseFormatter } from "../util";
 import { ManageOrderDialog } from "./ManageOrderDialog";
 import { toIdentityProvider } from "./routes/IdentityProvider";
 import { toIdentityProviderCreate } from "./routes/IdentityProviderCreate";
-import helpUrls from "../help-urls";
-import { ClickableCard } from "../components/keycloak-card/ClickableCard";
+
+const DetailLink = (identityProvider: IdentityProviderRepresentation) => {
+  const { t } = useTranslation("identity-providers");
+  const { realm } = useRealm();
+
+  return (
+    <Link
+      key={identityProvider.providerId}
+      to={toIdentityProvider({
+        realm,
+        providerId: identityProvider.providerId!,
+        alias: identityProvider.alias!,
+        tab: "settings",
+      })}
+    >
+      {identityProvider.displayName || identityProvider.alias}
+      {!identityProvider.enabled && (
+        <Badge
+          key={`${identityProvider.providerId}-disabled`}
+          isRead
+          className="pf-u-ml-sm"
+        >
+          {t("common:disabled")}
+        </Badge>
+      )}
+    </Link>
+  );
+};
 
 export default function IdentityProvidersSection() {
   const { t } = useTranslation("identity-providers");
@@ -74,29 +102,6 @@ export default function IdentityProvidersSection() {
     [key]
   );
 
-  const DetailLink = (identityProvider: IdentityProviderRepresentation) => (
-    <Link
-      key={identityProvider.providerId}
-      to={toIdentityProvider({
-        realm,
-        providerId: identityProvider.providerId!,
-        alias: identityProvider.alias!,
-        tab: "settings",
-      })}
-    >
-      {identityProvider.displayName || identityProvider.alias}
-      {!identityProvider.enabled && (
-        <Badge
-          key={`${identityProvider.providerId}-disabled`}
-          isRead
-          className="pf-u-ml-sm"
-        >
-          {t("common:disabled")}
-        </Badge>
-      )}
-    </Link>
-  );
-
   const navigateToCreate = (providerId: string) =>
     navigate(
       toIdentityProviderCreate({
@@ -197,7 +202,7 @@ export default function IdentityProvidersSection() {
                       <CardTitle>
                         <Split hasGutter>
                           <SplitItem>
-                            <ProviderIconMapper provider={provider} />
+                            <IconMapper icon={provider.id} />
                           </SplitItem>
                           <SplitItem isFilled>{provider.name}</SplitItem>
                         </Split>

apps/admin-ui/src/identity-providers/ProviderIconMapper.tsx

@@ -1,54 +0,0 @@
-import {
-  BitbucketIcon,
-  CubeIcon,
-  FacebookSquareIcon,
-  GithubIcon,
-  GitlabIcon,
-  GoogleIcon,
-  InstagramIcon,
-  LinkedinIcon,
-  MicrosoftIcon,
-  OpenshiftIcon,
-  PaypalIcon,
-  StackOverflowIcon,
-  TwitterIcon,
-} from "@patternfly/react-icons";
-import type { SVGIconProps } from "@patternfly/react-icons/dist/js/createIcon";
-
-type ProviderIconMapperProps = {
-  provider: { [index: string]: string };
-};
-
-export const ProviderIconMapper = ({ provider }: ProviderIconMapperProps) => {
-  const defaultProps: SVGIconProps = { size: "lg" };
-  switch (provider.id) {
-    case "github":
-      return <GithubIcon {...defaultProps} />;
-    case "facebook":
-      return <FacebookSquareIcon {...defaultProps} />;
-    case "gitlab":
-      return <GitlabIcon {...defaultProps} />;
-    case "google":
-      return <GoogleIcon {...defaultProps} />;
-    case "linkedin":
-      return <LinkedinIcon {...defaultProps} />;
-
-    case "openshift-v3":
-    case "openshift-v4":
-      return <OpenshiftIcon {...defaultProps} />;
-    case "stackoverflow":
-      return <StackOverflowIcon {...defaultProps} />;
-    case "twitter":
-      return <TwitterIcon {...defaultProps} />;
-    case "microsoft":
-      return <MicrosoftIcon {...defaultProps} />;
-    case "bitbucket":
-      return <BitbucketIcon {...defaultProps} />;
-    case "instagram":
-      return <InstagramIcon {...defaultProps} />;
-    case "paypal":
-      return <PaypalIcon {...defaultProps} />;
-    default:
-      return <CubeIcon {...defaultProps} />;
-  }
-};

libs/ui-shared/src/icons/IconMapper.tsx

@@ -20,7 +20,7 @@ type IconMapperProps = {
 
 export const IconMapper = ({ icon }: IconMapperProps) => {
   const Icon = getIcon(icon);
-  return <Icon size="lg" />;
+  return <Icon size="lg" alt={icon} />;
 };
 
 function getIcon(icon: string) {