feat: add some tooltip and launch icon

Signed-off-by: amitamrutiya <[email protected]>

Author: amitamrutiya

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -3,7 +3,7 @@ import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
 import { PLAYGROUND_MODES } from '../../constants/constants';
 import { ChainIcon, CopyIcon, KanvasIcon, PublishIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
-import { slugify } from '../CatalogDetail/helper';
+import { downloadPattern, slugify } from '../CatalogDetail/helper';
 import { RESOURCE_TYPES } from '../CatalogDetail/types';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
@@ -25,7 +25,8 @@ interface ColumnConfigProps {
   handleCopyUrl: (type: string, name: string, id: string) => void;
   handleClone: (name: string, id: string) => void;
   handleShowDetails: (designId: string, designName: string) => void;
-  handleDownload: (design: Pattern) => void;
+  handleDownload?: (design: Pattern) => void;
+  getDownloadUrl?: (id: string) => string;
   isDownloadAllowed: boolean;
   isCopyLinkAllowed: boolean;
   isDeleteAllowed: boolean;
@@ -55,6 +56,7 @@ export const createDesignsColumnsConfig = ({
   handleCopyUrl,
   handleClone,
   handleShowDetails,
+  getDownloadUrl,
   handleDownload,
   isUnpublishAllowed,
   isCopyLinkAllowed,
@@ -182,8 +184,9 @@ export const createDesignsColumnsConfig = ({
           const actionsList = [
             {
               title: 'Download',
-              // onClick: () => downloadPattern(rowData.id, rowData.name, getDownloadUrl),
-              onClick: () => handleDownload(rowData),
+              onClick: getDownloadUrl
+                ? () => downloadPattern(rowData.id, rowData.name, getDownloadUrl)
+                : () => handleDownload && handleDownload(rowData),
               disabled: !isDownloadAllowed,
               icon: <Download width={24} height={24} fill={theme?.palette.icon.secondary} />
             },

src/custom/CatalogDesignTable/style.tsx

@@ -19,7 +19,7 @@ interface DeleteIconProps {
 }
 
 export const L5DeleteIcon = styled(DeleteIcon)<DeleteIconProps>(({ disabled, bulk, theme }) => ({
-  color: disabled ? theme.palette.icon.disabled : theme.palette.text.secondary,
+  color: disabled ? theme.palette.icon.disabled : theme.palette.text.default,
   cursor: disabled ? 'not-allowed' : 'pointer',
   width: bulk ? '32' : '28.8',
   height: bulk ? '32' : '28.8',

src/custom/Workspaces/DesignTable.tsx

@@ -40,13 +40,14 @@ export interface DesignTableProps {
   handlePublish: (publishModal: PublishModalState, data: any) => void;
   publishModalHandler: any;
   handleUnpublishModal: (design: Pattern, modalRef: React.RefObject<any>) => void;
-  handleDownload: (design: Pattern) => void;
+  handleDownload?: (design: Pattern) => void;
   handleBulkUnpublishModal: (
     selected: any,
     designs: Pattern[],
     modalRef: React.RefObject<any>
   ) => void;
   handleShowDetails: (designId: string, designName: string) => void;
+  getDownloadUrl?: (id: string) => string;
   GenericRJSFModal: any;
   isDownloadAllowed: boolean;
   isCopyLinkAllowed: boolean;
@@ -80,6 +81,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
   handleCopyUrl,
   handlePublish,
   handleDownload,
+  getDownloadUrl,
   handleShowDetails,
   handleUnpublishModal,
   handleWorkspaceDesignDeleteModal,
@@ -123,6 +125,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
     handleClone,
     handleShowDetails,
     handleDownload,
+    getDownloadUrl,
     isCopyLinkAllowed,
     isDeleteAllowed,
     isDownloadAllowed,
@@ -206,7 +209,11 @@ const DesignTable: React.FC<DesignTableProps> = ({
           }}
           id={'catalog-table'}
         />
-        <L5EditIcon onClick={designAssignment.handleAssignModal} disabled={!isAssignAllowed} />
+        <L5EditIcon
+          onClick={designAssignment.handleAssignModal}
+          disabled={!isAssignAllowed}
+          title="Assign Designs"
+        />
       </TableRightActionHeader>
     </TableHeader>
   );

src/custom/Workspaces/EnvironmentTable.tsx

@@ -278,6 +278,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
               <L5EditIcon
                 onClick={environmentAssignment.handleAssignModal}
                 disabled={!isAssignAllowed}
+                title="Assign Environments"
               />
             </TableRightActionHeader>
           </TableHeader>

src/custom/Workspaces/WorkspaceTeamsTable.tsx

@@ -1,9 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { Launch } from '@mui/icons-material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useState } from 'react';
-import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base';
+import { Accordion, AccordionDetails, AccordionSummary, IconButton, Typography } from '../../base';
+import { CLOUD_URL } from '../../constants/constants';
 import { TeamsIcon } from '../../icons';
+import { useTheme } from '../../theme';
 import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl';
+import { CustomTooltip } from '../CustomTooltip';
 import SearchBar from '../SearchBar';
 import { TeamTableConfiguration } from '../TeamTable';
 import TeamTable from '../TeamTable/TeamTable';
@@ -102,7 +106,7 @@ const TeamsTable: React.FC<TeamsTableProps> = ({
     isDeleteTeamAllowed: isDeleteTeamAllowed,
     setSearch
   });
-
+  const theme = useTheme();
   return (
     <>
       <Accordion expanded={expanded} onChange={handleAccordionChange} style={{ margin: 0 }}>
@@ -137,7 +141,19 @@ const TeamsTable: React.FC<TeamsTableProps> = ({
               <L5EditIcon
                 onClick={teamAssignment.handleAssignModal}
                 disabled={!isAssignTeamAllowed}
+                title="Assign Teams"
               />
+              <CustomTooltip title={'Manage Teams'}>
+                <div>
+                  <IconButton
+                    onClick={() => {
+                      window.open(`${CLOUD_URL}/identity/teams`, '_blank');
+                    }}
+                  >
+                    <Launch />
+                  </IconButton>
+                </div>
+              </CustomTooltip>
             </TableRightActionHeader>
           </TableHeader>
         </AccordionSummary>
@@ -163,7 +179,14 @@ const TeamsTable: React.FC<TeamsTableProps> = ({
         open={teamAssignment.assignModal}
         onClose={teamAssignment.handleAssignModalClose}
         title={`Assign Teams to ${workspaceName}`}
-        headerIcon={<TeamsIcon height="40" width="40" primaryFill={'white'} fill={'gray'} />}
+        headerIcon={
+          <TeamsIcon
+            height="40"
+            width="40"
+            primaryFill={theme.palette.common.white}
+            fill={theme.palette.icon.disabled}
+          />
+        }
         name="Teams"
         assignableData={teamAssignment.data}
         handleAssignedData={teamAssignment.handleAssignData}
@@ -173,7 +196,7 @@ const TeamsTable: React.FC<TeamsTableProps> = ({
             height="5rem"
             width="5rem"
             primaryFill={'#808080'}
-            secondaryFill={'gray'}
+            secondaryFill={theme.palette.icon.disabled}
             fill={'#808080'}
           />
         }

src/custom/Workspaces/WorkspaceViewsTable.tsx

@@ -335,7 +335,11 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
                 }}
                 id={'views-table'}
               />
-              <L5EditIcon onClick={viewAssignment.handleAssignModal} disabled={!isAssignAllowed} />
+              <L5EditIcon
+                onClick={viewAssignment.handleAssignModal}
+                disabled={!isAssignAllowed}
+                title="Assign Views"
+              />
             </TableRightActionHeader>
           </TableHeader>
         </AccordionSummary>

src/custom/Workspaces/styles.tsx

@@ -14,6 +14,7 @@ interface ExtendedEditIconProps {
   disabled?: boolean;
   bulk?: boolean;
   style?: React.CSSProperties;
+  title?: string;
 }
 
 export const TableHeader = styled('div')({
@@ -292,10 +293,16 @@ export const L5DeleteIcon = ({
   );
 };
 
-export const L5EditIcon = ({ onClick, disabled, bulk, style }: ExtendedEditIconProps) => {
+export const L5EditIcon = ({
+  onClick,
+  disabled,
+  bulk,
+  style,
+  title = 'Edit'
+}: ExtendedEditIconProps) => {
   const theme = useTheme();
   return (
-    <CustomTooltip title="Edit" arrow>
+    <CustomTooltip title={title} arrow>
       <div>
         <IconButton
           onClick={onClick}