Merge pull request #2105 from zetkin/main

240812 Release

.eslintrc.js

@@ -41,6 +41,19 @@ module.exports = {
           },
         ],
         curly: 'error',
+        'import/order': [
+          'error',
+          {
+            alphabetize: {
+              order: 'ignore',
+              orderImportKind: 'ignore',
+            },
+            groups: [
+              ['external', 'builtin'],
+            ],
+            'newlines-between': 'always',
+          },
+        ],
         'jsx-a11y/anchor-is-valid': 'off',
         'no-console': 'error',
         'no-switch-statements/no-switch': 'error',
@@ -83,14 +96,6 @@ module.exports = {
             html: true,
           },
         ],
-        'sort-imports': [
-          'error',
-          {
-            ignoreCase: true,
-            allowSeparatedGroups: true,
-            memberSyntaxSortOrder: ['none', 'all', 'single', 'multiple'],
-          },
-        ],
         'sort-keys': 'error',
         'sort-vars': 'error',
       },

.storybook/main.js

@@ -1,19 +1,17 @@
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  staticDirs: ['../src'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    'storybook-addon-next-router',
-    'storybook-addon-material-ui5',
-    'storybook-addon-mock/register',
   ],
-  framework: '@storybook/react',
-  core: {
-    builder: '@storybook/builder-webpack5',
-  },
+
+  framework: '@storybook/nextjs',
+
   webpackFinal: async (config) => {
     config.resolve.plugins = [
       ...(config.resolve.plugins || []),
@@ -23,4 +21,8 @@ module.exports = {
     ];
     return config;
   },
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
 };

.storybook/preview.js

@@ -1,12 +1,14 @@
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs from 'dayjs';
+import Environment from 'core/env/Environment';
+import FetchApiClient from 'core/api/client/FetchApiClient';
+import { EnvProvider } from 'core/env/EnvContext';
 import { IntlProvider } from 'react-intl';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { muiTheme } from 'storybook-addon-material-ui5';
-import { RouterContext } from 'next/dist/shared/lib/router-context'; // next 11.1
-import withMock from 'storybook-addon-mock';
 import { Provider as ReduxProvider } from 'react-redux';
+import { ThemeProvider } from '@mui/material';
+import { useRouter } from 'next/router';
 
 import theme from '../src/theme';
 import '../src/styles.css';
@@ -25,37 +27,66 @@ const I18nProvider = (props) => {
   );
 };
 
+async function mockFetch(path, init) {
+  if (path === '/api/orgs/1/people/1' && init === undefined) {
+    return new Response(
+      JSON.stringify({
+        data: mockPerson(),
+      })
+    );
+  }
+
+  if (path === '/api/orgs/1/people/1/tags' && init === undefined) {
+    return new Response('[]');
+  }
+
+  if (path === '/api/orgs/1/people/fields' && init === undefined) {
+    return new Response(
+      JSON.stringify({
+        data: [],
+      })
+    );
+  }
+
+  throw new Error(
+    `unmocked request to path: '${path}'
+    with init: ${JSON.stringify(init)}`
+  );
+}
+
+class MockApiClient extends FetchApiClient {
+  constructor() {
+    super(mockFetch);
+  }
+}
+
 export const decorators = [
-  muiTheme([theme]),
-  (story) => <ReduxProvider store={createStore()}>{story()}</ReduxProvider>,
+  (Story) => (
+    <ThemeProvider theme={theme}>
+      <Story />
+    </ThemeProvider>
+  ),
+  (story) => {
+    const store = createStore();
+    const router = useRouter();
+    const env = new Environment(store, new MockApiClient(), router);
+    return (
+      <ReduxProvider store={store}>
+        <EnvProvider env={env}>{story()}</EnvProvider>
+      </ReduxProvider>
+    );
+  },
   (story) => <I18nProvider>{story()}</I18nProvider>,
-  withMock,
 ];
 
 export const parameters = {
-  nextRouter: {
-    Provider: RouterContext.Provider,
-    query: {
-      orgId: 1,
-      personId: 1,
-    },
-  },
-  mockData: [
-    {
-      url: 'api/orgs/1/people/1',
-      method: 'GET',
-      status: 200,
-      response: {
-        data: mockPerson(),
+  nextjs: {
+    router: {
+      query: {
+        orgId: 1,
+        personId: 1,
       },
     },
-    {
-      url: 'api/orgs/1/people/1/tags',
-      method: 'GET',
-      status: 200,
-      response: {
-        data: [],
-      },
-    },
-  ],
+  },
 };
+export const tags = ['autodocs'];

integrationTesting/mockData/orgs/KPD/campaigns/ReferendumSignatures/tasks/SpeakToFriend.ts

@@ -1,6 +1,5 @@
 import { TASK_TYPE } from 'features/tasks/components/types';
 import { ZetkinTask } from 'utils/types/zetkin';
-
 import KPD from '../../..';
 import ReferendumSignatureCollection from '..';
 

integrationTesting/mockData/orgs/KPD/campaigns/ReferendumSignatures/tasks/VisitReferendumWebsite.ts

@@ -1,6 +1,5 @@
 import { ZetkinTask } from 'utils/types/zetkin';
 import { TASK_TYPE, VisitLinkConfig } from 'features/tasks/components/types';
-
 import KPD from '../../..';
 import ReferendumSignatureCollection from '..';
 

integrationTesting/tests/organize/campaigns/detail/delete.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../../fixtures/next';
 
+import test from '../../../../fixtures/next';
 import KPD from '../../../../mockData/orgs/KPD';
 import ReferendumSignatures from '../../../../mockData/orgs/KPD/campaigns/ReferendumSignatures';
 

integrationTesting/tests/organize/campaigns/detail/edit.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../../fixtures/next';
 
+import test from '../../../../fixtures/next';
 import KPD from '../../../../mockData/orgs/KPD';
 import ReferendumSignatures from '../../../../mockData/orgs/KPD/campaigns/ReferendumSignatures';
 import RosaLuxemburg from '../../../../mockData/orgs/KPD/people/RosaLuxemburg';

integrationTesting/tests/organize/campaigns/list/create.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../../fixtures/next';
 
+import test from '../../../../fixtures/next';
 import KPD from '../../../../mockData/orgs/KPD';
 import ReferendumSignatures from '../../../../mockData/orgs/KPD/campaigns/ReferendumSignatures';
 import WelcomeNewMembers from '../../../../mockData/orgs/KPD/campaigns/WelcomeNewMembers';

integrationTesting/tests/organize/campaigns/list/list.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../../fixtures/next';
 
+import test from '../../../../fixtures/next';
 import KPD from '../../../../mockData/orgs/KPD';
 import ReferendumSignatures from '../../../../mockData/orgs/KPD/campaigns/ReferendumSignatures';
 import WelcomeNewMembers from '../../../../mockData/orgs/KPD/campaigns/WelcomeNewMembers';

integrationTesting/tests/organize/journeys/instance-detail/close.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../../fixtures/next';
 
+import test from '../../../../fixtures/next';
 import ActivistTag from '../../../../mockData/orgs/KPD/tags/Activist';
 import ClarasOnboarding from '../../../../mockData/orgs/KPD/journeys/MemberOnboarding/instances/ClarasOnboarding';
 import CodingSkillsTag from '../../../../mockData/orgs/KPD/tags/Coding';

integrationTesting/tests/organize/journeys/instance-detail/display.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../../fixtures/next';
 
+import test from '../../../../fixtures/next';
 import ClarasOnboarding from '../../../../mockData/orgs/KPD/journeys/MemberOnboarding/instances/ClarasOnboarding';
 import KPD from '../../../../mockData/orgs/KPD';
 import MemberOnboarding from '../../../../mockData/orgs/KPD/journeys/MemberOnboarding';

integrationTesting/tests/organize/journeys/instance-detail/edit-summary.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../../fixtures/next';
 
+import test from '../../../../fixtures/next';
 import ClarasOnboarding from '../../../../mockData/orgs/KPD/journeys/MemberOnboarding/instances/ClarasOnboarding';
 import KPD from '../../../../mockData/orgs/KPD';
 import MemberOnboarding from '../../../../mockData/orgs/KPD/journeys/MemberOnboarding';

integrationTesting/tests/organize/journeys/instance-detail/edit-type.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../../fixtures/next';
 
+import test from '../../../../fixtures/next';
 import ClarasOnboarding from '../../../../mockData/orgs/KPD/journeys/MemberOnboarding/instances/ClarasOnboarding';
 import KPD from '../../../../mockData/orgs/KPD';
 import MarxistTraining from '../../../../mockData/orgs/KPD/journeys/MarxistTraining';

integrationTesting/tests/organize/journeys/instance-detail/navigate.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../../fixtures/next';
 
+import test from '../../../../fixtures/next';
 import ClarasOnboarding from '../../../../mockData/orgs/KPD/journeys/MemberOnboarding/instances/ClarasOnboarding';
 import KPD from '../../../../mockData/orgs/KPD';
 import MemberOnboarding from '../../../../mockData/orgs/KPD/journeys/MemberOnboarding';

integrationTesting/tests/organize/journeys/instance-detail/notes.spec.ts

@@ -1,8 +1,7 @@
 import { expect } from '@playwright/test';
-import test from '../../../../fixtures/next';
 
+import test from '../../../../fixtures/next';
 import ClarasOnboarding from '../../../../mockData/orgs/KPD/journeys/MemberOnboarding/instances/ClarasOnboarding';
-
 import ClaraZetkin from '../../../../mockData/orgs/KPD/people/ClaraZetkin';
 import KPD from '../../../../mockData/orgs/KPD';
 import MemberOnboarding from '../../../../mockData/orgs/KPD/journeys/MemberOnboarding';

integrationTesting/tests/organize/journeys/instance-detail/reopen.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../../fixtures/next';
 
+import test from '../../../../fixtures/next';
 import ClarasOnboarding from '../../../../mockData/orgs/KPD/journeys/MemberOnboarding/instances/ClarasOnboarding';
 import KPD from '../../../../mockData/orgs/KPD';
 import { ZetkinJourneyInstance } from '../../../../../src/utils/types/zetkin';

integrationTesting/tests/organize/journeys/instance-detail/sidebar.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../../fixtures/next';
 
+import test from '../../../../fixtures/next';
 import ActivistTag from '../../../../mockData/orgs/KPD/tags/Activist';
 import ClarasOnboarding from '../../../../mockData/orgs/KPD/journeys/MemberOnboarding/instances/ClarasOnboarding';
 import CodingSkillsTag from '../../../../mockData/orgs/KPD/tags/Coding';

integrationTesting/tests/organize/journeys/instance-milestones/milestones.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../../fixtures/next';
 
+import test from '../../../../fixtures/next';
 import { AttendMeeting } from '../../../../mockData/orgs/KPD/journeys/MemberOnboarding/instances/ClarasOnboarding';
 import ClarasOnboarding from '../../../../mockData/orgs/KPD/journeys/MemberOnboarding/instances/ClarasOnboarding';
 import KPD from '../../../../mockData/orgs/KPD';

integrationTesting/tests/organize/journeys/list.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../fixtures/next';
 
+import test from '../../../fixtures/next';
 import KPD from '../../../mockData/orgs/KPD';
 import MarxistTraining from '../../../mockData/orgs/KPD/journeys/MarxistTraining';
 import MemberOnboarding from '../../../mockData/orgs/KPD/journeys/MemberOnboarding';

integrationTesting/tests/organize/memberships.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../fixtures/next';
 
+import test from '../../fixtures/next';
 import KPD from '../../mockData/orgs/KPD';
 import RosaLuxemburg from '../../mockData/orgs/KPD/people/RosaLuxemburg';
 import RosaLuxemburgUser from '../../mockData/users/RosaLuxemburgUser';

integrationTesting/tests/organize/search.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../fixtures/next';
 
+import test from '../../fixtures/next';
 import ClarasOnboarding from '../../mockData/orgs/KPD/journeys/MemberOnboarding/instances/ClarasOnboarding';
 import KPD from '../../mockData/orgs/KPD';
 import ReferendumSignatures from '../../mockData/orgs/KPD/campaigns/ReferendumSignatures';

integrationTesting/tests/organize/tags/add.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../fixtures/next';
 
+import test from '../../../fixtures/next';
 import ClaraZetkin from '../../../mockData/orgs/KPD/people/ClaraZetkin';
 import CodingSkillsTag from '../../../mockData/orgs/KPD/tags/Coding';
 import KPD from '../../../mockData/orgs/KPD';

integrationTesting/tests/organize/tags/create.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../fixtures/next';
 
+import test from '../../../fixtures/next';
 import ActivistTag from '../../../mockData/orgs/KPD/tags/Activist';
 import ClaraZetkin from '../../../mockData/orgs/KPD/people/ClaraZetkin';
 import CodingSkillsTag from '../../../mockData/orgs/KPD/tags/Coding';

integrationTesting/tests/organize/tags/edit.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../fixtures/next';
 
+import test from '../../../fixtures/next';
 import ActivistTag from '../../../mockData/orgs/KPD/tags/Activist';
 import ClaraZetkin from '../../../mockData/orgs/KPD/people/ClaraZetkin';
 import CodingSkillsTag from '../../../mockData/orgs/KPD/tags/Coding';

integrationTesting/tests/organize/tags/list.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../fixtures/next';
 
+import test from '../../../fixtures/next';
 import ActivistTag from '../../../mockData/orgs/KPD/tags/Activist';
 import ClaraZetkin from '../../../mockData/orgs/KPD/people/ClaraZetkin';
 import CodingSkillsTag from '../../../mockData/orgs/KPD/tags/Coding';

integrationTesting/tests/organize/tags/remove.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import test from '../../../fixtures/next';
 
+import test from '../../../fixtures/next';
 import ClaraZetkin from '../../../mockData/orgs/KPD/people/ClaraZetkin';
 import CodingSkillsTag from '../../../mockData/orgs/KPD/tags/Coding';
 import KPD from '../../../mockData/orgs/KPD';

integrationTesting/tests/organize/tasks/detail/cover-image.spec.ts

@@ -2,7 +2,6 @@ import { expect } from '@playwright/test';
 import fs from 'fs/promises';
 
 import test from '../../../../fixtures/next';
-
 import KPD from '../../../../mockData/orgs/KPD';
 import ReferendumSignatureCollection from '../../../../mockData/orgs/KPD/campaigns/ReferendumSignatures';
 import SpeakToFriend from '../../../../mockData/orgs/KPD/campaigns/ReferendumSignatures/tasks/SpeakToFriend';
@@ -54,7 +53,7 @@ test.describe('Task detail page', () => {
 
     await page.goto(appUri + '/organize/1/projects/1/calendar/tasks/1');
 
-    await page.locator('data-testid=TaskPreviewSection-addImage').click();
+    await page.locator('data-testid=ZUIEditableImage-placeholder').click();
 
     const buffer = await fs.readFile(
       'integrationTesting/mockFiles/clara_and_rosa.jpg'
@@ -68,7 +67,7 @@ test.describe('Task detail page', () => {
       return dt;
     }, buffer);
 
-    await page.dispatchEvent('data-testid=ImageSelectDialog-dropZone', 'drop', {
+    await page.dispatchEvent('data-testid=FileDropZone-dropZone', 'drop', {
       dataTransfer,
     });
 
@@ -79,7 +78,7 @@ test.describe('Task detail page', () => {
       page.waitForResponse((res) =>
         res.request().url().includes('clara_and_rosa.jpg')
       ),
-      page.locator('data-testid=SubmitCancelButtons-submitButton').click(),
+      page.locator('data-testid=FileLibraryDialog-useButton').click(),
     ]);
 
     await page.locator('data-testid=TaskPreviewSection-section').waitFor();