feat: update workspace table toolbar

Signed-off-by: Amit Amrutiya <[email protected]>

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';
@@ -18,7 +18,7 @@ import PromptComponent from '../Prompt';
 import SearchBar from '../SearchBar';
 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;
@@ -188,13 +188,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);
@@ -219,7 +221,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
           disabled={!isAssignAllowed}
           title="Assign Designs"
         />
-      </TableRightActionHeader>
+      </Box>
     </TableHeader>
   );
 

src/custom/Workspaces/WorkspaceViewsTable.tsx

@@ -2,8 +2,8 @@
 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';
@@ -22,13 +22,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;
@@ -311,13 +305,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);
@@ -342,7 +338,7 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
             disabled={!isAssignAllowed}
             title="Assign Views"
           />
-        </TableRightActionHeader>
+        </Box>
       </TableHeader>
 
       <ResponsiveDataTable