feat: integrate configure patch modal and edit patch button

src/Pages/GlobalConfigurations/DeploymentCharts/DeploymentChartsRouter.component.tsx

@@ -30,7 +30,7 @@ const DeploymentChartsRouter = () => {
 
     return (
         // NOTE: need to give fixed height here for resizable code editor height
-        <div className="flexbox-col bg__tertiary dc__overflow-hidden h-100">
+        <div className="flexbox-col bg__primary h-100">
             <Switch>
                 <Route exact path={URLS.GLOBAL_CONFIG_DEPLOYMENT_CHARTS_LIST}>
                     <DeploymentChartsList />

src/Pages/GlobalConfigurations/DeploymentCharts/List/DeploymentChartsList.component.tsx

@@ -14,34 +14,64 @@
  * limitations under the License.
  */
 
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import {
     GenericEmptyState,
-    InfoColourBar,
     APIResponseHandler,
     useAsync,
     Tooltip,
     EMPTY_STATE_STATUS,
     URLS,
+    SortableTableHeaderCell,
+    getAlphabetIcon,
+    useUrlFilters,
+    GenericFilterEmptyState,
+    stringComparatorBySortOrder,
+    DeploymentChartType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { DOCUMENTATION } from '@Config/constants'
 import emptyCustomChart from '@Images/ic-empty-custom-charts.webp'
-import { ReactComponent as DevtronIcon } from '@Icons/ic-devtron-app.svg'
-import { ReactComponent as HelpIcon } from '@Icons/ic-help.svg'
+import { ReactComponent as ICFolderZip } from '@Icons/ic-folder-zip.svg'
+import { ReactComponent as ICDevtron } from '@Icons/ic-devtron.svg'
 import { importComponentFromFELibrary } from '@Components/common'
 import UploadChartModal from './UploadChartModal'
 import { getChartList } from './service'
 import DeploymentChartsListHeader from './DeploymentChartsListHeader'
 import UploadButton from './UploadButton'
 import DownloadChartButton from './DownloadChartButton'
 import './styles.scss'
+import { DeploymentChartsListSortableKeys } from '../types'
 
-const EditDeploymentChart = importComponentFromFELibrary('EditDeploymentChart', null, 'function')
+const DeploymentChartActionButton = importComponentFromFELibrary('DeploymentChartActionButton', null, 'function')
 
 const DeploymentChartsList = () => {
     const [showUploadPopup, setShowUploadPopup] = useState(false)
     const [chartListLoading, chartList, chartListError, reloadChartList] = useAsync(getChartList)
 
+    const { sortBy, sortOrder, searchKey, handleSearch, handleSorting, clearFilters } =
+        useUrlFilters<DeploymentChartsListSortableKeys>({
+            initialSortKey: DeploymentChartsListSortableKeys.CHART_NAME,
+        })
+
+    const handleTriggerSorting = (sortKey: DeploymentChartsListSortableKeys) => () => handleSorting(sortKey)
+
+    const sortChartList = (a: DeploymentChartType, b: DeploymentChartType) => {
+        switch (sortBy) {
+            case DeploymentChartsListSortableKeys.CHART_VERSION:
+                return stringComparatorBySortOrder(a.versions[0].version, b.versions[0].version, sortOrder)
+            case DeploymentChartsListSortableKeys.UPLOADED_BY:
+                return stringComparatorBySortOrder(a.versions[0].uploadedBy, b.versions[0].uploadedBy, sortOrder)
+            default:
+                return stringComparatorBySortOrder(a.name, b.name, sortOrder)
+        }
+    }
+
+    const filteredChartList = useMemo(() => {
+        const lowerCaseSearch = searchKey.toLowerCase()
+        const filteredList = chartList?.filter((chart) => chart.name.toLowerCase().includes(lowerCaseSearch)) || []
+        return filteredList.sort((a, b) => sortChartList(a, b))
+    }, [sortBy, sortOrder, searchKey, chartList])
+
     const handleCloseUploadChartModal = (isReloadChartList: boolean): void => {
         setShowUploadPopup(false)
         if (isReloadChartList) {
@@ -81,74 +111,91 @@
         }
 
         return (
-            <div
-                className="chart-list flexbox-col dc__gap-20 dc__overflow-hidden h-100"
-                data-testid="custom-charts-list"
-            >
-                <DeploymentChartsListHeader handleOpenUploadChartModal={handleOpenUploadChartModal} />
-                <div
-                    data-testid="custom-chart-list"
-                    className="en-2 bw-1 bg__primary br-8 h-100 dc__overflow-hidden flexbox-col"
-                >
-                    <InfoColourBar
-                        message={
-                            <>
-                                <span className="fs-13 fw-6 lh-20">How to use?</span>
-                                <span className="fs-13 fw-4 lh-20 ml-4 mr-4">
-                                    Uploaded charts can be used in Deployment template to deploy custom applications
-                                    created in Devtron.
-                                </span>
-                                <a
-                                    href={DOCUMENTATION.CUSTOM_CHART}
-                                    target="_blank"
-                                    rel="noreferrer"
-                                    className="dc__link dc__no-decor pointer"
-                                >
-                                    Learn more
-                                </a>
-                            </>
-                        }
-                        classname="dc__content-start bcv-1 w-100 custom-chart-info-bar dc__border-bottom-v2 pt-6 pb-6 pl-16 pr-16"
-                        Icon={HelpIcon}
-                        iconClass="fcv-5 icon-dim-20"
-                    />
-                    <div className="chart-list-row fw-6 cn-7 fs-12 dc__border-bottom pt-10 pb-10 pr-20 pl-20 dc__uppercase dc__no-shrink">
-                        <span>Name</span>
-                        <span>Version</span>
-                        <span>Description</span>
-                    </div>
-                    <div className="h-100 dc__overflow-auto">
-                        {chartList.map((chartData) => (
-                            <div
-                                key={`custom-chart_${chartData.name}`}
-                                className="chart-list-row fw-4 cn-9 fs-13 dc__border-bottom-n1 pt-12 pb-12 pr-20 pl-20"
-                            >
-                                <div className="flexbox dc__gap-8 dc__align-items-center">
-                                    <span className="cn-9 dc__ellipsis-right">{chartData.name}</span>
-                                    {!chartData.isUserUploaded && (
-                                        <div className="flex bcb-1 br-6 py-2 px-6">
-                                            <DevtronIcon className="icon-dim-20" />
-                                            <span className="ml-4 fs-12 fw-6 cn-7 lh-20 devtron-tag">by Devtron</span>
+            <div className="flexbox-col h-100 dc__gap-8 pt-16" data-testid="custom-charts-list">
+                <DeploymentChartsListHeader
+                    searchKey={searchKey}
+                    handleSearch={handleSearch}
+                    handleOpenUploadChartModal={handleOpenUploadChartModal}
+                />
+                {filteredChartList.length ? (
+                    <div className="flexbox-col dc__overflow-auto">
+                        <div className="dc__grid dc__gap-16 dc__align-items-center chart-list-row dc__border-bottom px-20 py-10 fs-12 fw-6 lh-20 cn-7">
+                            <span />
+                            <SortableTableHeaderCell
+                                title="Name"
+                                isSortable
+                                disabled={false}
+                                sortOrder={sortOrder}
+                                triggerSorting={handleTriggerSorting(DeploymentChartsListSortableKeys.CHART_NAME)}
+                                isSorted={sortBy === DeploymentChartsListSortableKeys.CHART_NAME}
+                            />
+                            <SortableTableHeaderCell
+                                title="Version"
+                                isSortable
+                                disabled={false}
+                                sortOrder={sortOrder}
+                                triggerSorting={handleTriggerSorting(DeploymentChartsListSortableKeys.CHART_VERSION)}
+                                isSorted={sortBy === DeploymentChartsListSortableKeys.CHART_VERSION}
+                            />
+                            <SortableTableHeaderCell title="Description" isSortable={false} />
+                            <SortableTableHeaderCell
+                                title="Uploaded by"
+                                isSortable
+                                disabled={false}
+                                sortOrder={sortOrder}
+                                triggerSorting={handleTriggerSorting(DeploymentChartsListSortableKeys.UPLOADED_BY)}
+                                isSorted={sortBy === DeploymentChartsListSortableKeys.UPLOADED_BY}
+                            />
+                            <span />
+                        </div>
+                        <div className="flexbox-col dc__overflow-auto flex-grow-1">
+                            {filteredChartList.map((chartData) => {
+                                const { version, description, uploadedBy, isUserUploaded } = chartData.versions[0]
+                                return (
+                                    <div
+                                        key={`custom-chart_${chartData.name}`}
+                                        className="chart-list-row bg__primary fw-4 cn-9 fs-13 lh-20 fw-4 dc__grid dc__gap-16 dc__align-items-center px-20 py-10"
+                                    >
+                                        <div className="icon-dim-24 p-2">
+                                            <ICFolderZip className="icon-dim-20 fcb-5" />
+                                        </div>
+                                        <span className="dc__ellipsis-right">{chartData.name}</span>
+                                        <div className="flexbox dc__gap-8">
+                                            <span>{version}</span>
+                                            <span className="cn-5">
+                                                {!!(chartData.versions.length - 1) &&
+                                                    `+${chartData.versions.length - 1} more`}
+                                            </span>
+                                        </div>
+                                        <Tooltip content={description} placement="left">
+                                            <span className="dc__ellipsis-right">{description}</span>
+                                        </Tooltip>
+                                        <div>
+                                            <div className="flexbox dc__align-items-center dc__gap-4">
+                                                {isUserUploaded ? (
+                                                    getAlphabetIcon(uploadedBy)
+                                                ) : (
+                                                    <ICDevtron className="icon-dim-20 fcb-5 dc__no-shrink" />
+                                                )}
+                                                <Tooltip content={uploadedBy} placement="left">
+                                                    <span className="dc__ellipsis-right">{uploadedBy}</span>
+                                                </Tooltip>
+                                            </div>
+                                        </div>
+                                        <div className="flex dc__gap-4">
+                                            {DeploymentChartActionButton && (
+                                                <DeploymentChartActionButton name={chartData.name} />
+                                            )}
+                                            <DownloadChartButton name={chartData.name} versions={chartData.versions} />
                                         </div>
-                                    )}
-                                </div>
-                                <span>
-                                    {chartData.versions[0].version}
-                                    <span className="cn-5 ml-8">
-                                        {chartData.versions.length && `+${chartData.versions.length} more`}
-                                    </span>
-                                </span>
-                                <Tooltip content={chartData.versions[0].description} placement="left">
-                                    <span className="dc__ellipsis-right">{chartData.versions[0].description}</span>
-                                </Tooltip>
-                                <div className="flexbox dc__gap-4">
-                                    {EditDeploymentChart && <EditDeploymentChart name={chartData.name} />}
-                                    <DownloadChartButton name={chartData.name} versions={chartData.versions} />
-                                </div>
-                            </div>
-                        ))}
+                                    </div>
+                                )
+                            })}
+                        </div>
                     </div>
-                </div>
+                ) : (
+                    <GenericFilterEmptyState handleClearFilters={clearFilters} />
+                )}
             </div>
         )
     }

src/Pages/GlobalConfigurations/DeploymentCharts/List/DeploymentChartsListHeader.tsx

@@ -15,14 +15,18 @@
  */
 
 import { CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT, DOCUMENTATION } from '@Config/constants'
-import { InfoIconTippy } from '@devtron-labs/devtron-fe-common-lib'
+import { InfoIconTippy, SearchBar } from '@devtron-labs/devtron-fe-common-lib'
 import UploadButton from './UploadButton'
 import { DeploymentChartsListHeaderProps } from '../types'
 
-const DeploymentChartsListHeader = ({ handleOpenUploadChartModal }: DeploymentChartsListHeaderProps) => (
-    <div className="flexbox dc__content-space cn-9 fw-6 fs-16">
-        <div className="flex">
-            {CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT.heading}
+const DeploymentChartsListHeader = ({
+    handleOpenUploadChartModal,
+    handleSearch,
+    searchKey,
+}: DeploymentChartsListHeaderProps) => (
+    <div className="flexbox dc__content-space px-20">
+        <div className="flex dc__gap-8">
+            <h2 className="cn-9 fw-6 fs-16 lh-32 m-0-imp">{CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT.heading}</h2>
             <InfoIconTippy
                 heading={CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT.heading}
                 infoText={CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT.infoText}
@@ -33,10 +37,13 @@ const DeploymentChartsListHeader = ({ handleOpenUploadChartModal }: DeploymentCh
                 }
                 documentationLinkText={CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT.documentationLinkText}
                 documentationLink={DOCUMENTATION.CUSTOM_CHART}
-                iconClassName="icon-dim-16 fcn-6 ml-4"
+                iconClassName="icon-dim-20 fcn-6"
             />
         </div>
-        <UploadButton handleOpenUploadChartModal={handleOpenUploadChartModal} />
+        <div className="flex dc__gap-8">
+            <SearchBar initialSearchText={searchKey} handleEnter={handleSearch} />
+            <UploadButton handleOpenUploadChartModal={handleOpenUploadChartModal} />
+        </div>
     </div>
 )
 

src/Pages/GlobalConfigurations/DeploymentCharts/List/DownloadChartButton.tsx

@@ -14,23 +14,21 @@
  * limitations under the License.
  */
 
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
 import Tippy, { TippyProps } from '@tippyjs/react'
 import {
-    Progressing,
-    showError,
-    Host,
-    Tooltip,
-    ToastManager,
-    ToastVariantType,
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
+    ComponentSizeType,
+    useDownload,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ICDownload } from '@Icons/ic-arrow-line-down.svg'
 import { Routes } from '@Config/constants'
 import { DownloadChartButtonProps } from '../types'
 
 const DownloadChartButton = ({ name, versions }: DownloadChartButtonProps) => {
-    // TODO: replace with useDownload
-    const [downloading, setDownloading] = useState(false)
+    const { isDownloading, handleDownload } = useDownload()
     const tippyRef = useRef<Parameters<TippyProps['onMount']>[0]>(null)
 
     const handleCloseTippy = () => {
@@ -45,22 +43,13 @@ const DownloadChartButton = ({ name, versions }: DownloadChartButtonProps) => {
         const chartRefId = e.currentTarget.dataset.versionid
         const chartVersion = e.currentTarget.dataset.version
         const chartName = e.currentTarget.dataset.name
-        try {
-            setDownloading(true)
-            const a = document.createElement('a')
-            a.href = `${Host}/${Routes.DOWNLOAD_CUSTOM_CHART}/${chartRefId}`
-            a.download = `${chartName}_${chartVersion}.tgz`
-            a.click()
-            ToastManager.showToast({
-                variant: ToastVariantType.success,
-                description: 'Chart Downloaded Successfully',
-            })
-            handleCloseTippy()
-        } catch (error) {
-            showError(error)
-        } finally {
-            setDownloading(false)
-        }
+        await handleDownload({
+            downloadUrl: `${Routes.DOWNLOAD_CUSTOM_CHART}/${chartRefId}`,
+            fileName: `${chartName}_${chartVersion}.tgz`,
+            showSuccessfulToast: true,
+            downloadSuccessToastContent: 'Chart Downloaded Successfully',
+        })
+        handleCloseTippy()
     }
 
     return (
@@ -100,16 +89,16 @@ const DownloadChartButton = ({ name, versions }: DownloadChartButtonProps) => {
             onClickOutside={handleCloseTippy}
             animation="fade"
         >
-            <div className="flex pointer p-4 dc__hover-n50 br-4">
-                {downloading ? (
-                    <Progressing pageLoader size={16} />
-                ) : (
-                    <Tooltip alwaysShowTippyOnHover content="Download Chart">
-                        <span>
-                            <ICDownload className="icon-dim-16 scn-6 dc__no-shrink" data-testid={`download-${name}`} />
-                        </span>
-                    </Tooltip>
-                )}
+            <div className="icon-dim-24">
+                <Button
+                    dataTestId={`download-${name}`}
+                    icon={<ICDownload />}
+                    ariaLabel="Download Chart"
+                    size={ComponentSizeType.xs}
+                    variant={ButtonVariantType.borderLess}
+                    isLoading={isDownloading}
+                    style={ButtonStyleType.neutral}
+                />
             </div>
         </Tippy>
     )

src/Pages/GlobalConfigurations/DeploymentCharts/List/UploadButton.tsx

@@ -15,7 +15,7 @@
  */
 
 import { ReactComponent as Upload } from '@Icons/ic-upload.svg'
-import { Button } from '@devtron-labs/devtron-fe-common-lib'
+import { Button, ComponentSizeType } from '@devtron-labs/devtron-fe-common-lib'
 import { UploadButtonProps } from '../types'
 
 const UploadButton = ({ handleOpenUploadChartModal }: UploadButtonProps) => (
@@ -24,6 +24,7 @@ const UploadButton = ({ handleOpenUploadChartModal }: UploadButtonProps) => (
         startIcon={<Upload />}
         onClick={handleOpenUploadChartModal}
         dataTestId="upload-custom-chart-button"
+        size={ComponentSizeType.medium}
     />
 )