fix: types

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

src/constants/constants.ts

@@ -9,5 +9,5 @@ export const DEFAULT_STROKE_WIDTH = '2';
 export const CLOUD_URL = 'https://cloud.layer5.io';
 export const PLAYGROUND_MODES = {
   DESIGNER: 'design',
-  VISUALIZER: 'visualize'
+  OPERATOR: 'operator'
 } as const;

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import _ from 'lodash';
+import { MUIDataTableColumn } from 'mui-datatables';
 import { useCallback, useMemo, useRef } from 'react';
 import { PublishIcon } from '../../icons';
 import { CHARCOAL, useTheme } from '../../theme';
@@ -14,7 +15,7 @@ import UnpublishTooltipIcon from './UnpublishTooltipIcon';
 interface CatalogDesignsTableProps {
   patterns: Pattern[];
   filter: any;
-  columns: Array<any>;
+  columns: MUIDataTableColumn[];
   totalCount: number;
   sortOrder: string;
   setSortOrder: (order: string) => void;
@@ -63,7 +64,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
     return new Date(date).toLocaleDateString('en-US', dateOptions);
   }, []);
 
-  const processedColumns = useMemo(() => {
+  const processedColumns: MUIDataTableColumn[] = useMemo(() => {
     return columns.map((col) => {
       const newCol = { ...col };
       if (!newCol.options) newCol.options = {};

src/custom/CatalogDesignTable/helper.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export const getColumnValue = (tableMeta: any, targetColumn: string): any => {
+  const rowData = tableMeta.tableData[tableMeta.rowIndex];
+  return (rowData as any)[targetColumn] || '';
+};

src/custom/ResponsiveDataTable.tsx

@@ -1,5 +1,5 @@
 import { Theme, ThemeProvider, createTheme, styled } from '@mui/material';
-import MUIDataTable from 'mui-datatables';
+import MUIDataTable, { MUIDataTableColumn } from 'mui-datatables';
 import React, { useCallback } from 'react';
 import { Checkbox, Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
 import { ShareIcon } from '../icons';
@@ -278,10 +278,10 @@ export interface Column {
 
 export interface ResponsiveDataTableProps {
   data: string[][];
-  columns: Column[];
+  columns: MUIDataTableColumn[];
   options?: object;
-  tableCols?: Column[];
-  updateCols?: ((columns: Column[]) => void) | undefined;
+  tableCols?: MUIDataTableColumn[];
+  updateCols?: ((columns: MUIDataTableColumn[]) => void) | undefined;
   columnVisibility: Record<string, boolean> | undefined;
   theme?: object;
   colViews?: ColView[];

src/custom/TeamTable/TeamTable.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Grid, TableCell } from '@mui/material';
+import { MUIDataTableColumn } from 'mui-datatables';
 import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary.js';
 import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/index.js';
 import ResponsiveDataTable from '../ResponsiveDataTable.js';
@@ -11,7 +12,7 @@ interface TeamTableProps {
   columnVisibility: Record<string, boolean>;
   colViews: ColView[];
   tableCols: any[];
-  columns: any[];
+  columns: MUIDataTableColumn[];
   updateCols: (cols: any) => void;
   isRemoveFromTeamAllowed: boolean;
   org_id: string;

src/custom/TeamTable/TeamTableConfiguration.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
 import { useState } from 'react';
 import { DeleteIcon, EditIcon } from '../../icons';
 import LogoutIcon from '../../icons/Logout/LogOutIcon';
@@ -17,11 +18,12 @@ import {
   TableTopIcon,
   TableTopIconsWrapper
 } from '../Workspaces/styles';
+import { Team } from '../Workspaces/types';
 
 // currently team does not support bulk team delete
 interface DeleteTeamsBtnProps {
   selected: any;
-  teams: any[];
+  teams: Team[];
   deleteTeamsModalHandler: (deleteTeams: { team_ids: string[]; team_names: string[] }) => void;
 }
 
@@ -55,7 +57,7 @@ function DeleteTeamsBtn({ selected, teams, deleteTeamsModalHandler }: DeleteTeam
 }
 
 interface TeamTableConfigurationProps {
-  teams: any[];
+  teams: Team[];
   count: number;
   page: number;
   pageSize: number;
@@ -65,9 +67,9 @@ interface TeamTableConfigurationProps {
   setSortOrder: (sortOrder: string) => void;
   bulkSelect: boolean;
   setBulkSelect: (bulkSelect: boolean) => void;
-  handleTeamView: (ev: any, rowData: any) => void;
-  handleDeleteTeam: (ev: any, rowData: any) => void;
-  handleleaveTeam: (ev: any, rowData: any) => void;
+  handleTeamView: (ev: React.MouseEvent, rowData: any) => void;
+  handleDeleteTeam: (ev: React.MouseEvent, rowData: any) => void;
+  handleleaveTeam: (ev: React.MouseEvent, rowData: any) => void;
   handleRemoveTeamFromWorkspace?: (rowData: any) => void;
   teamId: string;
   workspace?: boolean;
@@ -114,15 +116,15 @@ export default function TeamTableConfiguration({
     ['actions', 'xs']
   ];
 
-  const columns = [
+  const columns: MUIDataTableColumn[] = [
     {
       name: 'id',
       label: 'ID',
       options: {
         filter: false,
         sort: false,
         searchable: false,
-        customBodyRender: (value: any) => <FormatId id={value} />
+        customBodyRender: (value: string) => <FormatId id={value} />
       }
     },
     {
@@ -141,7 +143,7 @@ export default function TeamTableConfiguration({
         filter: false,
         sort: true,
         searchable: false,
-        customBodyRender: (value: any) => <ConditionalTooltip value={value} maxLength={30} />
+        customBodyRender: (value: string) => <ConditionalTooltip value={value} maxLength={30} />
       }
     },
     {
@@ -171,10 +173,10 @@ export default function TeamTableConfiguration({
         sort: true,
         searchable: false,
         sortDescFirst: true,
-        customBodyRender: (v: any) => JSON.stringify(v),
+        customBodyRender: (v: string) => JSON.stringify(v),
         filterOptions: {
           names: ['Deleted', 'Not Deleted'],
-          logic: (val: any, filters: any) => {
+          logic: (val: string, filters: any) => {
             if (val != 'NA' && filters.indexOf('Deleted') >= 0) return true;
             else if (val == 'NA' && filters.indexOf('Not Deleted') >= 0) return true;
             return false;
@@ -190,7 +192,7 @@ export default function TeamTableConfiguration({
         filter: false,
         sort: false,
         searchable: false,
-        customBodyRender: (_: any, tableMeta: any) => {
+        customBodyRender: (_: string, tableMeta: MUIDataTableMeta) => {
           if (bulkSelect || tableMeta.rowData[4].Valid) {
             return (
               <TableIconsDisabledContainer>
@@ -251,7 +253,7 @@ export default function TeamTableConfiguration({
                   <TooltipIcon
                     id={`delete_team-${tableMeta.rowIndex}`}
                     title={'Delete Team'}
-                    onClick={(ev: any) => {
+                    onClick={(ev: React.MouseEvent) => {
                       isDeleteTeamAllowed && handleDeleteTeam(ev, tableMeta.rowData);
                     }}
                     iconType="delete"

src/custom/UsersTable/UsersTable.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
 import { useRef, useState } from 'react';
 import { Avatar, Box, Grid, Tooltip, Typography } from '../../base';
 import { EditIcon, PersonIcon } from '../../icons';
@@ -18,7 +19,7 @@ import { parseDeletionTimestamp } from '../Workspaces/helper';
 import { TableIconsContainer, TableIconsDisabledContainer } from '../Workspaces/styles';
 
 interface ActionButtonsProps {
-  tableMeta: any;
+  tableMeta: MUIDataTableMeta;
   isRemoveFromTeamAllowed: boolean;
   handleRemoveFromTeam: (data: any[]) => () => void;
 }
@@ -121,7 +122,7 @@ const UsersTable: React.FC<UsersTableProps> = ({
     }
   };
 
-  const getValidColumnValue = (rowData: any, columnName: string, columns: any) => {
+  const getValidColumnValue = (rowData: any, columnName: string, columns: MUIDataTableColumn[]) => {
     const columnIndex = columns.findIndex((column: any) => column.name === columnName);
     return rowData[columnIndex];
   };
@@ -233,7 +234,7 @@ const UsersTable: React.FC<UsersTableProps> = ({
     // ["actions", "xs"]
   ];
 
-  const columns: any[] = [
+  const columns: MUIDataTableColumn[] = [
     {
       name: 'user_id',
       label: 'User ID',
@@ -250,7 +251,7 @@ const UsersTable: React.FC<UsersTableProps> = ({
         filter: false,
         sort: false,
         searchable: false,
-        customBodyRender: (value: string, tableMeta: any) => (
+        customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => (
           <Box sx={{ '& > img': { mr: 2, flexShrink: 0 } }}>
             <Grid container alignItems="center">
               <Grid item>
@@ -295,7 +296,7 @@ const UsersTable: React.FC<UsersTableProps> = ({
         filter: false,
         sort: true,
         searchable: true,
-        customBodyRender: (value: string, tableMeta: any) => (
+        customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => (
           <div style={{ display: 'flex' }}>
             {value}
 
@@ -408,7 +409,7 @@ const UsersTable: React.FC<UsersTableProps> = ({
           },
           fullWidth: true
         },
-        customBodyRender: (value: any, tableMeta: any) => {
+        customBodyRender: (_: string, tableMeta: MUIDataTableMeta) => {
           const rowData = users[tableMeta.rowIndex];
           return parseDeletionTimestamp(rowData);
         }
@@ -421,7 +422,7 @@ const UsersTable: React.FC<UsersTableProps> = ({
         filter: false,
         sort: false,
         searchable: false,
-        customBodyRender: (_: any, tableMeta: any) =>
+        customBodyRender: (_: string, tableMeta: MUIDataTableMeta) =>
           getValidColumnValue(tableMeta.rowData, 'deleted_at', columns).Valid !== false ? (
             <TableIconsDisabledContainer>
               <EditIcon
@@ -445,7 +446,7 @@ const UsersTable: React.FC<UsersTableProps> = ({
     }
   ];
 
-  const [tableCols, updateCols] = useState<any[]>(columns);
+  const [tableCols, updateCols] = useState<MUIDataTableColumn[]>(columns);
 
   const [columnVisibility] = useState<Record<string, boolean>>(() => {
     const showCols: Record<string, boolean> = updateVisibleColumns(colViews, width);

src/custom/Workspaces/EnvironmentTable.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { MUIDataTableMeta } from 'mui-datatables';
+import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
 import React, { useState } from 'react';
 import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base';
 import { DeleteIcon, EnvironmentIcon } from '../../icons';
@@ -80,7 +80,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
   });
   const { width } = useWindowDimensions();
   const [unassignEnvironmentFromWorkspace] = useUnassignEnvironmentFromWorkspaceMutation();
-  const columns: any[] = [
+  const columns: MUIDataTableColumn[] = [
     {
       name: 'id',
       label: 'ID',
@@ -150,7 +150,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
         filter: false,
         sort: false,
         searchable: false,
-        customBodyRender: (_: any, tableMeta: MUIDataTableMeta) => (
+        customBodyRender: (_: string, tableMeta: MUIDataTableMeta) => (
           <IconWrapper disabled={!isRemoveAllowed}>
             <TooltipIcon
               id={`delete_team-${tableMeta.rowIndex}`}

src/custom/Workspaces/types.ts

@@ -35,4 +35,10 @@ export interface Environment {
 export interface Team {
   id: string;
   name: string;
+  team_id: string;
+  description?: string;
+  team_name: string;
+  deleted_at: {
+    Valid: boolean;
+  };
 }