From de266631858e807c853110828f07d3fbb97dce34 Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Wed, 3 Jan 2024 11:31:19 +0100 Subject: [PATCH 01/11] style: enhancements for responsive design --- package.json | 2 +- src/components/context/LayoutContext.tsx | 7 ++- src/components/item/header/ItemHeader.tsx | 5 +- .../item/header/ItemHeaderActions.tsx | 61 +++++++++++++++++-- src/components/layout/Navigation.tsx | 6 +- src/components/main/Main.tsx | 11 ++-- yarn.lock | 14 ++--- 7 files changed, 85 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 7921a53d3..27d7fc358 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@graasp/query-client": "2.2.1", "@graasp/sdk": "3.3.0", "@graasp/translations": "1.21.1", - "@graasp/ui": "4.2.0", + "@graasp/ui": "https://github.com/graasp/graasp-ui.git#responsive-enhancements", "@mui/icons-material": "5.14.19", "@mui/lab": "5.0.0-alpha.151", "@mui/material": "5.14.19", diff --git a/src/components/context/LayoutContext.tsx b/src/components/context/LayoutContext.tsx index d0855c376..9cb35edbe 100644 --- a/src/components/context/LayoutContext.tsx +++ b/src/components/context/LayoutContext.tsx @@ -1,6 +1,7 @@ -import { createContext, useContext, useMemo, useState } from 'react'; +import { createContext, useContext, useEffect, useMemo, useState } from 'react'; import { ChatStatus } from '@graasp/sdk'; +import { useMobileView } from '@graasp/ui'; import { DEFAULT_ITEM_LAYOUT_MODE } from '../../config/constants'; import { ITEM_LAYOUT_MODES } from '../../enums'; @@ -71,6 +72,7 @@ export const LayoutContextProvider = ({ null, ); + const { isMobile } = useMobileView(); const [isMainMenuOpen, setIsMainMenuOpen] = useState(true); const [isItemSharingOpen, setIsItemSharingOpen] = useState(true); @@ -80,6 +82,9 @@ export const LayoutContextProvider = ({ new URLSearchParams(window.location.search).get('chat') === ChatStatus.Open; const [isChatboxMenuOpen, setIsChatboxMenuOpen] = useState(chatIsOpen); + useEffect(() => { + setIsMainMenuOpen(!isMobile); + }, [isMobile]); const value: LayoutContextInterface = useMemo( () => ({ mode, diff --git a/src/components/item/header/ItemHeader.tsx b/src/components/item/header/ItemHeader.tsx index a21085ae3..164f327d6 100644 --- a/src/components/item/header/ItemHeader.tsx +++ b/src/components/item/header/ItemHeader.tsx @@ -31,9 +31,10 @@ const ItemHeader = ({ showNavigation = true }: Props): JSX.Element => { return ( {/* display empty div to render actions on the right */} diff --git a/src/components/item/header/ItemHeaderActions.tsx b/src/components/item/header/ItemHeaderActions.tsx index d7ab9b119..e876d7816 100644 --- a/src/components/item/header/ItemHeaderActions.tsx +++ b/src/components/item/header/ItemHeaderActions.tsx @@ -1,7 +1,10 @@ -import { Stack } from '@mui/material'; +import { useState } from 'react'; + +import SettingsIcon from '@mui/icons-material/Settings'; +import { Box, SpeedDial, Stack, styled } from '@mui/material'; import { DiscriminatedItem, ItemType, PermissionLevel } from '@graasp/sdk'; -import { ChatboxButton } from '@graasp/ui'; +import { ChatboxButton, useMobileView } from '@graasp/ui'; import EditButton from '@/components/common/EditButton'; import DownloadButton from '@/components/main/DownloadButton'; @@ -31,8 +34,33 @@ type Props = { item?: DiscriminatedItem; }; +const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({ + position: 'absolute', + top: theme.spacing(-2.5), + left: theme.spacing(-2.5), + zIndex: 99, + '& button': { + width: theme.spacing(4.5), + height: theme.spacing(4.5), + color: 'gray', + background: 'white', + marginBottom: theme.spacing(1), + boxShadow: 'none', + }, + '#itemactions-actions button': { + boxShadow: theme.shadows[2], + }, + '& button:hover': { + color: 'white', + }, +})); const ItemHeaderActions = ({ item }: Props): JSX.Element => { const { t: translateBuilder } = useBuilderTranslation(); + + const [open, setOpen] = useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + const { editingItemId, openedActionTabId, @@ -42,7 +70,7 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => { } = useLayoutContext(); const { data: member } = useCurrentUserContext(); - + const { isMobile } = useMobileView(); const { data: memberships } = useItemMemberships(item?.id); const canEdit = isItemUpdateAllowedForUser({ memberships, @@ -84,18 +112,43 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => { {canAdmin && } ); - + const isMobileInfoBtns = isMobile && ( + <> + {item?.type === ItemType.FOLDER && } + {item?.id && } + + ); return ( <> {openedActionTabId !== ItemActionTabs.Settings && activeActions} {canEdit && } + {isMobileInfoBtns} ); } return null; }; + if (isMobile) { + // eslint-disable-next-line no-nested-ternary + return item ? ( + + } + onClose={handleClose} + onOpen={handleOpen} + open={open} + direction="down" + > + {open && renderItemActions()} + + + ) : ( + + ); + } return ( {renderItemActions()} diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx index e91a95f62..44ba956df 100644 --- a/src/components/layout/Navigation.tsx +++ b/src/components/layout/Navigation.tsx @@ -4,6 +4,7 @@ import { HomeMenu, ItemMenu, Navigation, + useMobileView, useShortenURLParams, } from '@graasp/ui'; @@ -38,7 +39,7 @@ const Navigator = (): JSX.Element | null => { const { data: currentMember } = useCurrentMember(); const { data: item, isLoading: isItemLoading } = useItem(itemId); const itemPath = item?.path; - + const { isMobile } = useMobileView(); const { data: parents, isLoading: areParentsLoading } = useParents({ id: itemId, path: itemPath, @@ -114,13 +115,14 @@ const Navigator = (): JSX.Element | null => { return ( ); }; diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx index 9bc9e4d73..d2bedc50b 100644 --- a/src/components/main/Main.tsx +++ b/src/components/main/Main.tsx @@ -10,6 +10,7 @@ import { Platform, PlatformSwitch, defaultHostsMapper, + useMobileView, usePlatformNavigation, useShortenURLParams, } from '@graasp/ui'; @@ -46,7 +47,7 @@ export const platformsHostsMap = defaultHostsMapper({ const Main = ({ children }: Props): JSX.Element => { const { isMainMenuOpen, setIsMainMenuOpen } = useLayoutContext(); - + const { isMobile } = useMobileView(); const itemId = useShortenURLParams(ITEM_ID_PARAMS); const getNavigationEvents = usePlatformNavigation(platformsHostsMap, itemId); @@ -73,9 +74,11 @@ const Main = ({ children }: Props): JSX.Element => { - - {APP_NAME} - + {!isMobile && ( + + {APP_NAME} + + )} Date: Thu, 4 Jan 2024 10:04:45 +0100 Subject: [PATCH 02/11] build: package update --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index e068b99fe..9083892a8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1214,7 +1214,7 @@ __metadata: "@graasp/ui@https://github.com/graasp/graasp-ui.git#responsive-enhancements": version: 4.2.0 - resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=3bb36a6198bdf9cd244d15d8ab3ba07a74fc8d38" + resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=bb9bb456a212dbdad3555a092885445d67daace4" dependencies: "@graasp/sdk": "npm:3.3.0" http-status-codes: "npm:2.3.0" @@ -1249,7 +1249,7 @@ __metadata: optional: true ag-grid-react: optional: true - checksum: ba32602f3cd72b8fb5aea6b713e3645f8b7aab0e8ebc6144d512ffb181383846b9309f2cd93688001c2aa629e513d1ed3bfa75c8de91607aa2775c8fb05c7ca2 + checksum: 43cbf1960ca3851295b8d3ccac71bb3dac05ed1aca56d15283689f154de873bd9c1735ebc7d3a0ea766781657f471a1c539e965404e43561f91dec8002343daf languageName: node linkType: hard From ce1925dfa279b80e7c097a97fd2780bbd7d2c5d0 Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Mon, 8 Jan 2024 16:55:50 +0100 Subject: [PATCH 03/11] feat: use swipeable drawer for item actions --- src/components/context/LayoutContext.tsx | 7 +- .../item/header/ItemHeaderActions.tsx | 190 +++++++++++++----- src/components/layout/Navigation.tsx | 8 +- src/components/main/ItemMenu.tsx | 30 +++ src/components/main/Main.tsx | 13 +- yarn.lock | 4 +- 6 files changed, 188 insertions(+), 64 deletions(-) diff --git a/src/components/context/LayoutContext.tsx b/src/components/context/LayoutContext.tsx index 9cb35edbe..c689b4e39 100644 --- a/src/components/context/LayoutContext.tsx +++ b/src/components/context/LayoutContext.tsx @@ -1,7 +1,8 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react'; +import { useMediaQuery, useTheme } from '@mui/material'; + import { ChatStatus } from '@graasp/sdk'; -import { useMobileView } from '@graasp/ui'; import { DEFAULT_ITEM_LAYOUT_MODE } from '../../config/constants'; import { ITEM_LAYOUT_MODES } from '../../enums'; @@ -72,7 +73,9 @@ export const LayoutContextProvider = ({ null, ); - const { isMobile } = useMobileView(); + const theme = useTheme(); + + const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const [isMainMenuOpen, setIsMainMenuOpen] = useState(true); const [isItemSharingOpen, setIsItemSharingOpen] = useState(true); diff --git a/src/components/item/header/ItemHeaderActions.tsx b/src/components/item/header/ItemHeaderActions.tsx index e876d7816..2ecba516b 100644 --- a/src/components/item/header/ItemHeaderActions.tsx +++ b/src/components/item/header/ItemHeaderActions.tsx @@ -1,10 +1,18 @@ import { useState } from 'react'; import SettingsIcon from '@mui/icons-material/Settings'; -import { Box, SpeedDial, Stack, styled } from '@mui/material'; +import { + Box, + IconButton, + Stack, + SwipeableDrawer, + styled, + useMediaQuery, + useTheme, +} from '@mui/material'; import { DiscriminatedItem, ItemType, PermissionLevel } from '@graasp/sdk'; -import { ChatboxButton, useMobileView } from '@graasp/ui'; +import { ChatboxButton } from '@graasp/ui'; import EditButton from '@/components/common/EditButton'; import DownloadButton from '@/components/main/DownloadButton'; @@ -34,33 +42,45 @@ type Props = { item?: DiscriminatedItem; }; -const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({ - position: 'absolute', - top: theme.spacing(-2.5), - left: theme.spacing(-2.5), - zIndex: 99, - '& button': { - width: theme.spacing(4.5), - height: theme.spacing(4.5), - color: 'gray', - background: 'white', - marginBottom: theme.spacing(1), - boxShadow: 'none', +// a way to expand button to include the text +const StyledBox = styled(Box)(() => ({ + '& span': { + maxWidth: '20px', }, - '#itemactions-actions button': { - boxShadow: theme.shadows[2], - }, - '& button:hover': { - color: 'white', + '& button': { + paddingRight: '100px', }, })); + +type ButtonWithTextProps = { + children: JSX.Element; + isMobile: boolean; + text: string; + onClick: () => void; +}; + +const ButtonWithText = ({ + children, + isMobile, + text, + onClick, +}: ButtonWithTextProps): JSX.Element => + isMobile ? ( + + {children} {text} + + ) : ( + children + ); const ItemHeaderActions = ({ item }: Props): JSX.Element => { const { t: translateBuilder } = useBuilderTranslation(); - const [open, setOpen] = useState(false); - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - const { editingItemId, openedActionTabId, @@ -70,7 +90,10 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => { } = useLayoutContext(); const { data: member } = useCurrentUserContext(); - const { isMobile } = useMobileView(); + const [isItemActionsDrawerOpen, setIsItemActionsDrawerOpen] = useState(false); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + const { data: memberships } = useItemMemberships(item?.id); const canEdit = isItemUpdateAllowedForUser({ memberships, @@ -88,6 +111,10 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => { setIsItemMetadataMenuOpen(false); }; + const toggleActionsDrawer = () => { + setIsItemActionsDrawerOpen(!isItemActionsDrawerOpen); + }; + const closeDrawer = () => setIsItemActionsDrawerOpen(false); const renderItemActions = () => { // if id is defined, we are looking at an item if (item && item?.id) { @@ -99,31 +126,76 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => { const activeActions = ( <> - {showEditButton && } + {showEditButton && ( + + + + )} {/* prevent moving from top header to avoid confusion */} - - - - - {canAdmin && } - - ); - const isMobileInfoBtns = isMobile && ( - <> - {item?.type === ItemType.FOLDER && } - {item?.id && } + + + + + + + + + + + + + {canAdmin && ( + + + + )} ); + return ( <> {openedActionTabId !== ItemActionTabs.Settings && activeActions} - {canEdit && } - - {isMobileInfoBtns} + + + + {canEdit && ( + + + + )} ); } @@ -131,20 +203,28 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => { }; if (isMobile) { - // eslint-disable-next-line no-nested-ternary return item ? ( - - } - onClose={handleClose} - onOpen={handleOpen} - open={open} - direction="down" + <> + + + + + + + + + setIsItemActionsDrawerOpen(true)} + PaperProps={{ sx: { maxHeight: '50vh', paddingY: 2 } }} > - {open && renderItemActions()} - - + + {renderItemActions()} + + + ) : ( ); diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx index 44ba956df..81922e0dc 100644 --- a/src/components/layout/Navigation.tsx +++ b/src/components/layout/Navigation.tsx @@ -1,10 +1,11 @@ import { useLocation } from 'react-router-dom'; +import { useMediaQuery, useTheme } from '@mui/material'; + import { HomeMenu, ItemMenu, Navigation, - useMobileView, useShortenURLParams, } from '@graasp/ui'; @@ -39,7 +40,10 @@ const Navigator = (): JSX.Element | null => { const { data: currentMember } = useCurrentMember(); const { data: item, isLoading: isItemLoading } = useItem(itemId); const itemPath = item?.path; - const { isMobile } = useMobileView(); + + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + const { data: parents, isLoading: areParentsLoading } = useParents({ id: itemId, path: itemPath, diff --git a/src/components/main/ItemMenu.tsx b/src/components/main/ItemMenu.tsx index 1d1ef9b0f..379e0a07a 100644 --- a/src/components/main/ItemMenu.tsx +++ b/src/components/main/ItemMenu.tsx @@ -35,12 +35,14 @@ type Props = { item: DiscriminatedItem; canEdit?: boolean; canMove?: boolean; + displayMenu?: boolean; }; const ItemMenu = ({ item, canEdit = false, canMove = true, + displayMenu = true, }: Props): JSX.Element => { const { data: member } = useCurrentUserContext(); const [anchorEl, setAnchorEl] = useState(null); @@ -119,6 +121,34 @@ const ItemMenu = ({ ]; }; + if (!displayMenu) { + return ( + <> + {renderAuthenticatedActions()} + {renderEditorActions()} + + + + + {translateBuilder(BUILDER.ITEM_MENU_CREATE_SHORTCUT_MENU_ITEM)} + + + + + + {translateBuilder(BUILDER.ITEM_MENU_FLAG_MENU_ITEM)} + + + ); + } return ( <> { const { isMainMenuOpen, setIsMainMenuOpen } = useLayoutContext(); - const { isMobile } = useMobileView(); const itemId = useShortenURLParams(ITEM_ID_PARAMS); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + const getNavigationEvents = usePlatformNavigation(platformsHostsMap, itemId); const platformProps = { [Platform.Builder]: { diff --git a/yarn.lock b/yarn.lock index 9083892a8..4859d9cb7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1214,7 +1214,7 @@ __metadata: "@graasp/ui@https://github.com/graasp/graasp-ui.git#responsive-enhancements": version: 4.2.0 - resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=bb9bb456a212dbdad3555a092885445d67daace4" + resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=232f9872abbc0242fbcdb0915cb5d3e2eacec05f" dependencies: "@graasp/sdk": "npm:3.3.0" http-status-codes: "npm:2.3.0" @@ -1249,7 +1249,7 @@ __metadata: optional: true ag-grid-react: optional: true - checksum: 43cbf1960ca3851295b8d3ccac71bb3dac05ed1aca56d15283689f154de873bd9c1735ebc7d3a0ea766781657f471a1c539e965404e43561f91dec8002343daf + checksum: dc7a357c827e3d97b1916ccb3f45506858e0c7616e7945e25575e7e994eed18b91d5196e00da2c68ec7798486e710a5e46695a6fb1e78c1542bf4c991e590e4c languageName: node linkType: hard From 83123d5bd1229d53ce3d55beb1e255f698f5ac4f Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Thu, 18 Jan 2024 16:25:45 +0100 Subject: [PATCH 04/11] feat(ui): style item actions drawer order of aactions and have a divider in between groups --- .../item/header/ItemHeaderActions.tsx | 104 +++++++------ src/components/main/ItemMenu.tsx | 44 +----- src/components/main/MobileItemMenu.tsx | 139 ++++++++++++++++++ 3 files changed, 208 insertions(+), 79 deletions(-) create mode 100644 src/components/main/MobileItemMenu.tsx diff --git a/src/components/item/header/ItemHeaderActions.tsx b/src/components/item/header/ItemHeaderActions.tsx index 2ecba516b..ff60e0c14 100644 --- a/src/components/item/header/ItemHeaderActions.tsx +++ b/src/components/item/header/ItemHeaderActions.tsx @@ -1,11 +1,13 @@ import { useState } from 'react'; -import SettingsIcon from '@mui/icons-material/Settings'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; import { Box, + Divider, IconButton, Stack, SwipeableDrawer, + Typography, styled, useMediaQuery, useTheme, @@ -33,6 +35,7 @@ import ShareButton from '../../common/ShareButton'; import { useCurrentUserContext } from '../../context/CurrentUserContext'; import { useLayoutContext } from '../../context/LayoutContext'; import ItemMenu from '../../main/ItemMenu'; +import MobileItemMenu from '../../main/MobileItemMenu'; import ItemSettingsButton from '../settings/ItemSettingsButton'; import ModeButton from './ModeButton'; @@ -59,7 +62,7 @@ type ButtonWithTextProps = { onClick: () => void; }; -const ButtonWithText = ({ +const IconButtonWithText = ({ children, isMobile, text, @@ -68,7 +71,7 @@ const ButtonWithText = ({ isMobile ? ( { ITEM_TYPES_WITH_CAPTIONS.includes(item.type) && canEdit; + const shareActions = ( + <> + + + + {canAdmin && ( + + + + )} + + ); const activeActions = ( <> {showEditButton && ( - - + )} - {/* prevent moving from top header to avoid confusion */} - - - - + {isMobile ? ( + - - - - - - + > + {shareActions} + + ) : ( + + )} + + + {!isMobile && shareActions} + {isMobile && } + {!isMobile && ( - - {canAdmin && ( - - - )} ); @@ -180,21 +187,21 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => { return ( <> {openedActionTabId !== ItemActionTabs.Settings && activeActions} - - + {canEdit && ( - - + )} ); @@ -208,8 +215,13 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => { + - + @@ -218,9 +230,17 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => { open={isItemActionsDrawerOpen} onClose={closeDrawer} onOpen={() => setIsItemActionsDrawerOpen(true)} - PaperProps={{ sx: { maxHeight: '50vh', paddingY: 2 } }} + PaperProps={{ sx: { maxHeight: '80vh', paddingY: 2 } }} > - + + {item.name} + + + {renderItemActions()} diff --git a/src/components/main/ItemMenu.tsx b/src/components/main/ItemMenu.tsx index cac1e396f..3c79ef699 100644 --- a/src/components/main/ItemMenu.tsx +++ b/src/components/main/ItemMenu.tsx @@ -35,14 +35,12 @@ type Props = { item: DiscriminatedItem; canEdit?: boolean; canMove?: boolean; - displayMenu?: boolean; }; const ItemMenu = ({ item, canEdit = false, canMove = true, - displayMenu = true, }: Props): JSX.Element => { const { data: member } = useCurrentUserContext(); const [anchorEl, setAnchorEl] = useState(null); @@ -86,12 +84,12 @@ const ItemMenu = ({ : []; return result.concat([ , - , , + , , , + , ]; }; - if (!displayMenu) { - return ( - <> - {renderAuthenticatedActions()} - {renderEditorActions()} - - - - - {translateBuilder(BUILDER.ITEM_MENU_CREATE_SHORTCUT_MENU_ITEM)} - - - - - - {translateBuilder(BUILDER.ITEM_MENU_FLAG_MENU_ITEM)} - - - ); - } return ( <> { + const { data: member } = useCurrentUserContext(); + const { t: translateBuilder } = useBuilderTranslation(); + const { openModal: openCreateShortcutModal } = useContext( + CreateShortcutModalContext, + ); + const { openModal: openFlagModal } = useContext(FlagItemModalContext); + + const handleCreateShortcut = () => { + openCreateShortcutModal(item); + }; + + const handleFlag = () => { + openFlagModal?.(item.id); + }; + + const renderEditorActions = () => { + if (!canEdit) { + return null; + } + const result = canMove + ? [ + , + ] + : []; + return result.concat([ + , + , + , + ]); + }; + + const renderAuthenticatedActions = () => { + if (!member || !member.id) { + return null; + } + return [ + , + , + ]; + }; + + return ( + <> + {renderAuthenticatedActions()} + + {children} + + + + + + {translateBuilder(BUILDER.ITEM_MENU_CREATE_SHORTCUT_MENU_ITEM)} + + {renderEditorActions()} + + {canEdit && ( + + )} + + + + + {translateBuilder(BUILDER.ITEM_MENU_FLAG_MENU_ITEM)} + + + ); +}; + +export default MobileItemMenu; From 5aa9ff5be18ced17efb0a0fa4298a191692b4b20 Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Tue, 23 Jan 2024 14:21:37 +0100 Subject: [PATCH 05/11] style: some style enhancements --- package.json | 2 +- src/components/common/IconButtonWithText.tsx | 36 ++++ src/components/context/LayoutContext.tsx | 7 +- src/components/item/header/ItemHeader.tsx | 11 +- .../item/header/ItemHeaderActions.tsx | 174 ++---------------- .../item/header/MobileItemHeaderActions.tsx | 174 ++++++++++++++++++ src/components/layout/Navigation.tsx | 6 +- src/components/main/Main.tsx | 12 +- src/components/main/MobileItemMenu.tsx | 58 ++++-- yarn.lock | 22 +-- 10 files changed, 297 insertions(+), 205 deletions(-) create mode 100644 src/components/common/IconButtonWithText.tsx create mode 100644 src/components/item/header/MobileItemHeaderActions.tsx diff --git a/package.json b/package.json index acdb97b75..6795a8dea 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@graasp/query-client": "2.2.1", "@graasp/sdk": "3.3.0", "@graasp/translations": "1.21.1", - "@graasp/ui": "4.3.0", + "@graasp/ui": "https://github.com/graasp/graasp-ui.git#create-ismobile-hook", "@mui/icons-material": "5.14.19", "@mui/lab": "5.0.0-alpha.151", "@mui/material": "5.14.19", diff --git a/src/components/common/IconButtonWithText.tsx b/src/components/common/IconButtonWithText.tsx new file mode 100644 index 000000000..738ca68f2 --- /dev/null +++ b/src/components/common/IconButtonWithText.tsx @@ -0,0 +1,36 @@ +import { Box, styled } from '@mui/material'; + +// a way to expand button to include the text +const StyledBox = styled(Box)(({ theme }) => ({ + '& span': { + maxWidth: theme.spacing(2), + }, + '& button': { + paddingRight: theme.spacing(12), + }, +})); + +type ButtonWithTextProps = { + children: JSX.Element; + text: string; + onClick: () => void; +}; + +const IconButtonWithText = ({ + children, + text, + onClick, +}: ButtonWithTextProps): JSX.Element => ( + + {children} {text} + +); + +export default IconButtonWithText; diff --git a/src/components/context/LayoutContext.tsx b/src/components/context/LayoutContext.tsx index c689b4e39..9cb35edbe 100644 --- a/src/components/context/LayoutContext.tsx +++ b/src/components/context/LayoutContext.tsx @@ -1,8 +1,7 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react'; -import { useMediaQuery, useTheme } from '@mui/material'; - import { ChatStatus } from '@graasp/sdk'; +import { useMobileView } from '@graasp/ui'; import { DEFAULT_ITEM_LAYOUT_MODE } from '../../config/constants'; import { ITEM_LAYOUT_MODES } from '../../enums'; @@ -73,9 +72,7 @@ export const LayoutContextProvider = ({ null, ); - const theme = useTheme(); - - const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + const { isMobile } = useMobileView(); const [isMainMenuOpen, setIsMainMenuOpen] = useState(true); const [isItemSharingOpen, setIsItemSharingOpen] = useState(true); diff --git a/src/components/item/header/ItemHeader.tsx b/src/components/item/header/ItemHeader.tsx index 164f327d6..e2a131bc2 100644 --- a/src/components/item/header/ItemHeader.tsx +++ b/src/components/item/header/ItemHeader.tsx @@ -1,6 +1,6 @@ import Stack from '@mui/material/Stack'; -import { Loader, useShortenURLParams } from '@graasp/ui'; +import { Loader, useMobileView, useShortenURLParams } from '@graasp/ui'; import { ITEM_ID_PARAMS } from '@/config/paths'; @@ -9,6 +9,7 @@ import { ITEM_HEADER_ID } from '../../../config/selectors'; import ErrorAlert from '../../common/ErrorAlert'; import Navigation from '../../layout/Navigation'; import ItemHeaderActions from './ItemHeaderActions'; +import MobileItemHeaderActions from './MobileItemHeaderActions'; const { useItem } = hooks; @@ -20,6 +21,8 @@ const ItemHeader = ({ showNavigation = true }: Props): JSX.Element => { const itemId = useShortenURLParams(ITEM_ID_PARAMS); const { data: item, isLoading: isItemLoading, isError } = useItem(itemId); + const { isMobile } = useMobileView(); + if (isItemLoading) { return ; } @@ -39,7 +42,11 @@ const ItemHeader = ({ showNavigation = true }: Props): JSX.Element => { > {/* display empty div to render actions on the right */} {showNavigation ? :
} - + {isMobile ? ( + + ) : ( + + )} ); }; diff --git a/src/components/item/header/ItemHeaderActions.tsx b/src/components/item/header/ItemHeaderActions.tsx index ff60e0c14..9f234739d 100644 --- a/src/components/item/header/ItemHeaderActions.tsx +++ b/src/components/item/header/ItemHeaderActions.tsx @@ -1,17 +1,4 @@ -import { useState } from 'react'; - -import MoreVertIcon from '@mui/icons-material/MoreVert'; -import { - Box, - Divider, - IconButton, - Stack, - SwipeableDrawer, - Typography, - styled, - useMediaQuery, - useTheme, -} from '@mui/material'; +import { Box, Stack } from '@mui/material'; import { DiscriminatedItem, ItemType, PermissionLevel } from '@graasp/sdk'; import { ChatboxButton } from '@graasp/ui'; @@ -35,7 +22,6 @@ import ShareButton from '../../common/ShareButton'; import { useCurrentUserContext } from '../../context/CurrentUserContext'; import { useLayoutContext } from '../../context/LayoutContext'; import ItemMenu from '../../main/ItemMenu'; -import MobileItemMenu from '../../main/MobileItemMenu'; import ItemSettingsButton from '../settings/ItemSettingsButton'; import ModeButton from './ModeButton'; @@ -45,42 +31,6 @@ type Props = { item?: DiscriminatedItem; }; -// a way to expand button to include the text -const StyledBox = styled(Box)(() => ({ - '& span': { - maxWidth: '20px', - }, - '& button': { - paddingRight: '100px', - }, -})); - -type ButtonWithTextProps = { - children: JSX.Element; - isMobile: boolean; - text: string; - onClick: () => void; -}; - -const IconButtonWithText = ({ - children, - isMobile, - text, - onClick, -}: ButtonWithTextProps): JSX.Element => - isMobile ? ( - - {children} {text} - - ) : ( - children - ); const ItemHeaderActions = ({ item }: Props): JSX.Element => { const { t: translateBuilder } = useBuilderTranslation(); @@ -93,9 +43,6 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => { } = useLayoutContext(); const { data: member } = useCurrentUserContext(); - const [isItemActionsDrawerOpen, setIsItemActionsDrawerOpen] = useState(false); - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const { data: memberships } = useItemMemberships(item?.id); const canEdit = isItemUpdateAllowedForUser({ @@ -114,10 +61,6 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => { setIsItemMetadataMenuOpen(false); }; - const toggleActionsDrawer = () => { - setIsItemActionsDrawerOpen(!isItemActionsDrawerOpen); - }; - const closeDrawer = () => setIsItemActionsDrawerOpen(false); const renderItemActions = () => { // if id is defined, we are looking at an item if (item && item?.id) { @@ -129,126 +72,39 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => { const shareActions = ( <> - - - - {canAdmin && ( - - - - )} + + {canAdmin && } ); const activeActions = ( <> - {showEditButton && ( - - - - )} + {showEditButton && } - {isMobile ? ( - - {shareActions} - - ) : ( - - )} + - {!isMobile && shareActions} - {isMobile && } - {!isMobile && ( - - )} + {shareActions} + + ); return ( <> {openedActionTabId !== ItemActionTabs.Settings && activeActions} - - - - {canEdit && ( - - - - )} + + + {canEdit && } ); } return null; }; - if (isMobile) { - return item ? ( - <> - - - - - - - - - - setIsItemActionsDrawerOpen(true)} - PaperProps={{ sx: { maxHeight: '80vh', paddingY: 2 } }} - > - - {item.name} - - - - {renderItemActions()} - - - - ) : ( - - ); - } return ( {renderItemActions()} diff --git a/src/components/item/header/MobileItemHeaderActions.tsx b/src/components/item/header/MobileItemHeaderActions.tsx new file mode 100644 index 000000000..1a79d793c --- /dev/null +++ b/src/components/item/header/MobileItemHeaderActions.tsx @@ -0,0 +1,174 @@ +import { useState } from 'react'; + +import MoreVertIcon from '@mui/icons-material/MoreVert'; +import { + Box, + Divider, + IconButton, + SwipeableDrawer, + Typography, + useTheme, +} from '@mui/material'; + +import { DiscriminatedItem, PermissionLevel } from '@graasp/sdk'; +import { ChatboxButton } from '@graasp/ui'; + +import EditButton from '@/components/common/EditButton'; +import IconButtonWithText from '@/components/common/IconButtonWithText'; +import DownloadButton from '@/components/main/DownloadButton'; + +import { ITEM_TYPES_WITH_CAPTIONS } from '../../../config/constants'; +import { useBuilderTranslation } from '../../../config/i18n'; +import { hooks } from '../../../config/queryClient'; +import { ITEM_CHATBOX_BUTTON_ID } from '../../../config/selectors'; +import { ItemActionTabs } from '../../../enums'; +import { BUILDER } from '../../../langs/constants'; +import { + getHighestPermissionForMemberFromMemberships, + isItemUpdateAllowedForUser, +} from '../../../utils/membership'; +import ItemMetadataButton from '../../common/ItemMetadataButton'; +import { useCurrentUserContext } from '../../context/CurrentUserContext'; +import { useLayoutContext } from '../../context/LayoutContext'; +import MobileItemMenu from '../../main/MobileItemMenu'; +import ItemSettingsButton from '../settings/ItemSettingsButton'; +import ModeButton from './ModeButton'; + +const { useItemMemberships } = hooks; + +type Props = { + item?: DiscriminatedItem; +}; + +export const MobileItemHeaderActions = ({ item }: Props): JSX.Element => { + const { t: translateBuilder } = useBuilderTranslation(); + + const { + editingItemId, + openedActionTabId, + isChatboxMenuOpen, + setIsChatboxMenuOpen, + setIsItemMetadataMenuOpen, + } = useLayoutContext(); + + const { data: member } = useCurrentUserContext(); + const [isItemActionsDrawerOpen, setIsItemActionsDrawerOpen] = useState(false); + const theme = useTheme(); + + const { data: memberships } = useItemMemberships(item?.id); + const canEdit = isItemUpdateAllowedForUser({ + memberships, + memberId: member?.id, + }); + const canAdmin = member?.id + ? getHighestPermissionForMemberFromMemberships({ + memberships, + memberId: member?.id, + })?.permission === PermissionLevel.Admin + : false; + + const onClickChatbox = () => { + setIsChatboxMenuOpen(!isChatboxMenuOpen); + setIsItemMetadataMenuOpen(false); + }; + + const toggleActionsDrawer = () => { + setIsItemActionsDrawerOpen(!isItemActionsDrawerOpen); + }; + const closeDrawer = () => setIsItemActionsDrawerOpen(false); + const renderItemActions = () => { + // if id is defined, we are looking at an item + if (item && item?.id) { + // show edition only for allowed types + const showEditButton = + !editingItemId && + ITEM_TYPES_WITH_CAPTIONS.includes(item.type) && + canEdit; + + const activeActions = ( + <> + {showEditButton && ( + + + + )} + + + + + + + ); + + return ( + <> + {openedActionTabId !== ItemActionTabs.Settings && activeActions} + + + + {canEdit && ( + + + + )} + + ); + } + return null; + }; + + return item ? ( + <> + + + + + + + + + + setIsItemActionsDrawerOpen(true)} + PaperProps={{ sx: { maxHeight: '80vh', paddingY: 2 } }} + > + + {item.name} + + + + {renderItemActions()} + + + + ) : ( + + ); +}; + +export default MobileItemHeaderActions; diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx index 81922e0dc..956b10921 100644 --- a/src/components/layout/Navigation.tsx +++ b/src/components/layout/Navigation.tsx @@ -1,11 +1,10 @@ import { useLocation } from 'react-router-dom'; -import { useMediaQuery, useTheme } from '@mui/material'; - import { HomeMenu, ItemMenu, Navigation, + useMobileView, useShortenURLParams, } from '@graasp/ui'; @@ -41,8 +40,7 @@ const Navigator = (): JSX.Element | null => { const { data: item, isLoading: isItemLoading } = useItem(itemId); const itemPath = item?.path; - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + const { isMobile } = useMobileView(); const { data: parents, isLoading: areParentsLoading } = useParents({ id: itemId, diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx index 8046c6100..4770faee8 100644 --- a/src/components/main/Main.tsx +++ b/src/components/main/Main.tsx @@ -1,12 +1,6 @@ import { Link } from 'react-router-dom'; -import { - Grid, - Typography, - styled, - useMediaQuery, - useTheme, -} from '@mui/material'; +import { Grid, Typography, styled } from '@mui/material'; import Box from '@mui/material/Box'; import { Context } from '@graasp/sdk'; @@ -16,6 +10,7 @@ import { Platform, PlatformSwitch, defaultHostsMapper, + useMobileView, usePlatformNavigation, useShortenURLParams, } from '@graasp/ui'; @@ -54,8 +49,7 @@ const Main = ({ children }: Props): JSX.Element => { const { isMainMenuOpen, setIsMainMenuOpen } = useLayoutContext(); const itemId = useShortenURLParams(ITEM_ID_PARAMS); - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + const { isMobile } = useMobileView(); const getNavigationEvents = usePlatformNavigation(platformsHostsMap, itemId); const platformProps = { diff --git a/src/components/main/MobileItemMenu.tsx b/src/components/main/MobileItemMenu.tsx index 6e0b97bb9..11a121fbd 100644 --- a/src/components/main/MobileItemMenu.tsx +++ b/src/components/main/MobileItemMenu.tsx @@ -18,9 +18,12 @@ import { BUILDER } from '../../langs/constants'; import CollapseButton from '../common/CollapseButton'; import FavoriteButton from '../common/FavoriteButton'; import HideButton from '../common/HideButton'; +import IconButtonWithText from '../common/IconButtonWithText'; import MoveButton from '../common/MoveButton'; import PinButton from '../common/PinButton'; +import PublishButton from '../common/PublishButton'; import RecycleButton from '../common/RecycleButton'; +import ShareButton from '../common/ShareButton'; import { CreateShortcutModalContext } from '../context/CreateShortcutModalContext'; import { useCurrentUserContext } from '../context/CurrentUserContext'; import { FlagItemModalContext } from '../context/FlagItemModalContext'; @@ -30,14 +33,16 @@ type Props = { item: DiscriminatedItem; canEdit?: boolean; canMove?: boolean; - children: JSX.Element; + closeDrawer: () => void; + canAdmin: boolean; }; const MobileItemMenu = ({ item, canEdit = false, - canMove = true, - children, + canMove = false, + closeDrawer, + canAdmin, }: Props): JSX.Element => { const { data: member } = useCurrentUserContext(); const { t: translateBuilder } = useBuilderTranslation(); @@ -48,10 +53,12 @@ const MobileItemMenu = ({ const handleCreateShortcut = () => { openCreateShortcutModal(item); + closeDrawer(); }; const handleFlag = () => { openFlagModal?.(item.id); + closeDrawer(); }; const renderEditorActions = () => { @@ -68,13 +75,24 @@ const MobileItemMenu = ({ ] : []; return result.concat([ - , + , , + , - , ]); }; @@ -87,26 +105,44 @@ const MobileItemMenu = ({ key="copy" type={ActionButton.MENU_ITEM} itemIds={[item.id]} + onClick={closeDrawer} />, , ]; }; - + const shareActions = ( + <> + + + + {canAdmin && ( + + + + )} + + ); return ( <> {renderAuthenticatedActions()} - {children} + {shareActions} @@ -122,11 +158,7 @@ const MobileItemMenu = ({ itemIds={[item.id]} /> )} - + diff --git a/yarn.lock b/yarn.lock index e9a54c0e6..202f3b664 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1220,16 +1220,15 @@ __metadata: languageName: node linkType: hard -"@graasp/sdk@npm:3.4.0": - version: 3.4.0 - resolution: "@graasp/sdk@npm:3.4.0" +"@graasp/sdk@npm:3.4.1": + version: 3.4.1 + resolution: "@graasp/sdk@npm:3.4.1" dependencies: - "@graasp/etherpad-api": "npm:2.1.1" date-fns: "npm:3.2.0" js-cookie: "npm:3.0.5" uuid: "npm:9.0.1" validator: "npm:13.11.0" - checksum: 00bd8d449e8c1bcb4750ddce9dc0eefc23d917d042d5d7db6c1007c7380904de3bc7e9bde43325736df69f3dc584d15717dac01769e06a9f71e1e1133075f7f7 + checksum: 6bf2d3fbb28d61a457a534628620982a656258ab2e5c101294da8e7e4327eacff526378983c4e06a85f0115e0547325f9dbece793f7f4bc6129aa8909a42a24b languageName: node linkType: hard @@ -1251,15 +1250,14 @@ __metadata: languageName: node linkType: hard -"@graasp/ui@npm:4.3.0": - version: 4.3.0 - resolution: "@graasp/ui@npm:4.3.0" +"@graasp/ui@https://github.com/graasp/graasp-ui.git#create-ismobile-hook": + version: 4.3.1 + resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=30a1baa3ebe3a504a2ac319abe907b9649f7e383" dependencies: - "@graasp/sdk": "npm:3.4.0" + "@graasp/sdk": "npm:3.4.1" http-status-codes: "npm:2.3.0" katex: "npm:0.16.9" lodash.truncate: "npm:4.4.2" - qs: "npm:6.11.2" quill-emoji: "npm:0.2.0" react-cookie-consent: "npm:9.0.0" react-quill: "npm:2.0.0-beta.4" @@ -1288,7 +1286,7 @@ __metadata: optional: true ag-grid-react: optional: true - checksum: 5538861e5d4d58e6105bb0e84d03238eecbc28bf5c2112557ed7ca5725a3025a4c09e06f4f050b9805595256c5227081696c12a90fc0e266fb8801d4c895d28d + checksum: 9797d0fe95216750d42889b1f3fd1afcab262cb6ff62457a9fba9b6dc7e5373b147a6cc3b42fefac3c479f883ea132dd4821acf2cfbd6038bb6ab1695d40ef2d languageName: node linkType: hard @@ -6311,7 +6309,7 @@ __metadata: "@graasp/query-client": "npm:2.2.1" "@graasp/sdk": "npm:3.3.0" "@graasp/translations": "npm:1.21.1" - "@graasp/ui": "npm:4.3.0" + "@graasp/ui": "https://github.com/graasp/graasp-ui.git#create-ismobile-hook" "@mui/icons-material": "npm:5.14.19" "@mui/lab": "npm:5.0.0-alpha.151" "@mui/material": "npm:5.14.19" From cb9b43b97ce377a3cd49b6789a1e989d7ce07708 Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Tue, 23 Jan 2024 14:32:49 +0100 Subject: [PATCH 06/11] build: update ui version --- package.json | 2 +- yarn.lock | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 6795a8dea..590d6e320 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@graasp/query-client": "2.2.1", "@graasp/sdk": "3.3.0", "@graasp/translations": "1.21.1", - "@graasp/ui": "https://github.com/graasp/graasp-ui.git#create-ismobile-hook", + "@graasp/ui": "https://github.com/graasp/graasp-ui.git#666-mobile-view-custom-hook", "@mui/icons-material": "5.14.19", "@mui/lab": "5.0.0-alpha.151", "@mui/material": "5.14.19", diff --git a/yarn.lock b/yarn.lock index 202f3b664..d569d50c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1250,9 +1250,9 @@ __metadata: languageName: node linkType: hard -"@graasp/ui@https://github.com/graasp/graasp-ui.git#create-ismobile-hook": +"@graasp/ui@https://github.com/graasp/graasp-ui.git#666-mobile-view-custom-hook": version: 4.3.1 - resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=30a1baa3ebe3a504a2ac319abe907b9649f7e383" + resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=09a3f878f1245f2029466191f5a83ed283a54a4a" dependencies: "@graasp/sdk": "npm:3.4.1" http-status-codes: "npm:2.3.0" @@ -6309,7 +6309,7 @@ __metadata: "@graasp/query-client": "npm:2.2.1" "@graasp/sdk": "npm:3.3.0" "@graasp/translations": "npm:1.21.1" - "@graasp/ui": "https://github.com/graasp/graasp-ui.git#create-ismobile-hook" + "@graasp/ui": "https://github.com/graasp/graasp-ui.git#666-mobile-view-custom-hook" "@mui/icons-material": "npm:5.14.19" "@mui/lab": "npm:5.0.0-alpha.151" "@mui/material": "npm:5.14.19" From f72667160ff0a2a1a6c3e10e41e9a49e0115e7c4 Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Thu, 25 Jan 2024 15:56:03 +0100 Subject: [PATCH 07/11] fix: use itemMenu type for mobile action buttons --- package.json | 2 +- src/components/common/EditButton.tsx | 11 +++- src/components/common/IconButtonWithText.tsx | 36 ---------- src/components/common/PublishButton.tsx | 64 +++++++++++++----- src/components/common/ShareButton.tsx | 15 ++++- .../item/header/MobileItemHeaderActions.tsx | 35 +++++----- .../item/settings/ItemSettingsButton.tsx | 65 ++++++++++++++----- src/components/main/DownloadButton.tsx | 13 +++- src/components/main/MobileItemMenu.tsx | 19 +++--- yarn.lock | 20 +++--- 10 files changed, 164 insertions(+), 116 deletions(-) delete mode 100644 src/components/common/IconButtonWithText.tsx diff --git a/package.json b/package.json index 590d6e320..48628945b 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@graasp/query-client": "2.2.1", "@graasp/sdk": "3.3.0", "@graasp/translations": "1.21.1", - "@graasp/ui": "https://github.com/graasp/graasp-ui.git#666-mobile-view-custom-hook", + "@graasp/ui": "https://github.com/graasp/graasp-ui.git#675-add-type-props-for-action-buttons", "@mui/icons-material": "5.14.19", "@mui/lab": "5.0.0-alpha.151", "@mui/material": "5.14.19", diff --git a/src/components/common/EditButton.tsx b/src/components/common/EditButton.tsx index 67022decd..4996771a9 100644 --- a/src/components/common/EditButton.tsx +++ b/src/components/common/EditButton.tsx @@ -3,7 +3,10 @@ import { useState } from 'react'; import { Dialog } from '@mui/material'; import { DiscriminatedItem, ItemType } from '@graasp/sdk'; -import { EditButton as GraaspEditButton } from '@graasp/ui'; +import { + ActionButtonVariant, + EditButton as GraaspEditButton, +} from '@graasp/ui'; import { useBuilderTranslation } from '../../config/i18n'; import { @@ -22,14 +25,17 @@ import NameForm from '../item/form/NameForm'; type Props = { item: DiscriminatedItem; + type?: ActionButtonVariant; + onClick?: () => void; }; -const EditButton = ({ item }: Props): JSX.Element => { +const EditButton = ({ item, type = 'icon', onClick }: Props): JSX.Element => { const { t: translateBuilder } = useBuilderTranslation(); const [open, setOpen] = useState(false); const handleEdit = () => { setOpen(true); + onClick?.(); }; const typeToFormComponent = (): EditModalContentType => { @@ -66,6 +72,7 @@ const EditButton = ({ item }: Props): JSX.Element => { ariaLabel={translateBuilder(BUILDER.EDIT_ITEM_BUTTON)} className={EDIT_ITEM_BUTTON_CLASS} onClick={handleEdit} + type={type} /> ); diff --git a/src/components/common/IconButtonWithText.tsx b/src/components/common/IconButtonWithText.tsx deleted file mode 100644 index 738ca68f2..000000000 --- a/src/components/common/IconButtonWithText.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { Box, styled } from '@mui/material'; - -// a way to expand button to include the text -const StyledBox = styled(Box)(({ theme }) => ({ - '& span': { - maxWidth: theme.spacing(2), - }, - '& button': { - paddingRight: theme.spacing(12), - }, -})); - -type ButtonWithTextProps = { - children: JSX.Element; - text: string; - onClick: () => void; -}; - -const IconButtonWithText = ({ - children, - text, - onClick, -}: ButtonWithTextProps): JSX.Element => ( - - {children} {text} - -); - -export default IconButtonWithText; diff --git a/src/components/common/PublishButton.tsx b/src/components/common/PublishButton.tsx index 0c459250a..928395b4e 100644 --- a/src/components/common/PublishButton.tsx +++ b/src/components/common/PublishButton.tsx @@ -1,8 +1,9 @@ import CloseIcon from '@mui/icons-material/Close'; +import { ListItemIcon, MenuItem } from '@mui/material'; import IconButton from '@mui/material/IconButton'; import Tooltip from '@mui/material/Tooltip'; -import { LibraryIcon } from '@graasp/ui'; +import { ActionButton, ActionButtonVariant, LibraryIcon } from '@graasp/ui'; import { useBuilderTranslation } from '../../config/i18n'; import { @@ -15,9 +16,15 @@ import { useLayoutContext } from '../context/LayoutContext'; type Props = { itemId: string; + type?: ActionButtonVariant; + onClick?: () => void; }; -const PublishButton = ({ itemId }: Props): JSX.Element => { +const PublishButton = ({ + itemId, + type = 'icon', + onClick: handleClose, +}: Props): JSX.Element => { const { t: translateBuilder } = useBuilderTranslation(); const { openedActionTabId, setOpenedActionTabId } = useLayoutContext(); @@ -27,28 +34,51 @@ const PublishButton = ({ itemId }: Props): JSX.Element => { ? null : ItemActionTabs.Library, ); + handleClose?.(); }; const title = translateBuilder(BUILDER.LIBRARY_SETTINGS_BUTTON_TITLE); - return ( - - - - {openedActionTabId === ItemActionTabs.Library ? ( - - ) : ( - - )} - - - - ); + + {openedActionTabId === ItemActionTabs.Library ? ( + + ) : ( + + )} + + {title} + + ); + case ActionButton.ICON_BUTTON: + default: + return ( + + + + {openedActionTabId === ItemActionTabs.Library ? ( + + ) : ( + + )} + + + + ); + } }; export default PublishButton; diff --git a/src/components/common/ShareButton.tsx b/src/components/common/ShareButton.tsx index 32213ab24..138302b2a 100644 --- a/src/components/common/ShareButton.tsx +++ b/src/components/common/ShareButton.tsx @@ -1,4 +1,7 @@ -import { ShareButton as GraaspShareButton } from '@graasp/ui'; +import { + ActionButtonVariant, + ShareButton as GraaspShareButton, +} from '@graasp/ui'; import { useBuilderTranslation } from '../../config/i18n'; import { @@ -11,9 +14,15 @@ import { useLayoutContext } from '../context/LayoutContext'; type Props = { itemId: string; + type?: ActionButtonVariant; + onClick?: () => void; }; -const ShareButton = ({ itemId }: Props): JSX.Element => { +const ShareButton = ({ + itemId, + type, + onClick: closeDrawer, +}: Props): JSX.Element => { const { t: translateBuilder } = useBuilderTranslation(); const { openedActionTabId, setOpenedActionTabId } = useLayoutContext(); @@ -23,6 +32,7 @@ const ShareButton = ({ itemId }: Props): JSX.Element => { ? null : ItemActionTabs.Sharing, ); + closeDrawer?.(); }; return ( @@ -33,6 +43,7 @@ const ShareButton = ({ itemId }: Props): JSX.Element => { onClick={onClick} open={openedActionTabId === ItemActionTabs.Sharing} id={buildShareButtonId(itemId)} + type={type} /> ); }; diff --git a/src/components/item/header/MobileItemHeaderActions.tsx b/src/components/item/header/MobileItemHeaderActions.tsx index 1a79d793c..4c704f7d5 100644 --- a/src/components/item/header/MobileItemHeaderActions.tsx +++ b/src/components/item/header/MobileItemHeaderActions.tsx @@ -11,10 +11,9 @@ import { } from '@mui/material'; import { DiscriminatedItem, PermissionLevel } from '@graasp/sdk'; -import { ChatboxButton } from '@graasp/ui'; +import { ActionButton, ChatboxButton } from '@graasp/ui'; import EditButton from '@/components/common/EditButton'; -import IconButtonWithText from '@/components/common/IconButtonWithText'; import DownloadButton from '@/components/main/DownloadButton'; import { ITEM_TYPES_WITH_CAPTIONS } from '../../../config/constants'; @@ -40,6 +39,8 @@ type Props = { item?: DiscriminatedItem; }; +// edit +// share export const MobileItemHeaderActions = ({ item }: Props): JSX.Element => { const { t: translateBuilder } = useBuilderTranslation(); @@ -88,12 +89,11 @@ export const MobileItemHeaderActions = ({ item }: Props): JSX.Element => { const activeActions = ( <> {showEditButton && ( - - - + type={ActionButton.MENU_ITEM} + /> )} { return ( <> {openedActionTabId !== ItemActionTabs.Settings && activeActions} - - - + /> {canEdit && ( - - - + /> )} ); diff --git a/src/components/item/settings/ItemSettingsButton.tsx b/src/components/item/settings/ItemSettingsButton.tsx index cf7ef300e..2752a706a 100644 --- a/src/components/item/settings/ItemSettingsButton.tsx +++ b/src/components/item/settings/ItemSettingsButton.tsx @@ -1,8 +1,11 @@ import CloseIcon from '@mui/icons-material/Close'; import SettingsIcon from '@mui/icons-material/Settings'; +import { ListItemIcon, MenuItem } from '@mui/material'; import IconButton from '@mui/material/IconButton'; import Tooltip from '@mui/material/Tooltip'; +import { ActionButton, ActionButtonVariant } from '@graasp/ui'; + import { useBuilderTranslation } from '../../../config/i18n'; import { ITEM_SETTINGS_BUTTON_CLASS, @@ -14,9 +17,17 @@ import { useLayoutContext } from '../../context/LayoutContext'; type Props = { id: string; + type?: ActionButtonVariant; + title?: string; + onClick?: () => void; }; -const ItemSettingsButton = ({ id }: Props): JSX.Element => { +const ItemSettingsButton = ({ + id, + type = 'icon', + title = 'Settings', + onClick, +}: Props): JSX.Element => { const { openedActionTabId, setOpenedActionTabId } = useLayoutContext(); const { t: translateBuilder } = useBuilderTranslation(); @@ -26,25 +37,43 @@ const ItemSettingsButton = ({ id }: Props): JSX.Element => { ? null : ItemActionTabs.Settings, ); + onClick?.(); }; - return ( - - - - {openedActionTabId === ItemActionTabs.Settings ? ( - - ) : ( - - )} - - - - ); + switch (type) { + case ActionButton.MENU_ITEM: + return ( + + + {openedActionTabId === ItemActionTabs.Settings ? ( + + ) : ( + + )} + + {title} + + ); + case ActionButton.ICON_BUTTON: + default: + return ( + + + + {openedActionTabId === ItemActionTabs.Settings ? ( + + ) : ( + + )} + + + + ); + } }; export default ItemSettingsButton; diff --git a/src/components/main/DownloadButton.tsx b/src/components/main/DownloadButton.tsx index ddafc0621..ad783c4a4 100644 --- a/src/components/main/DownloadButton.tsx +++ b/src/components/main/DownloadButton.tsx @@ -1,6 +1,6 @@ import { useEffect } from 'react'; -import { DownloadButton as Button } from '@graasp/ui'; +import { ActionButtonVariant, DownloadButton as Button } from '@graasp/ui'; import { buildDownloadButtonId } from '@/config/selectors'; @@ -11,9 +11,16 @@ import { BUILDER } from '../../langs/constants'; type Props = { id: string; name: string; + type?: ActionButtonVariant; + onClick?: () => void; }; -export const DownloadButton = ({ id, name }: Props): JSX.Element => { +export const DownloadButton = ({ + id, + name, + type, + onClick, +}: Props): JSX.Element => { const { t: translateBuilder } = useBuilderTranslation(); const { @@ -37,6 +44,7 @@ export const DownloadButton = ({ id, name }: Props): JSX.Element => { const handleDownload = () => { downloadItem({ id }); + onClick?.(); }; return ( @@ -47,6 +55,7 @@ export const DownloadButton = ({ id, name }: Props): JSX.Element => { ariaLabel={translateBuilder(BUILDER.DOWNLOAD_ITEM_BUTTON)} loaderColor="primary" loaderSize={10} + type={type} /> ); diff --git a/src/components/main/MobileItemMenu.tsx b/src/components/main/MobileItemMenu.tsx index 11a121fbd..6b7467d0c 100644 --- a/src/components/main/MobileItemMenu.tsx +++ b/src/components/main/MobileItemMenu.tsx @@ -18,7 +18,6 @@ import { BUILDER } from '../../langs/constants'; import CollapseButton from '../common/CollapseButton'; import FavoriteButton from '../common/FavoriteButton'; import HideButton from '../common/HideButton'; -import IconButtonWithText from '../common/IconButtonWithText'; import MoveButton from '../common/MoveButton'; import PinButton from '../common/PinButton'; import PublishButton from '../common/PublishButton'; @@ -118,19 +117,17 @@ const MobileItemMenu = ({ }; const shareActions = ( <> - - - + /> {canAdmin && ( - - - + type={ActionButton.MENU_ITEM} + /> )} ); diff --git a/yarn.lock b/yarn.lock index d569d50c7..727388012 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1220,15 +1220,15 @@ __metadata: languageName: node linkType: hard -"@graasp/sdk@npm:3.4.1": - version: 3.4.1 - resolution: "@graasp/sdk@npm:3.4.1" +"@graasp/sdk@npm:3.5.0": + version: 3.5.0 + resolution: "@graasp/sdk@npm:3.5.0" dependencies: date-fns: "npm:3.2.0" js-cookie: "npm:3.0.5" uuid: "npm:9.0.1" validator: "npm:13.11.0" - checksum: 6bf2d3fbb28d61a457a534628620982a656258ab2e5c101294da8e7e4327eacff526378983c4e06a85f0115e0547325f9dbece793f7f4bc6129aa8909a42a24b + checksum: dfbb9977904336214e411c93a33084fca8e07cb73145f655a070dfdb81a772d6a0412849ee07c8ee2e74497d59f960a8ef1989062a4e41d78ad5d22b24e8a8db languageName: node linkType: hard @@ -1250,11 +1250,11 @@ __metadata: languageName: node linkType: hard -"@graasp/ui@https://github.com/graasp/graasp-ui.git#666-mobile-view-custom-hook": - version: 4.3.1 - resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=09a3f878f1245f2029466191f5a83ed283a54a4a" +"@graasp/ui@https://github.com/graasp/graasp-ui.git#675-add-type-props-for-action-buttons": + version: 4.4.0 + resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=9272e8caf72365e141f8e9056173affa0d3546de" dependencies: - "@graasp/sdk": "npm:3.4.1" + "@graasp/sdk": "npm:3.5.0" http-status-codes: "npm:2.3.0" katex: "npm:0.16.9" lodash.truncate: "npm:4.4.2" @@ -1286,7 +1286,7 @@ __metadata: optional: true ag-grid-react: optional: true - checksum: 9797d0fe95216750d42889b1f3fd1afcab262cb6ff62457a9fba9b6dc7e5373b147a6cc3b42fefac3c479f883ea132dd4821acf2cfbd6038bb6ab1695d40ef2d + checksum: a81713636b14e56a46d4854a1d23d7158e8ff18067bcd03ebf56dc81821917a44a5879ea912fce491aa74b9db9ba7555ad24eb0f5a8568944301da813d819b7b languageName: node linkType: hard @@ -6309,7 +6309,7 @@ __metadata: "@graasp/query-client": "npm:2.2.1" "@graasp/sdk": "npm:3.3.0" "@graasp/translations": "npm:1.21.1" - "@graasp/ui": "https://github.com/graasp/graasp-ui.git#666-mobile-view-custom-hook" + "@graasp/ui": "https://github.com/graasp/graasp-ui.git#675-add-type-props-for-action-buttons" "@mui/icons-material": "npm:5.14.19" "@mui/lab": "npm:5.0.0-alpha.151" "@mui/material": "npm:5.14.19" From 7e80d87f67202f78f570ce681816f0d44e311183 Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Thu, 25 Jan 2024 17:27:41 +0100 Subject: [PATCH 08/11] test: create a tests for mobile view item actions --- .../item/mobileView/mobileItemActions.cy.ts | 84 +++++++++++++++++++ .../item/header/MobileItemHeaderActions.tsx | 10 ++- .../item/settings/ItemSettingsButton.tsx | 6 +- src/config/selectors.ts | 2 + yarn.lock | 4 +- 5 files changed, 101 insertions(+), 5 deletions(-) create mode 100644 cypress/e2e/item/mobileView/mobileItemActions.cy.ts diff --git a/cypress/e2e/item/mobileView/mobileItemActions.cy.ts b/cypress/e2e/item/mobileView/mobileItemActions.cy.ts new file mode 100644 index 000000000..1c370407b --- /dev/null +++ b/cypress/e2e/item/mobileView/mobileItemActions.cy.ts @@ -0,0 +1,84 @@ +import { buildItemPath } from '../../../../src/config/paths'; +import { + COLLAPSE_ITEM_BUTTON_CLASS, + EDIT_ITEM_BUTTON_CLASS, + FAVORITE_ITEM_BUTTON_CLASS, + HIDDEN_ITEM_BUTTON_CLASS, + ITEM_CHATBOX_BUTTON_ID, + ITEM_INFORMATION_BUTTON_ID, + ITEM_MENU_COPY_BUTTON_CLASS, + ITEM_MENU_FLAG_BUTTON_CLASS, + ITEM_MENU_RECYCLE_BUTTON_CLASS, + ITEM_MENU_SHORTCUT_BUTTON_CLASS, + ITEM_SETTINGS_BUTTON_CLASS, + MOBILE_MORE_ACTIONS_BUTTON_ID, + MODE_GRID_BUTTON_ID, + PIN_ITEM_BUTTON_CLASS, + PUBLISH_ITEM_BUTTON_CLASS, + SHARE_ITEM_BUTTON_CLASS, + buildDownloadButtonId, +} from '../../../../src/config/selectors'; +import { ITEM_LAYOUT_MODES } from '../../../../src/enums'; +import { SAMPLE_ITEMS } from '../../../fixtures/items'; + +const visitItem = ({ id }: { id: string }) => { + cy.visit(buildItemPath(id)); + cy.switchMode(ITEM_LAYOUT_MODES.LIST); +}; + +const buttons = [ + ITEM_INFORMATION_BUTTON_ID, + ITEM_CHATBOX_BUTTON_ID, + MODE_GRID_BUTTON_ID, +]; + +const drawerButtonsSelectors = [ + ITEM_MENU_COPY_BUTTON_CLASS, + FAVORITE_ITEM_BUTTON_CLASS, + SHARE_ITEM_BUTTON_CLASS, + PUBLISH_ITEM_BUTTON_CLASS, + ITEM_MENU_SHORTCUT_BUTTON_CLASS, + HIDDEN_ITEM_BUTTON_CLASS, + COLLAPSE_ITEM_BUTTON_CLASS, + PIN_ITEM_BUTTON_CLASS, + ITEM_MENU_RECYCLE_BUTTON_CLASS, + ITEM_MENU_FLAG_BUTTON_CLASS, + ITEM_SETTINGS_BUTTON_CLASS, + EDIT_ITEM_BUTTON_CLASS, +]; +describe('check item actions within mobile view', () => { + beforeEach(() => { + // run these tests as if in a mobile + cy.viewport(400, 750); + }); + it('check view, chat, and info buttons exits', () => { + const { id } = SAMPLE_ITEMS.items[1]; + cy.setUpApi(SAMPLE_ITEMS); + + visitItem({ id }); + buttons.forEach((btn) => { + cy.get(`#${btn}`).should('exist'); + }); + }); + + drawerButtonsSelectors.forEach((btn) => { + it(`check drawer ${btn} exist`, () => { + const { id } = SAMPLE_ITEMS.items[1]; + cy.setUpApi(SAMPLE_ITEMS); + + visitItem({ id }); + + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`.${btn}`).should('exist'); + }); + it('check download button exist', () => { + const { id } = SAMPLE_ITEMS.items[1]; + cy.setUpApi(SAMPLE_ITEMS); + + visitItem({ id }); + + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`#${buildDownloadButtonId(id)}`).should('exist'); + }); + }); +}); diff --git a/src/components/item/header/MobileItemHeaderActions.tsx b/src/components/item/header/MobileItemHeaderActions.tsx index 4c704f7d5..ce7c87da5 100644 --- a/src/components/item/header/MobileItemHeaderActions.tsx +++ b/src/components/item/header/MobileItemHeaderActions.tsx @@ -19,7 +19,10 @@ import DownloadButton from '@/components/main/DownloadButton'; import { ITEM_TYPES_WITH_CAPTIONS } from '../../../config/constants'; import { useBuilderTranslation } from '../../../config/i18n'; import { hooks } from '../../../config/queryClient'; -import { ITEM_CHATBOX_BUTTON_ID } from '../../../config/selectors'; +import { + ITEM_CHATBOX_BUTTON_ID, + MOBILE_MORE_ACTIONS_BUTTON_ID, +} from '../../../config/selectors'; import { ItemActionTabs } from '../../../enums'; import { BUILDER } from '../../../langs/constants'; import { @@ -142,7 +145,10 @@ export const MobileItemHeaderActions = ({ item }: Props): JSX.Element => { id={ITEM_CHATBOX_BUTTON_ID} onClick={onClickChatbox} /> - + diff --git a/src/components/item/settings/ItemSettingsButton.tsx b/src/components/item/settings/ItemSettingsButton.tsx index 2752a706a..dd74c06c4 100644 --- a/src/components/item/settings/ItemSettingsButton.tsx +++ b/src/components/item/settings/ItemSettingsButton.tsx @@ -43,7 +43,11 @@ const ItemSettingsButton = ({ switch (type) { case ActionButton.MENU_ITEM: return ( - + {openedActionTabId === ItemActionTabs.Settings ? ( diff --git a/src/config/selectors.ts b/src/config/selectors.ts index 5d175ff68..530550be7 100644 --- a/src/config/selectors.ts +++ b/src/config/selectors.ts @@ -344,3 +344,5 @@ export const buildShortLinkUrlTextId = (platform: ShortLinkPlatform): string => export const ACCESSIBLE_ITEMS_ONLY_ME_ID = 'accessibleItemsOnlyMe'; export const ACCESSIBLE_ITEMS_TABLE_ID = 'accessibleItemsTable'; export const ACCESSIBLE_ITEMS_NEXT_PAGE_BUTTON_SELECTOR = `#${ACCESSIBLE_ITEMS_TABLE_ID} [data-testid="KeyboardArrowRightIcon"]`; + +export const MOBILE_MORE_ACTIONS_BUTTON_ID = 'moreActionsMobileView'; diff --git a/yarn.lock b/yarn.lock index 727388012..76b0d1b21 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1252,7 +1252,7 @@ __metadata: "@graasp/ui@https://github.com/graasp/graasp-ui.git#675-add-type-props-for-action-buttons": version: 4.4.0 - resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=9272e8caf72365e141f8e9056173affa0d3546de" + resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=c95e34bbdb96117ecd50c95f0967cb8fbdad5c25" dependencies: "@graasp/sdk": "npm:3.5.0" http-status-codes: "npm:2.3.0" @@ -1286,7 +1286,7 @@ __metadata: optional: true ag-grid-react: optional: true - checksum: a81713636b14e56a46d4854a1d23d7158e8ff18067bcd03ebf56dc81821917a44a5879ea912fce491aa74b9db9ba7555ad24eb0f5a8568944301da813d819b7b + checksum: 12515560ff46ca83ffcf33566c67cd8a3bbfafb0cc4fc149b273d12532ce4a3d8feefa352ccfe9c0c071e5bf13c52a1e45eb5b9ad952cb54efc01aa3c094de50 languageName: node linkType: hard From 7e07b1a35aacde2aa06b92182684d342adeb1d13 Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Fri, 26 Jan 2024 13:52:45 +0100 Subject: [PATCH 09/11] test: create item actions mobile view tests --- .../item/mobileView/mobileItemActions.cy.ts | 191 +++++++++++++++--- src/components/item/settings/ItemSettings.tsx | 3 +- src/config/selectors.ts | 1 + 3 files changed, 164 insertions(+), 31 deletions(-) diff --git a/cypress/e2e/item/mobileView/mobileItemActions.cy.ts b/cypress/e2e/item/mobileView/mobileItemActions.cy.ts index 1c370407b..53c12014e 100644 --- a/cypress/e2e/item/mobileView/mobileItemActions.cy.ts +++ b/cypress/e2e/item/mobileView/mobileItemActions.cy.ts @@ -1,51 +1,48 @@ +import { Context, FlagType, ItemTagType } from '@graasp/sdk'; + +import { DISPLAY_CO_EDITORS_OPTIONS } from '@/config/constants'; + import { buildItemPath } from '../../../../src/config/paths'; import { COLLAPSE_ITEM_BUTTON_CLASS, EDIT_ITEM_BUTTON_CLASS, FAVORITE_ITEM_BUTTON_CLASS, HIDDEN_ITEM_BUTTON_CLASS, + HOME_MODAL_ITEM_ID, ITEM_CHATBOX_BUTTON_ID, + ITEM_FORM_CONFIRM_BUTTON_ID, ITEM_INFORMATION_BUTTON_ID, ITEM_MENU_COPY_BUTTON_CLASS, ITEM_MENU_FLAG_BUTTON_CLASS, ITEM_MENU_RECYCLE_BUTTON_CLASS, ITEM_MENU_SHORTCUT_BUTTON_CLASS, ITEM_SETTINGS_BUTTON_CLASS, + ITEM_SETTINGS_CONTAINER_ID, MOBILE_MORE_ACTIONS_BUTTON_ID, MODE_GRID_BUTTON_ID, PIN_ITEM_BUTTON_CLASS, PUBLISH_ITEM_BUTTON_CLASS, SHARE_ITEM_BUTTON_CLASS, + buildCoEditorSettingsRadioButtonId, buildDownloadButtonId, + buildFlagListItemId, + buildShortLinkUrlTextId, } from '../../../../src/config/selectors'; import { ITEM_LAYOUT_MODES } from '../../../../src/enums'; import { SAMPLE_ITEMS } from '../../../fixtures/items'; +import { buildGraaspBuilderView } from '../../../support/paths'; const visitItem = ({ id }: { id: string }) => { cy.visit(buildItemPath(id)); cy.switchMode(ITEM_LAYOUT_MODES.LIST); }; -const buttons = [ +const mainButtons = [ ITEM_INFORMATION_BUTTON_ID, ITEM_CHATBOX_BUTTON_ID, MODE_GRID_BUTTON_ID, ]; -const drawerButtonsSelectors = [ - ITEM_MENU_COPY_BUTTON_CLASS, - FAVORITE_ITEM_BUTTON_CLASS, - SHARE_ITEM_BUTTON_CLASS, - PUBLISH_ITEM_BUTTON_CLASS, - ITEM_MENU_SHORTCUT_BUTTON_CLASS, - HIDDEN_ITEM_BUTTON_CLASS, - COLLAPSE_ITEM_BUTTON_CLASS, - PIN_ITEM_BUTTON_CLASS, - ITEM_MENU_RECYCLE_BUTTON_CLASS, - ITEM_MENU_FLAG_BUTTON_CLASS, - ITEM_SETTINGS_BUTTON_CLASS, - EDIT_ITEM_BUTTON_CLASS, -]; describe('check item actions within mobile view', () => { beforeEach(() => { // run these tests as if in a mobile @@ -54,31 +51,165 @@ describe('check item actions within mobile view', () => { it('check view, chat, and info buttons exits', () => { const { id } = SAMPLE_ITEMS.items[1]; cy.setUpApi(SAMPLE_ITEMS); - visitItem({ id }); - buttons.forEach((btn) => { + + mainButtons.forEach((btn) => { cy.get(`#${btn}`).should('exist'); }); }); - drawerButtonsSelectors.forEach((btn) => { - it(`check drawer ${btn} exist`, () => { - const { id } = SAMPLE_ITEMS.items[1]; - cy.setUpApi(SAMPLE_ITEMS); + it(`check item edit`, () => { + const { id } = SAMPLE_ITEMS.items[1]; + cy.setUpApi(SAMPLE_ITEMS); + visitItem({ id }); - visitItem({ id }); + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`.${EDIT_ITEM_BUTTON_CLASS}`).click(); + cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).should('exist'); + }); - cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); - cy.get(`.${btn}`).should('exist'); + it('check download button exist', () => { + const { id } = SAMPLE_ITEMS.items[1]; + cy.setUpApi(SAMPLE_ITEMS); + visitItem({ id }); + + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`#${buildDownloadButtonId(id)}`).should('exist'); + }); + + it('check copy button exists and open copy modal', () => { + const { id } = SAMPLE_ITEMS.items[1]; + cy.setUpApi(SAMPLE_ITEMS); + visitItem({ id }); + + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`.${ITEM_MENU_COPY_BUTTON_CLASS}`).click(); + cy.get(`#${HOME_MODAL_ITEM_ID}`).should('exist'); + }); + + it('Add Item to favorite from mobile view', () => { + const { id } = SAMPLE_ITEMS.items[1]; + cy.setUpApi(SAMPLE_ITEMS); + visitItem({ id }); + + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`.${FAVORITE_ITEM_BUTTON_CLASS}`).click(); + cy.wait('@favoriteItem').then(({ request }) => { + expect(request.url).to.contain(id); }); - it('check download button exist', () => { - const { id } = SAMPLE_ITEMS.items[1]; - cy.setUpApi(SAMPLE_ITEMS); + }); + it('Share Item Should open share modal and check builder sharing url value', () => { + const { id } = SAMPLE_ITEMS.items[1]; + cy.setUpApi(SAMPLE_ITEMS); + visitItem({ id }); - visitItem({ id }); + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`.${SHARE_ITEM_BUTTON_CLASS}`).click(); + cy.get(`#${buildShortLinkUrlTextId(Context.Builder)}`).should( + 'contain', + buildGraaspBuilderView(id), + ); + }); + it('Publish Button, check co-editor settings', () => { + const { id } = SAMPLE_ITEMS.items[1]; + cy.setUpApi(SAMPLE_ITEMS); + visitItem({ id }); + + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`.${PUBLISH_ITEM_BUTTON_CLASS}`).click(); + Object.values(DISPLAY_CO_EDITORS_OPTIONS).forEach((option) => { + const displayTags = cy.get( + `#${buildCoEditorSettingsRadioButtonId(option.value)}`, + ); + displayTags.should('be.visible'); + }); + }); + it('Shortcut button should open modal', () => { + const { id } = SAMPLE_ITEMS.items[1]; + cy.setUpApi(SAMPLE_ITEMS); + visitItem({ id }); + + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`.${ITEM_MENU_SHORTCUT_BUTTON_CLASS}`).click(); + cy.get(`#${HOME_MODAL_ITEM_ID}`).should('exist'); + }); + it('hide item', () => { + const { id } = SAMPLE_ITEMS.items[1]; + cy.setUpApi(SAMPLE_ITEMS); + visitItem({ id }); + + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`.${HIDDEN_ITEM_BUTTON_CLASS}`).click(); + cy.wait(`@postItemTag-${ItemTagType.Hidden}`).then( + ({ request: { url } }) => { + expect(url).to.contain(ItemTagType.Hidden); + expect(url).to.contain(id); + }, + ); + }); + it('collapse item', () => { + const { id } = SAMPLE_ITEMS.items[1]; + cy.setUpApi(SAMPLE_ITEMS); + visitItem({ id }); - cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); - cy.get(`#${buildDownloadButtonId(id)}`).should('exist'); + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`.${COLLAPSE_ITEM_BUTTON_CLASS}`).click(); + cy.wait('@editItem').then( + ({ + response: { + body: { id: payloadId, settings }, + }, + }) => { + expect(payloadId).to.equal(id); + expect(settings.isCollapsible).equals(true); + }, + ); + }); + it('Pin item', () => { + const { id } = SAMPLE_ITEMS.items[1]; + cy.setUpApi(SAMPLE_ITEMS); + visitItem({ id }); + + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`.${PIN_ITEM_BUTTON_CLASS}`).click(); + cy.wait(`@editItem`).then( + ({ + request: { + body: { settings }, + }, + }) => { + expect(settings.isPinned).equals(true); + }, + ); + }); + it.only('Recycle item', () => { + const { id } = SAMPLE_ITEMS.items[1]; + cy.setUpApi(SAMPLE_ITEMS); + visitItem({ id }); + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`.${ITEM_MENU_RECYCLE_BUTTON_CLASS}`).click(); + + cy.wait('@recycleItems').then(({ request: { url } }) => { + expect(url).to.contain(id); }); }); + it('Flag item false information option should exist', () => { + const { id } = SAMPLE_ITEMS.items[1]; + const type = FlagType.FalseInformation; + + cy.setUpApi(SAMPLE_ITEMS); + visitItem({ id }); + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`.${ITEM_MENU_FLAG_BUTTON_CLASS}`).click(); + cy.get(`#${buildFlagListItemId(type)}`).should('exist'); + }); + it('Item settings', () => { + const { id } = SAMPLE_ITEMS.items[1]; + + cy.setUpApi(SAMPLE_ITEMS); + visitItem({ id }); + cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click(); + cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click(); + cy.get(`#${ITEM_SETTINGS_CONTAINER_ID}`).should('exist'); + }); }); diff --git a/src/components/item/settings/ItemSettings.tsx b/src/components/item/settings/ItemSettings.tsx index e2b85fec6..3c40b94b1 100644 --- a/src/components/item/settings/ItemSettings.tsx +++ b/src/components/item/settings/ItemSettings.tsx @@ -17,6 +17,7 @@ import { import { useBuilderTranslation } from '../../../config/i18n'; import { mutations } from '../../../config/queryClient'; import { + ITEM_SETTINGS_CONTAINER_ID, SETTINGS_CHATBOX_TOGGLE_ID, SETTINGS_COLLAPSE_TOGGLE_ID, SETTINGS_PINNED_TOGGLE_ID, @@ -202,7 +203,7 @@ const ItemSettings = ({ item }: Props): JSX.Element => { }; return ( - + {translateBuilder(BUILDER.SETTINGS_TITLE)} diff --git a/src/config/selectors.ts b/src/config/selectors.ts index 530550be7..de8639836 100644 --- a/src/config/selectors.ts +++ b/src/config/selectors.ts @@ -11,6 +11,7 @@ export const buildItemCard = (id: string): string => `itemCard-${id}`; export const CREATE_ITEM_BUTTON_ID = 'createItemButton'; export const ITEM_FORM_NAME_INPUT_ID = 'newItemNameInput'; export const ITEM_FORM_CONFIRM_BUTTON_ID = 'newItemConfirmButton'; +export const ITEM_SETTINGS_CONTAINER_ID = 'itemSettingsContainerId'; export const ITEM_SCREEN_ERROR_ALERT_ID = 'itemScreenErrorAlert'; export const buildItemLink = (id: string): string => `itemLink-${id}`; export const NAVIGATION_HOME_LINK_ID = 'navigationHomeLink'; From c6b2734a01924233a6da1951a171ce0fa3e75ede Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Thu, 8 Feb 2024 16:22:47 +0100 Subject: [PATCH 10/11] style: share link and item actions alignment --- src/components/common/BackButton.tsx | 2 +- src/components/common/ShareButton.tsx | 11 +- src/components/item/header/ItemHeader.tsx | 1 - .../item/header/MobileItemHeaderActions.tsx | 6 +- src/components/pages/item/ItemPageLayout.tsx | 2 +- yarn.lock | 507 +++++++++++++++--- 6 files changed, 448 insertions(+), 81 deletions(-) diff --git a/src/components/common/BackButton.tsx b/src/components/common/BackButton.tsx index e7fe79f1b..c5694be5b 100644 --- a/src/components/common/BackButton.tsx +++ b/src/components/common/BackButton.tsx @@ -13,7 +13,7 @@ const BackButton = ({ onClick }: Props): JSX.Element => { return ( - + ); diff --git a/src/components/common/ShareButton.tsx b/src/components/common/ShareButton.tsx index ffb87d99c..0abe1803b 100644 --- a/src/components/common/ShareButton.tsx +++ b/src/components/common/ShareButton.tsx @@ -1,5 +1,7 @@ import { Link } from 'react-router-dom'; +import { styled } from '@mui/material'; + import { ActionButtonVariant, ShareButton as GraaspShareButton, @@ -19,11 +21,16 @@ type Props = { type?: ActionButtonVariant; }; +const StyledLink = styled(Link)(() => ({ + textDecoration: 'none', + color: 'black', +})); + const ShareButton = ({ itemId, type }: Props): JSX.Element => { const { t: translateBuilder } = useBuilderTranslation(); return ( - + { id={buildShareButtonId(itemId)} type={type} /> - + ); }; diff --git a/src/components/item/header/ItemHeader.tsx b/src/components/item/header/ItemHeader.tsx index 77006a83c..ad222b97d 100644 --- a/src/components/item/header/ItemHeader.tsx +++ b/src/components/item/header/ItemHeader.tsx @@ -20,7 +20,6 @@ const ItemHeader = ({ showNavigation = true }: Props): JSX.Element => { alignItems="center" justifyContent="space-between" mb={1} - // mt={2} id={ITEM_HEADER_ID} > {/* display empty div to render actions on the right */} diff --git a/src/components/item/header/MobileItemHeaderActions.tsx b/src/components/item/header/MobileItemHeaderActions.tsx index d20842329..8aa716711 100644 --- a/src/components/item/header/MobileItemHeaderActions.tsx +++ b/src/components/item/header/MobileItemHeaderActions.tsx @@ -133,7 +133,11 @@ export const MobileItemHeaderActions = (): JSX.Element => { return item ? ( <> - + { navigate(buildItemPath(itemId))} /> - + diff --git a/yarn.lock b/yarn.lock index 0453743e3..ae9053efa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -46,33 +46,56 @@ __metadata: languageName: node linkType: hard -"@babel/compat-data@npm:^7.23.5": - version: 7.23.5 - resolution: "@babel/compat-data@npm:7.23.5" - checksum: 10/088f14f646ecbddd5ef89f120a60a1b3389a50a9705d44603dca77662707d0175a5e0e0da3943c3298f1907a4ab871468656fbbf74bb7842cd8b0686b2c19736 +"@babel/compat-data@npm:^7.22.9": + version: 7.23.2 + resolution: "@babel/compat-data@npm:7.23.2" + checksum: 10/c18eccd13975c1434a65d04f721075e30d03ba1608f4872d84e8538c16552b878aaac804ff31243d8c2c0e91524f3bc98de6305e117ba1a55c9956871973b4dc languageName: node linkType: hard -"@babel/core@npm:^7.12.3, @babel/core@npm:^7.23.3, @babel/core@npm:^7.7.5": - version: 7.23.9 - resolution: "@babel/core@npm:7.23.9" +"@babel/core@npm:^7.12.3, @babel/core@npm:^7.7.5": + version: 7.23.2 + resolution: "@babel/core@npm:7.23.2" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.22.13" + "@babel/generator": "npm:^7.23.0" + "@babel/helper-compilation-targets": "npm:^7.22.15" + "@babel/helper-module-transforms": "npm:^7.23.0" + "@babel/helpers": "npm:^7.23.2" + "@babel/parser": "npm:^7.23.0" + "@babel/template": "npm:^7.22.15" + "@babel/traverse": "npm:^7.23.2" + "@babel/types": "npm:^7.23.0" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 10/b69d7008695b2ac7a3a2db83c5c712fbb79f7031c4480f6351cde327930e38873003d1d021059b729a1d0cb48093f1d384c64269b78f6189f50051fe4f64dc2d + languageName: node + linkType: hard + +"@babel/core@npm:^7.23.3": + version: 7.23.5 + resolution: "@babel/core@npm:7.23.5" dependencies: "@ampproject/remapping": "npm:^2.2.0" "@babel/code-frame": "npm:^7.23.5" - "@babel/generator": "npm:^7.23.6" - "@babel/helper-compilation-targets": "npm:^7.23.6" + "@babel/generator": "npm:^7.23.5" + "@babel/helper-compilation-targets": "npm:^7.22.15" "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helpers": "npm:^7.23.9" - "@babel/parser": "npm:^7.23.9" - "@babel/template": "npm:^7.23.9" - "@babel/traverse": "npm:^7.23.9" - "@babel/types": "npm:^7.23.9" + "@babel/helpers": "npm:^7.23.5" + "@babel/parser": "npm:^7.23.5" + "@babel/template": "npm:^7.22.15" + "@babel/traverse": "npm:^7.23.5" + "@babel/types": "npm:^7.23.5" convert-source-map: "npm:^2.0.0" debug: "npm:^4.1.0" gensync: "npm:^1.0.0-beta.2" json5: "npm:^2.2.3" semver: "npm:^6.3.1" - checksum: 10/268cdbb86bef1b8ea5b1300f2f325e56a1740a5051360cb228ffeaa0f80282b6674f3a2b4d6466adb0691183759b88d4c37b4a4f77232c84a49ed771c84cdc27 + checksum: 10/f24265172610dbffe0e315b6a8e8f87cf87d2643c8915196adcddd81c66a8eaeb1b36fea851e2308961636a180089a5f10becaa340d5b707d5f64e2e5ffb2bc8 languageName: node linkType: hard @@ -87,7 +110,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6": +"@babel/generator@npm:^7.23.0": version: 7.23.6 resolution: "@babel/generator@npm:7.23.6" dependencies: @@ -99,16 +122,28 @@ __metadata: languageName: node linkType: hard -"@babel/helper-compilation-targets@npm:^7.23.6": - version: 7.23.6 - resolution: "@babel/helper-compilation-targets@npm:7.23.6" +"@babel/generator@npm:^7.23.5": + version: 7.23.5 + resolution: "@babel/generator@npm:7.23.5" dependencies: - "@babel/compat-data": "npm:^7.23.5" - "@babel/helper-validator-option": "npm:^7.23.5" - browserslist: "npm:^4.22.2" + "@babel/types": "npm:^7.23.5" + "@jridgewell/gen-mapping": "npm:^0.3.2" + "@jridgewell/trace-mapping": "npm:^0.3.17" + jsesc: "npm:^2.5.1" + checksum: 10/094af79c2e8fdb0cfd06b42ff6a39a8a95639bc987cace44f52ed5c46127f5469eb20ab5f4c8991fc00fa9c1445a1977cde8e44289d6be29ddbb315fb0fc1b45 + languageName: node + linkType: hard + +"@babel/helper-compilation-targets@npm:^7.22.15": + version: 7.22.15 + resolution: "@babel/helper-compilation-targets@npm:7.22.15" + dependencies: + "@babel/compat-data": "npm:^7.22.9" + "@babel/helper-validator-option": "npm:^7.22.15" + browserslist: "npm:^4.21.9" lru-cache: "npm:^5.1.1" semver: "npm:^6.3.1" - checksum: 10/05595cd73087ddcd81b82d2f3297aac0c0422858dfdded43d304786cf680ec33e846e2317e6992d2c964ee61d93945cbf1fa8ec80b55aee5bfb159227fb02cb9 + checksum: 10/9706decaa1591cf44511b6f3447eb9653b50ca3538215fe2e5387a8598c258c062f4622da5b95e61f0415706534deee619bbf53a2889f9bd967949b8f6024e0e languageName: node linkType: hard @@ -147,6 +182,21 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-transforms@npm:^7.23.0": + version: 7.23.0 + resolution: "@babel/helper-module-transforms@npm:7.23.0" + dependencies: + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-module-imports": "npm:^7.22.15" + "@babel/helper-simple-access": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + "@babel/helper-validator-identifier": "npm:^7.22.20" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/d72fe444f7b6c5aadaac8f393298d603eedd48e5dead67273a48e5c83a677cbccbd8a12a06c5bf5d97924666083279158a4bd0e799d28b86cbbfacba9e41f598 + languageName: node + linkType: hard + "@babel/helper-module-transforms@npm:^7.23.3": version: 7.23.3 resolution: "@babel/helper-module-transforms@npm:7.23.3" @@ -187,6 +237,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-string-parser@npm:^7.22.5": + version: 7.22.5 + resolution: "@babel/helper-string-parser@npm:7.22.5" + checksum: 10/7f275a7f1a9504da06afc33441e219796352a4a3d0288a961bc14d1e30e06833a71621b33c3e60ee3ac1ff3c502d55e392bcbc0665f6f9d2629809696fab7cdd + languageName: node + linkType: hard + "@babel/helper-string-parser@npm:^7.23.4": version: 7.23.4 resolution: "@babel/helper-string-parser@npm:7.23.4" @@ -201,21 +258,32 @@ __metadata: languageName: node linkType: hard -"@babel/helper-validator-option@npm:^7.23.5": - version: 7.23.5 - resolution: "@babel/helper-validator-option@npm:7.23.5" - checksum: 10/537cde2330a8aede223552510e8a13e9c1c8798afee3757995a7d4acae564124fe2bf7e7c3d90d62d3657434a74340a274b3b3b1c6f17e9a2be1f48af29cb09e +"@babel/helper-validator-option@npm:^7.22.15": + version: 7.22.15 + resolution: "@babel/helper-validator-option@npm:7.22.15" + checksum: 10/68da52b1e10002a543161494c4bc0f4d0398c8fdf361d5f7f4272e95c45d5b32d974896d44f6a0ea7378c9204988879d73613ca683e13bd1304e46d25ff67a8d languageName: node linkType: hard -"@babel/helpers@npm:^7.23.9": - version: 7.23.9 - resolution: "@babel/helpers@npm:7.23.9" +"@babel/helpers@npm:^7.23.2": + version: 7.23.2 + resolution: "@babel/helpers@npm:7.23.2" dependencies: - "@babel/template": "npm:^7.23.9" - "@babel/traverse": "npm:^7.23.9" - "@babel/types": "npm:^7.23.9" - checksum: 10/dd56daac8bbd7ed174bb00fd185926fd449e591d9a00edaceb7ac6edbdd7a8db57e2cb365b4fafda382201752789ced2f7ae010f667eab0f198a4571cda4d2c5 + "@babel/template": "npm:^7.22.15" + "@babel/traverse": "npm:^7.23.2" + "@babel/types": "npm:^7.23.0" + checksum: 10/d66d949d41513f19e62e43a9426e283d46bc9a3c72f1e3dd136568542382edd411047403458aaa0ae3adf7c14d23e0e9a1126092bb56e72ba796a6dd7e4c082a + languageName: node + linkType: hard + +"@babel/helpers@npm:^7.23.5": + version: 7.23.5 + resolution: "@babel/helpers@npm:7.23.5" + dependencies: + "@babel/template": "npm:^7.22.15" + "@babel/traverse": "npm:^7.23.5" + "@babel/types": "npm:^7.23.5" + checksum: 10/84a813db55e03b5f47cef1210eb22751dae5dc3605bf62ff9acd4c248d857f94cb43dc7299e0edcec9312b31088f0d77f881282df2957e65a322b5412801cc24 languageName: node linkType: hard @@ -239,6 +307,15 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.23.5": + version: 7.23.5 + resolution: "@babel/parser@npm:7.23.5" + bin: + parser: ./bin/babel-parser.js + checksum: 10/828c250ace0c58f9dc311fd13ad3da34e86ed27a5c6b4183ce9d85be250e78eeb71a13f6d51a368c46f8cbe51106c726bfbb158bf46a89db3a168a0002d3050a + languageName: node + linkType: hard + "@babel/plugin-transform-react-jsx-self@npm:^7.23.3": version: 7.23.3 resolution: "@babel/plugin-transform-react-jsx-self@npm:7.23.3" @@ -270,7 +347,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.4, @babel/runtime@npm:^7.23.8, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.3.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.8, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.3.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.23.9 resolution: "@babel/runtime@npm:7.23.9" dependencies: @@ -279,7 +356,25 @@ __metadata: languageName: node linkType: hard -"@babel/template@npm:^7.22.15, @babel/template@npm:^7.23.9": +"@babel/runtime@npm:^7.23.1": + version: 7.23.2 + resolution: "@babel/runtime@npm:7.23.2" + dependencies: + regenerator-runtime: "npm:^0.14.0" + checksum: 10/abdcbdd590c7e31762e1bdab94dd466823c8bcedd3ff2fde85eeb94dac7cccaef151ac37c428bda7018ededd27c9a82b4dfeb621f978ad934232475a902f8e3a + languageName: node + linkType: hard + +"@babel/runtime@npm:^7.23.4": + version: 7.23.5 + resolution: "@babel/runtime@npm:7.23.5" + dependencies: + regenerator-runtime: "npm:^0.14.0" + checksum: 10/0f1669f639af30a0a2948ffcefa2c61935f337b0777bd94f8d7bc66bba8e7d4499e725caeb0449540d9c6d67399b733c4e719babb43ce9a0f33095aa01b42b37 + languageName: node + linkType: hard + +"@babel/template@npm:^7.22.15": version: 7.23.9 resolution: "@babel/template@npm:7.23.9" dependencies: @@ -290,7 +385,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:7.23.2": +"@babel/traverse@npm:7.23.2, @babel/traverse@npm:^7.23.2": version: 7.23.2 resolution: "@babel/traverse@npm:7.23.2" dependencies: @@ -308,21 +403,21 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.23.9": - version: 7.23.9 - resolution: "@babel/traverse@npm:7.23.9" +"@babel/traverse@npm:^7.23.5": + version: 7.23.5 + resolution: "@babel/traverse@npm:7.23.5" dependencies: "@babel/code-frame": "npm:^7.23.5" - "@babel/generator": "npm:^7.23.6" + "@babel/generator": "npm:^7.23.5" "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-function-name": "npm:^7.23.0" "@babel/helper-hoist-variables": "npm:^7.22.5" "@babel/helper-split-export-declaration": "npm:^7.22.6" - "@babel/parser": "npm:^7.23.9" - "@babel/types": "npm:^7.23.9" - debug: "npm:^4.3.1" + "@babel/parser": "npm:^7.23.5" + "@babel/types": "npm:^7.23.5" + debug: "npm:^4.1.0" globals: "npm:^11.1.0" - checksum: 10/e2bb845f7f229feb7c338f7e150f5f1abc5395dcd3a6a47f63a25242ec3ec6b165f04a6df7d4849468547faee34eb3cf52487eb0bd867a7d3c42fec2a648266f + checksum: 10/281cae2765caad88c7af6214eab3647db0e9cadc7ffcd3fd924f09fbb9bd09d97d6fb210794b7545c317ce417a30016636530043a455ba6922349e39c1ba622a languageName: node linkType: hard @@ -336,7 +431,29 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.17.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.8.3": +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.17.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.8.3": + version: 7.23.0 + resolution: "@babel/types@npm:7.23.0" + dependencies: + "@babel/helper-string-parser": "npm:^7.22.5" + "@babel/helper-validator-identifier": "npm:^7.22.20" + to-fast-properties: "npm:^2.0.0" + checksum: 10/ca5b896a26c91c5672254725c4c892a35567d2122afc47bd5331d1611a7f9230c19fc9ef591a5a6f80bf0d80737e104a9ac205c96447c74bee01d4319db58001 + languageName: node + linkType: hard + +"@babel/types@npm:^7.23.5": + version: 7.23.5 + resolution: "@babel/types@npm:7.23.5" + dependencies: + "@babel/helper-string-parser": "npm:^7.23.4" + "@babel/helper-validator-identifier": "npm:^7.22.20" + to-fast-properties: "npm:^2.0.0" + checksum: 10/a623a4e7f396f1903659099da25bfa059694a49f42820f6b5288347f1646f0b37fb7cc550ba45644e9067149368ef34ccb1bd4a4251ec59b83b3f7765088f363 + languageName: node + linkType: hard + +"@babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9": version: 7.23.9 resolution: "@babel/types@npm:7.23.9" dependencies: @@ -978,6 +1095,15 @@ __metadata: languageName: node linkType: hard +"@floating-ui/core@npm:^1.4.2": + version: 1.5.0 + resolution: "@floating-ui/core@npm:1.5.0" + dependencies: + "@floating-ui/utils": "npm:^0.1.3" + checksum: 10/3182715a30493f44a32158f4d77ab5b6c212064b160cb84b5b8405ec2845bd8a9167c25292709e841cad9e70c6b9efdc30f876044e3b0909139fea8eca00c631 + languageName: node + linkType: hard + "@floating-ui/core@npm:^1.6.0": version: 1.6.0 resolution: "@floating-ui/core@npm:1.6.0" @@ -987,6 +1113,16 @@ __metadata: languageName: node linkType: hard +"@floating-ui/dom@npm:^1.5.1": + version: 1.5.3 + resolution: "@floating-ui/dom@npm:1.5.3" + dependencies: + "@floating-ui/core": "npm:^1.4.2" + "@floating-ui/utils": "npm:^0.1.3" + checksum: 10/d2d5ae7a0949c0ebf7fbf97a21612bf94dbd29cb6c847e00588b8e2a5575ade27c47cb19f5d230fc21a571d99aa0c714b301c9221d33921047408c0ed9d91a30 + languageName: node + linkType: hard + "@floating-ui/dom@npm:^1.6.1": version: 1.6.1 resolution: "@floating-ui/dom@npm:1.6.1" @@ -997,7 +1133,7 @@ __metadata: languageName: node linkType: hard -"@floating-ui/react-dom@npm:^2.0.2, @floating-ui/react-dom@npm:^2.0.4, @floating-ui/react-dom@npm:^2.0.8": +"@floating-ui/react-dom@npm:^2.0.2, @floating-ui/react-dom@npm:^2.0.8": version: 2.0.8 resolution: "@floating-ui/react-dom@npm:2.0.8" dependencies: @@ -1009,6 +1145,25 @@ __metadata: languageName: node linkType: hard +"@floating-ui/react-dom@npm:^2.0.4": + version: 2.0.4 + resolution: "@floating-ui/react-dom@npm:2.0.4" + dependencies: + "@floating-ui/dom": "npm:^1.5.1" + peerDependencies: + react: ">=16.8.0" + react-dom: ">=16.8.0" + checksum: 10/4240a718502c797fd2e174cd06dcd7321a6eda9c8966dbaf61864b9e16445e95649a59bfe7c19ee13f68c11f3693724d7970c7e618089a3d3915bd343639cfae + languageName: node + linkType: hard + +"@floating-ui/utils@npm:^0.1.3": + version: 0.1.6 + resolution: "@floating-ui/utils@npm:0.1.6" + checksum: 10/450ec4ecc1dd8161b1904d4e1e9d95e653cc06f79af6c3b538b79efb10541d90bcc88646ab3cdffc5b92e00c4804ca727b025d153ad285f42dbbb39aec219ec9 + languageName: node + linkType: hard + "@floating-ui/utils@npm:^0.2.1": version: 0.2.1 resolution: "@floating-ui/utils@npm:0.2.1" @@ -1521,6 +1676,23 @@ __metadata: languageName: node linkType: hard +"@mui/private-theming@npm:^5.14.19": + version: 5.14.19 + resolution: "@mui/private-theming@npm:5.14.19" + dependencies: + "@babel/runtime": "npm:^7.23.4" + "@mui/utils": "npm:^5.14.19" + prop-types: "npm:^15.8.1" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/248687351477c7794a002dd0c4ae68216b5794591407e0b4751eede8fe35db94c163642365578938dc66fbeb7a6c771c811ab2f7fa4b2bc60f663dc826084ca0 + languageName: node + linkType: hard + "@mui/private-theming@npm:^5.15.8": version: 5.15.8 resolution: "@mui/private-theming@npm:5.15.8" @@ -1538,6 +1710,27 @@ __metadata: languageName: node linkType: hard +"@mui/styled-engine@npm:^5.14.19": + version: 5.14.19 + resolution: "@mui/styled-engine@npm:5.14.19" + dependencies: + "@babel/runtime": "npm:^7.23.4" + "@emotion/cache": "npm:^11.11.0" + csstype: "npm:^3.1.2" + prop-types: "npm:^15.8.1" + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/styled": ^11.3.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + checksum: 10/210da24bcb47c8b911b0f4174ecd77ced2aa5eba442861b474fe575384d736edc9553b707be35a086ae514503c26dbfa5541a352db65fa7de970c6251365214b + languageName: node + linkType: hard + "@mui/styled-engine@npm:^5.15.8": version: 5.15.8 resolution: "@mui/styled-engine@npm:5.15.8" @@ -1559,7 +1752,7 @@ __metadata: languageName: node linkType: hard -"@mui/system@npm:^5.14.16, @mui/system@npm:^5.14.19, @mui/system@npm:^5.15.8": +"@mui/system@npm:^5.14.16, @mui/system@npm:^5.15.8": version: 5.15.8 resolution: "@mui/system@npm:5.15.8" dependencies: @@ -1587,7 +1780,35 @@ __metadata: languageName: node linkType: hard -"@mui/types@npm:^7.2.10, @mui/types@npm:^7.2.13, @mui/types@npm:^7.2.8": +"@mui/system@npm:^5.14.19": + version: 5.14.19 + resolution: "@mui/system@npm:5.14.19" + dependencies: + "@babel/runtime": "npm:^7.23.4" + "@mui/private-theming": "npm:^5.14.19" + "@mui/styled-engine": "npm:^5.14.19" + "@mui/types": "npm:^7.2.10" + "@mui/utils": "npm:^5.14.19" + clsx: "npm:^2.0.0" + csstype: "npm:^3.1.2" + prop-types: "npm:^15.8.1" + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 10/68fddc614aae5dba86db134ae1b2ab7540d61e4008068ccd3c1cfa20d9f54508b9cf3ce68d2d1a4c7de237c9314206da291e987d323fa1425a12e5b36f2bc488 + languageName: node + linkType: hard + +"@mui/types@npm:^7.2.10, @mui/types@npm:^7.2.13": version: 7.2.13 resolution: "@mui/types@npm:7.2.13" peerDependencies: @@ -1599,7 +1820,19 @@ __metadata: languageName: node linkType: hard -"@mui/utils@npm:^5.14.16, @mui/utils@npm:^5.14.19, @mui/utils@npm:^5.14.3, @mui/utils@npm:^5.15.8": +"@mui/types@npm:^7.2.8": + version: 7.2.8 + resolution: "@mui/types@npm:7.2.8" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/47be368669d5bb5e43458d93d20c7e9f4f6ca2fec2bc7b541dcc7b59a0168ac6bfa6b88f51f5ad1d044c07a1fb247b803683bcaf969052aab559f25f11727ba5 + languageName: node + linkType: hard + +"@mui/utils@npm:^5.14.16, @mui/utils@npm:^5.15.8": version: 5.15.8 resolution: "@mui/utils@npm:5.15.8" dependencies: @@ -1617,6 +1850,42 @@ __metadata: languageName: node linkType: hard +"@mui/utils@npm:^5.14.19": + version: 5.14.19 + resolution: "@mui/utils@npm:5.14.19" + dependencies: + "@babel/runtime": "npm:^7.23.4" + "@types/prop-types": "npm:^15.7.11" + prop-types: "npm:^15.8.1" + react-is: "npm:^18.2.0" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/1abbcfef21fc71805af1a4d653d9adeec252ebe4892715a0c6c49246c6cfa84f46c82e033679ab50eb2cf3ef391d9eb622c48aa78f152032aa99a996eac98806 + languageName: node + linkType: hard + +"@mui/utils@npm:^5.14.3": + version: 5.14.14 + resolution: "@mui/utils@npm:5.14.14" + dependencies: + "@babel/runtime": "npm:^7.23.1" + "@types/prop-types": "npm:^15.7.7" + prop-types: "npm:^15.8.1" + react-is: "npm:^18.2.0" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/7e904d2119bde323eeffcd74e001b93d549c9fdba02c71dcf1e3ccebdc5c008cced73545a498664c26473068e717f50c769354b509f289d104ad52c1d6b96311 + languageName: node + linkType: hard + "@mui/x-tree-view@npm:6.0.0-alpha.1": version: 6.0.0-alpha.1 resolution: "@mui/x-tree-view@npm:6.0.0-alpha.1" @@ -2289,6 +2558,13 @@ __metadata: languageName: node linkType: hard +"@types/prop-types@npm:^15.7.7": + version: 15.7.9 + resolution: "@types/prop-types@npm:15.7.9" + checksum: 10/c7591d3ff7593e243908a07e1d3e2bb6e8879008af5800d8378115a90d0fdf669a1cae72a6d7f69e59c4fa7bb4c8ed61f6ebc1c520fe110c6f2b03ac02414072 + languageName: node + linkType: hard + "@types/qs@npm:6.9.10": version: 6.9.10 resolution: "@types/qs@npm:6.9.10" @@ -2344,7 +2620,7 @@ __metadata: languageName: node linkType: hard -"@types/react-transition-group@npm:^4.4.10, @types/react-transition-group@npm:^4.4.6, @types/react-transition-group@npm:^4.4.9": +"@types/react-transition-group@npm:^4.4.10": version: 4.4.10 resolution: "@types/react-transition-group@npm:4.4.10" dependencies: @@ -2353,6 +2629,24 @@ __metadata: languageName: node linkType: hard +"@types/react-transition-group@npm:^4.4.6": + version: 4.4.8 + resolution: "@types/react-transition-group@npm:4.4.8" + dependencies: + "@types/react": "npm:*" + checksum: 10/9c756217329897bd1ea9072bc44e1aff27ee012fdc6a493edff0951a8b9e461a4415b91ee0c11ef64bd40fac9f91425e58e5222d95489319181f7e8646d50948 + languageName: node + linkType: hard + +"@types/react-transition-group@npm:^4.4.9": + version: 4.4.9 + resolution: "@types/react-transition-group@npm:4.4.9" + dependencies: + "@types/react": "npm:*" + checksum: 10/74ed0985380544bd1d63d8865a452a859ed7122b35dd2cf919fa7d1f31936345671995d36c89263456f27dbb5940eac8d4607be969e27187102eecff1cc64ba3 + languageName: node + linkType: hard + "@types/react@npm:*": version: 18.2.55 resolution: "@types/react@npm:18.2.55" @@ -3442,17 +3736,17 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.22.2": - version: 4.22.3 - resolution: "browserslist@npm:4.22.3" +"browserslist@npm:^4.21.9": + version: 4.22.1 + resolution: "browserslist@npm:4.22.1" dependencies: - caniuse-lite: "npm:^1.0.30001580" - electron-to-chromium: "npm:^1.4.648" - node-releases: "npm:^2.0.14" + caniuse-lite: "npm:^1.0.30001541" + electron-to-chromium: "npm:^1.4.535" + node-releases: "npm:^2.0.13" update-browserslist-db: "npm:^1.0.13" bin: browserslist: cli.js - checksum: 10/d46a906c79dfe95d9702c020afbe5b7b4dbe2019b85432e7a020326adff27e63e3c0a52dc8d4e73247060bbe2c13f000714741903cf96a16baae9c216dc74c75 + checksum: 10/4a515168e0589c7b1ccbf13a93116ce0418cc5e65d228ec036022cf0e08773fdfb732e2abbf1e1188b96d19ecd4dd707504e75b6d393cba2782fc7d6a7fdefe8 languageName: node linkType: hard @@ -3531,6 +3825,17 @@ __metadata: languageName: node linkType: hard +"call-bind@npm:^1.0.4": + version: 1.0.5 + resolution: "call-bind@npm:1.0.5" + dependencies: + function-bind: "npm:^1.1.2" + get-intrinsic: "npm:^1.2.1" + set-function-length: "npm:^1.1.1" + checksum: 10/246d44db6ef9bbd418828dbd5337f80b46be4398d522eded015f31554cbb2ea33025b0203b75c7ab05a1a255b56ef218880cca1743e4121e306729f9e414da39 + languageName: node + linkType: hard + "callsites@npm:^3.0.0": version: 3.1.0 resolution: "callsites@npm:3.1.0" @@ -3556,10 +3861,10 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.30001580": - version: 1.0.30001585 - resolution: "caniuse-lite@npm:1.0.30001585" - checksum: 10/877e234c13f8db9bde20265f8c0702d1a5d3d0f0b0f726f431c951cf92d4c2b73db6e7b2c8bdf964e49e817037f27691564f56c5e2d557b001097bc8d526d2a1 +"caniuse-lite@npm:^1.0.30001541": + version: 1.0.30001553 + resolution: "caniuse-lite@npm:1.0.30001553" + checksum: 10/b14b512307aeaeccd4798439ae8665c9c215778132d4a87194552edbbd11965c1a8b3bee593e43a511332e5c4282962e12006ffb75bd3d938c080af7cfc89096 languageName: node linkType: hard @@ -3644,8 +3949,8 @@ __metadata: linkType: hard "chokidar@npm:^3.5.1": - version: 3.6.0 - resolution: "chokidar@npm:3.6.0" + version: 3.5.3 + resolution: "chokidar@npm:3.5.3" dependencies: anymatch: "npm:~3.1.2" braces: "npm:~3.0.2" @@ -3658,7 +3963,7 @@ __metadata: dependenciesMeta: fsevents: optional: true - checksum: 10/c327fb07704443f8d15f7b4a7ce93b2f0bc0e6cea07ec28a7570aa22cd51fcf0379df589403976ea956c369f25aa82d84561947e227cd925902e1751371658df + checksum: 10/863e3ff78ee7a4a24513d2a416856e84c8e4f5e60efbe03e8ab791af1a183f569b62fc6f6b8044e2804966cb81277ddbbc1dc374fba3265bd609ea8efd62f5b3 languageName: node linkType: hard @@ -4363,6 +4668,17 @@ __metadata: languageName: node linkType: hard +"define-data-property@npm:^1.1.1": + version: 1.1.1 + resolution: "define-data-property@npm:1.1.1" + dependencies: + get-intrinsic: "npm:^1.2.1" + gopd: "npm:^1.0.1" + has-property-descriptors: "npm:^1.0.0" + checksum: 10/5573c8df96b5857408cad64d9b91b69152e305ce4b06218e5f49b59c6cafdbb90a8bd8a0bb83c7bc67a8d479c04aa697063c9bc28d849b7282f9327586d6bc7b + languageName: node + linkType: hard + "define-lazy-prop@npm:^2.0.0": version: 2.0.0 resolution: "define-lazy-prop@npm:2.0.0" @@ -4495,10 +4811,10 @@ __metadata: languageName: node linkType: hard -"electron-to-chromium@npm:^1.4.648": - version: 1.4.661 - resolution: "electron-to-chromium@npm:1.4.661" - checksum: 10/080312b80991596b0795ddb8f997ead8245026d27d642e34ac80e8670e63c3474957f547f6efb4b86acd79542b31f795ac5542324e601c2efda7f708e032b747 +"electron-to-chromium@npm:^1.4.535": + version: 1.4.565 + resolution: "electron-to-chromium@npm:1.4.565" + checksum: 10/caee9af984e0387ab8bb852c544b0f606c3f20ce26636fb863d121b98be00ad70d86e9f5d8281bc895e0bce8d8243784d276ca1c22041b010ae3df0c9bddf6a7 languageName: node linkType: hard @@ -6636,7 +6952,16 @@ __metadata: languageName: node linkType: hard -"is-typed-array@npm:^1.1.10, is-typed-array@npm:^1.1.12, is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.9": +"is-typed-array@npm:^1.1.10, is-typed-array@npm:^1.1.12, is-typed-array@npm:^1.1.9": + version: 1.1.12 + resolution: "is-typed-array@npm:1.1.12" + dependencies: + which-typed-array: "npm:^1.1.11" + checksum: 10/d953adfd3c41618d5e01b2a10f21817e4cdc9572772fa17211100aebb3811b6e3c2e308a0558cc87d218a30504cb90154b833013437776551bfb70606fb088ca + languageName: node + linkType: hard + +"is-typed-array@npm:^1.1.13": version: 1.1.13 resolution: "is-typed-array@npm:1.1.13" dependencies: @@ -7459,7 +7784,7 @@ __metadata: languageName: node linkType: hard -"lru-cache@npm:^10.0.1, lru-cache@npm:^9.1.1 || ^10.0.0": +"lru-cache@npm:^10.0.1": version: 10.2.0 resolution: "lru-cache@npm:10.2.0" checksum: 10/502ec42c3309c0eae1ce41afca471f831c278566d45a5273a0c51102dee31e0e250a62fa9029c3370988df33a14188a38e682c16143b794de78668de3643e302 @@ -7484,6 +7809,13 @@ __metadata: languageName: node linkType: hard +"lru-cache@npm:^9.1.1 || ^10.0.0": + version: 10.0.1 + resolution: "lru-cache@npm:10.0.1" + checksum: 10/5bb91a97a342a41fd049c3494b44d9e21a7d4843f9284d0a0b26f00bb0e436f1f627d0641c78f88be16b86b4231546c5ee4f284733fb530c7960f0bcd7579026 + languageName: node + linkType: hard + "lz-string@npm:^1.5.0": version: 1.5.0 resolution: "lz-string@npm:1.5.0" @@ -8447,10 +8779,10 @@ __metadata: languageName: node linkType: hard -"node-releases@npm:^2.0.14": - version: 2.0.14 - resolution: "node-releases@npm:2.0.14" - checksum: 10/0f7607ec7db5ef1dc616899a5f24ae90c869b6a54c2d4f36ff6d84a282ab9343c7ff3ca3670fe4669171bb1e8a9b3e286e1ef1c131f09a83d70554f855d54f24 +"node-releases@npm:^2.0.13": + version: 2.0.13 + resolution: "node-releases@npm:2.0.13" + checksum: 10/c9bb813aab2717ff8b3015ecd4c7c5670a5546e9577699a7c84e8d69230cd3b1ce8f863f8e9b50f18b19a5ffa4b9c1a706bbbfe4c378de955fedbab04488a338 languageName: node linkType: hard @@ -10098,6 +10430,18 @@ __metadata: languageName: node linkType: hard +"set-function-length@npm:^1.1.1": + version: 1.1.1 + resolution: "set-function-length@npm:1.1.1" + dependencies: + define-data-property: "npm:^1.1.1" + get-intrinsic: "npm:^1.2.1" + gopd: "npm:^1.0.1" + has-property-descriptors: "npm:^1.0.0" + checksum: 10/745ed1d7dc69a6185e0820082fe73838ab3dfd01e75cce83a41e4c1d68bbf34bc5fb38f32ded542ae0b557536b5d2781594499b5dcd19e7db138e06292a76c7b + languageName: node + linkType: hard + "set-function-length@npm:^1.2.0": version: 1.2.1 resolution: "set-function-length@npm:1.2.1" @@ -11447,6 +11791,19 @@ __metadata: languageName: node linkType: hard +"which-typed-array@npm:^1.1.11": + version: 1.1.13 + resolution: "which-typed-array@npm:1.1.13" + dependencies: + available-typed-arrays: "npm:^1.0.5" + call-bind: "npm:^1.0.4" + for-each: "npm:^0.3.3" + gopd: "npm:^1.0.1" + has-tostringtag: "npm:^1.0.0" + checksum: 10/605e3e10b7118af904a0e79d0d50b95275102f06ec902734024989cd71354929f7acee50de43529d3baf5858e2e4eb32c75e6ebd226c888ad976d8140e4a3e71 + languageName: node + linkType: hard + "which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.9": version: 1.1.14 resolution: "which-typed-array@npm:1.1.14" From 8b8c5cae4715113d0ff933f8e4b50df512090e4f Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Thu, 8 Feb 2024 16:40:44 +0100 Subject: [PATCH 11/11] fix: use ActionButton.Icon as a default type instead of hardcoding --- src/components/common/EditButton.tsx | 7 ++++++- src/components/common/PublishButton.tsx | 5 ++++- src/components/item/header/ItemHeaderActions.tsx | 16 +++++++--------- .../item/settings/ItemSettingsButton.tsx | 2 +- 4 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/components/common/EditButton.tsx b/src/components/common/EditButton.tsx index b6e88a003..d10e445be 100644 --- a/src/components/common/EditButton.tsx +++ b/src/components/common/EditButton.tsx @@ -4,6 +4,7 @@ import { Dialog } from '@mui/material'; import { DiscriminatedItem, ItemType } from '@graasp/sdk'; import { + ActionButton, ActionButtonVariant, EditButton as GraaspEditButton, } from '@graasp/ui'; @@ -29,7 +30,11 @@ type Props = { onClick?: () => void; }; -const EditButton = ({ item, type = 'icon', onClick }: Props): JSX.Element => { +const EditButton = ({ + item, + type = ActionButton.ICON_BUTTON, + onClick, +}: Props): JSX.Element => { const { t: translateBuilder } = useBuilderTranslation(); const [open, setOpen] = useState(false); diff --git a/src/components/common/PublishButton.tsx b/src/components/common/PublishButton.tsx index 5e0ac60b5..4dff7caef 100644 --- a/src/components/common/PublishButton.tsx +++ b/src/components/common/PublishButton.tsx @@ -20,7 +20,10 @@ type Props = { type?: ActionButtonVariant; }; -const PublishButton = ({ itemId, type = 'icon' }: Props): JSX.Element => { +const PublishButton = ({ + itemId, + type = ActionButton.ICON_BUTTON, +}: Props): JSX.Element => { const { t: translateBuilder } = useBuilderTranslation(); const title = translateBuilder(BUILDER.LIBRARY_SETTINGS_BUTTON_TITLE); diff --git a/src/components/item/header/ItemHeaderActions.tsx b/src/components/item/header/ItemHeaderActions.tsx index 4e9fc50e4..9e594754c 100644 --- a/src/components/item/header/ItemHeaderActions.tsx +++ b/src/components/item/header/ItemHeaderActions.tsx @@ -1,4 +1,4 @@ -import { Box, Stack } from '@mui/material'; +import { Stack } from '@mui/material'; import { ItemType, PermissionLevel } from '@graasp/sdk'; import { ChatboxButton, useShortenURLParams } from '@graasp/ui'; @@ -71,14 +71,12 @@ const ItemHeaderActions = (): JSX.Element => { const activeActions = ( <> {showEditButton && } - - - + {shareActions} diff --git a/src/components/item/settings/ItemSettingsButton.tsx b/src/components/item/settings/ItemSettingsButton.tsx index 05a60e808..3a991ac60 100644 --- a/src/components/item/settings/ItemSettingsButton.tsx +++ b/src/components/item/settings/ItemSettingsButton.tsx @@ -24,7 +24,7 @@ type Props = { const ItemSettingsButton = ({ id, - type = 'icon', + type = ActionButton.ICON_BUTTON, title = 'Settings', }: Props): JSX.Element => { const { t: translateBuilder } = useBuilderTranslation();