move common cell formatters to util functions (#278)

* move common cell formatters to util functions

* renamed ExternalLink FormattedLink

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 ? (
-      <ExternalLink href={data.toString()} />
-    ) : undefined) as object;
-  };
-
   const ClientDetailLink = (client: ClientRepresentation) => (
     <>
       <Link key={client.id} to={`${url}/${client.id}`}>
@@ -123,7 +112,7 @@ export const ClientsSection = () => {
             {
               name: "baseUrl",
               displayKey: "clients:homeURL",
-              cellFormatters: [externalLink(), emptyFormatter()],
+              cellFormatters: [formattedLinkTableCell(), emptyFormatter()],
               cellRenderer: (client) => {
                 if (client.rootUrl) {
                   if (

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 (
     <Button
       variant="link"
@@ -17,3 +18,11 @@ export const ExternalLink = ({ title, href, ...rest }: ButtonProps) => {
     </Button>
   );
 };
+
+export const formattedLinkTableCell = (): IFormatter => (
+  data?: IFormatterValueType
+) => {
+  return (data ? (
+    <FormattedLink href={data.toString()} />
+  ) : undefined) as object;
+};

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("<ExternalLink />", () => {
   it("render with link", () => {
-    const comp = render(<ExternalLink href="http://hello.nl/" />);
+    const comp = render(<FormattedLink href="http://hello.nl/" />);
     expect(comp.asFragment()).toMatchSnapshot();
   });
 
   it("render with link and title", () => {
     const comp = render(
-      <ExternalLink href="http://hello.nl/" title="Link to Hello" />
+      <FormattedLink href="http://hello.nl/" title="Link to Hello" />
     );
     expect(comp.asFragment()).toMatchSnapshot();
   });
 
   it("render with internal url", () => {
     const comp = render(
-      <ExternalLink href="/application/home/" title="Application page" />
+      <FormattedLink href="/application/home/" title="Application page" />
     );
     expect(comp.asFragment()).toMatchSnapshot();
   });
 
   it("render as application", () => {
     const comp = render(
-      <ExternalLink href="/application/main" title="Application link" />
+      <FormattedLink href="/application/main" title="Application link" />
     );
     expect(comp.asFragment()).toMatchSnapshot();
   });

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 = ({
             <Text>
               {t(subKey)}
               {subKeyLinkProps && (
-                <ExternalLink
+                <FormattedLink
                   {...subKeyLinkProps}
                   isInline
                   className="pf-u-ml-md"

src/realm-roles/RealmRolesSection.tsx

@@ -14,9 +14,10 @@ import { ViewHeader } from "../components/view-header/ViewHeader";
 import RoleRepresentation from "keycloak-admin/lib/defs/roleRepresentation";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
-import { ExternalLink } from "../components/external-link/ExternalLink";
+import { formattedLinkTableCell } from "../components/external-link/FormattedLink";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
+import { emptyFormatter } from "../util";
 
 export const RealmRolesSection = () => {
   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 ? (
-      <ExternalLink href={"roles/" + data.toString()} />
-    ) : 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",

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<ButtonProps> = (args) => <ExternalLink {...args} />;
+const Template: Story<ButtonProps> = (args) => <FormattedLink {...args} />;
 
 export const WithTitle = Template.bind({});
 WithTitle.args = {