From 5f68319b1b7d7b789d9876503d889be2df6ac540 Mon Sep 17 00:00:00 2001 From: Cataldo Mazzilli Date: Mon, 5 Aug 2024 15:32:02 +0200 Subject: [PATCH 1/5] fix: update Badge usage Refs: SHELL-233 --- .../module-version-settings.tsx | 8 +------- src/shell/badge-wrap.tsx | 17 ++++++++++------- src/shell/shell-primary-bar.tsx | 19 ++++++++++--------- 3 files changed, 21 insertions(+), 23 deletions(-) diff --git a/src/settings/components/general-settings/module-version-settings.tsx b/src/settings/components/general-settings/module-version-settings.tsx index fbfd22fb..f7b2932b 100644 --- a/src/settings/components/general-settings/module-version-settings.tsx +++ b/src/settings/components/general-settings/module-version-settings.tsx @@ -66,13 +66,7 @@ const ModuleVersionSettings = (): React.JSX.Element => { padding={{ top: 'extrasmall', bottom: 'medium' }} > {app.description} - + diff --git a/src/shell/badge-wrap.tsx b/src/shell/badge-wrap.tsx index 4f7bffbd..91c221f0 100644 --- a/src/shell/badge-wrap.tsx +++ b/src/shell/badge-wrap.tsx @@ -7,24 +7,25 @@ import type { FC } from 'react'; import React, { forwardRef } from 'react'; import { Container, Badge } from '@zextras/carbonio-design-system'; -import type { DefaultTheme } from 'styled-components'; import styled from 'styled-components'; import type { BadgeInfo } from '../types/apps'; -const MiniBadge = styled(Badge)<{ $color?: keyof DefaultTheme['palette'] }>` +const MiniBadge = styled(Badge)` position: absolute; bottom: 25%; right: 25%; transform: translate(30%, 30%); - min-width: 0.75rem; - min-height: 0.75rem; + min-width: 1rem; + min-height: 1rem; pointer-events: none; z-index: 99; - font-size: 0.625rem; - background: ${({ $color, theme }): string => theme.palette[$color ?? 'primary'].regular}; padding: 0.125rem; - color: ${({ theme }): string => theme.palette.gray6.regular}; + + & > div { + font-size: 0.625rem; + line-height: normal; + } `; const BadgeWrap: FC<{ badge: BadgeInfo }> = forwardRef( @@ -33,6 +34,8 @@ const BadgeWrap: FC<{ badge: BadgeInfo }> = forwardRef {badge.show && ( diff --git a/src/shell/shell-primary-bar.tsx b/src/shell/shell-primary-bar.tsx index 17e65388..f8d79a4f 100644 --- a/src/shell/shell-primary-bar.tsx +++ b/src/shell/shell-primary-bar.tsx @@ -6,8 +6,8 @@ import React, { useEffect, useMemo, useRef } from 'react'; -import { Container, IconButton, Row, Tooltip } from '@zextras/carbonio-design-system'; -import { map, isEmpty, trim, filter, sortBy, noop } from 'lodash'; +import { Button, Container, Row, Tooltip } from '@zextras/carbonio-design-system'; +import { map, isEmpty, trim, filter, sortBy } from 'lodash'; import { useHistory, useLocation } from 'react-router-dom'; import styled from 'styled-components'; @@ -20,6 +20,8 @@ import { minimizeBoards, reopenBoards, useBoardStore } from '../store/boards'; import type { PrimaryAccessoryView, PrimaryBarView } from '../types/apps'; import { checkRoute } from '../utility-bar/utils'; +function noop(): void {} + const PrimaryBarContainer = styled(Container)` border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular}; z-index: ${BOARD_CONTAINER_ZINDEX + 1}; @@ -30,8 +32,8 @@ const ToggleBoardIcon = (): React.JSX.Element | null => { return isEmpty(boards) ? null : ( - {typeof view.component === 'string' ? ( - ) : ( @@ -73,10 +74,10 @@ const PrimaryBarAccessoryElement = ({ view }: PrimaryBarAccessoryItemProps): Rea {typeof view.component === 'string' ? ( - From 47658781ac5bf1232792904ffb92abf6a200766a Mon Sep 17 00:00:00 2001 From: Cataldo Mazzilli Date: Mon, 5 Aug 2024 15:44:14 +0200 Subject: [PATCH 2/5] fix: apply sonar suggestions --- .../module-version-settings.tsx | 60 +++++++++---------- src/shell/shell-primary-bar.tsx | 4 +- 2 files changed, 31 insertions(+), 33 deletions(-) diff --git a/src/settings/components/general-settings/module-version-settings.tsx b/src/settings/components/general-settings/module-version-settings.tsx index f7b2932b..53cfb5f0 100644 --- a/src/settings/components/general-settings/module-version-settings.tsx +++ b/src/settings/components/general-settings/module-version-settings.tsx @@ -13,8 +13,7 @@ import { Divider, FormSubSection, Text, - Tooltip, - useTheme + Tooltip } from '@zextras/carbonio-design-system'; import { map } from 'lodash'; @@ -27,7 +26,6 @@ import { versionsSubSection } from '../../general-settings-sub-sections'; const ModuleVersionSettings = (): React.JSX.Element => { const apps = useAppList(); const t = getT(); - const theme = useTheme(); const copyToClipboard = useCallback>((e) => { e.preventDefault(); @@ -43,36 +41,34 @@ const ModuleVersionSettings = (): React.JSX.Element => { const sectionTitle = useMemo(() => versionsSubSection(t), [t]); return ( - <> - - {map(filteredList, (app: CarbonioModule) => ( - - - {app.display} - - - Version: {app.version} - - - - - {app.description} - - - + + {map(filteredList, (app: CarbonioModule) => ( + + + {app.display} + + + Version: {app.version} + + - ))} - - + + {app.description} + + + + + ))} + ); }; diff --git a/src/shell/shell-primary-bar.tsx b/src/shell/shell-primary-bar.tsx index f8d79a4f..a99a0622 100644 --- a/src/shell/shell-primary-bar.tsx +++ b/src/shell/shell-primary-bar.tsx @@ -20,7 +20,9 @@ import { minimizeBoards, reopenBoards, useBoardStore } from '../store/boards'; import type { PrimaryAccessoryView, PrimaryBarView } from '../types/apps'; import { checkRoute } from '../utility-bar/utils'; -function noop(): void {} +function noop(): void { + return undefined; +} const PrimaryBarContainer = styled(Container)` border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular}; From 530c6f977e864dfd4fa7e9057c51335d0f8f19c7 Mon Sep 17 00:00:00 2001 From: Cataldo Mazzilli Date: Mon, 12 Aug 2024 15:59:03 +0200 Subject: [PATCH 3/5] feat: enhance primary bar component Refs: SHELL-219 --- api-extractor/carbonio-shell-ui.api.md | 20 +++++++---------- src/boot/app/app-direct-exports.ts | 1 - src/shell/badge-wrap.tsx | 30 ++++++++++++++++++-------- src/shell/shell-primary-bar.test.tsx | 21 ++++++++++++++++++ src/store/app/store.ts | 14 ------------ src/store/app/utils.tsx | 2 +- src/types/apps/index.ts | 2 +- 7 files changed, 52 insertions(+), 38 deletions(-) diff --git a/api-extractor/carbonio-shell-ui.api.md b/api-extractor/carbonio-shell-ui.api.md index 99452555..4cd3412e 100644 --- a/api-extractor/carbonio-shell-ui.api.md +++ b/api-extractor/carbonio-shell-ui.api.md @@ -233,7 +233,6 @@ type AppActions = { setRouteVisibility: (id: string, visible: boolean) => void; removeRoute: (id: string) => void; updatePrimaryBadge: (badge: Partial, id: string) => void; - updateUtilityBadge: (badge: Partial, id: string) => void; addBoardView: (data: BoardView) => string; removeBoardView: (id: string) => void; addSettingsView: (data: SettingsView) => string; @@ -317,6 +316,7 @@ export type AudioNotificationConfig = { // @public (undocumented) export type BadgeInfo = { show: boolean; + icon?: string; count?: number; showCount?: boolean; color?: keyof DefaultTheme['palette']; @@ -1523,9 +1523,6 @@ type UpdateSettingsParams = { }>; }; -// @public (undocumented) -export const updateUtilityBadge: (badge: Partial, id: string) => void; - // @public export const upsertApp: (app: Pick) => void; @@ -1666,7 +1663,6 @@ export type UtilityBarComponentProps = { type UtilityView = CarbonioAccessoryView & { button: string | ComponentType; component: ComponentType; - badge: BadgeInfo; label: string; }; @@ -1723,12 +1719,12 @@ interface ZimletProp { // lib/settings/components/settings-header.d.ts:5:5 - (ae-forgotten-export) The symbol "RouteLeavingGuardProps" needs to be exported by the entry point lib.d.ts // lib/store/app/store.d.ts:23:5 - (ae-forgotten-export) The symbol "CarbonioModule" needs to be exported by the entry point lib.d.ts // lib/store/app/store.d.ts:25:5 - (ae-forgotten-export) The symbol "AppRouteDescriptor" needs to be exported by the entry point lib.d.ts -// lib/store/app/store.d.ts:30:5 - (ae-forgotten-export) The symbol "BoardView" needs to be exported by the entry point lib.d.ts -// lib/store/app/store.d.ts:32:5 - (ae-forgotten-export) The symbol "SettingsView" needs to be exported by the entry point lib.d.ts -// lib/store/app/store.d.ts:34:5 - (ae-forgotten-export) The symbol "SearchView" needs to be exported by the entry point lib.d.ts -// lib/store/app/store.d.ts:36:5 - (ae-forgotten-export) The symbol "UtilityView" needs to be exported by the entry point lib.d.ts -// lib/store/app/store.d.ts:38:5 - (ae-forgotten-export) The symbol "PrimaryAccessoryView" needs to be exported by the entry point lib.d.ts -// lib/store/app/store.d.ts:40:5 - (ae-forgotten-export) The symbol "SecondaryAccessoryView" needs to be exported by the entry point lib.d.ts +// lib/store/app/store.d.ts:29:5 - (ae-forgotten-export) The symbol "BoardView" needs to be exported by the entry point lib.d.ts +// lib/store/app/store.d.ts:31:5 - (ae-forgotten-export) The symbol "SettingsView" needs to be exported by the entry point lib.d.ts +// lib/store/app/store.d.ts:33:5 - (ae-forgotten-export) The symbol "SearchView" needs to be exported by the entry point lib.d.ts +// lib/store/app/store.d.ts:35:5 - (ae-forgotten-export) The symbol "UtilityView" needs to be exported by the entry point lib.d.ts +// lib/store/app/store.d.ts:37:5 - (ae-forgotten-export) The symbol "PrimaryAccessoryView" needs to be exported by the entry point lib.d.ts +// lib/store/app/store.d.ts:39:5 - (ae-forgotten-export) The symbol "SecondaryAccessoryView" needs to be exported by the entry point lib.d.ts // lib/store/context-bridge.d.ts:4:5 - (ae-forgotten-export) The symbol "PackageDependentFunction" needs to be exported by the entry point lib.d.ts // lib/store/context-bridge.d.ts:5:5 - (ae-forgotten-export) The symbol "AnyFunction" needs to be exported by the entry point lib.d.ts // lib/store/integrations/store.d.ts:26:9 - (ae-forgotten-export) The symbol "Action_2" needs to be exported by the entry point lib.d.ts @@ -1741,7 +1737,7 @@ interface ZimletProp { // lib/types/account/index.d.ts:138:5 - (ae-forgotten-export) The symbol "AccountRightTargetEmail" needs to be exported by the entry point lib.d.ts // lib/types/account/index.d.ts:143:9 - (ae-forgotten-export) The symbol "AccountRightName" needs to be exported by the entry point lib.d.ts // lib/types/account/index.d.ts:144:9 - (ae-forgotten-export) The symbol "AccountRightTarget" needs to be exported by the entry point lib.d.ts -// lib/types/apps/index.d.ts:66:5 - (ae-forgotten-export) The symbol "PanelMode" needs to be exported by the entry point lib.d.ts +// lib/types/apps/index.d.ts:67:5 - (ae-forgotten-export) The symbol "PanelMode" needs to be exported by the entry point lib.d.ts // lib/types/misc/index.d.ts:85:9 - (ae-forgotten-export) The symbol "SoapPolicy" needs to be exported by the entry point lib.d.ts // lib/types/misc/index.d.ts:104:5 - (ae-forgotten-export) The symbol "FolderView" needs to be exported by the entry point lib.d.ts // lib/types/misc/index.d.ts:120:5 - (ae-forgotten-export) The symbol "Meta" needs to be exported by the entry point lib.d.ts diff --git a/src/boot/app/app-direct-exports.ts b/src/boot/app/app-direct-exports.ts index f9d26ad8..f3fcf472 100644 --- a/src/boot/app/app-direct-exports.ts +++ b/src/boot/app/app-direct-exports.ts @@ -109,7 +109,6 @@ export { useLocalStorage } from '../../shell/hooks/useLocalStorage'; export const { updatePrimaryBadge, - updateUtilityBadge, setRouteVisibility, removeRoute, removeBoardView, diff --git a/src/shell/badge-wrap.tsx b/src/shell/badge-wrap.tsx index 91c221f0..464879bf 100644 --- a/src/shell/badge-wrap.tsx +++ b/src/shell/badge-wrap.tsx @@ -6,7 +6,7 @@ import type { FC } from 'react'; import React, { forwardRef } from 'react'; -import { Container, Badge } from '@zextras/carbonio-design-system'; +import { Container, Badge, Icon } from '@zextras/carbonio-design-system'; import styled from 'styled-components'; import type { BadgeInfo } from '../types/apps'; @@ -28,18 +28,30 @@ const MiniBadge = styled(Badge)` } `; +const MiniIcon = styled(Icon)` + position: absolute; + bottom: 25%; + right: 25%; + transform: translate(30%, 30%); + user-select: none; + cursor: pointer; + pointer-events: none; + z-index: 99; +`; + const BadgeWrap: FC<{ badge: BadgeInfo }> = forwardRef( function BadgeWrapFn({ badge, children }, ref): JSX.Element { return ( - {badge.show && ( - - )} + {(badge.show && badge.icon && ) || + (badge.show && ( + + ))} {children} ); diff --git a/src/shell/shell-primary-bar.test.tsx b/src/shell/shell-primary-bar.test.tsx index 33971fa8..8906997a 100644 --- a/src/shell/shell-primary-bar.test.tsx +++ b/src/shell/shell-primary-bar.test.tsx @@ -538,5 +538,26 @@ describe('Shell primary bar', () => { expect(counterBadge).toBeVisible(); expect(counterBadge).toHaveTextContent(''); }); + + it('should render icon instead of badge when icon is provided in badge info', () => { + const primaryBarViews: PrimaryBarView[] = [ + { + id: 'pbv-1', + app: 'app1', + label: 'App One', + route: 'app1', + position: 1, + badge: { show: true, icon: ICONS.search, showCount: true }, + visible: true, + component: 'People' + } + ]; + useAppStore.setState((state) => ({ + views: { ...state.views, primaryBar: primaryBarViews } + })); + setup(); + expect(screen.queryByTestId('badge-counter')).not.toBeInTheDocument(); + expect(screen.getByTestId(`icon: ${ICONS.search}`)).toBeVisible(); + }); }); }); diff --git a/src/store/app/store.ts b/src/store/app/store.ts index 9e1efe40..8933589d 100644 --- a/src/store/app/store.ts +++ b/src/store/app/store.ts @@ -57,7 +57,6 @@ export type AppActions = { setRouteVisibility: (id: string, visible: boolean) => void; removeRoute: (id: string) => void; updatePrimaryBadge: (badge: Partial, id: string) => void; - updateUtilityBadge: (badge: Partial, id: string) => void; addBoardView: (data: BoardView) => string; removeBoardView: (id: string) => void; addSettingsView: (data: SettingsView) => string; @@ -377,18 +376,5 @@ export const useAppStore = create()((set, get) => ({ } }) ); - }, - updateUtilityBadge: (badge, id): void => { - set( - produce((state) => { - const idx = findIndex(state.views.utilityBar, (bar) => bar.id === id); - if (idx >= 0) { - state.views.utilityBar[idx].badge = { - ...state.views.utilityBar[idx].badge, - ...badge - }; - } - }) - ); } })); diff --git a/src/store/app/utils.tsx b/src/store/app/utils.tsx index eb7a9ae5..2f7e06a7 100644 --- a/src/store/app/utils.tsx +++ b/src/store/app/utils.tsx @@ -39,6 +39,7 @@ export const normalizeApp = (app: Partial): CarbonioModule => ({ const FallbackView: FC = () =>

Missing Component

; export const normalizeBadgeInfo = (badge: Partial): BadgeInfo => ({ + ...badge, show: badge.show ?? false, count: badge.count ?? 0, showCount: badge.showCount ?? false, @@ -103,7 +104,6 @@ export const normalizeUtilityView = ( blacklistRoutes: data?.blacklistRoutes, component: data?.component ?? FallbackView, button: data?.button ?? 'Cube', - badge: normalizeBadgeInfo(data?.badge ?? {}), position: data?.position ?? app.priority, label: data?.label ?? app.display }); diff --git a/src/types/apps/index.ts b/src/types/apps/index.ts index 807a87e3..afeb7e11 100644 --- a/src/types/apps/index.ts +++ b/src/types/apps/index.ts @@ -35,6 +35,7 @@ export type AppRoute = { export type BadgeInfo = { show: boolean; + icon?: string; count?: number; showCount?: boolean; color?: keyof DefaultTheme['palette']; @@ -87,7 +88,6 @@ export type BoardView = Omit, 'route'>; export type UtilityView = CarbonioAccessoryView & { button: string | ComponentType; component: ComponentType; - badge: BadgeInfo; label: string; }; export type SettingsSubSection = { label: string; id: string }; From fbc7b97ce0ea275b5b1de41fe1f492606ac59c06 Mon Sep 17 00:00:00 2001 From: Cataldo Mazzilli Date: Fri, 16 Aug 2024 12:01:15 +0200 Subject: [PATCH 4/5] fix: remove duplication --- src/shell/badge-wrap.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/shell/badge-wrap.tsx b/src/shell/badge-wrap.tsx index 2ff2464b..464879bf 100644 --- a/src/shell/badge-wrap.tsx +++ b/src/shell/badge-wrap.tsx @@ -26,11 +26,6 @@ const MiniBadge = styled(Badge)` font-size: 0.625rem; line-height: normal; } - - & > div { - font-size: 0.625rem; - line-height: normal; - } `; const MiniIcon = styled(Icon)` From 718df68c10f899776b93b389c0f47be307ce3231 Mon Sep 17 00:00:00 2001 From: Cataldo Mazzilli Date: Tue, 20 Aug 2024 09:35:30 +0200 Subject: [PATCH 5/5] fix: apply review hints --- api-extractor/carbonio-shell-ui.api.md | 3 ++- src/shell/shell-primary-bar.tsx | 2 +- src/types/apps/index.ts | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/api-extractor/carbonio-shell-ui.api.md b/api-extractor/carbonio-shell-ui.api.md index cd07bdd4..2db2e408 100644 --- a/api-extractor/carbonio-shell-ui.api.md +++ b/api-extractor/carbonio-shell-ui.api.md @@ -1016,6 +1016,7 @@ export type PrimaryAccessoryViewProps = {}; // @public (undocumented) export type PrimaryBarComponentProps = { active: boolean; + onClick: () => void; }; // @public (undocumented) @@ -1737,7 +1738,7 @@ interface ZimletProp { // lib/types/account/index.d.ts:138:5 - (ae-forgotten-export) The symbol "AccountRightTargetEmail" needs to be exported by the entry point lib.d.ts // lib/types/account/index.d.ts:143:9 - (ae-forgotten-export) The symbol "AccountRightName" needs to be exported by the entry point lib.d.ts // lib/types/account/index.d.ts:144:9 - (ae-forgotten-export) The symbol "AccountRightTarget" needs to be exported by the entry point lib.d.ts -// lib/types/apps/index.d.ts:67:5 - (ae-forgotten-export) The symbol "PanelMode" needs to be exported by the entry point lib.d.ts +// lib/types/apps/index.d.ts:68:5 - (ae-forgotten-export) The symbol "PanelMode" needs to be exported by the entry point lib.d.ts // lib/types/misc/index.d.ts:75:9 - (ae-forgotten-export) The symbol "SoapPolicy" needs to be exported by the entry point lib.d.ts // lib/types/misc/index.d.ts:94:5 - (ae-forgotten-export) The symbol "FolderView" needs to be exported by the entry point lib.d.ts // lib/types/misc/index.d.ts:110:5 - (ae-forgotten-export) The symbol "Meta" needs to be exported by the entry point lib.d.ts diff --git a/src/shell/shell-primary-bar.tsx b/src/shell/shell-primary-bar.tsx index a99a0622..3df79279 100644 --- a/src/shell/shell-primary-bar.tsx +++ b/src/shell/shell-primary-bar.tsx @@ -66,7 +66,7 @@ const PrimaryBarElement = ({ view, active, onClick }: PrimaryBarItemProps): Reac size="large" /> ) : ( - + )} diff --git a/src/types/apps/index.ts b/src/types/apps/index.ts index afeb7e11..b2515f35 100644 --- a/src/types/apps/index.ts +++ b/src/types/apps/index.ts @@ -56,7 +56,7 @@ export type CarbonioAccessoryView

= { position: number; component: ComponentType

; }; -export type PrimaryBarComponentProps = { active: boolean }; +export type PrimaryBarComponentProps = { active: boolean; onClick: () => void }; export type SecondaryBarComponentProps = { expanded: boolean }; export type AppViewComponentProps = {}; export type BoardViewComponentProps = {};