Merge pull request #1021 from layer5io/update-toolbar

feat: update workspace table toolbar

Author: amitamrutiya

src/custom/Workspaces/DesignTable.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import _ from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
-import { Box, Typography } from '../../base';
+import { Box } from '../../base';
 import { DesignIcon } from '../../icons';
 import { publishCatalogItemSchema } from '../../schemas';
 import { useTheme } from '../../theme';
@@ -19,7 +19,7 @@ import SearchBar from '../SearchBar';
 import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import AssignmentModal from './AssignmentModal';
 import useDesignAssignment from './hooks/useDesignAssignment';
-import { L5EditIcon, TableHeader, TableRightActionHeader } from './styles';
+import { L5EditIcon, TableHeader } from './styles';
 export interface DesignTableProps {
   workspaceId: string;
   isKanvasEnabled: boolean;
@@ -195,13 +195,15 @@ const DesignTable: React.FC<DesignTableProps> = ({
 
   const tableHeaderContent = (
     <TableHeader style={{ padding: '1rem' }}>
-      <Box display={'flex'} alignItems="center" gap={1} width="100%">
-        <DesignIcon height="1.5rem" width="1.5rem" />
-        <Typography variant="body1" fontWeight={'bold'}>
-          Assigned Designs
-        </Typography>
-      </Box>
-      <TableRightActionHeader style={{ marginRight: '0rem' }}>
+      <Box
+        style={{
+          marginRight: '0rem',
+          width: '100%',
+          justifyContent: 'end',
+          display: 'flex',
+          alignItems: 'center'
+        }}
+      >
         <SearchBar
           onSearch={(value) => {
             setDesignSearch(value);
@@ -226,7 +228,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
           disabled={!isAssignAllowed}
           title="Assign Designs"
         />
-      </TableRightActionHeader>
+      </Box>
     </TableHeader>
   );
 

src/custom/Workspaces/WorkspaceViewsTable.tsx

@@ -3,8 +3,8 @@ import { Lock, Public } from '@mui/icons-material';
 import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
 import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
 import React, { useState } from 'react';
-import { Box, Typography } from '../../base';
-import { EnvironmentIcon, ViewIcon } from '../../icons';
+import { Box } from '../../base';
+import { EnvironmentIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { NameDiv } from '../CatalogDesignTable/style';
 import { RESOURCE_TYPES } from '../CatalogDetail/types';
@@ -23,13 +23,7 @@ import { UserTableAvatarInfo } from '../UsersTable';
 import VisibilityChipMenu, { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import AssignmentModal from './AssignmentModal';
 import useViewAssignment from './hooks/useViewsAssignment';
-import {
-  CellStyle,
-  CustomBodyRenderStyle,
-  L5EditIcon,
-  TableHeader,
-  TableRightActionHeader
-} from './styles';
+import { CellStyle, CustomBodyRenderStyle, L5EditIcon, TableHeader } from './styles';
 
 interface ViewsTableProps {
   workspaceId: string;
@@ -337,13 +331,15 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
   return (
     <>
       <TableHeader style={{ padding: '1rem' }}>
-        <Box display={'flex'} alignItems="center" gap={1} width="100%">
-          <ViewIcon height="1.5rem" width="1.5rem" fill={theme.palette.icon.brand} />
-          <Typography variant="body1" fontWeight={'bold'}>
-            Assigned Views
-          </Typography>
-        </Box>
-        <TableRightActionHeader style={{ marginRight: '0rem' }}>
+        <Box
+          style={{
+            marginRight: '0rem',
+            width: '100%',
+            justifyContent: 'end',
+            display: 'flex',
+            alignItems: 'center'
+          }}
+        >
           <SearchBar
             onSearch={(value) => {
               setSearch(value);
@@ -368,7 +364,7 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
             disabled={!isAssignAllowed}
             title="Assign Views"
           />
-        </TableRightActionHeader>
+        </Box>
       </TableHeader>
 
       <ResponsiveDataTable