Merge pull request #2495 from zetkin/release-250124

250124 Release

.gitignore

@@ -36,8 +36,11 @@ yarn-error.log*
 # vercel
 .vercel
 
-# vs code
-.vscode/
+# Ignore everything in the .vscode folder
+.vscode/*
+# Except the launch.json file and extensions.json file
+!.vscode/launch.json
+!.vscode/extensions.json
 
 # intellij
 .idea

.run/chrome_debug_client_side.run.xml

@@ -0,0 +1,5 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Next.js: debug client-side (Chrome)" type="JavascriptDebugType" uri="http://localhost:3000">
+    <method v="2" />
+  </configuration>
+</component>

.run/devserver.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="devserver" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="devserver" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "firefox-devtools.vscode-firefox-debug"
+    ]
+}

.vscode/launch.json

@@ -0,0 +1,24 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+        "name": "Next.js: debug client-side (Chrome)",
+        "type": "chrome",
+        "request": "launch",
+        "url": "http://localhost:3000"
+    },
+    {
+        "name": "Next.js: debug client-side (Firefox)",
+        "type": "firefox",
+        "request": "launch",
+        "url": "http://localhost:3000",
+        "reAttach": true,
+        "pathMappings": [
+            {
+                "url": "webpack://_n_e",
+                "path": "${workspaceFolder}"
+            }
+        ]
+    }
+]
+}

README.md

@@ -90,6 +90,30 @@ Note: If you are running the backend locally and things like `dev.zetkin.org` re
 then this only works on Linux-based systems, due to the nature of `127.0.0.1` pointing to the host on Linux
 (but not on Windows/Mac, where it points to the container itself).
 
+### Debugging
+
+If you want to debug this applications you can do so through VS Code or JetBrains IDE's (as IntelliJ or WebStorm).
+
+#### VS Code
+
+For VS Code there are 2 debugging configurations within [`./.vscode/launch.json`](./.vscode/launch.json). 
+One for debugging with chrome and one for firefox.
+
+1. Start the devserver via `yarn devserver`
+2. In the sidebar on the left go to `Run and Debug`
+3. Select and run `Next.js: debug client-side (Chrome)` or `Next.js: debug client-side (Firefox)` (note that you need to have the [Debugger for Firefox Extension](https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug) installed as referenced in [`./.vscode/extensions.json`](./.vscode/extensions.json))
+4. A browser window should open itself. Navigate to the page that you need to debug (don't forget to set your breakpoints first)
+
+#### JetBrains IDE's
+
+For JetBrains IDE's unfortunately there's only a debug configuration for chrome available ([`./.idea/launch.json`](./.idea/launch.json)).
+
+1. Start the devserver via `yarn devserver`
+2. In the top bar select the run configuration `Next.js: debug client-side (Chrome)` 
+3. Run that selected configuration in the debug mode by clicking on the bug icon.
+4. A chrome window should open itself. Navigate to the page that you need to debug (don't forget to set your breakpoints first)
+
+
 ## Development server login credentials
 
 You can log in using the dummy user accounts to access dummy data from the

package.json

@@ -2,11 +2,12 @@
   "name": "app.zetkin.org",
   "version": "41.0.0",
   "private": true,
+  "license": "UNLICENSED",
   "scripts": {
     "analyze": "ANALYZE=true next build",
     "build": "next build",
     "start": "next start -p 80",
-    "devserver": "next dev -p 3000",
+    "devserver": "cross-env NODE_OPTIONS='--inspect' next dev -p 3000",
     "docs:build": "storybook build -o public/storybook && typedoc",
     "lint:eslint": "eslint src integrationTesting",
     "lint:prettier": "prettier --check src integrationTesting",

src/features/areaAssignments/components/OrganizerMap.tsx

@@ -137,7 +137,7 @@ const OrganizerMap: FC<OrganizerMapProps> = ({
         width: '100%',
       }}
     >
-      <Box flexGrow={1} position="relative">
+      <Box flexGrow={1} position="relative" zIndex={0}>
         <MapControls
           map={mapRef.current}
           onFitBounds={() => {

src/features/calendar/hooks/useMonthCalendarEvents.ts

@@ -1,3 +1,5 @@
+import dayjs from 'dayjs';
+
 import { AnyClusteredEvent } from '../utils/clusterEventsForWeekCalender';
 import { getActivitiesByDay } from '../components/utils';
 import useEventsFromDateRange from 'features/events/hooks/useEventsFromDateRange';
@@ -45,7 +47,7 @@ export default function useMonthCalendarEvents({
   const curDate = new Date(startDate);
   while (curDate.getTime() <= endDate.getTime()) {
     const activitiesOnCurrentDay =
-      datesWithActivities[curDate.toISOString().slice(0, 10)]?.events || [];
+      datesWithActivities[dayjs(curDate).format('YYYY-MM-DD')]?.events || [];
 
     const clusters: AnyClusteredEvent[] = [
       ...clusterEvents(activitiesOnCurrentDay),

src/features/emails/components/EmailEditor/EmailEditorFrontend.tsx

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 //@ts-ignore
 import Header from '@editorjs/header';
-//@ts-ignore
-import Paragraph from '@editorjs/paragraph';
 import { Box, useTheme } from '@mui/material';
 import EditorJS, {
   EditorConfig,
@@ -19,6 +17,7 @@ import messageIds from 'features/emails/l10n/messageIds';
 import { useMessages } from 'core/i18n';
 import { useNumericRouteParams } from 'core/hooks';
 import variableToolFactory from './tools/inlineVariable';
+import ParagraphWithSpanPaste from './tools/paragraphWithSpanPaste';
 
 export type EmailEditorFrontendProps = {
   apiRef: MutableRefObject<EditorJS | null>;
@@ -110,7 +109,7 @@ const EmailEditorFrontend: FC<EmailEditorFrontendProps> = ({
           },
         },
         paragraph: {
-          class: Paragraph,
+          class: ParagraphWithSpanPaste as unknown as ToolConstructable,
         },
         variable: {
           class: variableToolFactory(messages.editor.tools.variable.title()),

src/features/emails/components/EmailEditor/EmailSettings/PreviewTab.tsx

@@ -1,20 +1,33 @@
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import {
   Alert,
   Box,
   Button,
   CircularProgress,
+  TextField,
   Typography,
 } from '@mui/material';
+import z from 'zod';
+import { ErrorOutlined } from '@mui/icons-material';
 
 import messageIds from 'features/emails/l10n/messageIds';
 import { Msg } from 'core/i18n';
 import useCurrentUser from 'features/user/hooks/useCurrentUser';
 import useSendTestEmail from 'features/emails/hooks/useSendTestEmail';
 
+const emailAddressIsValid = (emailAddress: string): boolean =>
+  z.string().email().safeParse(emailAddress).success;
+
 const PreviewTab: FC = () => {
   const user = useCurrentUser();
   const { emailWasSent, isLoading, reset, sendTestEmail } = useSendTestEmail();
+  const [emailError, setEmailError] = useState(false);
+  const [destinationEmailAddress, setDestinationEmailAddress] = useState('');
+  useEffect(() => {
+    if (user && destinationEmailAddress == '') {
+      setDestinationEmailAddress(user.email);
+    }
+  }, [user?.email]);
 
   if (!user) {
     return null;
@@ -28,7 +41,21 @@ const PreviewTab: FC = () => {
       <Typography>
         <Msg id={messageIds.editor.settings.tabs.preview.sendTo} />
       </Typography>
-      <Typography>{user.email}</Typography>
+      <TextField
+        error={emailError}
+        onChange={(ev) => setDestinationEmailAddress(ev.target.value)}
+        type="email"
+        value={destinationEmailAddress}
+      />
+      {emailError && (
+        <Alert color="error" icon={<ErrorOutlined />}>
+          <Typography>
+            <Msg
+              id={messageIds.editor.settings.tabs.preview.invalidEmailAddress}
+            />
+          </Typography>
+        </Alert>
+      )}
       {emailWasSent && (
         <Alert color="success">
           <Typography mb={2}>
@@ -47,7 +74,12 @@ const PreviewTab: FC = () => {
       {!emailWasSent && (
         <Button
           onClick={() => {
-            sendTestEmail();
+            const emailValid = emailAddressIsValid(destinationEmailAddress);
+            setEmailError(!emailValid);
+            if (!emailValid) {
+              return;
+            }
+            sendTestEmail({ ...user, email: destinationEmailAddress });
           }}
           variant="contained"
         >

src/features/emails/components/EmailEditor/tools/paragraphWithSpanPaste.ts

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+//@ts-ignore
+import Paragraph from '@editorjs/paragraph';
+import { BlockTool, HTMLPasteEvent } from '@editorjs/editorjs';
+
+//@ts-ignore
+export default class ParagraphWithSpanPaste
+  extends Paragraph
+  implements BlockTool
+{
+  onPaste(event: HTMLPasteEvent) {
+    const text = event.detail.data.textContent;
+    event.detail.data = document.createElement('div');
+    event.detail.data.textContent = text;
+    return super.onPaste(event);
+  }
+
+  static get pasteConfig() {
+    return {
+      tags: ['P', 'SPAN'],
+    };
+  }
+}

src/features/emails/hooks/useSendTestEmail.ts

@@ -1,20 +1,13 @@
 import { useState } from 'react';
 
-import useUser from 'core/hooks/useUser';
 import { useApiClient, useNumericRouteParams } from 'core/hooks';
+import { ZetkinUser } from '../../../utils/types/zetkin';
 
 export default function useSendTestEmail() {
   const apiClient = useApiClient();
   const [isLoading, setIsLoading] = useState(false);
   const [emailWasSent, setEmailWasSent] = useState(false);
 
-  // TODO: Get these as props instead
-  const user = useUser();
-  if (!user) {
-    // This should never happen on pages where this hook is used
-    throw new Error('Sending test email only works for signed in users');
-  }
-
   const { emailId, orgId } = useNumericRouteParams();
 
   return {
@@ -23,14 +16,14 @@ export default function useSendTestEmail() {
     reset: () => {
       setEmailWasSent(false);
     },
-    sendTestEmail: async () => {
+    sendTestEmail: async (recipient: ZetkinUser) => {
       setIsLoading(true);
       await apiClient.post(`/api/orgs/${orgId}/emails/${emailId}/preview`, {
         recipients: [
           {
-            email: user.email,
-            first_name: user.first_name,
-            last_name: user.last_name,
+            email: recipient.email,
+            first_name: recipient.first_name,
+            last_name: recipient.last_name,
           },
         ],
       });

src/features/emails/l10n/messageIds.ts

@@ -44,6 +44,7 @@ export default makeMessages('feat.emails', {
           instructions: m(
             'Here you can send this email to yourself to preview what it will look like for the recipients. '
           ),
+          invalidEmailAddress: m('This is not a valid email address'),
           okButton: m('OK!'),
           sendButton: m('Send'),
           sendTo: m('The email will be sent to this address:'),

src/features/events/hooks/useEventsFromDateRange.ts

@@ -17,12 +17,11 @@ export default function useEventsFromDateRange(
   const dispatch = useAppDispatch();
   const eventsState = useAppSelector((state) => state.events);
 
-  const dateRange = range(dayjs(endDate).diff(startDate, 'day') + 1).map(
-    (diff) => {
-      const curDate = new Date(startDate);
-      curDate.setDate(curDate.getDate() + diff);
-      return curDate.toISOString();
-    }
+  const dateRange = range(
+    dayjs(endDate).startOf('day').diff(dayjs(startDate).startOf('day'), 'day') +
+      1
+  ).map((diff) =>
+    dayjs(startDate).startOf('day').add(diff, 'day').utc().toISOString()
   );
 
   const mustLoad = dateRange.some((date) =>

src/features/import/components/ImportDialog/elements/ImportMessageList/ImportMessage.tsx

@@ -12,6 +12,7 @@ import {
 import messageIds from 'features/import/l10n/messageIds';
 import ProblemRowsText from './ProblemRowsText';
 import { useMessages } from 'core/i18n';
+import useSheets from '../../../../hooks/useSheets';
 
 type Props = {
   description?: string;
@@ -32,7 +33,11 @@ const ImportMessage: FC<Props> = ({
 }) => {
   const messages = useMessages(messageIds);
 
-  const rowNumbers = rowIndices?.map((rowIndex) => rowIndex + 1);
+  const { firstRowIsHeaders } = useSheets();
+
+  const rowNumbers = rowIndices?.map((rowIndex) =>
+    firstRowIsHeaders ? rowIndex + 2 : rowIndex + 1
+  );
 
   return (
     <Alert

src/features/import/hooks/useDateConfig.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { columnUpdate } from '../store';
 import { DateColumn } from '../utils/types';
@@ -22,6 +22,10 @@ export default function useDateConfig(column: DateColumn, columnIndex: number) {
 
   const [dateFormat, setDateFormat] = useState(column.dateFormat || null);
 
+  useEffect(() => {
+    setDateFormat(column.dateFormat || null);
+  }, [columnIndex]);
+
   const noCustomFormat = dateFormat == '';
 
   let parser: IDateParser | null = null;

src/features/profile/components/PersonOrganizationsCard/index.tsx

@@ -8,6 +8,7 @@ import {
   ListItemText,
 } from '@mui/material';
 import { useContext, useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
 
 import OrganizationSelect from './OrganizationSelect';
 import { OrganizationsTree } from './OrganizationsTree';
@@ -34,6 +35,7 @@ const PersonOrganizationsCard: React.FunctionComponent<
   const { showConfirmDialog } = useContext(ZUIConfirmDialogContext);
   const { showSnackbar } = useContext(ZUISnackbarContext);
   const { data, addToOrg, removeFromOrg } = usePersonOrgData(orgId, personId);
+  const router = useRouter();
 
   useEffect(() => {
     if (!editable) {
@@ -63,6 +65,9 @@ const PersonOrganizationsCard: React.FunctionComponent<
         try {
           await removeFromOrg(subOrgId);
           setSelected(undefined);
+          if (orgId == subOrgId) {
+            router.push(`/organize/${orgId}/people`);
+          }
         } catch (err) {
           showSnackbar('error', messages.organizations.removeError());
         }