|
| 1 | +import { useMemo, useState } from 'react' |
| 2 | +import { generatePath, Link, useRouteMatch } from 'react-router-dom' |
| 3 | + |
| 4 | +import { |
| 5 | + APIResponseHandler, |
| 6 | + Button, |
| 7 | + ButtonComponentType, |
| 8 | + ButtonStyleType, |
| 9 | + ButtonVariantType, |
| 10 | + ComponentSizeType, |
| 11 | + DeleteConfirmationModal, |
| 12 | + GenericEmptyState, |
| 13 | + handleAnalyticsEvent, |
| 14 | + Icon, |
| 15 | + PortalContainer, |
| 16 | + SortableTableHeaderCell, |
| 17 | + stringComparatorBySortOrder, |
| 18 | + useAsync, |
| 19 | + useStateFilters, |
| 20 | +} from '@devtron-labs/devtron-fe-common-lib' |
| 21 | + |
| 22 | +import { deleteChartValues } from '@Components/charts/charts.service' |
| 23 | +import { SavedValueType } from '@Components/charts/SavedValues/types' |
| 24 | +import { URLS } from '@Config/routes' |
| 25 | +import { ApplicationDeletionInfo } from '@Pages/Shared/ApplicationDeletionInfo/ApplicationDeletionInfo' |
| 26 | + |
| 27 | +import { CHART_DETAILS_PORTAL_CONTAINER_ID } from './constants' |
| 28 | +import { fetchChartValuesTemplateList } from './services' |
| 29 | +import { ChartDetailsPresetValuesProps, ChartDetailsRouteParams } from './types' |
| 30 | + |
| 31 | +const renderEmptyStateButton = (path: string) => () => ( |
| 32 | + <Button |
| 33 | + dataTestId="create-chart-preset-value" |
| 34 | + variant={ButtonVariantType.secondary} |
| 35 | + text="Create Preset Value" |
| 36 | + startIcon={<Icon name="ic-add" color={null} />} |
| 37 | + size={ComponentSizeType.medium} |
| 38 | + component={ButtonComponentType.link} |
| 39 | + linkProps={{ to: `${path}${URLS.PRESET_VALUES}/0` }} |
| 40 | + /> |
| 41 | +) |
| 42 | + |
| 43 | +const renderFilterEmptyStateButton = (onClick: () => void) => () => ( |
| 44 | + <Button |
| 45 | + dataTestId="chart-preset-values-clear-filters" |
| 46 | + variant={ButtonVariantType.secondary} |
| 47 | + text="Clear Filters" |
| 48 | + size={ComponentSizeType.medium} |
| 49 | + onClick={onClick} |
| 50 | + /> |
| 51 | +) |
| 52 | + |
| 53 | +export const ChartDetailsPresetValues = ({ searchKey, onClearFilters }: ChartDetailsPresetValuesProps) => { |
| 54 | + // STATES |
| 55 | + const [deletePresetValue, setDeletePresetValue] = useState<SavedValueType | null>(null) |
| 56 | + |
| 57 | + // HOOKS |
| 58 | + const { |
| 59 | + path, |
| 60 | + params: { chartId }, |
| 61 | + } = useRouteMatch<ChartDetailsRouteParams>() |
| 62 | + |
| 63 | + // ASYNC CALLS |
| 64 | + const [ |
| 65 | + isFetchingChartValuesTemplateList, |
| 66 | + chartValuesTemplateList, |
| 67 | + chartValuesTemplateListErr, |
| 68 | + reloadChartValuesTemplateList, |
| 69 | + ] = useAsync(() => fetchChartValuesTemplateList(chartId), [chartId]) |
| 70 | + |
| 71 | + const { sortBy, sortOrder, handleSorting } = useStateFilters<'name'>({ initialSortKey: 'name' }) |
| 72 | + |
| 73 | + const filteredChartValuesTemplateList = useMemo(() => { |
| 74 | + if (!isFetchingChartValuesTemplateList && chartValuesTemplateList) { |
| 75 | + return chartValuesTemplateList |
| 76 | + .filter((cluster) => cluster.name.includes(searchKey.toLowerCase())) |
| 77 | + .sort((a, b) => stringComparatorBySortOrder(a.name, b.name, sortOrder)) |
| 78 | + } |
| 79 | + |
| 80 | + return [] |
| 81 | + }, [chartValuesTemplateList, isFetchingChartValuesTemplateList, searchKey, sortOrder]) |
| 82 | + |
| 83 | + // HANDLERS |
| 84 | + const triggerSorting = () => { |
| 85 | + handleSorting('name') |
| 86 | + } |
| 87 | + |
| 88 | + const handleChartPresetDeployAndEdit = () => { |
| 89 | + handleAnalyticsEvent({ category: 'Chart Store', action: 'CS_CHART_PRESET_VALUES_NEW' }) |
| 90 | + } |
| 91 | + |
| 92 | + const handleChartPresetDelete = async () => { |
| 93 | + await deleteChartValues(deletePresetValue.id) |
| 94 | + reloadChartValuesTemplateList() |
| 95 | + } |
| 96 | + |
| 97 | + const showDeleteModal = (_deletePresetValue: typeof deletePresetValue) => () => { |
| 98 | + setDeletePresetValue(_deletePresetValue) |
| 99 | + } |
| 100 | + |
| 101 | + const hideDeleteModal = () => { |
| 102 | + setDeletePresetValue(null) |
| 103 | + } |
| 104 | + |
| 105 | + return ( |
| 106 | + <div className="flex-grow-1 flexbox-col bg__primary border__primary br-4 w-100 dc__overflow-hidden"> |
| 107 | + <PortalContainer |
| 108 | + portalParentId={CHART_DETAILS_PORTAL_CONTAINER_ID} |
| 109 | + condition={!isFetchingChartValuesTemplateList && !!chartValuesTemplateList?.length} |
| 110 | + > |
| 111 | + <Button |
| 112 | + dataTestId="chart-preset-values-clear-filters" |
| 113 | + variant={ButtonVariantType.secondary} |
| 114 | + startIcon={<Icon name="ic-add" color={null} />} |
| 115 | + text="Create Preset" |
| 116 | + size={ComponentSizeType.medium} |
| 117 | + component={ButtonComponentType.link} |
| 118 | + linkProps={{ to: `${generatePath(path, { chartId })}${URLS.PRESET_VALUES}/0` }} |
| 119 | + /> |
| 120 | + </PortalContainer> |
| 121 | + <APIResponseHandler |
| 122 | + isLoading={isFetchingChartValuesTemplateList} |
| 123 | + progressingProps={{ size: 24 }} |
| 124 | + error={chartValuesTemplateListErr} |
| 125 | + errorScreenManagerProps={{ |
| 126 | + code: chartValuesTemplateListErr?.code, |
| 127 | + reload: reloadChartValuesTemplateList, |
| 128 | + }} |
| 129 | + > |
| 130 | + {!chartValuesTemplateList?.length && ( |
| 131 | + <GenericEmptyState |
| 132 | + title="Create your first Preset Template" |
| 133 | + subTitle="Create reusable Helm config templates for different scenarios. Set them up once and let your team deploy with confidence." |
| 134 | + isButtonAvailable |
| 135 | + renderButton={renderEmptyStateButton(generatePath(path, { chartId }))} |
| 136 | + /> |
| 137 | + )} |
| 138 | + {!!chartValuesTemplateList?.length && |
| 139 | + (filteredChartValuesTemplateList.length ? ( |
| 140 | + <> |
| 141 | + <div className="chart-details-preset-value__row px-16 pt-6 pb-5 border__primary--bottom"> |
| 142 | + <span className="icon-dim-24" /> |
| 143 | + <SortableTableHeaderCell |
| 144 | + title="Name" |
| 145 | + isSortable |
| 146 | + isSorted={sortBy === 'name'} |
| 147 | + sortOrder={sortOrder} |
| 148 | + triggerSorting={triggerSorting} |
| 149 | + disabled={false} |
| 150 | + /> |
| 151 | + <SortableTableHeaderCell title="Version" isSortable={false} /> |
| 152 | + </div> |
| 153 | + {filteredChartValuesTemplateList.map(({ chartVersion, id, name, ...rest }) => ( |
| 154 | + <div |
| 155 | + key={id} |
| 156 | + className="chart-details-preset-value__row px-16 py-12 bg__hover dc__visible-hover dc__visible-hover--parent" |
| 157 | + > |
| 158 | + <Icon name="ic-file" color="N700" size={24} /> |
| 159 | + <Link |
| 160 | + className="fs-13 lh-20" |
| 161 | + to={`${generatePath(path, { chartId })}${URLS.PRESET_VALUES}/${id}`} |
| 162 | + > |
| 163 | + {name} |
| 164 | + </Link> |
| 165 | + <div className="flex dc__content-space"> |
| 166 | + <span className="fs-13 lh-20 cn-9">{chartVersion}</span> |
| 167 | + <div className="flex dc__gap-4 dc__visible-hover--child"> |
| 168 | + <Button |
| 169 | + dataTestId="chart-deploy-with-preset-value" |
| 170 | + ariaLabel="chart-deploy-with-preset-value" |
| 171 | + showAriaLabelInTippy={false} |
| 172 | + icon={<Icon name="ic-rocket-launch" color={null} />} |
| 173 | + variant={ButtonVariantType.borderLess} |
| 174 | + style={ButtonStyleType.neutral} |
| 175 | + size={ComponentSizeType.xs} |
| 176 | + component={ButtonComponentType.link} |
| 177 | + linkProps={{ |
| 178 | + to: `${generatePath(path, { chartId })}${URLS.DEPLOY_CHART}/${id}`, |
| 179 | + }} |
| 180 | + onClick={handleChartPresetDeployAndEdit} |
| 181 | + /> |
| 182 | + <Button |
| 183 | + dataTestId="chart-preset-value-edit" |
| 184 | + ariaLabel="chart-preset-value-edit" |
| 185 | + showAriaLabelInTippy={false} |
| 186 | + icon={<Icon name="ic-edit" color={null} />} |
| 187 | + variant={ButtonVariantType.borderLess} |
| 188 | + style={ButtonStyleType.neutral} |
| 189 | + size={ComponentSizeType.xs} |
| 190 | + component={ButtonComponentType.link} |
| 191 | + linkProps={{ |
| 192 | + to: `${generatePath(path, { chartId })}${URLS.PRESET_VALUES}/${id}`, |
| 193 | + }} |
| 194 | + onClick={handleChartPresetDeployAndEdit} |
| 195 | + /> |
| 196 | + <Button |
| 197 | + dataTestId="chart-preset-value-delete" |
| 198 | + ariaLabel="chart-preset-value-delete" |
| 199 | + showAriaLabelInTippy={false} |
| 200 | + icon={<Icon name="ic-delete" color={null} />} |
| 201 | + variant={ButtonVariantType.borderLess} |
| 202 | + style={ButtonStyleType.neutral} |
| 203 | + size={ComponentSizeType.xs} |
| 204 | + onClick={showDeleteModal({ chartVersion, id, name, ...rest })} |
| 205 | + /> |
| 206 | + </div> |
| 207 | + </div> |
| 208 | + </div> |
| 209 | + ))} |
| 210 | + </> |
| 211 | + ) : ( |
| 212 | + <GenericEmptyState |
| 213 | + title="No results" |
| 214 | + subTitle="We couldn’t find any matching results" |
| 215 | + isButtonAvailable |
| 216 | + renderButton={renderFilterEmptyStateButton(onClearFilters)} |
| 217 | + /> |
| 218 | + ))} |
| 219 | + </APIResponseHandler> |
| 220 | + {deletePresetValue && ( |
| 221 | + <DeleteConfirmationModal |
| 222 | + title={deletePresetValue.name} |
| 223 | + subtitle={<ApplicationDeletionInfo isPresetValue />} |
| 224 | + component="preset value" |
| 225 | + onDelete={handleChartPresetDelete} |
| 226 | + closeConfirmationModal={hideDeleteModal} |
| 227 | + /> |
| 228 | + )} |
| 229 | + </div> |
| 230 | + ) |
| 231 | +} |
0 commit comments