Fix: add check next to active workspace (#139)

mParticle · Mar 14, 2024 · 786f7af · 786f7af
1 parent eb54749
commit 786f7af
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 12 deletions.
diff --git a/src/assets/svg/check.svg b/src/assets/svg/check.svg
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
@@ -2,6 +2,7 @@ import ChartLineIcon from 'src/assets/svg/chart-line.svg?react'
 import ConnectionsIcon from 'src/assets/svg/connections.svg?react'
 import DatabaseIcon from 'src/assets/svg/database.svg?react'
 import GridIcon from 'src/assets/svg/grid.svg?react'
+import CheckIcon from 'src/assets/svg/check.svg?react'
 import ShieldKeyholeIcon from 'src/assets/svg/shield-keyhole.svg?react'
 import UsersIcon from 'src/assets/svg/users.svg?react'
 import WrenchIcon from 'src/assets/svg/wrench.svg?react'
@@ -27,6 +28,7 @@ export {
   LockIcon,
   MpLogoIcon,
   SearchIcon,
+  CheckIcon,
   ChartLineIcon,
   ConnectionsIcon,
   DatabaseIcon,
@@ -46,4 +48,4 @@ export {
   CircleNodesIcon,
   CloudIcon,
   FolderClosedIcon,
-}
+}
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -104,6 +104,7 @@ export {
   LockIcon,
   MpLogoIcon,
   SearchIcon,
+  CheckIcon,
   ChartLineIcon,
   ConnectionsIcon,
   DatabaseIcon,

diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx
@@ -638,7 +638,7 @@ const indOrgs: INavigationOrg[] = [
         workspaces: [
           {
             id: 'project 2',
-            label: 'Project 2',
+            label: 'Project2Project2Project2Project2Project2Project2',
             isActive: true,
             onClick: () => {
               alert('Selected project 2')
@@ -914,4 +914,4 @@ export const Cortex: Story = {
       alert('going to overview map')
     },
   },
-}
+}
diff --git a/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx b/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx
@@ -9,6 +9,8 @@ import {
   type IWorkspaceSelectorDisplayItem,
   Popover,
 } from 'src/components'
+import { Flex } from 'src/components'
+import { CheckIcon } from 'src/components'
 import React, { type ChangeEvent, useRef, useState } from 'react'
 import { useCallback } from 'react'
 import { useEffect } from 'react'
@@ -184,7 +186,12 @@ export function WorkspaceSelector(props: IWorkspaceSelectorProps) {
             className:
               'workspaceSelector__workspaceName' +
               (workspace.isActive ? ' workspaceSelector__workspaceName--active' : ''),
-            label: workspace.label,
+            label: (
+              <Flex justify="space-between" align="center">
+                {workspace.label}
+                {workspace.isActive && <CheckIcon className="workspaceSelector__activeIcon" />}
+              </Flex>
+            ),
             id: workspace.id,
             key: `${workspace.id}_${workspace.label}`,
             onClick: workspace.onClick,
@@ -248,4 +255,4 @@ export function WorkspaceSelector(props: IWorkspaceSelectorProps) {
       }
     }
   }
-}
+}
diff --git a/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelectorItems.d.ts b/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelectorItems.d.ts
@@ -1,4 +1,5 @@
 import { type MenuItemType } from 'src/components/navigation/Menu/Menu'
+import { type ReactNode } from 'react'
 
 interface IWorkspaceSelectorItem {
   label: string
@@ -23,10 +24,10 @@ export interface INavigationWorkspace extends IWorkspaceSelectorItem {
 export interface IWorkspaceSelectorDisplayItem extends MenuItemType {
   type: 'org' | 'account' | 'workspace'
   className: string
-  label: string
+  label: ReactNode
   id: string
 
   accounts?: INavigationAccount[]
   workspaces?: INavigationWorkspace[]
   isActive?: boolean
-}
+}
diff --git a/src/components/navigation/GlobalNavigation/WorkspaceSelector/workspace-selector.css b/src/components/navigation/GlobalNavigation/WorkspaceSelector/workspace-selector.css
@@ -74,19 +74,29 @@
 .workspaceSelector__workspaceName {
   padding-top: var(--padding-xs);
   padding-bottom: var(--padding-xs);
-  cursor: pointer;
   padding-left: calc(var(--padding-sm) + var(--padding)) !important;
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
 }
 
 .workspaceSelector__workspaceName:hover {
-  background-color: var(--color-bg-text-hover);
+  background-color: var(--control-item-bg-hover);
 }
 
-.workspaceSelector__workspaceName.workspaceSelector__workspaceName--active {
-  border-radius: var(--border-radius-sm);
+.workspaceSelector__workspaceName.workspaceSelector__workspaceName--active,
+.workspaceSelector__workspaceName:active {
   background: var(--control-item-bg-active) !important;
 }
 
+.workspaceSelector__activeIcon {
+  padding-right: var(--padding);
+  padding-left: var(--padding-xs);
+  width: var(--size-sm);
+  min-width: var(--size-sm);
+  height: var(--size-sm);
+}
+
+
 .workspaceSelector__orgName,
 .workspaceSelector__accountName {
   pointer-events: none; /* only workspaces are clickable */
@@ -97,6 +107,7 @@
 .workspaceSelector__workspaceName {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
+  overflow-wrap: anywhere;
 }
 
 .workspaceSelector__signout {
@@ -119,4 +130,4 @@
 
 .workspaceSelector__signoutButton {
   width: 100%;
-}
+}