From 4e973d6202706c0112f2edb4d3e5a16c84583d09 Mon Sep 17 00:00:00 2001 From: Erik Jan de Wit Date: Thu, 2 Mar 2023 13:31:21 +0100 Subject: [PATCH] Add alt text to icons and use ui-shared version (#4499) --- apps/admin-ui/package.json | 6 ++ .../IdentityProvidersSection.tsx | 79 ++++++++++--------- .../identity-providers/ProviderIconMapper.tsx | 54 ------------- libs/ui-shared/src/icons/IconMapper.tsx | 2 +- 4 files changed, 49 insertions(+), 92 deletions(-) delete mode 100644 apps/admin-ui/src/identity-providers/ProviderIconMapper.tsx diff --git a/apps/admin-ui/package.json b/apps/admin-ui/package.json index dbd7eb0cfc..7d8b4f0106 100644 --- a/apps/admin-ui/package.json +++ b/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": { diff --git a/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx b/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx index 3344deffb8..622e10f474 100644 --- a/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx +++ b/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 ( + + {identityProvider.displayName || identityProvider.alias} + {!identityProvider.enabled && ( + + {t("common:disabled")} + + )} + + ); +}; export default function IdentityProvidersSection() { const { t } = useTranslation("identity-providers"); @@ -74,29 +102,6 @@ export default function IdentityProvidersSection() { [key] ); - const DetailLink = (identityProvider: IdentityProviderRepresentation) => ( - - {identityProvider.displayName || identityProvider.alias} - {!identityProvider.enabled && ( - - {t("common:disabled")} - - )} - - ); - const navigateToCreate = (providerId: string) => navigate( toIdentityProviderCreate({ @@ -197,7 +202,7 @@ export default function IdentityProvidersSection() { - + {provider.name} diff --git a/apps/admin-ui/src/identity-providers/ProviderIconMapper.tsx b/apps/admin-ui/src/identity-providers/ProviderIconMapper.tsx deleted file mode 100644 index 560c9bffcd..0000000000 --- a/apps/admin-ui/src/identity-providers/ProviderIconMapper.tsx +++ /dev/null @@ -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 ; - case "facebook": - return ; - case "gitlab": - return ; - case "google": - return ; - case "linkedin": - return ; - - case "openshift-v3": - case "openshift-v4": - return ; - case "stackoverflow": - return ; - case "twitter": - return ; - case "microsoft": - return ; - case "bitbucket": - return ; - case "instagram": - return ; - case "paypal": - return ; - default: - return ; - } -}; diff --git a/libs/ui-shared/src/icons/IconMapper.tsx b/libs/ui-shared/src/icons/IconMapper.tsx index 6e5dacf9b7..8799764a5b 100644 --- a/libs/ui-shared/src/icons/IconMapper.tsx +++ b/libs/ui-shared/src/icons/IconMapper.tsx @@ -20,7 +20,7 @@ type IconMapperProps = { export const IconMapper = ({ icon }: IconMapperProps) => { const Icon = getIcon(icon); - return ; + return ; }; function getIcon(icon: string) {