diff --git a/.github/workflows/ci-front.yaml b/.github/workflows/ci-front.yaml index 7ab2767020..8aba96bca3 100644 --- a/.github/workflows/ci-front.yaml +++ b/.github/workflows/ci-front.yaml @@ -38,7 +38,7 @@ jobs: - name: Front / Write .env run: npx nx reset:env twenty-front - name: Front / Build storybook - run: NODE_OPTIONS=--max-old-space-size=5000 npx nx storybook:build twenty-front + run: npx nx storybook:build twenty-front front-sb-test: runs-on: ci-8-cores needs: front-sb-build @@ -87,7 +87,7 @@ jobs: touch .env echo "REACT_APP_SERVER_BASE_URL: $REACT_APP_SERVER_BASE_URL" >> .env - name: Publish to Chromatic - run: NODE_OPTIONS=--max-old-space-size=5000 npx nx run twenty-front:chromatic:ci + run: npx nx run twenty-front:chromatic:ci front-task: runs-on: ubuntu-latest strategy: diff --git a/nx.json b/nx.json index 9dced0fec8..9d008cf4b9 100644 --- a/nx.json +++ b/nx.json @@ -106,30 +106,38 @@ "dependsOn": ["^build"] }, "storybook:build": { - "executor": "@nx/storybook:build", + "executor": "nx:run-commands", "cache": true, "dependsOn": ["^build"], "inputs": ["^default", "excludeTests"], - "outputs": ["{options.outputDir}"], + "outputs": ["{options.output-dir}"], "options": { - "outputDir": "{projectRoot}/storybook-static", - "configDir": "{projectRoot}/.storybook" + "cwd": "{projectRoot}", + "command": "storybook build", + "output-dir": "storybook-static", + "config-dir": ".storybook" } }, "storybook:dev": { - "executor": "@nx/storybook:storybook", + "executor": "nx:run-commands", "cache": true, "dependsOn": ["^build"], "options": { - "configDir": "{projectRoot}/.storybook" + "cwd": "{projectRoot}", + "command": "storybook dev", + "config-dir": ".storybook" } }, "storybook:static": { - "executor": "@nx/web:file-server", + "executor": "nx:run-commands", + "dependsOn": ["storybook:build"], "options": { - "staticFilePath": "{projectRoot}/storybook-static", - "parallel": false, - "watch": false + "cwd": "{projectRoot}", + "command": "npx http-server {args.staticDir} -a={args.host} --port={args.port} --silent={args.silent}", + "staticDir": "storybook-static", + "host": "localhost", + "port": 6006, + "silent": true } }, "storybook:coverage": { @@ -148,6 +156,9 @@ "command": "npx nyc report --reporter={args.reporter} --reporter=text-summary -t {args.coverageDir} --report-dir {args.coverageDir} --check-coverage --cwd={projectRoot}", "coverageDir": "coverage/storybook", "reporter": "lcov" + }, + "configurations": { + "text": { "reporter": "text" } } }, "storybook:test": { @@ -179,8 +190,9 @@ "executor": "nx:run-commands", "options": { "cwd": "{projectRoot}", - "command": "cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name=build-storybook --exit-zero-on-changes={args.ci}", - "ci": false + "command": "cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name={args.targetPackageJsonScript} --exit-zero-on-changes={args.ci}", + "ci": false, + "targetPackageJsonScript": "storybook:build:chromatic" }, "configurations": { "ci": { diff --git a/packages/twenty-front/package.json b/packages/twenty-front/package.json index 27caeb8670..b1a10fc78f 100644 --- a/packages/twenty-front/package.json +++ b/packages/twenty-front/package.json @@ -6,7 +6,7 @@ "scripts": { "build": "npx vite build && sh ./scripts/inject-runtime-env.sh", "build:sourcemaps": "VITE_BUILD_SOURCEMAP=true NODE_OPTIONS=--max-old-space-size=4096 npx nx build", - "build-storybook": "cd ../.. && npx nx storybook:build twenty-front", + "storybook:build:chromatic": "nx storybook:build", "start:prod": "NODE_ENV=production npx vite --host", "tsup": "npx tsup" }, diff --git a/packages/twenty-front/project.json b/packages/twenty-front/project.json index bf86d4c8cd..dfa5365b3c 100644 --- a/packages/twenty-front/project.json +++ b/packages/twenty-front/project.json @@ -59,26 +59,33 @@ } }, "test": {}, - "storybook:build": {}, - "storybook:build:scope": { - "executor": "nx:run-commands", + "storybook:build": { "options": { - "command": "nx storybook:build twenty-front" + "env": { "NODE_OPTIONS": "--max_old_space_size=5000" } }, "configurations": { - "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } }, - "modules": { "env": { "STORYBOOK_SCOPE": "modules" } }, - "pages": { "env": { "STORYBOOK_SCOPE": "pages" } } + "docs": { + "env": { + "NODE_OPTIONS": "--max_old_space_size=5000", + "STORYBOOK_SCOPE": "ui-docs" + } + }, + "modules": { + "env": { + "NODE_OPTIONS": "--max_old_space_size=5000", + "STORYBOOK_SCOPE": "modules" + } + }, + "pages": { + "env": { + "NODE_OPTIONS": "--max_old_space_size=5000", + "STORYBOOK_SCOPE": "pages" + } + } } }, "storybook:dev": { - "options": { "port": 6006 } - }, - "storybook:dev:scope": { - "executor": "nx:run-commands", - "options": { - "command": "nx storybook:dev twenty-front" - }, + "options": { "port": 6006 }, "configurations": { "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } }, "modules": { "env": { "STORYBOOK_SCOPE": "modules" } }, @@ -86,16 +93,7 @@ } }, "storybook:static": { - "options": { - "buildTarget": "twenty-front:storybook:build", - "port": 6006 - } - }, - "storybook:static:scope": { - "executor": "nx:run-commands", - "options": { - "command": "nx storybook:static twenty-front" - }, + "options": { "port": 6006 }, "configurations": { "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } }, "modules": { "env": { "STORYBOOK_SCOPE": "modules" } }, @@ -104,15 +102,14 @@ }, "storybook:coverage": { "configurations": { + "text": {}, "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } }, "modules": { "env": { "STORYBOOK_SCOPE": "modules" } }, "pages": { "env": { "STORYBOOK_SCOPE": "pages" } } } }, "storybook:test": { - "options": { - "port": 6006 - }, + "options": { "port": 6006 }, "configurations": { "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } }, "modules": { "env": { "STORYBOOK_SCOPE": "modules" } }, @@ -124,8 +121,7 @@ "commands": [ "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:static {projectName} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port} --configuration={args.scope}'" ], - "port": 6006, - "env": { "NODE_OPTIONS": "--max-old-space-size=5000" } + "port": 6006 }, "configurations": { "docs": { "scope": "ui-docs" }, diff --git a/packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx similarity index 100% rename from packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx rename to packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx index eb233272fd..79e2cabb61 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx @@ -51,7 +51,11 @@ export const SettingsObjectFieldActiveActionDropdown = ({ + } dropdownComponents={ diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx index c592bcc804..374591898e 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx @@ -67,7 +67,11 @@ export const SettingsObjectSummaryCard = ({ + } dropdownComponents={ diff --git a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx index 51ee50fce2..0e3e210185 100644 --- a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx +++ b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import { v4 } from 'uuid'; import { RecordIndexContainer } from '@/object-record/record-index/components/RecordIndexContainer'; +import { RecordIndexPageHeader } from '@/object-record/record-index/components/RecordIndexPageHeader'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCell'; import { useSelectedTableCellEditMode } from '@/object-record/record-table/record-table-cell/hooks/useSelectedTableCellEditMode'; @@ -10,7 +11,6 @@ import { PageBody } from '@/ui/layout/page/PageBody'; import { PageContainer } from '@/ui/layout/page/PageContainer'; import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { PageTitle } from '@/ui/utilities/page-title/PageTitle'; -import { RecordIndexPageHeader } from '~/pages/object-record/RecordIndexPageHeader'; import { capitalize } from '~/utils/string/capitalize'; const StyledIndexContainer = styled.div` diff --git a/packages/twenty-front/src/pages/object-record/__stories__/RecordIndexPage.stories.tsx b/packages/twenty-front/src/pages/object-record/__stories__/RecordIndexPage.stories.tsx new file mode 100644 index 0000000000..9052584059 --- /dev/null +++ b/packages/twenty-front/src/pages/object-record/__stories__/RecordIndexPage.stories.tsx @@ -0,0 +1,30 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { + PageDecorator, + PageDecoratorArgs, +} from '~/testing/decorators/PageDecorator'; +import { graphqlMocks } from '~/testing/graphqlMocks'; + +import { RecordIndexPage } from '../RecordIndexPage'; + +const meta: Meta = { + title: 'Pages/ObjectRecord/RecordIndexPage', + component: RecordIndexPage, + decorators: [PageDecorator], + args: { + routePath: '/objects/:objectNamePlural', + routeParams: { + ':objectNamePlural': 'companies', + }, + }, + parameters: { + msw: graphqlMocks, + }, +}; + +export default meta; + +export type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx b/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx index c9b9bbb46a..6fe42cba88 100644 --- a/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx @@ -1,4 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; +import { userEvent, within } from '@storybook/test'; import { PageDecorator, @@ -37,3 +38,38 @@ export const CustomObject: Story = { routeParams: { ':objectSlug': 'workspaces' }, }, }; + +export const ObjectDropdownMenu: Story = { + play: async ({ canvasElement }) => { + await sleep(100); + + const canvas = within(canvasElement); + const objectSummaryVerticalDotsIconButton = await canvas.findByRole( + 'button', + { + name: 'Object Options', + }, + ); + + await userEvent.click(objectSummaryVerticalDotsIconButton); + + await canvas.findByText('Edit'); + await canvas.findByText('Deactivate'); + }, +}; + +export const FieldDropdownMenu: Story = { + play: async ({ canvasElement }) => { + await sleep(100); + + const canvas = within(canvasElement); + const [fieldVerticalDotsIconButton] = await canvas.findAllByRole('button', { + name: 'Active Field Options', + }); + + await userEvent.click(fieldVerticalDotsIconButton); + + await canvas.findByText('View'); + await canvas.findByText('Deactivate'); + }, +};