test: restore and fix SettingsObjectFieldPreview stories (#2607)

Closes #2594

front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx

@@ -0,0 +1,117 @@
+import { MemoryRouter } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
+import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
+import { Field, FieldMetadataType } from '~/generated-metadata/graphql';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import {
+  mockedCompaniesMetadata,
+  mockedPeopleMetadata,
+  mockedWorkspacesMetadata,
+} from '~/testing/mock-data/metadata';
+
+import { SettingsObjectFieldPreview } from '../SettingsObjectFieldPreview';
+
+const meta: Meta<typeof SettingsObjectFieldPreview> = {
+  title: 'Modules/Settings/DataModel/SettingsObjectFieldPreview',
+  component: SettingsObjectFieldPreview,
+  decorators: [
+    ComponentDecorator,
+    (Story) => (
+      <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+        <ObjectMetadataItemsProvider>
+          <Story />
+        </ObjectMetadataItemsProvider>
+      </SnackBarProviderScope>
+    ),
+  ],
+  args: {
+    fieldMetadata: mockedCompaniesMetadata.node.fields.edges.find(
+      ({ node }) => node.type === FieldMetadataType.Text,
+    )?.node,
+    objectMetadataId: mockedCompaniesMetadata.node.id,
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SettingsObjectFieldPreview>;
+
+export const Text: Story = {};
+
+export const Boolean: Story = {
+  args: {
+    fieldMetadata: mockedCompaniesMetadata.node.fields.edges.find(
+      ({ node }) => node.type === FieldMetadataType.Boolean,
+    )?.node as Field,
+  },
+};
+
+export const Currency: Story = {
+  args: {
+    fieldMetadata: mockedCompaniesMetadata.node.fields.edges.find(
+      ({ node }) => node.type === FieldMetadataType.Currency,
+    )?.node as Field,
+  },
+};
+
+export const Date: Story = {
+  args: {
+    fieldMetadata: mockedCompaniesMetadata.node.fields.edges.find(
+      ({ node }) => node.type === FieldMetadataType.DateTime,
+    )?.node as Field,
+  },
+};
+
+export const Link: Story = {
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  args: {
+    fieldMetadata: mockedCompaniesMetadata.node.fields.edges.find(
+      ({ node }) => node.type === FieldMetadataType.Link,
+    )?.node as Field,
+  },
+};
+
+export const Number: Story = {
+  args: {
+    fieldMetadata: mockedCompaniesMetadata.node.fields.edges.find(
+      ({ node }) => node.type === FieldMetadataType.Number,
+    )?.node as Field,
+  },
+};
+
+export const Relation: Story = {
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  args: {
+    fieldMetadata: mockedPeopleMetadata.node.fields.edges.find(
+      ({ node }) => node.type === FieldMetadataType.Relation,
+    )?.node as Field,
+    objectMetadataId: mockedPeopleMetadata.node.id,
+    relationObjectMetadataId: mockedCompaniesMetadata.node.id,
+  },
+};
+
+export const CustomObject: Story = {
+  args: {
+    fieldMetadata: mockedWorkspacesMetadata.node.fields.edges.find(
+      ({ node }) => node.type === FieldMetadataType.Text,
+    )?.node as Field,
+    objectMetadataId: mockedWorkspacesMetadata.node.id,
+  },
+};

front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldTypeSelectSection.stories.tsx

@@ -1,15 +1,49 @@
+import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
+import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
+import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
+import {
+  FieldMetadataType,
+  RelationMetadataType,
+} from '~/generated-metadata/graphql';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import {
+  mockedCompaniesMetadata,
+  mockedPeopleMetadata,
+} from '~/testing/mock-data/metadata';
+import { sleep } from '~/testing/sleep';
 
 import { SettingsObjectFieldTypeSelectSection } from '../SettingsObjectFieldTypeSelectSection';
 
+const fieldMetadata = mockedCompaniesMetadata.node.fields.edges.find(
+  ({ node }) => node.type === FieldMetadataType.Text,
+)!.node;
+const { id: _id, ...fieldMetadataWithoutId } = fieldMetadata;
+
 const meta: Meta<typeof SettingsObjectFieldTypeSelectSection> = {
   title: 'Modules/Settings/DataModel/SettingsObjectFieldTypeSelectSection',
   component: SettingsObjectFieldTypeSelectSection,
-  decorators: [ComponentDecorator],
-  args: {},
+  decorators: [
+    ComponentDecorator,
+    (Story) => (
+      <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+        <ObjectMetadataItemsProvider>
+          <Story />
+        </ObjectMetadataItemsProvider>
+      </SnackBarProviderScope>
+    ),
+  ],
+  args: {
+    fieldMetadata: fieldMetadataWithoutId,
+    objectMetadataId: mockedCompaniesMetadata.node.id,
+    values: { type: FieldMetadataType.Text },
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
@@ -18,15 +52,47 @@ type Story = StoryObj<typeof SettingsObjectFieldTypeSelectSection>;
 export const Default: Story = {};
 
 export const Disabled: Story = {
-  args: {},
+  args: {
+    fieldMetadata,
+  },
 };
 
 export const WithOpenSelect: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const selectLabel = canvas.getByText('Number');
+    await sleep(500);
+
+    const selectLabel = canvas.getByText('Text');
 
     await userEvent.click(selectLabel);
   },
 };
+
+const relationFieldMetadata = mockedPeopleMetadata.node.fields.edges.find(
+  ({ node }) => node.type === FieldMetadataType.Relation,
+)!.node;
+
+export const WithRelationForm: Story = {
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  args: {
+    fieldMetadata: mockedCompaniesMetadata.node.fields.edges.find(
+      ({ node }) => node.type === FieldMetadataType.Relation,
+    )?.node,
+    relationFieldMetadata,
+    values: {
+      type: FieldMetadataType.Relation,
+      relation: {
+        field: relationFieldMetadata,
+        objectMetadataId: mockedPeopleMetadata.node.id,
+        type: RelationMetadataType.OneToMany,
+      },
+    },
+  },
+};