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

package/dist/index.esm.js

@@ -1,16 +1,20 @@
 import React, { useState, useMemo, useCallback } from 'react';
 import { Routes, Route } from 'react-router';
-import { makeStyles, Button, Link, Typography, CircularProgress, FormControl, InputLabel, Select, ListSubheader, MenuItem, FormHelperText, Tabs, Tab } 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, EmptyState, MissingAnnotationEmptyState } from '@backstage/core-components';
-import RetryIcon from '@material-ui/icons/Replay';
+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";
@@ -301,7 +305,7 @@ const Kubernetes = () => /* @__PURE__ */ React.createElement(
   )
 );
 
-const useStyles$2 = makeStyles(() => ({
+const useStyles$5 = makeStyles(() => ({
   iconButton: {
     color: "#0A6EBE",
     width: 15,
@@ -309,7 +313,7 @@ const useStyles$2 = makeStyles(() => ({
   }
 }));
 const CopyToClipboard = ({ copyValue }) => {
-  const classes = useStyles$2();
+  const classes = useStyles$5();
   const copy = (content) => async () => {
     try {
       await navigator.clipboard.writeText(content || "");
@@ -320,7 +324,7 @@ const CopyToClipboard = ({ copyValue }) => {
   return /* @__PURE__ */ React.createElement(Button, { onClick: copy(copyValue), variant: "text" }, /* @__PURE__ */ React.createElement(CopyIcon, { className: classes.iconButton }));
 };
 
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles$4 = makeStyles((theme) => ({
   container: {
     width: "100%"
   },
@@ -345,10 +349,8 @@ const useStyles$1 = makeStyles((theme) => ({
     paddingRight: theme.spacing(0.5)
   }
 }));
-const useGetWorkspaceTableColumns = ({
-  baseUrl
-}) => {
-  const classes = useStyles$1();
+const useGetWorkspaceTableColumns = () => {
+  const classes = useStyles$4();
   const getProviderIcon = (name) => {
     if (!name)
       return /* @__PURE__ */ React.createElement(Aws, null);
@@ -368,16 +370,7 @@ const useGetWorkspaceTableColumns = ({
         title: "Provider",
         field: "col1",
         width: "22%",
-        render: (row) => /* @__PURE__ */ React.createElement(
-          Link,
-          {
-            href: baseUrl,
-            target: "_blank",
-            className: classes.flexCenter,
-            key: row.id
-          },
-          /* @__PURE__ */ React.createElement("b", null, row.provider)
-        ),
+        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());
@@ -430,7 +423,7 @@ const useGetWorkspaceTableColumns = ({
         }
       }
     ],
-    [baseUrl, classes]
+    [classes]
   );
   const outputsColumns = useMemo(
     () => [
@@ -477,10 +470,71 @@ const useGetWorkspaceTableColumns = ({
   );
   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: "" };
+  }
+};
+
+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 WorkspaceTable = ({
   setRefresh,
   refresh,
@@ -491,12 +545,16 @@ const WorkspaceTable = ({
   totalElements,
   handleChangeRowsPerPage,
   classes,
-  baseUrl,
-  workspaceDataType
+  workspaceDataType,
+  onRowClick,
+  status
 }) => {
-  const { resourceColumns, outputsColumns } = useGetWorkspaceTableColumns({
-    baseUrl: baseUrl || ""
-  });
+  const columnsData = useGetWorkspaceTableColumns();
+  const { columns, title } = useMemo(
+    () => getWorkspaceTableConfig(workspaceDataType, columnsData),
+    [workspaceDataType, columnsData]
+  );
+  const hasData = currTableData && currTableData.length > 0;
   return /* @__PURE__ */ React.createElement(
     Table,
     {
@@ -505,14 +563,16 @@ const WorkspaceTable = ({
         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: workspaceDataType === WorkspaceDataType.Resource ? resourceColumns : outputsColumns,
+      columns,
       actions: [
         {
-          icon: () => /* @__PURE__ */ React.createElement(RetryIcon, null),
+          icon: () => /* @__PURE__ */ React.createElement(ReplayIcon, null),
           tooltip: "Refresh Data",
           isFreeAction: true,
           onClick: () => {
@@ -520,8 +580,16 @@ const WorkspaceTable = ({
           }
         }
       ],
-      emptyContent: /* @__PURE__ */ React.createElement("div", { className: classes.empty }, /* @__PURE__ */ React.createElement(CircularProgress, null)),
-      title: workspaceDataType === WorkspaceDataType.Resource ? "Workspace Resources" : "Workspace Outputs",
+      onRowClick: onRowClick ? (_event, _rowData) => onRowClick(_rowData) : void 0,
+      emptyContent: /* @__PURE__ */ React.createElement(
+        TableEmptyState,
+        {
+          status,
+          hasData: !!hasData,
+          classes
+        }
+      ),
+      title,
       page,
       onPageChange: handleChangePage,
       totalCount: totalElements,
@@ -530,6 +598,453 @@ const WorkspaceTable = ({
   );
 };
 
+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%"
@@ -570,11 +1085,13 @@ const useStyles = makeStyles((theme) => ({
   workspaceItem: { padding: "0.75rem", fontSize: "1rem" }
 }));
 var WorkspaceDataType = /* @__PURE__ */ ((WorkspaceDataType2) => {
-  WorkspaceDataType2[WorkspaceDataType2["Resource"] = 0] = "Resource";
-  WorkspaceDataType2[WorkspaceDataType2["Output"] = 1] = "Output";
+  WorkspaceDataType2["ResourceType"] = "Resource";
+  WorkspaceDataType2["DataSourceType"] = "DataSource";
+  WorkspaceDataType2["OutputType"] = "Output";
   return WorkspaceDataType2;
 })(WorkspaceDataType || {});
 function WorkspaceList() {
+  var _a, _b, _c;
   const [refresh, setRefresh] = useState(false);
   const classes = useStyles();
   const discoveryApi = useApi(discoveryApiRef);
@@ -587,21 +1104,20 @@ function WorkspaceList() {
     return harnessWorkspaceUrlObject[Object.keys(harnessWorkspaceUrlObject)[0]];
   });
   const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(5);
+  const [pageSize, setPageSize] = useState(10);
   const [selectedTab, setSelectedTab] = React.useState(
-    0 /* Resource */
+    "Resource" /* ResourceType */
   );
+  const [selectedRowData, setSelectedRowData] = useState(null);
   const handleChange = (_event, resourceType) => {
     setSelectedTab(resourceType);
   };
-  const {
-    projectId,
-    orgId,
-    accountId,
-    envFromUrl,
-    workspaceId,
-    cleanedString: urlForWorkspace
-  } = useResourceSlugFromEntity(
+  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
   );
@@ -614,7 +1130,23 @@ function WorkspaceList() {
     envFromUrl,
     workspace: workspaceId || null
   });
-  const { resources, outputs } = workspaceData || {};
+  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]);
@@ -633,6 +1165,17 @@ function WorkspaceList() {
     },
     [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,
     {
@@ -689,24 +1232,53 @@ function WorkspaceList() {
       onChange: handleChange,
       "aria-label": "workspace_list_tabs"
     },
-    /* @__PURE__ */ React.createElement(Tab, { label: `Resources (${resources == null ? void 0 : resources.length})` }),
-    /* @__PURE__ */ React.createElement(Tab, { label: `Outputs (${outputs == null ? void 0 : outputs.length})` })
+    /* @__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,
     {
       setRefresh,
       refresh,
       pageSize,
-      currTableData: selectedTab === 0 /* Resource */ ? resources : outputs,
+      currTableData,
       page,
       handleChangePage,
-      totalElements: selectedTab === 0 /* Resource */ ? resources == null ? void 0 : resources.length : outputs == null ? void 0 : outputs.length,
+      totalElements,
       handleChangeRowsPerPage,
       classes,
-      baseUrl: urlForWorkspace,
-      workspaceDataType: selectedTab
+      workspaceDataType: selectedTab,
+      onRowClick: handleRowClick,
+      status: state
+    }
+  )), /* @__PURE__ */ React.createElement(
+    ResourceDetailDrawer,
+    {
+      open: !!selectedRowData,
+      resource: selectedRowData,
+      onClose: handleDrawerClose,
+      title: drawerTitle,
+      width: 1200
     }
-  )));
+  ));
 }
 
 const isHarnessIacmAvailable = (entity) => {