Merge branch 'master' into user-serach-fiel

Author: amitamrutiya

.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
+          draft: false

.github/workflows/storybook-deploy.yml

@@ -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,19 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
           </ActionButton>
         </LinkUrl>
       )}
+      {showUnpublishAction && (
+        <UnpublishAction
+          sx={{
+            borderRadius: '0.2rem',
+            gap: '10px',
+            width: '100%'
+          }}
+          onClick={handleUnpublish}
+        >
+          <PublishIcon width={24} height={24} fill={charcoal[10]} />
+          Unpublish
+        </UnpublishAction>
+      )}
     </StyledActionWrapper>
   );
 };

src/custom/CatalogDetail/ActionButton.tsx

@@ -22,6 +22,8 @@ interface LeftPanelProps {
   technologySVGSubpath: string;
   fontFamily?: string;
   showOpenPlaygroundButton?: boolean;
+  handleUnpublish: () => void;
+  showUnpublishAction?: boolean;
 }
 
 const LeftPanel: React.FC<LeftPanelProps> = ({
@@ -31,13 +33,15 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   actionItems = true,
   isCloneLoading,
   handleClone,
+  handleUnpublish,
   showTechnologies = true,
   mode,
   filteredAcademyData,
   isCloneDisabled,
   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}

src/custom/CatalogDetail/LeftPanel.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: `1px solid ${theme.palette.border.normal}`,
+  padding: '0.5rem',
+  color: theme.palette.text.default,
+  gap: '0.625rem',
+  flex: '1'
+}));
+
 export const ContentDetailsText = styled(Typography)(({ theme }) => ({
   fontFamily: 'inherit',
   fontSize: '1rem',

src/custom/CatalogDetail/style.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;
 }

src/custom/CatalogFilterSection/CatalogFilterSidebar.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}
+          />
+        );
+      })}
     </>
   );
 };