From 65ef6303f61fbd3c3767c9ca53bf28bdf1ae8f46 Mon Sep 17 00:00:00 2001
From: Yash sharma <71271069+Yashsharma1911@users.noreply.github.com>
Date: Wed, 4 Sep 2024 19:03:57 +0530
Subject: [PATCH 01/11] Update publish modal schema

Signed-off-by: Yash sharma <71271069+Yashsharma1911@users.noreply.github.com>
---
 src/schemas/publishCatalogItem/schema.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/schemas/publishCatalogItem/schema.tsx b/src/schemas/publishCatalogItem/schema.tsx
index 9219fc2bc..6c9b5ea3a 100644
--- a/src/schemas/publishCatalogItem/schema.tsx
+++ b/src/schemas/publishCatalogItem/schema.tsx
@@ -24,14 +24,16 @@ const publishCatalogItemSchema = {
       description:
         'Specific stipulations to consider and known behaviors to be aware of when using this design.',
       format: 'textarea',
-      'x-rjsf-grid-area': 12
+      'x-rjsf-grid-area': 12,
+      "x-encode-in-uri": true
     },
     pattern_info: {
       type: 'string',
       title: 'Description',
       description: 'Purpose of the design along with its intended and unintended uses.',
       format: 'textarea',
-      'x-rjsf-grid-area': 12
+      'x-rjsf-grid-area': 12,
+      "x-encode-in-uri": true
     },
     type: {
       type: 'string',

From 0227adaeaf2bd41211203b71621a0e85755d3042 Mon Sep 17 00:00:00 2001
From: Amit Amrutiya <amitamrutiya2210@gmail.com>
Date: Fri, 25 Oct 2024 11:59:41 +0530
Subject: [PATCH 02/11] feat: add component in the filter sidbar state

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
---
 .../CatalogFilterSidebar.tsx                  |  14 +-
 .../CatalogFilterSidebarState.tsx             |  47 ++++---
 .../CatalogFilterSection/FilterSection.tsx    | 120 ++++++++++--------
 src/custom/CatalogFilterSection/index.tsx     |   4 +-
 src/custom/index.tsx                          |   2 +-
 5 files changed, 112 insertions(+), 75 deletions(-)

diff --git a/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx b/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx
index 965af08b6..c3e36e9ce 100644
--- a/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx
+++ b/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx
@@ -29,14 +29,24 @@ export interface FilterOption {
 export interface FilterList {
   filterKey: string;
   sectionDisplayName?: string;
-  options: FilterOption[];
   defaultOpen?: boolean;
   isMultiSelect?: boolean;
+  options?: FilterOption[];
+  customComponent?: React.ComponentType;
 }
 
+type FilterListWithOptions = FilterList & { options: FilterOption[]; customComponent?: never };
+
+type FilterListWithCustomComponent = FilterList & {
+  customComponent: React.ComponentType;
+  options?: never;
+};
+
+export type FilterListType = FilterListWithOptions | FilterListWithCustomComponent;
+
 export interface CatalogFilterSidebarProps {
   setData: (callback: (prevFilters: FilterValues) => FilterValues) => void;
-  lists: FilterList[];
+  lists: FilterListType[];
   value?: FilterValues;
   styleProps?: StyleProps;
 }
diff --git a/src/custom/CatalogFilterSection/CatalogFilterSidebarState.tsx b/src/custom/CatalogFilterSection/CatalogFilterSidebarState.tsx
index 76b0d72d3..1d2bb51ba 100644
--- a/src/custom/CatalogFilterSection/CatalogFilterSidebarState.tsx
+++ b/src/custom/CatalogFilterSection/CatalogFilterSidebarState.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import {
   CatalogFilterSidebarProps,
-  FilterList,
+  FilterListType,
   FilterValues,
   StyleProps
 } from './CatalogFilterSidebar';
@@ -16,7 +16,7 @@ import FilterSection from './FilterSection';
  * @param {Object} styleProps - The style properties for the component.
  */
 const CatalogFilterSidebarState: React.FC<{
-  lists: FilterList[];
+  lists: FilterListType[];
   onApplyFilters: CatalogFilterSidebarProps['setData'];
   value: FilterValues;
   styleProps: StyleProps;
@@ -78,19 +78,36 @@ const CatalogFilterSidebarState: React.FC<{
 
   return (
     <>
-      {lists.map((list) => (
-        <FilterSection
-          key={list.filterKey}
-          filterKey={list.filterKey}
-          sectionDisplayName={list.sectionDisplayName}
-          options={list.options}
-          filters={value}
-          openSections={openSections}
-          onCheckboxChange={handleCheckboxChange}
-          onSectionToggle={handleSectionToggle}
-          styleProps={styleProps}
-        />
-      ))}
+      {lists.map((list) => {
+        if (list.customComponent) {
+          return (
+            <FilterSection
+              key={list.filterKey}
+              filterKey={list.filterKey}
+              filters={value}
+              sectionDisplayName={list.sectionDisplayName}
+              onSectionToggle={handleSectionToggle}
+              styleProps={styleProps}
+              openSections={openSections}
+              customComponent={list.customComponent}
+            />
+          );
+        }
+
+        return (
+          <FilterSection
+            key={list.filterKey}
+            filterKey={list.filterKey}
+            sectionDisplayName={list.sectionDisplayName}
+            options={list.options}
+            filters={value}
+            openSections={openSections}
+            onCheckboxChange={handleCheckboxChange}
+            onSectionToggle={handleSectionToggle}
+            styleProps={styleProps}
+          />
+        );
+      })}
     </>
   );
 };
diff --git a/src/custom/CatalogFilterSection/FilterSection.tsx b/src/custom/CatalogFilterSection/FilterSection.tsx
index 0696a6ed1..4be5eddbd 100644
--- a/src/custom/CatalogFilterSection/FilterSection.tsx
+++ b/src/custom/CatalogFilterSection/FilterSection.tsx
@@ -10,12 +10,13 @@ import { EndAdornmentText, FilterTitleButton } from './style';
 interface FilterSectionProps {
   filterKey: string;
   sectionDisplayName?: string;
-  options: FilterOption[];
+  options?: FilterOption[];
   filters: FilterValues;
   openSections: Record<string, boolean>;
-  onCheckboxChange: (filterKey: string, value: string, checked: boolean) => void;
+  onCheckboxChange?: (filterKey: string, value: string, checked: boolean) => void;
   onSectionToggle: (filterKey: string) => void;
   styleProps: StyleProps;
+  customComponent?: React.ComponentType;
 }
 
 /**
@@ -33,12 +34,13 @@ interface FilterSectionProps {
 const FilterSection: React.FC<FilterSectionProps> = ({
   filterKey,
   sectionDisplayName,
-  options,
+  options = [],
   filters,
   openSections,
   onCheckboxChange,
   onSectionToggle,
-  styleProps
+  styleProps,
+  customComponent: CustomComponent
 }) => {
   const [searchQuery, setSearchQuery] = useState<string>('');
 
@@ -47,9 +49,10 @@ const FilterSection: React.FC<FilterSectionProps> = ({
   }, []);
 
   const showSearch = options.length > 10;
-  const searchedOptions = searchQuery
-    ? options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()))
-    : options;
+  const searchedOptions =
+    searchQuery && options.length
+      ? options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()))
+      : options;
 
   return (
     <>
@@ -65,59 +68,66 @@ const FilterSection: React.FC<FilterSectionProps> = ({
         {openSections[filterKey] ? <ExpandLessIcon /> : <ExpandMoreIcon />}
       </FilterTitleButton>
       <Collapse in={openSections[filterKey]} timeout="auto" unmountOnExit>
-        <List
-          component="div"
-          sx={{
-            overflowY: 'auto',
-            maxHeight: '25rem',
-            backgroundColor: styleProps.backgroundColor
-          }}
-        >
-          {showSearch && (
-            <Box px={'0.5rem'} mb={'0.5rem'}>
-              <StyledSearchBar
-                value={searchQuery}
-                onChange={handleTextFieldChange}
-                placeholder="Search"
-                endAdornment={
-                  <EndAdornmentText> Total : {searchedOptions.length ?? 0}</EndAdornmentText>
-                }
-              />
-            </Box>
-          )}
-          {searchedOptions.map((option, index) => (
-            <Stack
-              key={`${option.value}-${index}`}
-              direction="row"
-              alignItems="center"
-              px={'0.5rem'}
-              justifyContent="space-between"
-            >
-              <Stack direction="row" alignItems="center" gap="0.35rem">
-                <Checkbox
-                  id={`checkbox-${option.label}`}
-                  checked={
-                    Array.isArray(filters[filterKey])
-                      ? (filters[filterKey] as string[]).includes(option.value)
-                      : filters[filterKey] === option.value
+        {CustomComponent ? (
+          <CustomComponent />
+        ) : (
+          <List
+            component="div"
+            sx={{
+              overflowY: 'auto',
+              maxHeight: '25rem',
+              backgroundColor: styleProps.backgroundColor
+            }}
+          >
+            {showSearch && (
+              <Box px={'0.5rem'} mb={'0.5rem'}>
+                <StyledSearchBar
+                  value={searchQuery}
+                  onChange={handleTextFieldChange}
+                  placeholder="Search"
+                  endAdornment={
+                    <EndAdornmentText>Total : {searchedOptions.length ?? 0}</EndAdornmentText>
                   }
-                  onChange={(e) => onCheckboxChange(filterKey, option.value, e.target.checked)}
-                  value={option.value}
                 />
+              </Box>
+            )}
+            {searchedOptions.map((option, index) => (
+              <Stack
+                key={`${option.value}-${index}`}
+                direction="row"
+                alignItems="center"
+                px={'0.5rem'}
+                justifyContent="space-between"
+              >
+                <Stack direction="row" alignItems="center" gap="0.35rem">
+                  <Checkbox
+                    id={`checkbox-${option.label}`}
+                    checked={
+                      Array.isArray(filters[filterKey])
+                        ? (filters[filterKey] as string[]).includes(option.value)
+                        : filters[filterKey] === option.value
+                    }
+                    onChange={(e) =>
+                      onCheckboxChange &&
+                      onCheckboxChange(filterKey, option.value, e.target.checked)
+                    }
+                    value={option.value}
+                  />
 
-                {option.Icon && <option.Icon width="20px" height="20px" />}
+                  {option.Icon && <option.Icon width="20px" height="20px" />}
 
-                <Typography fontFamily={styleProps.fontFamily}>{option.label}</Typography>
+                  <Typography fontFamily={styleProps.fontFamily}>{option.label}</Typography>
+                </Stack>
+                <Stack direction="row" alignItems="center" gap="0.35rem">
+                  {option.totalCount !== undefined && `(${option.totalCount || 0})`}
+                  {option.description && (
+                    <InfoTooltip variant="standard" helpText={option.description} />
+                  )}
+                </Stack>
               </Stack>
-              <Stack direction="row" alignItems="center" gap="0.35rem">
-                {option.totalCount !== undefined && `(${option.totalCount || 0})`}
-                {option.description && (
-                  <InfoTooltip variant="standard" helpText={option.description} />
-                )}
-              </Stack>
-            </Stack>
-          ))}
-        </List>
+            ))}
+          </List>
+        )}
       </Collapse>
     </>
   );
diff --git a/src/custom/CatalogFilterSection/index.tsx b/src/custom/CatalogFilterSection/index.tsx
index a79660b97..5fb7338c4 100644
--- a/src/custom/CatalogFilterSection/index.tsx
+++ b/src/custom/CatalogFilterSection/index.tsx
@@ -1,4 +1,4 @@
-import CatalogFilterSidebar, { FilterList } from './CatalogFilterSidebar';
+import CatalogFilterSidebar, { FilterListType } from './CatalogFilterSidebar';
 
 export { CatalogFilterSidebar };
-export type { FilterList };
+export type { FilterListType };
diff --git a/src/custom/index.tsx b/src/custom/index.tsx
index a7505ea50..ae5e6f82e 100644
--- a/src/custom/index.tsx
+++ b/src/custom/index.tsx
@@ -45,7 +45,7 @@ import { TransferListProps } from './TransferModal/TransferList/TransferList';
 import UniversalFilter, { UniversalFilterProps } from './UniversalFilter';
 export { CatalogCard } from './CatalogCard';
 export { CatalogFilterSidebar } from './CatalogFilterSection';
-export type { FilterList } from './CatalogFilterSection';
+export type { FilterListType } from './CatalogFilterSection';
 export { StyledChartDialog } from './ChartDialog';
 export { LearningContent } from './LearningContent';
 export { NavigationNavbar } from './NavigationNavbar';

From 98b56ac23cd1d88bc717a711c28b65d6b3544eaa Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Tue, 29 Oct 2024 06:34:59 +0530
Subject: [PATCH 03/11] fix(error): boundary

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/custom/ErrorBoundary/ErrorBoundary.tsx | 53 ++++++++++++++++++++--
 1 file changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/custom/ErrorBoundary/ErrorBoundary.tsx b/src/custom/ErrorBoundary/ErrorBoundary.tsx
index 513453070..6858e896d 100644
--- a/src/custom/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/custom/ErrorBoundary/ErrorBoundary.tsx
@@ -20,6 +20,8 @@ const StyledLink = styled(Link)(({ theme }) => ({
 }));
 
 const CodeMessage = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
   backgroundColor: theme.palette.background.code,
   color: theme.palette.text.tertiary,
   padding: '.85rem',
@@ -30,14 +32,25 @@ const CodeMessage = styled('div')(({ theme }) => ({
 interface FallbackComponentProps extends FallbackProps {
   resetErrorBoundary: () => void;
   children?: React.ReactNode;
+  pageUrl?: string;
+  timestamp?: string;
 }
 
 export function Fallback({ error, children }: FallbackComponentProps): JSX.Element {
+  const pageUrl = window.location.href;
+  const timestamp = new Date().toLocaleString();
   return (
     <div role="alert">
       <h2>Uh-oh!😔 Please pardon the mesh.</h2>
       <CodeMessage>
-        <code>{(error as Error).message}</code>
+        <code>
+          <strong>Error: </strong>
+          {(error as Error).message}
+        </code>
+        <br />
+        <strong> URL: </strong> {pageUrl}
+        <br />
+        <strong>Logged at:</strong> {timestamp}
       </CodeMessage>
       <ErrorMessage>
         We apologize for the inconvenience. The issue may be on our end. If troubleshooting doesn't
@@ -56,18 +69,50 @@ export function Fallback({ error, children }: FallbackComponentProps): JSX.Eleme
 }
 
 const reportError = (error: Error, info: React.ErrorInfo): void => {
+  const pageUrl = window.location.href;
+  const timestamp = new Date().toLocaleString();
   // This is where you'd send the error to Sentry, etc
-  console.log('Error Caught Inside Boundary --reportError', error, 'Info', info);
+  console.log(
+    'Error Caught Inside Boundary --reportError',
+    error,
+    'Info',
+    info,
+    'Page URL:',
+    pageUrl,
+    'Timestamp:',
+    timestamp
+  );
 };
 
 interface ErrorBoundaryProps {
   customFallback?: React.ComponentType<FallbackProps>;
   children: React.ReactNode;
+  onErrorCaught?: (error: string) => void;
 }
 
-export const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ customFallback, children }) => {
+export const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({
+  customFallback,
+  children,
+  onErrorCaught
+}) => {
+  const pageUrl = window.location.href;
+  const timestamp = new Date().toLocaleString();
+
+  const handleError = (error: Error, info: React.ErrorInfo) => {
+    // Pass error message to onErrorCaught
+    onErrorCaught?.(error.message);
+    reportError(error, info);
+  };
+
   return (
-    <ReactErrorBoundary FallbackComponent={customFallback ?? Fallback} onError={reportError}>
+    <ReactErrorBoundary
+      FallbackComponent={
+        customFallback
+          ? customFallback
+          : (props) => <Fallback {...props} pageUrl={pageUrl} timestamp={timestamp} />
+      }
+      onError={handleError}
+    >
       {children}
     </ReactErrorBoundary>
   );

From e96dfe0122d6796f1a09ccc56d6328599bb7d52f Mon Sep 17 00:00:00 2001
From: Antonette Caldwell <134739862+nebula-aac@users.noreply.github.com>
Date: Wed, 30 Oct 2024 15:38:09 +0000
Subject: [PATCH 04/11] ci: remove storybook workflow

Signed-off-by: Antonette Caldwell <134739862+nebula-aac@users.noreply.github.com>
---
 .github/workflows/storybook-deploy.yml | 40 --------------------------
 1 file changed, 40 deletions(-)
 delete mode 100644 .github/workflows/storybook-deploy.yml

diff --git a/.github/workflows/storybook-deploy.yml b/.github/workflows/storybook-deploy.yml
deleted file mode 100644
index 0e3c5c523..000000000
--- a/.github/workflows/storybook-deploy.yml
+++ /dev/null
@@ -1,40 +0,0 @@
-name: Deploy Storybook
-
-on:
-  push:
-    branches:
-      - "*"
-  pull_request:
-    branches:
-      - "*"
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    strategy:
-        matrix:
-          node-version: [16, 18, 20]
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
-
-      - name: Set up Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build Storybook
-        run: |
-          cd apps/design-system
-          npm install
-          npm build-storybook
-
-      - name: Deploy Storybook
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./storybook-static

From 6a810d12977de2f7aa9073ef97c77dd8dcefbcbc Mon Sep 17 00:00:00 2001
From: Lee Calcote <lee.calcote@layer5.io>
Date: Thu, 31 Oct 2024 10:28:49 -0500
Subject: [PATCH 05/11] [CI] Fix "author" parameter format in
 create-pull-request workflow

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
---
 .github/workflows/bump-meshery-version.yml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/bump-meshery-version.yml b/.github/workflows/bump-meshery-version.yml
index 99e5c52dd..ab48cd36e 100644
--- a/.github/workflows/bump-meshery-version.yml
+++ b/.github/workflows/bump-meshery-version.yml
@@ -29,7 +29,7 @@ jobs:
           token: ${{ secrets.RELEASEDRAFTER_PAT }}
           commit-message: Bump sistent ${{ github.event.release.tag_name }} dependencies
           committer: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
-          author: "l5io"
+          author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
           signoff: true
           branch: bump-sistent-bot
           delete-branch: true
@@ -67,7 +67,7 @@ jobs:
           token: ${{ secrets.RELEASEDRAFTER_PAT }}
           commit-message: Bump sistent ${{ github.event.release.tag_name }} dependencies
           committer: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
-          author: "l5io"
+          author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
           signoff: true
           branch: bump-sistent-bot
           delete-branch: true
@@ -105,7 +105,7 @@ jobs:
           token: ${{ secrets.RELEASEDRAFTER_PAT }}
           commit-message: Bump sistent ${{ github.event.release.tag_name }} dependencies
           committer: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
-          author: "l5io"
+          author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
           signoff: true
           branch: bump-sistent-bot
           delete-branch: true
@@ -118,4 +118,4 @@ jobs:
             
             _This pull request has been auto-generated by [l5io](http://github.com/l5io)_
           assignees: l5io
-          draft: false
\ No newline at end of file
+          draft: false

From 48885ccc75a6d88dd8078db4dbaf98142e45a630 Mon Sep 17 00:00:00 2001
From: Yash sharma <71271069+Yashsharma1911@users.noreply.github.com>
Date: Fri, 1 Nov 2024 17:14:01 +0000
Subject: [PATCH 06/11] fix: fix prettier issue

Signed-off-by: Yash sharma <71271069+Yashsharma1911@users.noreply.github.com>
---
 src/schemas/publishCatalogItem/schema.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/schemas/publishCatalogItem/schema.tsx b/src/schemas/publishCatalogItem/schema.tsx
index 6c9b5ea3a..06295112f 100644
--- a/src/schemas/publishCatalogItem/schema.tsx
+++ b/src/schemas/publishCatalogItem/schema.tsx
@@ -25,7 +25,7 @@ const publishCatalogItemSchema = {
         'Specific stipulations to consider and known behaviors to be aware of when using this design.',
       format: 'textarea',
       'x-rjsf-grid-area': 12,
-      "x-encode-in-uri": true
+      'x-encode-in-uri': true
     },
     pattern_info: {
       type: 'string',
@@ -33,7 +33,7 @@ const publishCatalogItemSchema = {
       description: 'Purpose of the design along with its intended and unintended uses.',
       format: 'textarea',
       'x-rjsf-grid-area': 12,
-      "x-encode-in-uri": true
+      'x-encode-in-uri': true
     },
     type: {
       type: 'string',

From d5c394e5839e2a9b6a0f80b00055849b8a20605b Mon Sep 17 00:00:00 2001
From: Yash sharma <71271069+Yashsharma1911@users.noreply.github.com>
Date: Fri, 1 Nov 2024 18:34:48 +0000
Subject: [PATCH 07/11] fix: reorder the fields

Signed-off-by: Yash sharma <71271069+Yashsharma1911@users.noreply.github.com>
---
 src/schemas/publishCatalogItem/uiSchema.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/schemas/publishCatalogItem/uiSchema.tsx b/src/schemas/publishCatalogItem/uiSchema.tsx
index 646098bdf..2e2e9f695 100644
--- a/src/schemas/publishCatalogItem/uiSchema.tsx
+++ b/src/schemas/publishCatalogItem/uiSchema.tsx
@@ -1,5 +1,5 @@
 const publishCatalogItemUiSchema = {
-  'ui:order': ['type', 'compatibility', 'pattern_caveats', 'pattern_info']
+  'ui:order': ['type', 'compatibility', 'pattern_info', 'pattern_caveats']
 };
 
 export default publishCatalogItemUiSchema;

From cd01819c31d7ed00bdb6966f442015309a15aca2 Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Sat, 2 Nov 2024 16:52:04 +0530
Subject: [PATCH 08/11] feat(catalog): unpublish action

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/custom/CatalogDetail/ActionButton.tsx | 29 ++++++++++++++++++++---
 src/custom/CatalogDetail/style.tsx        | 16 +++++++++++++
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
index ed7ce790f..8d000e1d2 100644
--- a/src/custom/CatalogDetail/ActionButton.tsx
+++ b/src/custom/CatalogDetail/ActionButton.tsx
@@ -1,12 +1,12 @@
 import _ from 'lodash';
 import React from 'react';
 import { CircularProgress } from '../../base';
-import { CopyIcon, KanvasIcon } from '../../icons';
+import { CopyIcon, KanvasIcon, PublishIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
 import { charcoal } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { downloadFilter, downloadYaml, slugify } from './helper';
-import { ActionButton, LinkUrl, StyledActionWrapper } from './style';
+import { ActionButton, LinkUrl, StyledActionWrapper, UnpublishAction } from './style';
 import { RESOURCE_TYPES } from './types';
 
 interface ActionButtonsProps {
@@ -17,8 +17,10 @@ interface ActionButtonsProps {
   isCloneLoading: boolean;
   handleClone: (name: string, id: string) => void;
   mode: string;
+  handleUnpublish?: () => void;
   isCloneDisabled: boolean;
   showOpenPlaygroundButton: boolean;
+  showUnpublishAction: boolean;
 }
 
 const ActionButtons: React.FC<ActionButtonsProps> = ({
@@ -30,7 +32,9 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   handleClone,
   mode,
   isCloneDisabled,
-  showOpenPlaygroundButton
+  showOpenPlaygroundButton,
+  showUnpublishAction,
+  handleUnpublish
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
   const resourcePlaygroundType = Object.values({
@@ -112,6 +116,25 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
           </ActionButton>
         </LinkUrl>
       )}
+      {showUnpublishAction && (
+        <LinkUrl
+          style={{ width: '100%' }}
+          onClick={handleUnpublish}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <UnpublishAction
+            sx={{
+              borderRadius: '0.2rem',
+              gap: '10px',
+              width: '100%'
+            }}
+          >
+            <PublishIcon width={24} height={24} fill={charcoal[10]} />
+            Unpublish
+          </UnpublishAction>
+        </LinkUrl>
+      )}
     </StyledActionWrapper>
   );
 };
diff --git a/src/custom/CatalogDetail/style.tsx b/src/custom/CatalogDetail/style.tsx
index 5d6320255..818674924 100644
--- a/src/custom/CatalogDetail/style.tsx
+++ b/src/custom/CatalogDetail/style.tsx
@@ -39,6 +39,22 @@ export const ActionButton = styled('div')<ActionButtonProps>(({ disabled = false
   flex: '1'
 }));
 
+export const UnpublishAction = styled('div')<ActionButtonProps>(({ disabled = false, theme }) => ({
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  opacity: disabled ? '0.5' : '1',
+  textAlign: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '0.5rem',
+  backgroundColor: 'transparent',
+  border: theme.palette.border.default,
+  padding: '0.5rem',
+  color: theme.palette.text.default,
+  gap: '0.625rem',
+  flex: '1'
+}));
+
 export const ContentDetailsText = styled(Typography)(({ theme }) => ({
   fontFamily: 'inherit',
   fontSize: '1rem',

From b30a3245e9a3b362bf54b515abe3b7a4cff8cdc5 Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Mon, 4 Nov 2024 07:20:48 +0530
Subject: [PATCH 09/11] fix(check): add missing props

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/custom/CatalogDetail/ActionButton.tsx | 26 +++++++++--------------
 src/custom/CatalogDetail/LeftPanel.tsx    |  6 ++++++
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
index 8d000e1d2..1cd4ff662 100644
--- a/src/custom/CatalogDetail/ActionButton.tsx
+++ b/src/custom/CatalogDetail/ActionButton.tsx
@@ -17,7 +17,7 @@ interface ActionButtonsProps {
   isCloneLoading: boolean;
   handleClone: (name: string, id: string) => void;
   mode: string;
-  handleUnpublish?: () => void;
+  handleUnpublish: () => void;
   isCloneDisabled: boolean;
   showOpenPlaygroundButton: boolean;
   showUnpublishAction: boolean;
@@ -117,23 +117,17 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
         </LinkUrl>
       )}
       {showUnpublishAction && (
-        <LinkUrl
-          style={{ width: '100%' }}
+        <UnpublishAction
+          sx={{
+            borderRadius: '0.2rem',
+            gap: '10px',
+            width: '100%'
+          }}
           onClick={handleUnpublish}
-          target="_blank"
-          rel="noreferrer"
         >
-          <UnpublishAction
-            sx={{
-              borderRadius: '0.2rem',
-              gap: '10px',
-              width: '100%'
-            }}
-          >
-            <PublishIcon width={24} height={24} fill={charcoal[10]} />
-            Unpublish
-          </UnpublishAction>
-        </LinkUrl>
+          <PublishIcon width={24} height={24} fill={charcoal[10]} />
+          Unpublish
+        </UnpublishAction>
       )}
     </StyledActionWrapper>
   );
diff --git a/src/custom/CatalogDetail/LeftPanel.tsx b/src/custom/CatalogDetail/LeftPanel.tsx
index 30d006072..70ed50d20 100644
--- a/src/custom/CatalogDetail/LeftPanel.tsx
+++ b/src/custom/CatalogDetail/LeftPanel.tsx
@@ -22,6 +22,8 @@ interface LeftPanelProps {
   technologySVGSubpath: string;
   fontFamily?: string;
   showOpenPlaygroundButton?: boolean;
+  handleUnpublish: () => void;
+  showUnpublishAction?: boolean;
 }
 
 const LeftPanel: React.FC<LeftPanelProps> = ({
@@ -31,6 +33,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   actionItems = true,
   isCloneLoading,
   handleClone,
+  handleUnpublish,
   showTechnologies = true,
   mode,
   filteredAcademyData,
@@ -38,6 +41,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   technologySVGPath,
   technologySVGSubpath,
   fontFamily,
+  showUnpublishAction = false,
   showOpenPlaygroundButton = true
 }) => {
   const theme = useTheme();
@@ -77,6 +81,8 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         cardId={cardId}
         isCloneLoading={isCloneLoading}
         handleClone={handleClone}
+        showUnpublishAction={showUnpublishAction}
+        handleUnpublish={handleUnpublish}
         mode={mode}
         isCloneDisabled={isCloneDisabled}
         showOpenPlaygroundButton={showOpenPlaygroundButton}

From 1f4fce9bbb79b514f3394daff2c11adf0f5dcc9b Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Mon, 4 Nov 2024 10:25:22 +0530
Subject: [PATCH 10/11] fix(style): add border

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/custom/CatalogDetail/style.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/custom/CatalogDetail/style.tsx b/src/custom/CatalogDetail/style.tsx
index 818674924..672137aaa 100644
--- a/src/custom/CatalogDetail/style.tsx
+++ b/src/custom/CatalogDetail/style.tsx
@@ -48,7 +48,7 @@ export const UnpublishAction = styled('div')<ActionButtonProps>(({ disabled = fa
   alignItems: 'center',
   borderRadius: '0.5rem',
   backgroundColor: 'transparent',
-  border: theme.palette.border.default,
+  border: `1px solid ${theme.palette.border.normal}`,
   padding: '0.5rem',
   color: theme.palette.text.default,
   gap: '0.625rem',

From a07edba3ac757853603a3217e4436fbc82efc656 Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Mon, 4 Nov 2024 16:56:16 +0530
Subject: [PATCH 11/11] fix(error): rm unwanted and add version

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/custom/ErrorBoundary/ErrorBoundary.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/custom/ErrorBoundary/ErrorBoundary.tsx b/src/custom/ErrorBoundary/ErrorBoundary.tsx
index 6858e896d..a47c3e8cb 100644
--- a/src/custom/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/custom/ErrorBoundary/ErrorBoundary.tsx
@@ -34,11 +34,16 @@ interface FallbackComponentProps extends FallbackProps {
   children?: React.ReactNode;
   pageUrl?: string;
   timestamp?: string;
+  showPackageInfo?: boolean;
+  version?: string;
 }
 
-export function Fallback({ error, children }: FallbackComponentProps): JSX.Element {
-  const pageUrl = window.location.href;
-  const timestamp = new Date().toLocaleString();
+export function Fallback({
+  error,
+  children,
+  showPackageInfo,
+  version
+}: FallbackComponentProps): JSX.Element {
   return (
     <div role="alert">
       <h2>Uh-oh!😔 Please pardon the mesh.</h2>
@@ -48,9 +53,11 @@ export function Fallback({ error, children }: FallbackComponentProps): JSX.Eleme
           {(error as Error).message}
         </code>
         <br />
-        <strong> URL: </strong> {pageUrl}
-        <br />
-        <strong>Logged at:</strong> {timestamp}
+        {showPackageInfo && (
+          <>
+            <strong>Version:</strong> {version}
+          </>
+        )}
       </CodeMessage>
       <ErrorMessage>
         We apologize for the inconvenience. The issue may be on our end. If troubleshooting doesn't