Merge branch 'Tampere:develop' into develop

client/src/components/SurveyMap.tsx

@@ -79,6 +79,9 @@ export default function SurveyMap(props: Props) {
       initializeMap();
       setMapInitialized(true);
     }
+    return () => {
+      setMapInitialized(false);
+    };
   }, [isMapReady]);
 
   useEffect(() => {

client/src/components/admin/AddSurveySectionActions.tsx

@@ -1,5 +1,4 @@
 import { SurveyFollowUpSection, SurveyPageSection } from '@interfaces/survey';
-import { Fab, Grid, Typography } from '@mui/material';
 import {
   Article,
   AttachFile,
@@ -17,13 +16,14 @@ import {
   ViewComfy,
   ViewComfyAlt,
 } from '@mui/icons-material';
+import { Fab, Grid, Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
-import { useTranslations } from '@src/stores/TranslationContext';
-import React, { ReactNode, useState } from 'react';
-import { useParams } from 'react-router-dom';
 import { useClipboard } from '@src/stores/ClipboardContext';
 import { useSurvey } from '@src/stores/SurveyContext';
 import { useToasts } from '@src/stores/ToastContext';
+import { useTranslations } from '@src/stores/TranslationContext';
+import React, { ReactNode, useState } from 'react';
+import { useParams } from 'react-router-dom';
 
 const useStyles = makeStyles({
   actionItem: {
@@ -38,6 +38,7 @@ interface Props {
   types?: SurveyPageSection['type'][];
   disabled?: boolean;
   onAdd: (newSection: SurveyPageSection | SurveyFollowUpSection) => void;
+  disableSectionPaste?: boolean;
 }
 
 export default function AddSurveySectionActions(props: Props) {
@@ -343,38 +344,39 @@ export default function AddSurveySectionActions(props: Props) {
                 </div>
               </Grid>
             ))}
-          <Grid item style={{ padding: '0.5rem' }}>
-            <div className={classes.actionItem}>
-              <Fab
-                disabled={!clipboardSection}
-                color="secondary"
-                aria-label={'attach-section-from-clipboard'}
-                size="small"
-                onClick={() => {
-                  // Copy content from Clipboard context to active survey
-                  if (clipboardSection) {
-                    addSection(Number(pageId), {
-                      ...clipboardSection,
-                      id: sectionSequence,
-                    });
-                    setSectionSequence((prev) => prev - 1);
-
-                    if (clipboardSection.type === 'map') {
-                      showToast({
-                        severity: 'warning',
-                        autoHideDuration: 30000,
-                        message: tr.EditSurveyPage.sectionAttached,
+          {!props.disableSectionPaste && 
+            <Grid item style={{ padding: '0.5rem' }}>
+              <div className={classes.actionItem}>
+                <Fab
+                  disabled={!clipboardSection}
+                  color="secondary"
+                  aria-label={'attach-section-from-clipboard'}
+                  size="small"
+                  onClick={() => {
+                    // Copy content from Clipboard context to active survey
+                    if (clipboardSection) {
+                      addSection(Number(pageId), {
+                        ...clipboardSection,
+                        id: sectionSequence,
                       });
-                    }
-                  }
-                }}
-              >
-                <ContentPaste />
-              </Fab>
-              <Typography>{tr.EditSurveyPage.attachSection}</Typography>
-            </div>
-          </Grid>
+                      setSectionSequence((prev) => prev - 1);
 
+                      if (clipboardSection.type === 'map') {
+                        showToast({
+                          severity: 'warning',
+                          autoHideDuration: 30000,
+                          message: tr.EditSurveyPage.sectionAttached,
+                        });
+                      }
+                    }
+                  }}
+                >
+                  <ContentPaste />
+                </Fab>
+                <Typography>{tr.EditSurveyPage.attachSection}</Typography>
+              </div>
+            </Grid>
+          }
           <Grid
             item
             style={{

client/src/components/admin/EditMapQuestion.tsx

@@ -21,14 +21,12 @@ interface Props {
   section: SurveyMapQuestion;
   disabled?: boolean;
   onChange: (section: SurveyMapQuestion) => void;
-  forFollowUpSection?: boolean;
 }
 
 export default function EditMapQuestion({
   section,
   disabled,
   onChange,
-  forFollowUpSection,
 }: Props) {
   const [expandedSection, setExpandedSection] = useState<number>(null);
 
@@ -198,7 +196,6 @@ export default function EditMapQuestion({
       </FormGroup>
       <FormLabel>{tr.EditMapQuestion.subQuestions}</FormLabel>
       <EditMapSubQuestions
-        forFollowUpSection={forFollowUpSection ?? false}
         mapQuestion={section}
         expandedSection={expandedSection}
         onExpandedSectionChange={(section) => {
@@ -218,6 +215,7 @@ export default function EditMapQuestion({
           // Open last section after adding a new one
           setExpandedSection((section.subQuestions ?? []).length);
         }}
+        disableSectionPaste
       />
     </>
   );

client/src/components/admin/EditMapSubQuestions.tsx

@@ -10,7 +10,6 @@ interface Props {
   onChange: (subQuestions: SurveyMapSubQuestion[]) => void;
   disabled?: boolean;
   onExpandedSectionChange: (expandedSectionIndex: number) => void;
-  forFollowUpSection?: boolean;
 }
 
 const useStyles = makeStyles({
@@ -59,37 +58,39 @@ export default function EditMapSubQuestions(props: Props) {
                 index={index}
               >
                 {(provided, _snapshot) => (
-                  <SurveySectionAccordion
-                    forFollowUpSection={props?.forFollowUpSection ?? false}
-                    index={index}
-                    provided={provided}
-                    key={index}
-                    className={classes.accordion}
-                    disabled={props.disabled}
-                    section={section}
-                    name={`section-${index}`}
-                    expanded={props.expandedSection === index}
-                    onExpandedChange={(isExpanded) => {
-                      props.onExpandedSectionChange(isExpanded ? index : null);
-                    }}
-                    onEdit={(index, editedSection: SurveyMapSubQuestion) => {
-                      // Replace the edited subquestion in the array
-                      const subQuestions = props.mapQuestion.subQuestions.map(
-                        (section, i) => (i === index ? editedSection : section),
-                      );
-                      props.onChange(subQuestions);
-                    }}
-                    onDelete={(index) => {
-                      // Filter out the subquestion from the array
-                      const subQuestions =
-                        props.mapQuestion.subQuestions.filter(
-                          (_, i) => i !== index,
+                  <div ref={provided.innerRef} {...provided.draggableProps}>
+                    <SurveySectionAccordion
+                      disableSectionCopying
+                      index={index}
+                      provided={provided}
+                      key={index}
+                      className={classes.accordion}
+                      disabled={props.disabled}
+                      section={section}
+                      name={`section-${index}`}
+                      expanded={props.expandedSection === index}
+                      onExpandedChange={(isExpanded) => {
+                        props.onExpandedSectionChange(isExpanded ? index : null);
+                      }}
+                      onEdit={(index, editedSection: SurveyMapSubQuestion) => {
+                        // Replace the edited subquestion in the array
+                        const subQuestions = props.mapQuestion.subQuestions.map(
+                          (section, i) => (i === index ? editedSection : section),
                         );
-                      props.onChange(subQuestions);
-                      // Reset expanded section to null
-                      props.onExpandedSectionChange(null);
-                    }}
+                        props.onChange(subQuestions);
+                      }}
+                      onDelete={(index) => {
+                        // Filter out the subquestion from the array
+                        const subQuestions =
+                          props.mapQuestion.subQuestions.filter(
+                            (_, i) => i !== index,
+                          );
+                        props.onChange(subQuestions);
+                        // Reset expanded section to null
+                        props.onExpandedSectionChange(null);
+                      }}
                   />
+                  </div>
                 )}
               </Draggable>
             ))}

client/src/components/admin/EditSurveyPage.tsx

@@ -169,6 +169,7 @@ export default function EditSurveyPage() {
                 {!availableMapLayersLoading &&
                   availableMapLayers.map((layer) => (
                     <FormControlLabel
+                      sx={{ maxWidth: '500px' }}
                       key={layer.id}
                       label={layer.name}
                       control={

client/src/components/admin/EditSurveyPageConditions.tsx

@@ -182,7 +182,12 @@ export function EditSurveyPageConditions() {
 
   return (
     <Box
-      sx={{ dipslay: 'flex', flexDirection: 'column', marginBottom: '10px' }}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: '10px',
+        maxWidth: '45rem',
+      }}
     >
       <FormControl
         fullWidth
@@ -206,7 +211,9 @@ export function EditSurveyPageConditions() {
           sx={{
             flex: 2,
             backgroundColor: 'white',
-            '& .MuiSelect-select': { paddingY: '0.75rem' },
+            '& .MuiSelect-select': {
+              paddingY: '0.75rem',
+            },
           }}
           onChange={(event) => {
             editPage({
@@ -252,7 +259,16 @@ export function EditSurveyPageConditions() {
               sx={{
                 flex: 2,
                 backgroundColor: 'white',
-                '& .MuiSelect-select': { paddingY: '0.75rem' },
+                overflow: 'hidden',
+                '& .MuiSelect-select': {
+                  paddingY: '0.75rem',
+                  minWidth: 0,
+                  '& .MuiTypography-root': {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  },
+                },
               }}
               value={
                 conditionList.length > 0

client/src/components/admin/SubmissionsPage/OskariMap.tsx

@@ -1,10 +1,10 @@
+import { useSurveyMap } from '@src/stores/SurveyMapContext';
 import { useOskari } from '@src/utils/useOskari';
 import { Feature, Geometry } from 'geojson';
 import { FeatureStyle, MarkerStyle } from 'oskari-rpc';
 import parseCSSColor from 'parse-css-color';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { AnswerSelection } from './AnswersList';
-import { useSurveyMap } from '@src/stores/SurveyMapContext';
 
 interface Props {
   url: string;

client/src/components/admin/SurveySectionAccordion/FollowUpSectionAccordion.tsx

@@ -17,18 +17,11 @@ import {
   SurveyTextSection,
 } from '@interfaces/survey';
 import {
-  Accordion,
-  AccordionSummary,
-  IconButton,
-  Tooltip,
-  Typography,
-} from '@mui/material';
-import {
-  DragIndicator,
-  ExpandMore,
   Article,
   AttachFile,
   CheckBox,
+  DragIndicator,
+  ExpandMore,
   FormatListNumbered,
   Image,
   LibraryAddCheck,
@@ -41,33 +34,35 @@ import {
   ViewComfy,
   ViewComfyAlt,
 } from '@mui/icons-material';
+import {
+  Accordion,
+  AccordionSummary,
+  Tooltip,
+  Typography
+} from '@mui/material';
 import { makeStyles } from '@mui/styles';
+import { FollowUpListItemIcon } from '@src/components/icons/FollowUpListItemIcon';
+import { useClipboard } from '@src/stores/ClipboardContext';
+import { useToasts } from '@src/stores/ToastContext';
 import { useTranslations } from '@src/stores/TranslationContext';
 import React, { ReactNode, useMemo, useRef, useState } from 'react';
 import { DraggableProvided } from 'react-beautiful-dnd';
 import ConfirmDialog from '../../ConfirmDialog';
-import {
-  replaceIdsWithNull,
-  replaceTranslationsWithNull,
-} from '@src/utils/schemaValidation';
-import { useClipboard } from '@src/stores/ClipboardContext';
-import { useToasts } from '@src/stores/ToastContext';
 import EditAttachmentSection from '../EditAttachmentSection';
 import EditCheckBoxQuestion from '../EditCheckBoxQuestion';
-import EditRadioQuestion from '../EditRadioQuestion';
-import EditNumericQuestion from '../EditNumericQuestion';
-import EditMapQuestion from '../EditMapQuestion';
-import EditFreeTextQuestion from '../EditFreeTextQuestion';
-import EditTextSection from '../EditTextSection';
-import EditSortingQuestion from '../EditSortingQuestion';
-import EditSliderQuestion from '../EditSliderQuestion';
-import EditMatrixQuestion from '../EditMatrixQuestion';
 import EditDocumentSection from '../EditDocumentSection';
-import EditImageSection from '../EditImageSection';
+import EditFreeTextQuestion from '../EditFreeTextQuestion';
 import EditGroupedCheckBoxQuestion from '../EditGroupedCheckBoxQuestion';
+import EditImageSection from '../EditImageSection';
+import EditMapQuestion from '../EditMapQuestion';
+import EditMatrixQuestion from '../EditMatrixQuestion';
 import { EditMultiMatrixQuestion } from '../EditMultiMatrixQuestion';
+import EditNumericQuestion from '../EditNumericQuestion';
+import EditRadioQuestion from '../EditRadioQuestion';
+import EditSliderQuestion from '../EditSliderQuestion';
+import EditSortingQuestion from '../EditSortingQuestion';
+import EditTextSection from '../EditTextSection';
 import { FollowUpSectionMenu } from './FollowUpSectionMenu';
-import { FollowUpListItemIcon } from '@src/components/icons/FollowUpListItemIcon';
 
 const useStyles = makeStyles({
   accordion: {
@@ -176,7 +171,7 @@ export function FollowUpSectionAccordion(props: Props) {
       tooltip: tr.SurveySection.mapQuestion,
       form: (
         <EditMapQuestion
-          forFollowUpSection
+          disableSectionCopying
           disabled={props.disabled}
           section={props.section as SurveyMapQuestion}
           onChange={handleEdit}
@@ -335,32 +330,6 @@ export function FollowUpSectionAccordion(props: Props) {
               <em>{tr.EditSurveyPage.untitledSection}</em>
             )}
           </Typography>
-          <IconButton
-            onClick={async (event) => {
-              event.stopPropagation();
-              event.preventDefault();
-
-              // Remove all IDs from the section JSON to prevent unwanted references
-              const copiedSurveySection = replaceTranslationsWithNull(
-                replaceIdsWithNull({ ...props.section }),
-              );
-
-              // Store section to locale storage for other browser tabs to get access to it
-              localStorage.setItem(
-                'clipboard-content',
-                JSON.stringify({
-                  clipboardSection: copiedSurveySection,
-                  clipboardPage,
-                }),
-              );
-              // Store section to context for the currently active browser tab to get access to it
-              setSection(copiedSurveySection);
-              showToast({
-                message: tr.EditSurveyPage.sectionCopied,
-                severity: 'success',
-              });
-            }}
-          ></IconButton>
           <div {...props.provided.dragHandleProps} style={{ display: 'flex' }}>
             <DragIndicator />
           </div>