feat: upgrade ui-caps to v4

WDY-398

frontend/.gitignore

@@ -25,3 +25,6 @@ yarn-error.log*
 
 # Docz
 /.docz
+
+# Eslint cache
+.eslintcache

frontend/package.json

@@ -24,7 +24,7 @@
   ],
   "dependencies": {
     "@binarycapsule/editor": "^1.1.1",
-    "@binarycapsule/ui-capsules": "^4.0.0",
+    "@binarycapsule/ui-capsules": "^4.0.1",
     "@emotion/react": "^11.1.2",
     "@emotion/styled": "^11.0.0",
     "@nivo/core": "^0.67.0",

frontend/src/components/UserDropdown/UserDropdown.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Icon, Menu, MenuItem } from '@binarycapsule/ui-capsules';
+import { Button, Menu, MenuItem } from '@binarycapsule/ui-capsules';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { logoutRequest } from '../../features/auth/Logout/Logout.actions';
@@ -24,12 +24,12 @@ const UserDropdown = () => {
     >
       <MenuItem
         text="Settings"
-        leftAddon={<Icon icon="adjustments" size="18px" />}
+        leftIcon="adjustments"
         onClick={() => history.push('/settings/account')}
       />
       <MenuItem
         text="Log out"
-        leftAddon={<Icon icon="login" size="18px" />}
+        leftIcon="login"
         onClick={() => dispatch(logoutRequest())}
         closeOnAction={false}
       />

frontend/src/features/day/PlanMenu/PlanMenu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, IconButton, Menu, MenuItem } from '@binarycapsule/ui-capsules';
+import { IconButton, Menu, MenuItem } from '@binarycapsule/ui-capsules';
 import { useHistory, useParams } from 'react-router';
 import { useMoveAll } from '../api/useMoveAll';
 import { DayRouteParams } from '../dayTypes';
@@ -21,7 +21,7 @@ export const PlanMenu: React.FC<Props> = ({ planId }) => {
     <>
       <Menu trigger={Trigger} placement="right">
         <MenuItem
-          leftAddon={<Icon icon="calendar" size="18px" />}
+          leftIcon="calendar"
           onClick={() => {
             moveAll({
               to: 'schedule',

frontend/src/features/day/TaskMenu/TaskMenu.tsx

@@ -38,25 +38,21 @@ export const TaskMenu: React.FC<Props> = ({ dayId, sectionId, task, isPlan }) =>
           {canRegisterTime ? (
             <MenuItem
               text="Register Time"
-              leftAddon={<Icon icon="clock" size="18px" />}
+              leftIcon="clock"
               onClick={() => setShowRegisterTimeModal(true)}
             />
           ) : null}
-          <MenuItem
-            text="Rename"
-            leftAddon={<Icon icon="pencil" size="18px" />}
-            onClick={() => setShowRenameTaskModal(true)}
-          />
+          <MenuItem text="Rename" leftIcon="pencil" onClick={() => setShowRenameTaskModal(true)} />
           {canScheduleTask ? (
             <MenuItem
               text="Schedule"
-              leftAddon={<Icon icon="calendar" size="18px" />}
+              leftIcon="calendar"
               onClick={() => setShowScheduleTaskDialog(true)}
             />
           ) : null}
           <MenuItem
             text="Delete"
-            leftAddon={<Icon icon="trash" size="18px" color="red.500" />}
+            leftAddon={<Icon icon="trash" color="error.500" size="18px" />}
             onClick={() => setShowDeleteTaskDialog(true)}
           />
         </Menu>

frontend/src/features/day/dialogs/DeleteTaskDialog.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Dialog } from '@binarycapsule/ui-capsules';
-import { DialogAction } from '@binarycapsule/ui-capsules/dist/Dialog/Dialog';
+import { Action, Dialog } from '@binarycapsule/ui-capsules';
 import { useDeleteTask } from '../api/useDeleteTask';
 
 interface Props {
@@ -22,16 +21,16 @@ export const DeleteTaskDialog: React.FC<Props> = ({ dayId, sectionId, taskId, on
     onRequestClose();
   };
 
-  const actions: DialogAction[] = [
+  const actions: Action[] = [
     {
-      name: 'Cancel',
-      appearance: 'neutral',
-      action: onRequestClose,
+      text: 'Cancel',
+      variant: 'neutral',
+      onClick: onRequestClose,
     },
     {
-      name: 'Delete',
-      appearance: 'error',
-      action: deleteAction,
+      text: 'Delete',
+      variant: 'error',
+      onClick: deleteAction,
     },
   ];
 

frontend/src/features/day/dialogs/ScheduleTaskDialog.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Dialog } from '@binarycapsule/ui-capsules';
-import { DialogAction } from '@binarycapsule/ui-capsules/dist/Dialog/Dialog';
+import { Action, Dialog } from '@binarycapsule/ui-capsules';
 import { useHistory, useParams } from 'react-router';
 import { ScheduleTaskVariables, useScheduleTask } from '../api/useScheduleTask';
 import { DayRouteParams } from '../dayTypes';
@@ -38,16 +37,16 @@ export const ScheduleTaskDialog: React.FC<Props> = ({
     return scheduleTask(scheduleTaskVariables);
   };
 
-  const actions: DialogAction[] = [
+  const actions: Action[] = [
     {
-      name: 'Cancel',
-      appearance: 'neutral',
-      action: onRequestClose,
+      text: 'Cancel',
+      variant: 'neutral',
+      onClick: onRequestClose,
     },
     {
-      name: 'Schedule',
-      appearance: 'primary',
-      action: scheduleTaskAction,
+      text: 'Schedule',
+      variant: 'primary',
+      onClick: scheduleTaskAction,
     },
   ];
 

frontend/src/features/day/modals/LaunchTaskModal/LaunchTaskModal.tsx

@@ -83,7 +83,7 @@ export const LaunchTaskModal: React.FC<Props> = ({
   };
 
   return (
-    <Modal isOpen onRequestClose={onRequestClose} contentLabel="Modal - Launch task">
+    <Modal isOpen onRequestClose={onRequestClose} contentLabel="Modal - Launch task" size="small">
       <ModalHeader>Choose a section:</ModalHeader>
 
       <ModalCloseButton onClick={onRequestClose} />

frontend/src/features/settings/Page/Scopes/Scopes.styles.js

@@ -8,10 +8,6 @@ export const ActionsTop = styled.div`
   display: flex;
   flex-direction: column;
 
-  > * + * {
-    margin-top: 8px;
-  }
-
   @media (min-width: 600px) {
     flex-direction: row;
     align-items: center;

frontend/src/features/settings/Page/Scopes/ScopesTable/ScopesTable.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Icon, MenuItem } from '@binarycapsule/ui-capsules';
+import { MenuItem } from '@binarycapsule/ui-capsules';
 import ScopeCode from '../../../../../components/ScopeCode/ScopeCode';
 import DotsMenu from '../../../../../components/DotsMenu/DotsMenu';
 import EmptyScopesTable from '../EmptyScopesTable/EmptyScopesTable';
@@ -12,8 +12,8 @@ import { ScopeModal } from '../../../../day/modals/ScopeModal/ScopeModal';
 const ScopesTable = ({ isArchived, scopes }) => {
   const [selectedScope, setSelectedScope] = useState(null);
 
-  const [archiveScope] = useArchiveScope();
-  const [unarchiveScope] = useUnarchiveScope();
+  const [archiveScope, { isLoading: archiveScopeLoading }] = useArchiveScope();
+  const [unarchiveScope, { isLoading: unarchiveScopeLoading }] = useUnarchiveScope();
 
   if (scopes.length === 0) {
     return (
@@ -29,15 +29,12 @@ const ScopesTable = ({ isArchived, scopes }) => {
             <ScopeCode scopeCode={scope.shortCode} onClick={() => setSelectedScope(scope)} />
             <ScopeName onClick={() => setSelectedScope(scope)}>{scope.name}</ScopeName>
             <DotsMenu>
-              <MenuItem
-                text="Edit"
-                leftAddon={<Icon icon="pencil" size="18px" />}
-                onClick={() => setSelectedScope(scope)}
-              />
+              <MenuItem text="Edit" leftIcon="pencil" onClick={() => setSelectedScope(scope)} />
 
               <MenuItem
                 text={isArchived ? 'Unarchive' : 'Archive'}
-                leftAddon={<Icon icon={isArchived ? 'arrow_up' : 'archive'} size="18px" />}
+                leftIcon={isArchived ? 'arrow_up' : 'archive'}
+                isLoading={archiveScopeLoading || unarchiveScopeLoading}
                 onClick={() => {
                   isArchived ? unarchiveScope(scope.id) : archiveScope(scope.id);
                 }}
@@ -47,6 +44,7 @@ const ScopesTable = ({ isArchived, scopes }) => {
           </Row>
         ))}
       </StyledScopesTable>
+
       {!!selectedScope && (
         <ScopeModal scope={selectedScope} closeModal={() => setSelectedScope(null)} />
       )}

frontend/src/features/userMenu/UserMenu.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useParams } from 'react-router-dom';
-import { Button, Icon, Menu, MenuItem } from '@binarycapsule/ui-capsules';
+import { Button, Menu, MenuItem } from '@binarycapsule/ui-capsules';
 import { logoutRequest } from '../auth/Logout/Logout.actions';
 import { dayStateActions } from '../day/dayState/dayStateSlice';
 import { DayRouteParams } from '../day/dayTypes';
+import { isLoadingSelector as isLogoutLoadingSelector } from '../auth/Logout/Logout.selectors';
 
 export const UserMenu = () => {
   const { dayId } = useParams<DayRouteParams>();
   const history = useHistory();
   const dispatch = useDispatch();
 
-  // const isLogoutLoading = useSelector(isLogoutLoadingSelector);
+  const isLogoutLoading = useSelector(isLogoutLoadingSelector);
 
   const showSchedule = () => {
     dispatch(dayStateActions.showSchedule());
@@ -29,22 +30,19 @@ export const UserMenu = () => {
         />
       }
     >
-      <MenuItem
-        text="Schedule"
-        leftAddon={<Icon icon="calendar" size="18px" />}
-        onClick={showSchedule}
-      />
+      <MenuItem text="Schedule" leftIcon="calendar" onClick={showSchedule} />
 
       <MenuItem
         text="Settings"
-        leftAddon={<Icon icon="cog" size="18px" />}
+        leftIcon="cog"
         onClick={() => history.push(`/settings/account${dayId ? `/${dayId}` : ''}`)}
       />
 
       <MenuItem
         text="Log out"
-        leftAddon={<Icon icon="logout" size="18px" />}
+        leftIcon="logout"
         onClick={() => dispatch(logoutRequest())}
+        isLoading={isLogoutLoading}
         closeOnAction={false}
       />
     </Menu>