feat: add colorful headers (#593)

fix: replace Item type by DiscriminatedItem fix: bump @graasp dependencies --------- Co-authored-by: spaenleh <[email protected]>
graasp · Mar 17, 2023 · 41ddacb · 41ddacb
1 parent 20a2b88
commit 41ddacb
Show file tree

Hide file tree

Showing 18 changed files with 178 additions and 157 deletions.
diff --git a/package.json b/package.json
@@ -12,11 +12,11 @@
   "dependencies": {
     "@emotion/react": "11.10.5",
     "@emotion/styled": "11.10.5",
-    "@graasp/chatbox": "1.0.3",
-    "@graasp/query-client": "0.3.2",
-    "@graasp/sdk": "0.9.1",
+    "@graasp/chatbox": "1.1.0",
+    "@graasp/query-client": "0.4.0",
+    "@graasp/sdk": "0.9.2",
     "@graasp/translations": "1.8.0",
-    "@graasp/ui": "2.1.0",
+    "@graasp/ui": "2.2.0",
     "@mui/icons-material": "5.11.0",
     "@mui/lab": "5.0.0-alpha.117",
     "@mui/material": "5.11.6",
@@ -147,7 +147,6 @@
     "@mui/icons-material": "5.11.0",
     "@mui/material": "5.11.6",
     "immer": "9.0.6",
-    "@graasp/sdk": "0.9.1",
     "immutable": "4.2.4",
     "@svgr/webpack": "6.5.1"
   },

diff --git a/src/components/common/CollapseButton.tsx b/src/components/common/CollapseButton.tsx
@@ -8,7 +8,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { useEffect, useState } from 'react';
 
 import { MUTATION_KEYS } from '@graasp/query-client';
-import { Item } from '@graasp/sdk';
+import { DiscriminatedItem } from '@graasp/sdk';
 import { BUILDER } from '@graasp/translations';
 import { ActionButton, ActionButtonVariant } from '@graasp/ui';
 
@@ -17,7 +17,7 @@ import { useMutation } from '../../config/queryClient';
 import { COLLAPSE_ITEM_BUTTON_CLASS } from '../../config/selectors';
 
 type Props = {
-  item: Item;
+  item: DiscriminatedItem;
   type?: ActionButtonVariant;
   onClick?: () => void;
 };
@@ -29,9 +29,11 @@ const CollapseButton = ({
 }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
 
-  const { mutate: editItem } = useMutation<unknown, unknown, Partial<Item>>(
-    MUTATION_KEYS.EDIT_ITEM,
-  );
+  const { mutate: editItem } = useMutation<
+    unknown,
+    unknown,
+    Partial<DiscriminatedItem>
+  >(MUTATION_KEYS.EDIT_ITEM);
   const [isCollapsible, setIsCollapsible] = useState(
     item?.settings?.isCollapsible ?? false,
   );

diff --git a/src/components/common/EditButton.tsx b/src/components/common/EditButton.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react';
 
-import { Item } from '@graasp/sdk';
+import { DiscriminatedItem } from '@graasp/sdk';
 import { BUILDER } from '@graasp/translations';
 import { EditButton as GraaspEditButton } from '@graasp/ui';
 
@@ -12,7 +12,7 @@ import {
 import { EditItemModalContext } from '../context/EditItemModalContext';
 
 type Props = {
-  item: Item;
+  item: DiscriminatedItem;
 };
 
 const EditButton: FC<Props> = ({ item }) => {

diff --git a/src/components/common/HideButton.tsx b/src/components/common/HideButton.tsx
@@ -6,7 +6,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Tooltip from '@mui/material/Tooltip';
 
 import { MUTATION_KEYS } from '@graasp/query-client';
-import { Item } from '@graasp/sdk';
+import { DiscriminatedItem } from '@graasp/sdk';
 import { BUILDER } from '@graasp/translations';
 import { ActionButton, ActionButtonVariant } from '@graasp/ui';
 
@@ -16,7 +16,7 @@ import { hooks, useMutation } from '../../config/queryClient';
 import { HIDDEN_ITEM_BUTTON_CLASS } from '../../config/selectors';
 
 type Props = {
-  item: Item;
+  item: DiscriminatedItem;
   type?: ActionButtonVariant;
   onClick?: () => void;
 };

diff --git a/src/components/common/PinButton.tsx b/src/components/common/PinButton.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { MUTATION_KEYS } from '@graasp/query-client';
-import { Item } from '@graasp/sdk';
+import { DiscriminatedItem } from '@graasp/sdk';
 import { BUILDER } from '@graasp/translations';
 import { ActionButtonVariant, PinButton as GraaspPinButton } from '@graasp/ui';
 
@@ -11,7 +11,7 @@ import { PIN_ITEM_BUTTON_CLASS } from '../../config/selectors';
 
 type Props = {
   type?: ActionButtonVariant;
-  item: Item;
+  item: DiscriminatedItem;
   onClick?: () => void;
 };
 

diff --git a/src/components/context/CreateShortcutModalContext.tsx b/src/components/context/CreateShortcutModalContext.tsx
@@ -1,7 +1,7 @@
 import { FC, createContext, useMemo, useState } from 'react';
 
 import { MUTATION_KEYS } from '@graasp/query-client';
-import { Item, ItemType } from '@graasp/sdk';
+import { DiscriminatedItem, ItemType } from '@graasp/sdk';
 import { BUILDER } from '@graasp/translations';
 
 import { useBuilderTranslation } from '../../config/i18n';
@@ -11,7 +11,7 @@ import { buildShortcutExtra } from '../../utils/itemExtra';
 import TreeModal from '../main/TreeModal';
 
 const CreateShortcutModalContext = createContext({
-  openModal: (_newItem: Item) => {
+  openModal: (_newItem: DiscriminatedItem) => {
     // do nothing
   },
 });
@@ -26,9 +26,9 @@ const CreateShortcutModalProvider: FC<Props> = ({ children }) => {
     MUTATION_KEYS.POST_ITEM,
   );
   const [open, setOpen] = useState(false);
-  const [item, setItem] = useState<Item>();
+  const [item, setItem] = useState<DiscriminatedItem>();
 
-  const openModal = (newItem: Item) => {
+  const openModal = (newItem: DiscriminatedItem) => {
     setOpen(true);
     setItem(newItem);
   };

diff --git a/src/components/context/EditItemModalContext.tsx b/src/components/context/EditItemModalContext.tsx
@@ -7,7 +7,7 @@ import { FC, createContext, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import { MUTATION_KEYS } from '@graasp/query-client';
-import { Item, ItemType, convertJs } from '@graasp/sdk';
+import { DiscriminatedItem, ItemType, convertJs } from '@graasp/sdk';
 import { ItemRecord } from '@graasp/sdk/frontend';
 import { BUILDER, COMMON } from '@graasp/translations';
 import { Button } from '@graasp/ui';
@@ -27,7 +27,7 @@ type Props = {
 };
 
 const EditItemModalContext = createContext({
-  openModal: (_newItem: Item) => {
+  openModal: (_newItem: DiscriminatedItem) => {
     // do nothing
   },
 });
@@ -47,7 +47,7 @@ const EditItemModalProvider: FC<Props> = ({ children }) => {
   const [open, setOpen] = useState(false);
   const [item, setItem] = useState<ItemRecord | null>(null);
 
-  const openModal = (newItem: Item) => {
+  const openModal = (newItem: DiscriminatedItem) => {
     setOpen(true);
     setItem(convertJs(newItem));
   };
@@ -65,7 +65,12 @@ const EditItemModalProvider: FC<Props> = ({ children }) => {
     if (isConfirmButtonDisabled) {
       return;
     }
-    if (!isItemValid({ ...(item?.toJS() as Item), ...updatedProperties })) {
+    if (
+      !isItemValid({
+        ...(item?.toJS() as DiscriminatedItem),
+        ...updatedProperties,
+      })
+    ) {
       toast.error(translateBuilder(BUILDER.EDIT_ITEM_ERROR_MESSAGE));
       return;
     }
@@ -132,7 +137,10 @@ const EditItemModalProvider: FC<Props> = ({ children }) => {
             // maybe we do not need the state variable and can just check the item
             isConfirmButtonDisabled ||
             // isItem Valid checks a full item, so we add the updated properties to the item to check
-            !isItemValid({ ...(item?.toJS() as Item), ...updatedProperties })
+            !isItemValid({
+              ...(item?.toJS() as DiscriminatedItem),
+              ...updatedProperties,
+            })
           }
           onClick={submit}
           id={ITEM_FORM_CONFIRM_BUTTON_ID}

diff --git a/src/components/item/form/BaseItemForm.tsx b/src/components/item/form/BaseItemForm.tsx
@@ -2,16 +2,16 @@ import { TextField } from '@mui/material';
 
 import { ChangeEvent, FC } from 'react';
 
-import { Item, UnknownExtra } from '@graasp/sdk';
+import { DiscriminatedItem, UnknownExtra } from '@graasp/sdk';
 import { ItemRecord } from '@graasp/sdk/frontend';
 import { BUILDER } from '@graasp/translations';
 
 import { useBuilderTranslation } from '../../../config/i18n';
 import { ITEM_FORM_NAME_INPUT_ID } from '../../../config/selectors';
 
 type Props = {
-  updatedProperties: Partial<Item<UnknownExtra>>;
-  onChange: (props: Partial<Item>) => void;
+  updatedProperties: Partial<DiscriminatedItem<UnknownExtra>>;
+  onChange: (props: Partial<DiscriminatedItem>) => void;
   item: Partial<ItemRecord>;
 };
 

diff --git a/src/components/item/form/FolderForm.tsx b/src/components/item/form/FolderForm.tsx
@@ -1,14 +1,14 @@
 import Box from '@mui/material/Box';
 
-import { FolderItemType, Item } from '@graasp/sdk';
+import { DiscriminatedItem, FolderItemType } from '@graasp/sdk';
 import { FolderItemTypeRecord } from '@graasp/sdk/frontend';
 import { TextEditor } from '@graasp/ui';
 
 import { FOLDER_FORM_DESCRIPTION_ID } from '../../../config/selectors';
 import BaseItemForm from './BaseItemForm';
 
 type Props = {
-  onChange: (item: Partial<Item>) => void;
+  onChange: (item: Partial<DiscriminatedItem>) => void;
   item: Partial<FolderItemTypeRecord>;
   updatedProperties: Partial<FolderItemType>;
 };

diff --git a/src/components/main/Item.tsx b/src/components/main/Item.tsx
@@ -4,7 +4,7 @@ import truncate from 'lodash.truncate';
 import { CSSProperties, FC, PropsWithChildren } from 'react';
 import { Link } from 'react-router-dom';
 
-import { Item, ItemType, getEmbeddedLinkExtra } from '@graasp/sdk';
+import { DiscriminatedItem, ItemType, getEmbeddedLinkExtra } from '@graasp/sdk';
 import { ItemMembershipRecord, ItemRecord } from '@graasp/sdk/frontend';
 import { Card as GraaspCard, Thumbnail } from '@graasp/ui';
 
@@ -87,7 +87,7 @@ const ItemComponent: FC<Props> = ({ item, memberships }) => {
             item={
               // DO NOT REMOVE cast
               // here we cast explicitly to be equivalent to the grid which does not let us use Records
-              item.toJS() as Item
+              item.toJS() as DiscriminatedItem
             }
           />
           <DownloadButton id={id} name={name} />
@@ -104,7 +104,12 @@ const ItemComponent: FC<Props> = ({ item, memberships }) => {
       Actions={Actions}
       name={name}
       creator={member?.name}
-      ItemMenu={<ItemMenu item={item.toJS() as Item} canEdit={enableEdition} />}
+      ItemMenu={
+        <ItemMenu
+          item={item.toJS() as DiscriminatedItem}
+          canEdit={enableEdition}
+        />
+      }
       Thumbnail={ThumbnailComponent}
       cardId={buildItemCard(id)}
       NameWrapper={NameWrapper({

diff --git a/src/components/main/ItemMenu.tsx b/src/components/main/ItemMenu.tsx
@@ -8,7 +8,7 @@ import MenuItem from '@mui/material/MenuItem';
 
 import { FC, useContext, useState } from 'react';
 
-import { Item, convertJs } from '@graasp/sdk';
+import { DiscriminatedItem, convertJs } from '@graasp/sdk';
 import { BUILDER } from '@graasp/translations';
 import { ActionButton } from '@graasp/ui';
 
@@ -32,7 +32,7 @@ import { FlagItemModalContext } from '../context/FlagItemModalContext';
 import CopyButton from './CopyButton';
 
 type Props = {
-  item: Item;
+  item: DiscriminatedItem;
   canEdit?: boolean;
 };
 

diff --git a/src/components/main/ItemsTable.tsx b/src/components/main/ItemsTable.tsx
@@ -6,8 +6,8 @@ import { useNavigate, useParams } from 'react-router';
 
 import { MUTATION_KEYS } from '@graasp/query-client';
 import {
+  DiscriminatedItem,
   FolderItemExtra,
-  Item,
   ItemType,
   getFolderExtra,
   getShortcutExtra,
@@ -100,10 +100,16 @@ const ItemsTable: FC<Props> = ({
     [isFolder, isSearching],
   );
 
-  const getRowNodeId = ({ data }: { data: Item }) =>
+  const getRowNodeId = ({ data }: { data: DiscriminatedItem }) =>
     buildItemsTableRowId(data.id);
 
-  const onCellClicked = ({ column, data }: { column: Column; data: Item }) => {
+  const onCellClicked = ({
+    column,
+    data,
+  }: {
+    column: Column;
+    data: DiscriminatedItem;
+  }) => {
     if (column.getColId() !== 'actions') {
       let targetId = data.id;
 
@@ -127,7 +133,7 @@ const ItemsTable: FC<Props> = ({
     return true;
   };
 
-  const onDragEnd = (displayRows: { data: Item }[]) => {
+  const onDragEnd = (displayRows: { data: DiscriminatedItem }[]) => {
     if (!itemId) {
       console.error('no item id defined');
     } else {
@@ -179,7 +185,8 @@ const ItemsTable: FC<Props> = ({
         field: 'type',
         headerName: translateBuilder(BUILDER.ITEMS_TABLE_TYPE_HEADER),
         type: 'rightAligned',
-        cellRenderer: ({ data }: { data: Item }) => translateEnums(data.type),
+        cellRenderer: ({ data }: { data: DiscriminatedItem }) =>
+          translateEnums(data.type),
         flex: 2,
         comparator: GraaspTable.textComparator,
         sort: defaultSortedColumn?.type,
@@ -255,7 +262,7 @@ const ItemsTable: FC<Props> = ({
         id={tableId}
         columnDefs={columnDefs}
         tableHeight={ITEMS_TABLE_CONTAINER_HEIGHT}
-        rowData={rows.toJS() as Item[]}
+        rowData={rows.toJS() as DiscriminatedItem[]}
         emptyMessage={translateBuilder(BUILDER.ITEMS_TABLE_EMPTY_MESSAGE)}
         onDragEnd={onDragEnd}
         onCellClicked={onCellClicked}

diff --git a/src/components/main/ItemsToolbar.tsx b/src/components/main/ItemsToolbar.tsx
@@ -1,21 +1,21 @@
-import { Grid, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 
 type Props = {
   title: string;
   headerElements?: JSX.Element[];
 };
 
 const ItemsToolbar = ({ title, headerElements = null }: Props): JSX.Element => (
-  <Grid container mt={1} mb={2}>
-    <Grid item md={8}>
+  <Stack direction="row" justifyContent="space-between" spacing={1}>
+    <Box>
       <Typography variant="h4" noWrap>
         {title}
       </Typography>
-    </Grid>
-    <Grid item md={4} sx={{ display: 'flex', justifyContent: 'right' }}>
+    </Box>
+    <Stack direction="row" alignItems="center" justifyContent="flex-end">
       {headerElements}
-    </Grid>
-  </Grid>
+    </Stack>
+  </Stack>
 );
 
 export default ItemsToolbar;
diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx
@@ -6,6 +6,7 @@ import { Link, useParams } from 'react-router-dom';
 
 import { MentionButton } from '@graasp/chatbox';
 import { MUTATION_KEYS } from '@graasp/query-client';
+import { Context } from '@graasp/sdk';
 import {
   GraaspLogo,
   Main as GraaspMain,
@@ -114,13 +115,8 @@ const Main: FC<Props> = ({ children }) => {
       <Grid item>
         <MentionButton
           color="secondary"
-          // todo: remove with an update to the type of the prop in chatbox
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
+          badgeColor="primary"
           useMentions={hooks.useMentions}
-          // todo: remove with an update to the type of the prop in chatbox
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
           useMembers={hooks.useMembers}
           patchMentionFunction={patchMentionFunction}
           deleteMentionFunction={deleteMentionFunction}
@@ -135,6 +131,7 @@ const Main: FC<Props> = ({ children }) => {
 
   return (
     <GraaspMain
+      context={Context.BUILDER}
       handleDrawerOpen={() => {
         setIsMainMenuOpen(true);
       }}