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');
+ },
+};