Merge pull request #640 from Clm-Roig/develop

Deploy v0.3.10

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.10](https://github.com/clm-roig/suivie/compare/v0.3.9...v0.3.10) (2024-02-06)
+
+
+### Features
+
+* **customCompletion:** automatically select & focus the only completion if unique when opening dialogue ([f72e82c](https://github.com/clm-roig/suivie/commit/f72e82c88c08de5ce0bea820bb7a946814199b69))
+
+
+### Bug Fixes
+
+* **animatedBox:** remove now useless hack ([40b951f](https://github.com/clm-roig/suivie/commit/40b951f5bc1b11a90268fab7dd59ae0602cf5522))
+* **drawerMenu:** increase swip area width ([39584fe](https://github.com/clm-roig/suivie/commit/39584fe19e094d0545ae9f78006eca50e713280f))
+* **trackerCard:** fix dndrop issue ([130dd08](https://github.com/clm-roig/suivie/commit/130dd08163797a395c16284ba3adc7a606ceccff))
+
 ### [0.3.9](https://github.com/clm-roig/suivie/compare/v0.3.8...v0.3.9) (2023-12-08)
 
 

cypress/e2e/trackers/hideTracker.cy.ts

@@ -20,7 +20,7 @@ context('Trackers', () => {
       cy.get('.tracker-card').should('have.length', 0);
 
       // Navigate back to todo tab and find the tracker
-      cy.get('.MuiTab-root').filter(':contains("À FAIRE")').click();
+      cy.get('.MuiTab-root').filter(':contains("À FAIRE")').click({ force: true });
       cy.get('.tracker-card').should('have.length', 1);
     });
   });

cypress/e2e/trackers/selectedDate.cy.ts

@@ -20,8 +20,8 @@ context('Trackers', () => {
       const todayString =
         `${today.getDate()}`.padStart(2, '0') + '/' + todayMonth + '/' + today.getFullYear();
       cy.get('input').should('have.value', todayString);
-      cy.get('[data-testid="ChevronLeftIcon"]').click();
-      cy.get('[data-testid="ChevronLeftIcon"]').click();
+      cy.get('[data-testid="ChevronLeftIcon"]').click({ force: true });
+      cy.get('[data-testid="ChevronLeftIcon"]').click({ force: true });
       cy.reload();
       cy.get('input').should('have.value', todayString);
     });
@@ -30,9 +30,9 @@ context('Trackers', () => {
     });
     it('has one tracker created and visible today and yesterday only', () => {
       cy.get('.tracker-card').should('have.length', 1);
-      cy.get('[data-testid="ChevronLeftIcon"]').click();
+      cy.get('[data-testid="ChevronLeftIcon"]').click({ force: true });
       cy.get('.tracker-card').should('have.length', 1);
-      cy.get('[data-testid="ChevronLeftIcon"]').click();
+      cy.get('[data-testid="ChevronLeftIcon"]').click({ force: true });
       cy.get('.tracker-card').should('have.length', 0);
     });
   });

cypress/e2e/trackers/validateTracker.cy.ts

@@ -7,7 +7,7 @@ context('Trackers', () => {
   describe('validate tracker', () => {
     it('validates a tracker when clicking on the "complete validate" button', () => {
       cy.get('.tracker-card').first().as('card');
-      cy.get('@card').find('[data-testid="TaskAltIcon"]').click();
+      cy.get('@card').find('[data-testid="TaskAltIcon"]').click({ force: true });
       cy.contains('Valider').click();
       cy.get('.tracker-card').should('have.length', 0);
 

cypress/support/commands.ts

@@ -52,15 +52,3 @@ Cypress.Commands.add('createTracker', (trackerValues?: Partial<Tracker>) => {
   const tracker = makeFakeTracker(trackerValues);
   cy.window().its('store').invoke('dispatch', createTracker(tracker));
 });
-
-Cypress.Commands.add('getAttached', (selector: string) => {
-  const getElement = typeof selector === 'function' ? selector : ($d) => $d.find(selector);
-  let $el = null;
-  return cy
-    .document()
-    .should(($d) => {
-      $el = getElement(Cypress.$($d));
-      expect(Cypress.dom.isDetached($el)).to.be.false;
-    })
-    .then(() => cy.wrap($el));
-});

cypress/support/index.ts

@@ -15,16 +15,6 @@ declare global {
        * @example cy.createTracker({ name: 'my tracker' })
        */
       createTracker(trackerValues?: Partial<Tracker>): Chainable<Element>;
-      /**
-       * get() command for detached element from here => https://github.com/cypress-io/cypress/issues/5743#issuecomment-650421731
-       * Waits until the selector finds an attached element, then yields it (wrapped).
-       * selectorFn, if provided, is passed $(document). Don't use cy methods inside selectorFn.
-       *
-       * Workaround of this issue: https://github.com/cypress-io/cypress/issues/7306
-       * Remove it when the issue is solved.
-       * @example cy.getAttached('#myButton')
-       */
-      getAttached(selector: string): Chainable<unknown>;
     }
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "suivie",
   "homepage": "https://clm-roig.github.io/suivie",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "private": true,
   "jest": {},
   "dependencies": {

src/app/DrawerMenu.tsx

@@ -87,6 +87,7 @@ const DrawerMenu: FC<Props> = ({ open, toggleDrawerMenu, toggleThemeMode, width
       onClose={toggleDrawerMenu}
       onOpen={toggleDrawerMenu}
       open={open}
+      swipeAreaWidth={70}
       sx={{
         width: width,
         flexShrink: 0,

src/components/TrackerCard/TrackerCardActions.tsx

@@ -143,6 +143,7 @@ const TrackerCardActions: FC<Props> = ({
         onChipClick={onChipClick}
         onValidation={handleCustomValidation}
         selectedCompletions={selectedCompletions}
+        setSelectedCompletions={setSelectedCompletions}
         tracker={tracker}
       />
       <MakeVisibleValidationDialog

src/components/TrackerValidationDialog/CustomValidationDialog.tsx

@@ -9,7 +9,7 @@ import {
   DialogTitle
 } from '@mui/material';
 import { isToday } from 'date-fns';
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 
 import { useAppSelector } from '../../hooks/redux';
 import Completion from '../../models/Completion';
@@ -24,6 +24,7 @@ interface Props {
   onChipClick?: (completion: Completion) => void;
   onValidation: (completions: Completion[]) => void;
   selectedCompletions?: Completion[];
+  setSelectedCompletions: (completions: Completion[]) => void;
   tracker: Tracker;
 }
 
@@ -32,10 +33,19 @@ const CustomValidationDialog: FC<Props> = ({
   onChipClick,
   onValidation,
   selectedCompletions,
+  setSelectedCompletions,
   tracker
 }) => {
   const selectedDate = new Date(useAppSelector(selectSelectedDate));
   const { name, requiredCompletions } = tracker;
+
+  useEffect(() => {
+    // Default select the only completion when opening (and unselect it when closing)
+    if (requiredCompletions?.length === 1) {
+      setSelectedCompletions(dialogProps.open ? requiredCompletions : []);
+    }
+  }, [setSelectedCompletions, requiredCompletions, dialogProps.open]);
+
   return (
     <Dialog {...dialogProps}>
       <DialogTitle id="alert-dialog-title">

src/components/forms/ValidateCompletionsForm/ValidateCompletionsForm.tsx

@@ -92,6 +92,7 @@ const ValidateCompletionsForm: FC<Props> = ({ completions, formId, onSubmit }) =
               }}
               render={({ field: { name, onChange, value }, fieldState: { error } }) => (
                 <CompletionQuantityTextField
+                  autoFocus={completions?.length === 1}
                   onDecrement={() => setValue(name, computeDecrementedStringQuantity(value))}
                   onIncrement={() => setValue(name, computeIncrementedStringQuantity(value))}
                   textFieldProps={{

src/components/forms/completions/CompletionQuantityTextField.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Button, TextField, TextFieldProps } from '@mui/material';
+import { Button, InputProps, TextField, TextFieldProps } from '@mui/material';
 import React, { FC } from 'react';
 
 const StyledButton = styled(Button)`
@@ -14,12 +14,18 @@ const StyledTextField = styled(TextField)`
 `;
 
 interface Props {
+  autoFocus?: InputProps['autoFocus'];
   onDecrement?: () => void;
   onIncrement?: () => void;
   textFieldProps: TextFieldProps;
 }
 
-const CompletionQuantityTextField: FC<Props> = ({ onDecrement, onIncrement, textFieldProps }) => {
+const CompletionQuantityTextField: FC<Props> = ({
+  autoFocus,
+  onDecrement,
+  onIncrement,
+  textFieldProps
+}) => {
   return (
     <StyledTextField
       inputProps={{
@@ -30,6 +36,7 @@ const CompletionQuantityTextField: FC<Props> = ({ onDecrement, onIncrement, text
         }
       }}
       InputProps={{
+        autoFocus: autoFocus,
         endAdornment: onIncrement && <StyledButton onClick={() => onIncrement()}>+</StyledButton>,
         startAdornment: onDecrement && <StyledButton onClick={() => onDecrement()}>-</StyledButton>,
         sx: { px: 1 }

src/components/forms/completions/DefaultCompletionsForm/DefaultCompletionsForm.tsx

@@ -75,9 +75,7 @@ const DefaultCompletionsForm: FC<Props> = ({
   const id = open ? 'popover-' + name : undefined;
 
   return (
-    // Little hack on Box ref to make it work with TS: https://github.com/mui/material-ui/issues/17010#issuecomment-615577360
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    <Box {...({ ref: animateRef } as any)}>
+    <Box ref={animateRef}>
       {fields.map((field, index) => (
         <FieldsetGrid columns={2} container key={field.id} sx={fieldsetSx} {...gridProps}>
           <Grid item xs={2} sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>