From 84ad3853a8910bca16b326c00095de47fb944c0a Mon Sep 17 00:00:00 2001 From: Erik Jan de Wit Date: Mon, 11 Jan 2021 20:29:52 +0100 Subject: [PATCH] move common cell formatters to util functions (#278) * move common cell formatters to util functions * renamed ExternalLink FormattedLink --- src/clients/ClientsSection.tsx | 17 +++-------------- .../{ExternalLink.tsx => FormattedLink.tsx} | 11 ++++++++++- ...rnalLink.test.tsx => FormattedLink.test.tsx} | 10 +++++----- ...est.tsx.snap => FormattedLink.test.tsx.snap} | 0 src/components/view-header/ViewHeader.tsx | 4 ++-- src/realm-roles/RealmRolesSection.tsx | 15 +++------------ ...nk.stories.tsx => FormattedLink.stories.tsx} | 8 ++++---- 7 files changed, 27 insertions(+), 38 deletions(-) rename src/components/external-link/{ExternalLink.tsx => FormattedLink.tsx} (55%) rename src/components/external-link/__tests__/{ExternalLink.test.tsx => FormattedLink.test.tsx} (63%) rename src/components/external-link/__tests__/__snapshots__/{ExternalLink.test.tsx.snap => FormattedLink.test.tsx.snap} (100%) rename src/stories/{ExternalLink.stories.tsx => FormattedLink.stories.tsx} (77%) diff --git a/src/clients/ClientsSection.tsx b/src/clients/ClientsSection.tsx index f7a965c0b3..91070b34af 100644 --- a/src/clients/ClientsSection.tsx +++ b/src/clients/ClientsSection.tsx @@ -11,11 +11,10 @@ import { import { ViewHeader } from "../components/view-header/ViewHeader"; import { useAdminClient } from "../context/auth/AdminClient"; import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable"; -import { IFormatter, IFormatterValueType } from "@patternfly/react-table"; -import { exportClient } from "../util"; +import { emptyFormatter, exportClient } from "../util"; import { useAlerts } from "../components/alert/Alerts"; import ClientRepresentation from "keycloak-admin/lib/defs/clientRepresentation"; -import { ExternalLink } from "../components/external-link/ExternalLink"; +import { formattedLinkTableCell } from "../components/external-link/FormattedLink"; export const ClientsSection = () => { const { t } = useTranslation("clients"); @@ -40,16 +39,6 @@ export const ClientsSection = () => { return await adminClient.clients.find({ ...params }); }; - const emptyFormatter = (): IFormatter => (data?: IFormatterValueType) => { - return data ? data : "—"; - }; - - const externalLink = (): IFormatter => (data?: IFormatterValueType) => { - return (data ? ( - - ) : undefined) as object; - }; - const ClientDetailLink = (client: ClientRepresentation) => ( <> @@ -123,7 +112,7 @@ export const ClientsSection = () => { { name: "baseUrl", displayKey: "clients:homeURL", - cellFormatters: [externalLink(), emptyFormatter()], + cellFormatters: [formattedLinkTableCell(), emptyFormatter()], cellRenderer: (client) => { if (client.rootUrl) { if ( diff --git a/src/components/external-link/ExternalLink.tsx b/src/components/external-link/FormattedLink.tsx similarity index 55% rename from src/components/external-link/ExternalLink.tsx rename to src/components/external-link/FormattedLink.tsx index f351cde05f..aea0b60613 100644 --- a/src/components/external-link/ExternalLink.tsx +++ b/src/components/external-link/FormattedLink.tsx @@ -1,8 +1,9 @@ import React from "react"; import { ExternalLinkAltIcon } from "@patternfly/react-icons"; import { Button, ButtonProps } from "@patternfly/react-core"; +import { IFormatter, IFormatterValueType } from "@patternfly/react-table"; -export const ExternalLink = ({ title, href, ...rest }: ButtonProps) => { +export const FormattedLink = ({ title, href, ...rest }: ButtonProps) => { return ( ); }; + +export const formattedLinkTableCell = (): IFormatter => ( + data?: IFormatterValueType +) => { + return (data ? ( + + ) : undefined) as object; +}; diff --git a/src/components/external-link/__tests__/ExternalLink.test.tsx b/src/components/external-link/__tests__/FormattedLink.test.tsx similarity index 63% rename from src/components/external-link/__tests__/ExternalLink.test.tsx rename to src/components/external-link/__tests__/FormattedLink.test.tsx index 14d36bcc5f..9f33314c19 100644 --- a/src/components/external-link/__tests__/ExternalLink.test.tsx +++ b/src/components/external-link/__tests__/FormattedLink.test.tsx @@ -1,30 +1,30 @@ import React from "react"; import { render } from "@testing-library/react"; -import { ExternalLink } from "../ExternalLink"; +import { FormattedLink } from "../FormattedLink"; describe("", () => { it("render with link", () => { - const comp = render(); + const comp = render(); expect(comp.asFragment()).toMatchSnapshot(); }); it("render with link and title", () => { const comp = render( - + ); expect(comp.asFragment()).toMatchSnapshot(); }); it("render with internal url", () => { const comp = render( - + ); expect(comp.asFragment()).toMatchSnapshot(); }); it("render as application", () => { const comp = render( - + ); expect(comp.asFragment()).toMatchSnapshot(); }); diff --git a/src/components/external-link/__tests__/__snapshots__/ExternalLink.test.tsx.snap b/src/components/external-link/__tests__/__snapshots__/FormattedLink.test.tsx.snap similarity index 100% rename from src/components/external-link/__tests__/__snapshots__/ExternalLink.test.tsx.snap rename to src/components/external-link/__tests__/__snapshots__/FormattedLink.test.tsx.snap diff --git a/src/components/view-header/ViewHeader.tsx b/src/components/view-header/ViewHeader.tsx index dfafeb4be7..fec316cb3e 100644 --- a/src/components/view-header/ViewHeader.tsx +++ b/src/components/view-header/ViewHeader.tsx @@ -18,7 +18,7 @@ import { } from "@patternfly/react-core"; import { HelpContext } from "../help-enabler/HelpHeader"; import { useTranslation } from "react-i18next"; -import { ExternalLink } from "../external-link/ExternalLink"; +import { FormattedLink } from "../external-link/FormattedLink"; export type ViewHeaderProps = { titleKey: string; @@ -117,7 +117,7 @@ export const ViewHeader = ({ {t(subKey)} {subKeyLinkProps && ( - { const { t } = useTranslation("roles"); @@ -44,16 +45,6 @@ export const RealmRolesSection = () => { ); - const emptyFormatter = (): IFormatter => (data?: IFormatterValueType) => { - return data ? data : "—"; - }; - - const externalLink = (): IFormatter => (data?: IFormatterValueType) => { - return (data ? ( - - ) : undefined) as object; - }; - const boolFormatter = (): IFormatter => (data?: IFormatterValueType) => { const boolVal = data?.toString(); @@ -113,7 +104,7 @@ export const RealmRolesSection = () => { name: "name", displayKey: "roles:roleName", cellRenderer: RoleDetailLink, - cellFormatters: [externalLink(), emptyFormatter()], + cellFormatters: [formattedLinkTableCell(), emptyFormatter()], }, { name: "composite", diff --git a/src/stories/ExternalLink.stories.tsx b/src/stories/FormattedLink.stories.tsx similarity index 77% rename from src/stories/ExternalLink.stories.tsx rename to src/stories/FormattedLink.stories.tsx index 9b101c6aa3..82934f217b 100644 --- a/src/stories/ExternalLink.stories.tsx +++ b/src/stories/FormattedLink.stories.tsx @@ -1,14 +1,14 @@ import React from "react"; import { Meta, Story } from "@storybook/react"; -import { ExternalLink } from "../components/external-link/ExternalLink"; +import { FormattedLink } from "../components/external-link/FormattedLink"; import { ButtonProps } from "@patternfly/react-core"; export default { - title: "External link", - component: ExternalLink, + title: "Formatted link", + component: FormattedLink, } as Meta; -const Template: Story = (args) => ; +const Template: Story = (args) => ; export const WithTitle = Template.bind({}); WithTitle.args = {