@harnessio/backstage-plugin-harness-iacm 0.2.0 → 0.4.0

package/dist/index.esm.js

@@ -1,13 +1,20 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import { Routes, Route } from 'react-router';
-import { CircularProgress, Link, Typography, makeStyles, FormControl, InputLabel, Select, ListSubheader, MenuItem, FormHelperText } from '@material-ui/core';
+import { makeStyles, Button, Typography, CircularProgress, Box, IconButton, Divider, TextField, InputAdornment, Drawer, FormControl, InputLabel, Select, ListSubheader, MenuItem, FormHelperText, Tabs, Tab } from '@material-ui/core';
 import { Grid } from '@mui/material';
 import { useApi, discoveryApiRef, createRouteRef, createPlugin, createRoutableExtension } from '@backstage/core-plugin-api';
 import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { match } from 'path-to-regexp';
-import { Table, MissingAnnotationEmptyState } from '@backstage/core-components';
-import RetryIcon from '@material-ui/icons/Replay';
+import { Table, EmptyState, MissingAnnotationEmptyState } from '@backstage/core-components';
+import ReplayIcon from '@material-ui/icons/Replay';
+import CopyIcon from '@material-ui/icons/FileCopyOutlined';
+import VisibilityIcon from '@material-ui/icons/Visibility';
+import VisibilityOffIcon from '@material-ui/icons/VisibilityOff';
+import DeleteIcon from '@material-ui/icons/Delete';
+import LensIcon from '@material-ui/icons/Lens';
+import CloseIcon from '@material-ui/icons/Close';
+import SearchIcon from '@material-ui/icons/Search';
 
 var AsyncStatus = /* @__PURE__ */ ((AsyncStatus2) => {
   AsyncStatus2[AsyncStatus2["Init"] = 0] = "Init";
@@ -65,7 +72,11 @@ const useGetResources = ({
             ...resource,
             id: (/* @__PURE__ */ new Date()).getTime().toString() + index.toString()
           })
-        )
+        ),
+        outputs: data.outputs.map((output, index) => ({
+          ...output,
+          id: (/* @__PURE__ */ new Date()).getTime().toString() + index.toString()
+        }))
       };
       setResources(dataWithId);
       setStatus(AsyncStatus.Success);
@@ -294,24 +305,237 @@ const Kubernetes = () => /* @__PURE__ */ React.createElement(
   )
 );
 
-const getProviderIcon = (name) => {
-  if (!name)
-    return /* @__PURE__ */ React.createElement(Aws, null);
-  if (name.includes("aws")) {
-    return /* @__PURE__ */ React.createElement(Aws, null);
+const useStyles$5 = makeStyles(() => ({
+  iconButton: {
+    color: "#0A6EBE",
+    width: 15,
+    height: 15
   }
-  if (name.includes("azure")) {
-    return /* @__PURE__ */ React.createElement(Azure, null);
+}));
+const CopyToClipboard = ({ copyValue }) => {
+  const classes = useStyles$5();
+  const copy = (content) => async () => {
+    try {
+      await navigator.clipboard.writeText(content || "");
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Button, { onClick: copy(copyValue), variant: "text" }, /* @__PURE__ */ React.createElement(CopyIcon, { className: classes.iconButton }));
+};
+
+const useStyles$4 = makeStyles((theme) => ({
+  container: {
+    width: "100%"
+  },
+  flexCenter: {
+    display: "flex",
+    alignItems: "center"
+  },
+  smallGreyText: {
+    fontSize: "small",
+    color: "grey"
+  },
+  gap: {
+    display: "flex",
+    gap: theme.spacing(0.5)
+  },
+  iconButton: {
+    color: "#0A6EBE",
+    width: 15,
+    height: 15
+  },
+  paddingRightSmall: {
+    paddingRight: theme.spacing(0.5)
   }
-  if (name.includes("gcp") || name.includes("google")) {
-    return /* @__PURE__ */ React.createElement(Gcp, null);
+}));
+const useGetWorkspaceTableColumns = () => {
+  const classes = useStyles$4();
+  const getProviderIcon = (name) => {
+    if (!name)
+      return /* @__PURE__ */ React.createElement(Aws, null);
+    if (name.includes("aws"))
+      return /* @__PURE__ */ React.createElement(Aws, null);
+    if (name.includes("azure"))
+      return /* @__PURE__ */ React.createElement(Azure, null);
+    if (name.includes("gcp") || name.includes("google"))
+      return /* @__PURE__ */ React.createElement(Gcp, null);
+    if (name.includes("kubernetes") || name.includes("k8s"))
+      return /* @__PURE__ */ React.createElement(Kubernetes, null);
+    return null;
+  };
+  const resourceColumns = useMemo(
+    () => [
+      {
+        title: "Provider",
+        field: "col1",
+        width: "22%",
+        render: (row) => /* @__PURE__ */ React.createElement(Typography, { className: classes.smallGreyText }, row.provider),
+        customFilterAndSearch: (term, row) => {
+          var _a;
+          return ((_a = row.provider) != null ? _a : "").toLowerCase().includes(term.toLowerCase());
+        },
+        customSort: (row1, row2) => {
+          var _a, _b;
+          return ((_a = row1.provider) != null ? _a : "").localeCompare((_b = row2.provider) != null ? _b : "");
+        }
+      },
+      {
+        title: "Type",
+        field: "col2",
+        width: "18%",
+        render: (row) => /* @__PURE__ */ React.createElement("span", { className: classes.gap }, getProviderIcon(row.provider), /* @__PURE__ */ React.createElement(Typography, { className: classes.smallGreyText }, row.type)),
+        customFilterAndSearch: (term, row) => {
+          var _a;
+          return ((_a = row.type) != null ? _a : "").toLowerCase().includes(term.toLowerCase());
+        },
+        customSort: (row1, row2) => {
+          var _a, _b;
+          return ((_a = row1.type) != null ? _a : "").localeCompare((_b = row2.type) != null ? _b : "");
+        }
+      },
+      {
+        title: "Name",
+        field: "col3",
+        width: "30%",
+        render: (row) => /* @__PURE__ */ React.createElement(Typography, { className: classes.smallGreyText }, row.name),
+        customFilterAndSearch: (term, row) => {
+          var _a;
+          return ((_a = row.name) != null ? _a : "").toLowerCase().includes(term.toLowerCase());
+        },
+        customSort: (row1, row2) => {
+          var _a, _b;
+          return ((_a = row1.name) != null ? _a : "").localeCompare((_b = row2.name) != null ? _b : "");
+        }
+      },
+      {
+        title: "Module",
+        field: "col4",
+        width: "20%",
+        render: (row) => /* @__PURE__ */ React.createElement(Typography, { className: classes.smallGreyText }, row.module),
+        customFilterAndSearch: (term, row) => {
+          var _a;
+          return ((_a = row.module) != null ? _a : "").toLowerCase().includes(term.toLowerCase());
+        },
+        customSort: (row1, row2) => {
+          var _a, _b;
+          return ((_a = row1.module) != null ? _a : "").localeCompare((_b = row2.module) != null ? _b : "");
+        }
+      }
+    ],
+    [classes]
+  );
+  const outputsColumns = useMemo(
+    () => [
+      {
+        title: "Name",
+        field: "col3",
+        width: "30%",
+        render: (row) => /* @__PURE__ */ React.createElement("div", { className: classes.flexCenter }, /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            className: `${classes.smallGreyText} ${classes.paddingRightSmall}`
+          },
+          row.name
+        ), /* @__PURE__ */ React.createElement(CopyToClipboard, { copyValue: row.name })),
+        customFilterAndSearch: (term, row) => {
+          var _a;
+          return ((_a = row.name) != null ? _a : "").toLowerCase().includes(term.toLowerCase());
+        },
+        customSort: (row1, row2) => {
+          var _a, _b;
+          return ((_a = row1.name) != null ? _a : "").localeCompare((_b = row2.name) != null ? _b : "");
+        }
+      },
+      {
+        title: "Value",
+        field: "col2",
+        width: "70%",
+        render: (row) => {
+          const isSensitive = row.sensitive;
+          const [show, setShow] = useState(!isSensitive);
+          return /* @__PURE__ */ React.createElement("span", { className: classes.flexCenter }, /* @__PURE__ */ React.createElement(Typography, { className: classes.smallGreyText }, show ? row.value : "********"), show && /* @__PURE__ */ React.createElement(CopyToClipboard, { copyValue: row.value }), isSensitive && /* @__PURE__ */ React.createElement(Button, { onClick: () => setShow(!show) }, show ? /* @__PURE__ */ React.createElement(VisibilityOffIcon, { className: classes.iconButton }) : /* @__PURE__ */ React.createElement(VisibilityIcon, { className: classes.iconButton })));
+        },
+        customFilterAndSearch: (term, row) => {
+          var _a;
+          return ((_a = row.value) != null ? _a : "").toLowerCase().includes(term.toLowerCase());
+        },
+        customSort: (row1, row2) => {
+          var _a, _b;
+          return ((_a = row1.value) != null ? _a : "").localeCompare((_b = row2.value) != null ? _b : "");
+        }
+      }
+    ],
+    [classes]
+  );
+  return {
+    resourceColumns,
+    dataSourceColumns: resourceColumns,
+    // dataSource is also a resource column are same.
+    outputsColumns
+  };
+};
+
+const getWorkspaceTableConfig = (workspaceDataType, columns) => {
+  switch (workspaceDataType) {
+    case WorkspaceDataType.ResourceType:
+      return {
+        columns: columns.resourceColumns,
+        title: "Workspace Resources"
+      };
+    case WorkspaceDataType.OutputType:
+      return {
+        columns: columns.outputsColumns,
+        title: "Workspace Outputs"
+      };
+    case WorkspaceDataType.DataSourceType:
+      return {
+        columns: columns.dataSourceColumns,
+        title: "Workspace Data Sources"
+      };
+    default:
+      return { columns: [], title: "" };
   }
-  if (name.includes("kubernetes") || name.includes("k8s")) {
-    return /* @__PURE__ */ React.createElement(Kubernetes, null);
+};
+
+const useStyles$3 = makeStyles((theme) => ({
+  emptyContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.spacing(8, 2),
+    minHeight: 200
+  },
+  emptyText: {
+    color: theme.palette.text.secondary,
+    marginTop: theme.spacing(2)
+  },
+  loadingContainer: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: theme.spacing(4),
+    minHeight: 200
+  }
+}));
+const TableEmptyState = ({
+  status,
+  hasData
+}) => {
+  const localClasses = useStyles$3();
+  const isLoading = status === AsyncStatus.Init || status === AsyncStatus.Loading;
+  const isEmpty = status === AsyncStatus.Success && !hasData;
+  if (isLoading) {
+    return /* @__PURE__ */ React.createElement("div", { className: localClasses.loadingContainer }, /* @__PURE__ */ React.createElement(CircularProgress, null));
+  }
+  if (isEmpty) {
+    return /* @__PURE__ */ React.createElement(Box, { className: localClasses.emptyContainer }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", color: "textSecondary" }, "No data available"), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: localClasses.emptyText }, "There are no items to display in this table."));
   }
   return null;
 };
-const ResourceTable = ({
+
+const WorkspaceTable = ({
   setRefresh,
   refresh,
   pageSize,
@@ -321,93 +545,16 @@ const ResourceTable = ({
   totalElements,
   handleChangeRowsPerPage,
   classes,
-  baseUrl
+  workspaceDataType,
+  onRowClick,
+  status
 }) => {
-  const columns = [
-    {
-      title: "Provider",
-      field: "col1",
-      width: "22%",
-      render: (row) => {
-        return /* @__PURE__ */ React.createElement(
-          Link,
-          {
-            href: baseUrl,
-            target: "_blank",
-            style: {
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            key: row.id
-          },
-          /* @__PURE__ */ React.createElement("b", null, row.provider)
-        );
-      },
-      customFilterAndSearch: (term, row) => {
-        var _a;
-        const temp = (_a = row == null ? void 0 : row.provider) != null ? _a : "";
-        return temp.toLowerCase().indexOf(term.toLowerCase()) > -1;
-      },
-      customSort: (row1, row2) => {
-        var _a, _b;
-        const a = (_a = row1.provider) != null ? _a : "";
-        const b = (_b = row2.provider) != null ? _b : "";
-        return a > b ? 1 : -1;
-      }
-    },
-    {
-      title: "Type",
-      field: "col2",
-      width: "18%",
-      render: (row) => /* @__PURE__ */ React.createElement("span", { style: { display: "flex", gap: "5px" } }, getProviderIcon(row.provider), /* @__PURE__ */ React.createElement(Typography, { style: { fontSize: "small", color: "grey" } }, row.type)),
-      customFilterAndSearch: (term, row) => {
-        var _a;
-        const temp = (_a = row == null ? void 0 : row.type) != null ? _a : "";
-        return temp.toLowerCase().indexOf(term.toLowerCase()) > -1;
-      },
-      customSort: (row1, row2) => {
-        var _a, _b;
-        const a = (_a = row1.type) != null ? _a : "";
-        const b = (_b = row2.type) != null ? _b : "";
-        return a > b ? 1 : -1;
-      }
-    },
-    {
-      title: "Name",
-      field: "col3",
-      width: "30%",
-      render: (row) => /* @__PURE__ */ React.createElement(Typography, { style: { fontSize: "small", color: "grey" } }, row.name),
-      customFilterAndSearch: (term, row) => {
-        var _a;
-        const temp = (_a = row == null ? void 0 : row.name) != null ? _a : "";
-        return temp.toLowerCase().indexOf(term.toLowerCase()) > -1;
-      },
-      customSort: (row1, row2) => {
-        var _a, _b;
-        const a = (_a = row1.name) != null ? _a : "";
-        const b = (_b = row2.name) != null ? _b : "";
-        return a > b ? 1 : -1;
-      }
-    },
-    {
-      title: "Module",
-      field: "col4",
-      width: "20%",
-      render: (row) => /* @__PURE__ */ React.createElement(Typography, { style: { fontSize: "small", color: "grey" } }, row.module),
-      customFilterAndSearch: (term, row) => {
-        var _a;
-        const temp = (_a = row == null ? void 0 : row.module) != null ? _a : "";
-        return temp.toLowerCase().indexOf(term.toLowerCase()) > -1;
-      },
-      customSort: (row1, row2) => {
-        var _a, _b;
-        const a = (_a = row1.module) != null ? _a : "";
-        const b = (_b = row2.module) != null ? _b : "";
-        return a > b ? 1 : -1;
-      }
-    }
-  ];
+  const columnsData = useGetWorkspaceTableColumns();
+  const { columns, title } = useMemo(
+    () => getWorkspaceTableConfig(workspaceDataType, columnsData),
+    [workspaceDataType, columnsData]
+  );
+  const hasData = currTableData && currTableData.length > 0;
   return /* @__PURE__ */ React.createElement(
     Table,
     {
@@ -416,14 +563,16 @@ const ResourceTable = ({
         filtering: false,
         emptyRowsWhenPaging: false,
         pageSize,
-        pageSizeOptions: [5, 10, 25]
+        search: true,
+        pageSizeOptions: [10, 25, 50],
+        rowStyle: { cursor: onRowClick ? "pointer" : "default" }
       },
       key: "id'",
       data: currTableData != null ? currTableData : [],
       columns,
       actions: [
         {
-          icon: () => /* @__PURE__ */ React.createElement(RetryIcon, null),
+          icon: () => /* @__PURE__ */ React.createElement(ReplayIcon, null),
           tooltip: "Refresh Data",
           isFreeAction: true,
           onClick: () => {
@@ -431,8 +580,16 @@ const ResourceTable = ({
           }
         }
       ],
-      emptyContent: /* @__PURE__ */ React.createElement("div", { className: classes.empty }, /* @__PURE__ */ React.createElement(CircularProgress, null)),
-      title: "Workspace Resources",
+      onRowClick: onRowClick ? (_event, _rowData) => onRowClick(_rowData) : void 0,
+      emptyContent: /* @__PURE__ */ React.createElement(
+        TableEmptyState,
+        {
+          status,
+          hasData: !!hasData,
+          classes
+        }
+      ),
+      title,
       page,
       onPageChange: handleChangePage,
       totalCount: totalElements,
@@ -441,6 +598,453 @@ const ResourceTable = ({
   );
 };
 
+const getCurrTableData = (workspaceDataType, data) => {
+  switch (workspaceDataType) {
+    case WorkspaceDataType.ResourceType:
+      return data.resources || [];
+    case WorkspaceDataType.DataSourceType:
+      return data.dataSources || [];
+    case WorkspaceDataType.OutputType:
+      return data.outputs || [];
+    default:
+      return [];
+  }
+};
+const getTotalElements = (workspaceDataType, data) => {
+  var _a, _b, _c;
+  switch (workspaceDataType) {
+    case WorkspaceDataType.ResourceType:
+      return ((_a = data.resources) == null ? void 0 : _a.length) || 0;
+    case WorkspaceDataType.DataSourceType:
+      return ((_b = data.dataSources) == null ? void 0 : _b.length) || 0;
+    case WorkspaceDataType.OutputType:
+      return ((_c = data.outputs) == null ? void 0 : _c.length) || 0;
+    default:
+      return 0;
+  }
+};
+
+const useStyles$2 = makeStyles((theme) => ({
+  drawerContent: {
+    width: 1e3,
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    padding: theme.spacing(2),
+    overflow: "hidden"
+  },
+  drawerHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    flexShrink: 0
+  },
+  drawerTitle: {
+    fontWeight: "bold",
+    flex: 1
+  },
+  drawerSubHeader: {
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing(1),
+    gap: theme.spacing(1),
+    flexShrink: 0
+  },
+  subHeaderItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5)
+  },
+  subHeaderLabel: {
+    color: theme.palette.text.secondary
+  },
+  subHeaderValue: {
+    fontWeight: 600,
+    color: theme.palette.text.primary
+  },
+  subHeaderDivider: {
+    height: 16,
+    margin: `0 ${theme.spacing(0.5)}`
+  },
+  drawerBody: {
+    flex: 1,
+    minHeight: 0,
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
+    overflowY: "auto",
+    overflowX: "hidden"
+  },
+  searchField: {
+    marginBottom: theme.spacing(2)
+  },
+  searchFieldSticky: {
+    position: "sticky",
+    top: 0,
+    backgroundColor: theme.palette.background.paper,
+    zIndex: 10,
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(1),
+    marginBottom: theme.spacing(2),
+    marginLeft: theme.spacing(-2),
+    marginRight: theme.spacing(-2),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2)
+  },
+  valueHeader: {
+    fontWeight: 600,
+    textTransform: "uppercase",
+    marginBottom: theme.spacing(1),
+    color: theme.palette.text.secondary
+  },
+  attributeRow: {
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: 4,
+    marginBottom: theme.spacing(1),
+    padding: theme.spacing(1.5),
+    paddingBottom: theme.spacing(1),
+    position: "relative"
+  },
+  attributeRowDrift: {
+    backgroundColor: theme.palette.type === "dark" ? theme.palette.background.paper : "#fff3e0",
+    borderColor: "#ffb74d"
+  },
+  attributeKey: {
+    fontWeight: 500,
+    marginBottom: theme.spacing(0.75),
+    color: theme.palette.text.primary,
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    fontFamily: "inherit"
+  },
+  attributeValue: {
+    fontWeight: 400,
+    color: theme.palette.text.primary,
+    flex: 1,
+    wordBreak: "break-word",
+    fontFamily: "inherit"
+  },
+  jsonValue: {
+    padding: theme.spacing(1),
+    borderRadius: 4,
+    overflow: "auto",
+    marginTop: theme.spacing(0.5),
+    border: `1px solid ${theme.palette.divider}`,
+    fontFamily: "inherit"
+  },
+  deletedBadge: {
+    fontWeight: 600,
+    textTransform: "uppercase",
+    backgroundColor: theme.palette.type === "dark" ? "rgba(244, 67, 54, 0.2)" : "#ffebee",
+    color: theme.palette.type === "dark" ? "#ffcdd2" : theme.palette.text.primary,
+    padding: "2px 6px",
+    borderRadius: 4,
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    marginLeft: theme.spacing(0.5)
+  },
+  valueComparison: {
+    marginTop: theme.spacing(1)
+  },
+  valueLabel: {
+    fontWeight: 600,
+    marginRight: theme.spacing(1),
+    color: theme.palette.text.primary
+  },
+  divider: {
+    margin: 0
+  },
+  copyButtonWrapper: {
+    position: "absolute",
+    top: theme.spacing(1),
+    right: 0,
+    zIndex: 1
+  },
+  iconContainer: {
+    marginRight: theme.spacing(1),
+    display: "inline-flex",
+    alignItems: "center"
+  },
+  iconContainerInline: {
+    display: "inline-flex",
+    alignItems: "center",
+    marginRight: theme.spacing(0.5)
+  }
+}));
+
+const isValueUnknown = (value) => {
+  return value === null || value === void 0 || value === "";
+};
+const formatValue = (value) => {
+  if (isValueUnknown(value)) {
+    return "Unknown";
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value, null, 2);
+  }
+  return String(value);
+};
+const filterAttributes = (attributes, driftAttributes, searchValue) => {
+  if (!attributes)
+    return [];
+  const attributesArray = Object.entries(attributes).map(([key, value]) => ({
+    key,
+    value,
+    driftValue: driftAttributes[key],
+    hasDrift: !!driftAttributes[key]
+  }));
+  if (!searchValue)
+    return attributesArray;
+  const lowerSearch = searchValue.toLowerCase();
+  return attributesArray.filter(
+    (item) => item.key.toLowerCase().includes(lowerSearch) || JSON.stringify(item.value).toLowerCase().includes(lowerSearch) || item.driftValue && JSON.stringify(item.driftValue).toLowerCase().includes(lowerSearch)
+  );
+};
+
+const getDriftIcon = (driftStatus) => {
+  switch (driftStatus == null ? void 0 : driftStatus.toLowerCase()) {
+    case "drifted":
+      return /* @__PURE__ */ React.createElement(ReplayIcon, { style: { fontSize: 18, color: "#ff9800" } });
+    case "changed":
+      return /* @__PURE__ */ React.createElement(ReplayIcon, { style: { fontSize: 18, color: "#ff9800" } });
+    case "deleted":
+      return /* @__PURE__ */ React.createElement(DeleteIcon, { style: { fontSize: 18, color: "#9e9e9e" } });
+    case "unchanged":
+      return /* @__PURE__ */ React.createElement(LensIcon, { style: { fontSize: 18, color: "#9e9e9e" } });
+    default:
+      return null;
+  }
+};
+
+const Header = ({ title, icon, onClose }) => {
+  const classes = useStyles$2();
+  return /* @__PURE__ */ React.createElement(Box, { className: classes.drawerHeader }, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center" }, icon && /* @__PURE__ */ React.createElement(Box, { className: classes.iconContainer }, icon), /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: classes.drawerTitle }, title)), /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      onClick: onClose,
+      "aria-label": "close drawer",
+      edge: "end",
+      style: { padding: 0 }
+    },
+    /* @__PURE__ */ React.createElement(CloseIcon, null)
+  ));
+};
+
+const SubHeader = ({ name, provider, module }) => {
+  const classes = useStyles$2();
+  if (!name && !provider && !module)
+    return null;
+  return /* @__PURE__ */ React.createElement(Box, { className: classes.drawerSubHeader }, /* @__PURE__ */ React.createElement(Box, { className: classes.subHeaderItem }, /* @__PURE__ */ React.createElement(Typography, { className: classes.subHeaderLabel }, "Name:"), /* @__PURE__ */ React.createElement(Typography, { className: classes.subHeaderValue }, name || "-")), /* @__PURE__ */ React.createElement(
+    Divider,
+    {
+      orientation: "vertical",
+      className: classes.subHeaderDivider,
+      flexItem: true
+    }
+  ), /* @__PURE__ */ React.createElement(Box, { className: classes.subHeaderItem }, /* @__PURE__ */ React.createElement(Typography, { className: classes.subHeaderLabel }, "Provider:"), /* @__PURE__ */ React.createElement(Typography, { className: classes.subHeaderValue }, provider || "-")), /* @__PURE__ */ React.createElement(
+    Divider,
+    {
+      orientation: "vertical",
+      className: classes.subHeaderDivider,
+      flexItem: true
+    }
+  ), /* @__PURE__ */ React.createElement(Box, { className: classes.subHeaderItem }, /* @__PURE__ */ React.createElement(Typography, { className: classes.subHeaderLabel }, "Module:"), /* @__PURE__ */ React.createElement(Typography, { className: classes.subHeaderValue }, module || "-")));
+};
+
+const SearchField = ({ value, onChange }) => {
+  const classes = useStyles$2();
+  const handleClear = () => {
+    onChange("");
+  };
+  return /* @__PURE__ */ React.createElement(Box, { className: classes.searchFieldSticky }, /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      placeholder: "Search",
+      variant: "outlined",
+      size: "small",
+      fullWidth: true,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, { fontSize: "small" })),
+        endAdornment: value && /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(
+          IconButton,
+          {
+            size: "small",
+            onClick: handleClear,
+            "aria-label": "clear search",
+            edge: "end"
+          },
+          /* @__PURE__ */ React.createElement(CloseIcon, { fontSize: "small" })
+        ))
+      }
+    }
+  ));
+};
+
+const useStyles$1 = makeStyles((theme) => ({
+  jsonValue: {
+    padding: theme.spacing(1),
+    borderRadius: 4,
+    overflow: "auto",
+    marginTop: theme.spacing(0.5),
+    border: `1px solid ${theme.palette.divider}`,
+    fontFamily: "inherit",
+    backgroundColor: theme.palette.type === "dark" ? theme.palette.background.default : "#F3F3FA"
+  },
+  jsonValueDrift: {
+    padding: theme.spacing(1),
+    borderRadius: 4,
+    overflow: "auto",
+    marginTop: theme.spacing(0.5),
+    border: `1px solid ${theme.palette.divider}`,
+    fontFamily: "inherit",
+    backgroundColor: theme.palette.type === "dark" ? theme.palette.background.default : "#fff3e0"
+  },
+  attributeValue: {
+    fontSize: "1rem",
+    fontWeight: 400,
+    color: theme.palette.text.primary,
+    flex: 1,
+    wordBreak: "break-word",
+    fontFamily: "inherit"
+  },
+  valueLabel: {
+    fontWeight: 600,
+    marginRight: theme.spacing(1),
+    color: theme.palette.text.primary
+  },
+  copyButtonWrapper: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    zIndex: 1
+  },
+  stringValue: {
+    padding: "8px",
+    borderRadius: 4,
+    border: `1px solid ${theme.palette.divider}`,
+    fontFamily: "inherit",
+    backgroundColor: theme.palette.type === "dark" ? theme.palette.background.default : "#F3F3FA"
+  },
+  stringValueDrift: {
+    padding: "8px",
+    borderRadius: 4,
+    border: `1px solid ${theme.palette.divider}`,
+    fontFamily: "inherit",
+    backgroundColor: theme.palette.type === "dark" ? theme.palette.background.default : "#fff3e0"
+  }
+}));
+const formatValueDisplay = (value, classes, isDrift = false) => {
+  if (typeof value === "object") {
+    return /* @__PURE__ */ React.createElement("pre", { className: isDrift ? classes.jsonValueDrift : classes.jsonValue }, JSON.stringify(value, null, 2));
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: isDrift ? classes.stringValueDrift : classes.stringValue }, isValueUnknown(value) ? "Unknown" : String(value));
+};
+const ValueDisplay = ({
+  value,
+  isDrift = false,
+  showCopy = true,
+  label,
+  copyTopOffset
+}) => {
+  const classes = useStyles$1();
+  return /* @__PURE__ */ React.createElement(Box, { style: { position: "relative", width: "100%" } }, showCopy && !isValueUnknown(value) && /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      className: classes.copyButtonWrapper,
+      style: copyTopOffset ? { top: copyTopOffset } : {}
+    },
+    /* @__PURE__ */ React.createElement(CopyToClipboard, { copyValue: formatValue(value) })
+  ), label && /* @__PURE__ */ React.createElement(Typography, { className: classes.valueLabel }, label), formatValueDisplay(value, classes, isDrift));
+};
+
+const AttributeList = ({
+  attributes,
+  driftStatus,
+  isDeleted,
+  allDeleted
+}) => {
+  const classes = useStyles$2();
+  if (attributes.length === 0) {
+    return /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "No attributes found");
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, attributes.map((item, index) => {
+    const hasDrift = item.hasDrift;
+    const driftValue = item.driftValue;
+    const attributeIcon = hasDrift && driftStatus ? getDriftIcon(driftStatus) : null;
+    return /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        key: `${item.key}-${index}`,
+        className: hasDrift ? `${classes.attributeRow} ${classes.attributeRowDrift}` : classes.attributeRow
+      },
+      /* @__PURE__ */ React.createElement(Typography, { component: "div", className: classes.attributeKey }, attributeIcon && /* @__PURE__ */ React.createElement("span", { className: classes.iconContainerInline }, attributeIcon), item.key, (isDeleted || allDeleted && hasDrift) && /* @__PURE__ */ React.createElement("span", { className: classes.deletedBadge }, /* @__PURE__ */ React.createElement(DeleteIcon, { style: { fontSize: 12 } }), "DELETED")),
+      hasDrift && driftValue ? /* @__PURE__ */ React.createElement(Box, { className: classes.valueComparison }, /* @__PURE__ */ React.createElement(
+        ValueDisplay,
+        {
+          value: driftValue,
+          isDrift: true,
+          label: "Actual Value:",
+          copyTopOffset: "25px"
+        }
+      ), /* @__PURE__ */ React.createElement(
+        ValueDisplay,
+        {
+          value: item.value,
+          isDrift: true,
+          label: "Expected Value:",
+          copyTopOffset: "25px"
+        }
+      )) : /* @__PURE__ */ React.createElement(ValueDisplay, { value: item.value })
+    );
+  }));
+};
+
+const ResourceDetailDrawer = ({
+  open,
+  onClose,
+  width = 1e3,
+  resource,
+  title = ""
+}) => {
+  const classes = useStyles$2();
+  const [searchValue, setSearchValue] = useState("");
+  const driftStatus = resource == null ? void 0 : resource.drift_status;
+  const driftAttributes = useMemo(
+    () => (resource == null ? void 0 : resource.drift_attributes) || {},
+    [resource]
+  );
+  const isDeleted = driftStatus === "deleted";
+  const allDeleted = isDeleted && Object.keys(driftAttributes).length > 0;
+  const headerIcon = driftStatus ? getDriftIcon(driftStatus) : null;
+  const filteredAttributes = useMemo(
+    () => filterAttributes(resource == null ? void 0 : resource.attributes, driftAttributes, searchValue),
+    [resource == null ? void 0 : resource.attributes, searchValue, driftAttributes]
+  );
+  return /* @__PURE__ */ React.createElement(Drawer, { anchor: "right", open, onClose }, /* @__PURE__ */ React.createElement("div", { className: classes.drawerContent, style: { width } }, /* @__PURE__ */ React.createElement(Header, { title, icon: headerIcon, onClose }), /* @__PURE__ */ React.createElement(
+    SubHeader,
+    {
+      name: resource == null ? void 0 : resource.name,
+      provider: resource == null ? void 0 : resource.provider,
+      module: resource == null ? void 0 : resource.module
+    }
+  ), /* @__PURE__ */ React.createElement(Divider, { className: classes.divider }), /* @__PURE__ */ React.createElement("div", { className: classes.drawerBody }, resource && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SearchField, { value: searchValue, onChange: setSearchValue }), /* @__PURE__ */ React.createElement(Typography, { className: classes.valueHeader }, "VALUE"), /* @__PURE__ */ React.createElement(
+    AttributeList,
+    {
+      attributes: filteredAttributes,
+      driftStatus,
+      isDeleted,
+      allDeleted
+    }
+  )))));
+};
+
 const useStyles = makeStyles((theme) => ({
   container: {
     width: "100%"
@@ -469,10 +1073,25 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     alignItems: "center",
     gap: "5px"
-  }
+  },
+  noAccess: {
+    padding: theme.spacing(2),
+    display: "flex",
+    textAlign: "center"
+  },
+  workspaceList: {
+    marginTop: "-40px"
+  },
+  workspaceItem: { padding: "0.75rem", fontSize: "1rem" }
 }));
+var WorkspaceDataType = /* @__PURE__ */ ((WorkspaceDataType2) => {
+  WorkspaceDataType2["ResourceType"] = "Resource";
+  WorkspaceDataType2["DataSourceType"] = "DataSource";
+  WorkspaceDataType2["OutputType"] = "Output";
+  return WorkspaceDataType2;
+})(WorkspaceDataType || {});
 function WorkspaceList() {
-  var _a;
+  var _a, _b, _c;
   const [refresh, setRefresh] = useState(false);
   const classes = useStyles();
   const discoveryApi = useApi(discoveryApiRef);
@@ -485,19 +1104,24 @@ function WorkspaceList() {
     return harnessWorkspaceUrlObject[Object.keys(harnessWorkspaceUrlObject)[0]];
   });
   const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(5);
-  const {
-    projectId,
-    orgId,
-    accountId,
-    envFromUrl,
-    workspaceId,
-    cleanedString: urlForWorkspace
-  } = useResourceSlugFromEntity(
+  const [pageSize, setPageSize] = useState(10);
+  const [selectedTab, setSelectedTab] = React.useState(
+    "Resource" /* ResourceType */
+  );
+  const [selectedRowData, setSelectedRowData] = useState(null);
+  const handleChange = (_event, resourceType) => {
+    setSelectedTab(resourceType);
+  };
+  const drawerTitle = useMemo(() => {
+    const driftStatus = (selectedRowData == null ? void 0 : selectedRowData.drift_status) || "";
+    const capitalizedStatus = driftStatus ? driftStatus.charAt(0).toUpperCase() + driftStatus.slice(1) : "";
+    return `${capitalizedStatus}  ${selectedTab === "Resource" /* ResourceType */ ? "Resources" : "Data Sources"}`;
+  }, [selectedRowData, selectedTab]);
+  const { projectId, orgId, accountId, envFromUrl, workspaceId } = useResourceSlugFromEntity(
     isWorkspaceAnnotationPresent,
     selectedResourceUrl
   );
-  const { resources, status: state } = useGetResources({
+  const { resources: workspaceData, status: state } = useGetResources({
     backendBaseUrl,
     accountId,
     orgId,
@@ -506,18 +1130,52 @@ function WorkspaceList() {
     envFromUrl,
     workspace: workspaceId || null
   });
+  const { resources, outputs, data_sources: dataSources } = workspaceData || {};
+  const workspaceDataObj = useMemo(
+    () => ({
+      resources,
+      outputs,
+      dataSources
+    }),
+    [resources, outputs, dataSources]
+  );
+  const currTableData = useMemo(
+    () => getCurrTableData(selectedTab, workspaceDataObj),
+    [selectedTab, workspaceDataObj]
+  );
+  const totalElements = useMemo(
+    () => getTotalElements(selectedTab, workspaceDataObj),
+    [selectedTab, workspaceDataObj]
+  );
   const handleWorkspaceChange = (event) => {
     setSelectedProjectUrl(event.target.value);
     setSelectedResourceUrl(harnessWorkspaceUrlObject[event.target.value]);
   };
-  const handleChangePage = (currentPage, currentPageSize) => {
-    setPage(currentPage);
-    setPageSize(currentPageSize);
-  };
-  const handleChangeRowsPerPage = (currentPageSize) => {
-    setPage(0);
-    setPageSize(currentPageSize);
-  };
+  const handleChangePage = useCallback(
+    (currentPage, currentPageSize) => {
+      setPage(currentPage);
+      setPageSize(currentPageSize);
+    },
+    [setPage, setPageSize]
+  );
+  const handleChangeRowsPerPage = useCallback(
+    (currentPageSize) => {
+      setPage(0);
+      setPageSize(currentPageSize);
+    },
+    [setPage, setPageSize]
+  );
+  const handleRowClick = useCallback(
+    (data) => {
+      if (selectedTab === "Output" /* OutputType */)
+        return;
+      setSelectedRowData(data);
+    },
+    [selectedTab]
+  );
+  const handleDrawerClose = useCallback(() => {
+    setSelectedRowData(null);
+  }, []);
   const newWorkspaceDropdown = /* @__PURE__ */ React.createElement(FormControl, { fullWidth: true }, /* @__PURE__ */ React.createElement(
     InputLabel,
     {
@@ -541,27 +1199,86 @@ function WorkspaceList() {
     Object.keys(harnessWorkspaceUrlObject).map((workspace) => /* @__PURE__ */ React.createElement(MenuItem, { value: workspace, key: workspace }, /* @__PURE__ */ React.createElement("span", { className: classes.menuItem }, workspace)))
   ), /* @__PURE__ */ React.createElement(FormHelperText, null));
   const DropDownComponent = /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3, marginBottom: 4, marginLeft: 1, paddingTop: 2 }, isWorkspaceAnnotationPresent ? /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, newWorkspaceDropdown) : null);
+  if (state === AsyncStatus.Unauthorized) {
+    const urls = Object.values(harnessWorkspaceUrlObject).map(
+      (url) => url.replace("|", "")
+    );
+    return /* @__PURE__ */ React.createElement(
+      EmptyState,
+      {
+        title: "You don't have the permission to View the following IaCM workspace(s)",
+        missing: "info",
+        action: /* @__PURE__ */ React.createElement("ul", { className: classes.workspaceList }, urls.map((workspace) => /* @__PURE__ */ React.createElement(
+          "li",
+          {
+            value: workspace,
+            key: workspace,
+            className: classes.workspaceItem
+          },
+          /* @__PURE__ */ React.createElement("span", null, workspace)
+        )))
+      }
+    );
+  }
   if (state === AsyncStatus.Init || state === AsyncStatus.Loading) {
     return /* @__PURE__ */ React.createElement("div", { className: classes.empty }, /* @__PURE__ */ React.createElement(CircularProgress, null));
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.container }, DropDownComponent, /* @__PURE__ */ React.createElement(
-    ResourceTable,
+    Tabs,
+    {
+      value: selectedTab,
+      indicatorColor: "primary",
+      textColor: "primary",
+      onChange: handleChange,
+      "aria-label": "workspace_list_tabs"
+    },
+    /* @__PURE__ */ React.createElement(
+      Tab,
+      {
+        label: `Resources (${(_a = resources == null ? void 0 : resources.length) != null ? _a : 0})`,
+        value: "Resource" /* ResourceType */
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Tab,
+      {
+        label: `Data Sources (${(_b = dataSources == null ? void 0 : dataSources.length) != null ? _b : 0})`,
+        value: "DataSource" /* DataSourceType */
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Tab,
+      {
+        label: `Outputs (${(_c = outputs == null ? void 0 : outputs.length) != null ? _c : 0})`,
+        value: "Output" /* OutputType */
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(
+    WorkspaceTable,
     {
-      accountId,
-      orgId,
-      backendBaseUrl,
       setRefresh,
       refresh,
       pageSize,
-      currTableData: resources == null ? void 0 : resources.resources,
+      currTableData,
       page,
       handleChangePage,
-      totalElements: (_a = resources == null ? void 0 : resources.resources) == null ? void 0 : _a.length,
+      totalElements,
       handleChangeRowsPerPage,
       classes,
-      baseUrl: urlForWorkspace
+      workspaceDataType: selectedTab,
+      onRowClick: handleRowClick,
+      status: state
+    }
+  )), /* @__PURE__ */ React.createElement(
+    ResourceDetailDrawer,
+    {
+      open: !!selectedRowData,
+      resource: selectedRowData,
+      onClose: handleDrawerClose,
+      title: drawerTitle,
+      width: 1200
     }
-  )));
+  ));
 }
 
 const isHarnessIacmAvailable = (entity) => {