Uplift and export SeekApiResponse (#812)

This now automatically removes `__typename`s.

.changeset/heavy-readers-act.md

@@ -0,0 +1,5 @@
+---
+'wingman-fe': minor
+---
+
+prettyPrintWithoutTypename: Export new function

.changeset/three-timers-love.md

@@ -0,0 +1,5 @@
+---
+'wingman-fe': minor
+---
+
+SeekApiResponse: Export new component

fe/lib/components/JobCategoryLookup/JobCategoryLookup.tsx

@@ -99,9 +99,10 @@ export const JobCategoryLookup = ({
               ).map((x) => ({ name: x.name, key: x.id.value }))}
             />
 
-            <SeekApiResponse id="jobCategoryLookupSeekApiResponse">
-              {categoryData.jobCategory}
-            </SeekApiResponse>
+            <SeekApiResponse
+              data={categoryData.jobCategory}
+              id="jobCategoryLookupSeekApiResponse"
+            />
           </>
         ) : (
           <Notice tone="info">

fe/lib/components/LocationLookup/LocationLookup.tsx

@@ -96,9 +96,10 @@ export const LocationLookup = ({
               ).map((x) => ({ name: x.name, key: x.id.value }))}
             />
 
-            <SeekApiResponse id="locationLookupSeekApiResponse">
-              {locationData.location}
-            </SeekApiResponse>
+            <SeekApiResponse
+              data={locationData.location}
+              id="locationLookupSeekApiResponse"
+            />
           </>
         ) : (
           <Notice tone="info">

fe/lib/components/SeekApiResponse/SeekApiResponse.stories.tsx

@@ -0,0 +1,72 @@
+import 'braid-design-system/reset';
+
+import { Heading, Stack } from 'braid-design-system';
+import React, { ComponentProps } from 'react';
+import { CodeBlock } from 'scoobie';
+
+import {
+  BraidArgs,
+  defaultArgTypes,
+  defaultArgs,
+} from '../../storybook/controls';
+import { BraidStorybookProvider } from '../../storybook/decorators';
+
+import { SeekApiResponse as Component } from './SeekApiResponse';
+
+export default {
+  args: {
+    braidThemeName: defaultArgs.braidThemeName,
+  },
+  argTypes: {
+    braidThemeName: defaultArgTypes.braidThemeName,
+    data: {
+      control: false,
+    },
+  },
+  component: Component,
+  title: 'Utils/SeekApiResponse',
+};
+
+type ComponentPropsWithoutData = Omit<ComponentProps<typeof Component>, 'data'>;
+
+type Args = ComponentPropsWithoutData & BraidArgs;
+
+export const SeekApiResponse = ({ braidThemeName, ...args }: Args) => (
+  <BraidStorybookProvider braidThemeName={braidThemeName}>
+    <Stack dividers space="large">
+      {[
+        {
+          data: {},
+          heading: 'Empty object',
+        },
+        {
+          data: {
+            id: {
+              value: 'abc',
+            },
+          },
+          heading: 'Object without __typenames',
+        },
+        {
+          data: {
+            __typename: 'Event',
+            id: {
+              __typename: 'ObjectIdentifier',
+              value: 'abc',
+            },
+          },
+          heading: 'Object with nested __typenames',
+        },
+      ].map(({ data, heading }) => (
+        <Stack key={heading} space="large">
+          <Heading level="3">{heading}</Heading>
+
+          <CodeBlock language="json">{JSON.stringify(data, null, 2)}</CodeBlock>
+
+          <Component {...args} data={data} />
+        </Stack>
+      ))}
+    </Stack>
+  </BraidStorybookProvider>
+);
+SeekApiResponse.storyName = 'SeekApiResponse';

fe/lib/components/SeekApiResponse/SeekApiResponse.tsx

@@ -2,17 +2,41 @@ import { Disclosure } from 'braid-design-system';
 import React from 'react';
 import { CodeBlock } from 'scoobie';
 
+import { prettyPrintWithoutTypename } from './prettyPrintWithoutTypename';
+
 interface Props {
-  children: unknown;
+  /**
+   * The label of the underlying disclosure component when it can be collapsed.
+   */
+  collapseLabel?: string;
+
+  /**
+   * The JSON response data from the SEEK API.
+   */
+  data: unknown;
+
+  /**
+   * The label of the underlying disclosure component when it can be expanded.
+   */
+  expandLabel?: string;
+
+  /**
+   * The DOM identifier of the underlying disclosure component.
+   */
   id: string;
 }
 
-export const SeekApiResponse = ({ children, id }: Props) => (
+export const SeekApiResponse = ({
+  collapseLabel,
+  data,
+  expandLabel,
+  id,
+}: Props) => (
   <Disclosure
-    collapseLabel="Hide SEEK API response"
-    expandLabel="Show SEEK API response"
+    collapseLabel={collapseLabel ?? 'Hide SEEK API response'}
+    expandLabel={expandLabel ?? 'Show SEEK API response'}
     id={id}
   >
-    <CodeBlock language="json">{JSON.stringify(children, null, 2)}</CodeBlock>
+    <CodeBlock language="json">{prettyPrintWithoutTypename(data)}</CodeBlock>
   </Disclosure>
 );

fe/lib/components/SeekApiResponse/__snapshots__/prettyPrintWithoutTypename.test.ts.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`prettyPrintWithoutTypename empty object 1`] = `"{}"`;
+
+exports[`prettyPrintWithoutTypename object with nested __typenames 1`] = `
+"{
+  \\"id\\": {
+    \\"value\\": 123
+  }
+}"
+`;
+
+exports[`prettyPrintWithoutTypename object without __typenames 1`] = `
+"{
+  \\"id\\": {
+    \\"value\\": 123
+  }
+}"
+`;

fe/lib/components/SeekApiResponse/prettyPrintWithoutTypename.test.ts

@@ -0,0 +1,12 @@
+import { prettyPrintWithoutTypename } from './prettyPrintWithoutTypename';
+
+describe('prettyPrintWithoutTypename', () => {
+  it.each`
+    description                         | input
+    ${'empty object'}                   | ${{}}
+    ${'object without __typenames'}     | ${{ id: { value: 123 } }}
+    ${'object with nested __typenames'} | ${{ __typename: 'Event', id: { __typename: 'ObjectIdentifier', value: 123 } }}
+  `('$description', ({ input }) =>
+    expect(prettyPrintWithoutTypename(input)).toMatchSnapshot(),
+  );
+});

fe/lib/components/SeekApiResponse/prettyPrintWithoutTypename.ts

@@ -0,0 +1,10 @@
+/**
+ * Pretty prints a JSON value with recursively stripping of the GraphQL
+ * `__typename` field.
+ */
+export const prettyPrintWithoutTypename = (data: unknown) =>
+  JSON.stringify(
+    data,
+    (name, value) => (name === '__typename' ? undefined : value),
+    2,
+  );

fe/lib/index.ts

@@ -29,4 +29,7 @@ export { MockSalaryDetails } from './components/SalaryDetails/SalaryDetails.mock
 export { SpecifiedPersonForm } from './components/SpecifiedPersonForm/SpecifiedPersonForm';
 export { MockSpecifiedPersonForm } from './components/SpecifiedPersonForm/SpecifiedPersonForm.mock';
 
+export { SeekApiResponse } from './components/SeekApiResponse/SeekApiResponse';
+export { prettyPrintWithoutTypename } from './components/SeekApiResponse/prettyPrintWithoutTypename';
+
 export { apolloTypePolicies } from './types/apolloTypePolicies';