Merge pull request #9795 from CitizenLabDotCo/master

Release 2024-12-16 (2)
CitizenLabDotCo · Dec 16, 2024 · 5623560 · 5623560
2 parents 4c832f0 + f113779
commit 5623560
Show file tree

Hide file tree

Showing 64 changed files with 504 additions and 346 deletions.
diff --git a/back/engines/commercial/analysis/config/locales/kl-GL.yml b/back/engines/commercial/analysis/config/locales/kl-GL.yml
@@ -1,3 +1,3 @@
 kl:
   analysis:
-    example_tag_n: Example tag %{n}
+    example_tag_n: Tag'ikkatut assersuutit %{n}
diff --git a/back/engines/commercial/multi_tenancy/config/locales/kl-GL.yml b/back/engines/commercial/multi_tenancy/config/locales/kl-GL.yml
@@ -1,11 +1,11 @@
 #Translations for continuous to timeline migration
 kl:
   phase_title_default:
-    ideation: Collect input
+    ideation: Ilanngussat katersukkit
     voting: Taasisitsineq
     poll: Taasineq
     native_survey: Immersuilluni apersuineq
     survey: Immersuilluni apersuineq
-    document_annotation: Document feedback
-    volunteering: Find volunteers
-    information: Information
+    document_annotation: Utertitsiviginninneq uppernarsaruk
+    volunteering: Kajumissutsiminnik sulisunik ujarlerit
+    information: Paasissutissat
diff --git a/front/.storybook/mockServer.ts b/front/.storybook/mockServer.ts
@@ -16,6 +16,9 @@ import projectImagesEndpoints from '../app/api/project_images/__mocks__/_mockSer
 // phases mock data
 import phasesEndpoints from '../app/api/phases/__mocks__/_mockServer';
 
+// phases mini mock data
+import phasesMiniEndpoints from '../app/api/phases_mini/__mocks__/_mockServer';
+
 // baskets mock data
 import basketsEndpoints from '../app/api/baskets/__mocks__/_mockServer';
 
@@ -50,6 +53,8 @@ const endpoints = {
 
   ...phasesEndpoints,
 
+  ...phasesMiniEndpoints,
+
   ...basketsEndpoints,
 
   ...avatarsEndpoints,

diff --git a/front/app/api/phases_mini/__mocks__/_mockServer.ts b/front/app/api/phases_mini/__mocks__/_mockServer.ts
@@ -0,0 +1,32 @@
+import { addDays, format } from 'date-fns';
+import { http, HttpResponse } from 'msw';
+
+import { PhaseMini } from '../types';
+
+export const apiPathPhaseMini = '/web_api/v1/phases/:id/mini';
+
+const miniPhaseData: PhaseMini['data'] = {
+  id: 'MockPhaseInformationId',
+  type: 'phase_mini',
+  attributes: {
+    end_at: format(addDays(new Date(), 21), 'yyyy-MM-dd'),
+    participation_method: 'ideation',
+    input_term: 'idea',
+  },
+  relationships: {
+    project: {
+      data: {
+        id: 'projectId',
+        type: 'project',
+      },
+    },
+  },
+};
+
+const endpoints = {
+  'GET phases/:id/mini': http.get(apiPathPhaseMini, () => {
+    return HttpResponse.json({ data: miniPhaseData }, { status: 200 });
+  }),
+};
+
+export default endpoints;
diff --git a/front/app/component-library/components/Button/Button.test.tsx b/front/app/component-library/components/Button/Button.test.tsx
@@ -50,4 +50,19 @@ describe('<Button />', () => {
     expect(getByRole('link')).toBeInTheDocument();
     expect(getByRole('link')).toHaveAttribute('href', 'www.test.com');
   });
+
+  it('does not allow click events when disabled is true', () => {
+    const handleClick = jest.fn();
+
+    render(
+      <Button disabled onClick={handleClick}>
+        Test button
+      </Button>
+    );
+
+    const button = screen.getByText('Test button');
+    fireEvent.click(button);
+
+    expect(handleClick).toHaveBeenCalledTimes(0);
+  });
 });
diff --git a/front/app/component-library/components/Button/index.tsx b/front/app/component-library/components/Button/index.tsx
@@ -385,7 +385,6 @@ function getButtonStyle(
       border-color: ${borderDisabledColor};
       opacity: ${opacityDisabled};
       cursor: not-allowed;
-      pointer-events: none;
 
       ${ButtonText} {
         color: ${textDisabledColor};

diff --git a/front/app/component-library/components/Shimmer/index.tsx b/front/app/component-library/components/Shimmer/index.tsx
@@ -26,7 +26,7 @@ const ShimmerBox = styled(Box)<{ $bgColor: string }>`
   animation: ${shimmerAnimation} 2s infinite;
 `;
 
-const Shimmer = ({ bgColor = colors.black, ...props }: BoxProps) => {
+const Shimmer = ({ bgColor = colors.grey300, ...props }: BoxProps) => {
   return <ShimmerBox $bgColor={bgColor} {...props} aria-hidden={true} />;
 };
 

diff --git a/front/app/component-library/components/Tooltip/index.tsx b/front/app/component-library/components/Tooltip/index.tsx
@@ -25,26 +25,90 @@ const useActiveElement = () => {
   };
 
   useEffect(() => {
-    document.addEventListener('focusin', handleFocusIn);
+    document.addEventListener('click', handleOutsideClick);
     return () => {
-      document.removeEventListener('focusin', handleFocusIn);
+      document.removeEventListener('click', handleOutsideClick);
     };
-  }, []);
+  });
 
   useEffect(() => {
-    document.addEventListener('click', handleOutsideClick);
+    document.addEventListener('focusin', handleFocusIn);
     return () => {
-      document.removeEventListener('click', handleOutsideClick);
+      document.removeEventListener('focusin', handleFocusIn);
     };
-  });
+  }, []);
 
   return active;
 };
 
+const TippyComponent = ({
+  children,
+  theme,
+  width,
+  key,
+  isFocused,
+  setIsFocused,
+  setKey,
+  tooltipId,
+  ...rest
+}: {
+  children: React.ReactNode;
+  theme: string;
+  width: string | undefined;
+  key: number;
+  isFocused: boolean | undefined;
+  setIsFocused: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+  setKey: React.Dispatch<React.SetStateAction<number>>;
+  tooltipId: React.MutableRefObject<string>;
+} & TooltipProps) => {
+  return (
+    <Tippy
+      key={key}
+      plugins={[
+        {
+          name: 'hideOnEsc',
+          defaultValue: true,
+          fn({ hide }) {
+            function onKeyDown(event: KeyboardEvent) {
+              if (event.key === 'Escape') {
+                hide();
+              }
+            }
+
+            return {
+              onShow() {
+                document.addEventListener('keydown', onKeyDown);
+              },
+              onHide() {
+                document.removeEventListener('keydown', onKeyDown);
+              },
+            };
+          },
+        },
+      ]}
+      interactive={true}
+      role="tooltip"
+      visible={isFocused}
+      // Ensures tippy works with both keyboard and mouse
+      onHidden={() => {
+        setIsFocused(undefined);
+        setKey((prev) => prev + 1);
+      }}
+      theme={theme}
+      {...rest}
+    >
+      <Box as="span" id={tooltipId.current} w={width || 'fit-content'}>
+        {children}
+      </Box>
+    </Tippy>
+  );
+};
+
 const Tooltip = ({
   children,
   theme = 'light',
   width,
+  // This prop is used to determine if the native Tippy component should be wrapped in a Box component
   useWrapper = true,
   ...rest
 }: TooltipProps) => {
@@ -72,87 +136,35 @@ const Tooltip = ({
 
   if (useWrapper) {
     return (
-      <Tippy
+      <TippyComponent
         key={key}
-        plugins={[
-          {
-            name: 'hideOnEsc',
-            defaultValue: true,
-            fn({ hide }) {
-              function onKeyDown(event: KeyboardEvent) {
-                if (event.key === 'Escape') {
-                  hide();
-                }
-              }
-
-              return {
-                onShow() {
-                  document.addEventListener('keydown', onKeyDown);
-                },
-                onHide() {
-                  document.removeEventListener('keydown', onKeyDown);
-                },
-              };
-            },
-          },
-        ]}
-        interactive={true}
-        role="tooltip"
-        visible={isFocused}
-        // Ensures tippy works with both keyboard and mouse
-        onHidden={() => {
-          setIsFocused(undefined);
-          setKey((prev) => prev + 1);
-        }}
         theme={theme}
+        width={width}
+        isFocused={isFocused}
+        setIsFocused={setIsFocused}
+        setKey={setKey}
+        tooltipId={tooltipId}
         {...rest}
       >
-        <Box as="span" id={tooltipId.current} w={width || 'fit-content'}>
-          {children}
-        </Box>
-      </Tippy>
+        {children}
+      </TippyComponent>
     );
   } else {
     return (
       // This option is used for more accessible tooltips when useWrapper is false
       <Box as="span" id={tooltipId.current} w={width || 'fit-content'}>
-        <Tippy
+        <TippyComponent
           key={key}
-          plugins={[
-            {
-              name: 'hideOnEsc',
-              defaultValue: true,
-              fn({ hide }) {
-                function onKeyDown(event: KeyboardEvent) {
-                  if (event.key === 'Escape') {
-                    hide();
-                  }
-                }
-
-                return {
-                  onShow() {
-                    document.addEventListener('keydown', onKeyDown);
-                  },
-                  onHide() {
-                    document.removeEventListener('keydown', onKeyDown);
-                  },
-                };
-              },
-            },
-          ]}
-          interactive={true}
-          role="tooltip"
-          visible={isFocused}
-          // Ensures tippy works with both keyboard and mouse
-          onHidden={() => {
-            setIsFocused(undefined);
-            setKey((prev) => prev + 1);
-          }}
           theme={theme}
+          width={width}
+          isFocused={isFocused}
+          setIsFocused={setIsFocused}
+          setKey={setKey}
+          tooltipId={tooltipId}
           {...rest}
         >
           {children}
-        </Tippy>
+        </TippyComponent>
       </Box>
     );
   }

diff --git a/front/app/components/Form/Components/Controls/MultiSelectControl.tsx b/front/app/components/Form/Components/Controls/MultiSelectControl.tsx
@@ -25,7 +25,6 @@ import { getInstructionMessage } from './utils';
 
 const StyledMultipleSelect = styled(MultipleSelect)`
   flex-grow: 1;
-  z-index: 800 !important;
 `;
 
 const MultiSelectControl = ({
@@ -70,9 +69,7 @@ const MultiSelectControl = ({
             options={options}
             onChange={(vals) => {
               setDidBlur(true);
-              // TODO: Fix this the next time the file is edited.
-              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-              if (vals?.length === 0) {
+              if (vals.length === 0) {
                 handleChange(path, undefined);
               } else {
                 handleChange(
@@ -82,18 +79,14 @@ const MultiSelectControl = ({
               }
             }}
             inputId={sanitizeForClassname(id)}
-            // TODO: Fix this the next time the file is edited.
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            disabled={uischema?.options?.readonly}
+            disabled={uischema.options?.readonly}
             // On phones, the keyboard that appears is too large
             // and covers the options. So we disable the search functionality
             isSearchable={!isSmallerThanPhone}
           />
         </Box>
 
-        {/* TODO: Fix this the next time the file is edited. */}
-        {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
-        <VerificationIcon show={uischema?.options?.verificationLocked} />
+        <VerificationIcon show={uischema.options?.verificationLocked} />
       </Box>
       <Box mt="4px">
         <ErrorDisplay
@@ -114,9 +107,7 @@ export const multiSelectControlTester = (
   jsonSchema: JsonSchema
 ) => {
   if (
-    // TODO: Fix this the next time the file is edited.
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    uiSchema?.options?.input_type === 'multiselect' &&
+    uiSchema.options?.input_type === 'multiselect' &&
     dropdownLayoutTester(uiSchema, jsonSchema)
   ) {
     return 1000;

diff --git a/...ilder/components/FormBuilderSettings/ConfigSelectWithLocaleSwitcher/SelectFieldOption.tsx b/...ilder/components/FormBuilderSettings/ConfigSelectWithLocaleSwitcher/SelectFieldOption.tsx
@@ -106,6 +106,7 @@ const SelectFieldOption = memo(
               choice.title_multiloc[locale] = value;
               onChoiceUpdate(choice, index);
             }}
+            autoFocus={false}
           />
 
           {showImageSettings && (