Skip to content

Commit 8a2a535

Browse files
RohitRaj011RohitRaj011
committed
feat: move grouped app list filters behind flag
1 parent 16f67e2 commit 8a2a535

File tree

2 files changed

+166
-27
lines changed

2 files changed

+166
-27
lines changed

‎src/components/app/list-new/AppListFilters.tsx

Lines changed: 165 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,13 @@ import ReactGA from 'react-ga4'
2020
import {
2121
AppListConstants,
2222
ComponentSizeType,
23+
FilterSelectPicker,
2324
GroupedFilterSelectPicker,
2425
GroupedFilterSelectPickerProps,
2526
SearchBar,
2627
SelectPickerOptionType,
2728
SERVER_MODE,
29+
Tooltip,
2830
useGetUserRoles,
2931
} from '@devtron-labs/devtron-fe-common-lib'
3032

@@ -33,7 +35,7 @@ import ExportToCsv from '@Components/common/ExportToCsv/ExportToCsv'
3335

3436
import { getDevtronAppListDataToExport } from './AppListService'
3537
import { AppListFiltersProps, AppListUrlFilters, AppStatuses } from './AppListType'
36-
import { APP_STATUS_FILTER_OPTIONS, TEMPLATE_TYPE_FILTER_OPTIONS } from './Constants'
38+
import { APP_STATUS_FILTER_OPTIONS, SELECT_CLUSTER_TIPPY, TEMPLATE_TYPE_FILTER_OPTIONS } from './Constants'
3739
import { getAppListFilters, getAppTabNameFromAppType, useFilterOptions } from './list.utils'
3840

3941
const AppListFilters = ({
@@ -44,8 +46,7 @@ const AppListFilters = ({
4446
isExternalArgo,
4547
isExternalFlux,
4648
appListFiltersResponse,
47-
// TODO: need to handle this
48-
// showPulsatingDot,
49+
showPulsatingDot,
4950
appListFiltersError,
5051
reloadAppListFilters,
5152
serverMode,
@@ -219,32 +220,34 @@ const AppListFilters = ({
219220
handleEnter={handleSearch}
220221
size={ComponentSizeType.medium}
221222
/>
222-
<GroupedFilterSelectPicker<AppListUrlFilters>
223-
id="app-list-filters"
224-
width={200}
225-
isFilterApplied={
226-
!!(
227-
selectedAppStatus.length ||
228-
selectedProjects.length ||
229-
selectedEnvironments.length ||
230-
selectedTemplateTypes.length ||
231-
selectedClusters.length ||
232-
selectedNamespaces.length
233-
)
234-
}
235-
options={getAppListFilters({
236-
clusterIdsCsv,
237-
isExternalArgo,
238-
isExternalFlux,
239-
isArgoInstalled,
240-
serverMode,
241-
selectedEnvironments,
242-
})}
243-
filterSelectPickerPropsMap={appListFiltersSelectPickerMap}
244-
/>
223+
{window._env_.FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE && (
224+
<GroupedFilterSelectPicker<AppListUrlFilters>
225+
id="app-list-filters"
226+
width={200}
227+
isFilterApplied={
228+
!!(
229+
selectedAppStatus.length ||
230+
selectedProjects.length ||
231+
selectedEnvironments.length ||
232+
selectedTemplateTypes.length ||
233+
selectedClusters.length ||
234+
selectedNamespaces.length
235+
)
236+
}
237+
options={getAppListFilters({
238+
clusterIdsCsv,
239+
isExternalArgo,
240+
isExternalFlux,
241+
isArgoInstalled,
242+
serverMode,
243+
selectedEnvironments,
244+
})}
245+
filterSelectPickerPropsMap={appListFiltersSelectPickerMap}
246+
/>
247+
)}
245248
</div>
246249

247-
{showExportCsvButton && (
250+
{window._env_.FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE && showExportCsvButton && (
248251
<ExportToCsv
249252
apiPromise={() =>
250253
getDevtronAppListDataToExport(
@@ -260,6 +263,141 @@ const AppListFilters = ({
260263
disabled={!appCount}
261264
/>
262265
)}
266+
267+
{!window._env_.FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE && (
268+
<div className="flexbox dc__gap-8 dc__align-items-center">
269+
{!(isExternalArgo || isExternalFlux) && (
270+
<>
271+
{isArgoInstalled && (
272+
<>
273+
<FilterSelectPicker
274+
placeholder="App Status"
275+
inputId="app-list-app-status-select"
276+
options={appStatusFilters}
277+
appliedFilterOptions={selectedAppStatus}
278+
handleApplyFilter={handleUpdateFilters(AppListUrlFilters.appStatus)}
279+
isDisabled={false}
280+
isLoading={false}
281+
isOptionDisabled={getIsAppStatusDisabled}
282+
/>
283+
<div className="dc__border-right h-16" />
284+
</>
285+
)}
286+
<FilterSelectPicker
287+
placeholder="Project"
288+
inputId="app-list-project-select"
289+
options={projectOptions}
290+
appliedFilterOptions={selectedProjects}
291+
handleApplyFilter={handleUpdateFilters(AppListUrlFilters.project)}
292+
isDisabled={appListFiltersLoading}
293+
isLoading={appListFiltersLoading}
294+
optionListError={appListFiltersError}
295+
reloadOptionList={reloadAppListFilters}
296+
/>
297+
<div className="dc__border-right h-16" />
298+
{serverMode === SERVER_MODE.FULL && (
299+
<>
300+
<Tooltip
301+
content="Remove cluster filters to use environment filter"
302+
alwaysShowTippyOnHover={!!clusterIdsCsv}
303+
wordBreak={false}
304+
>
305+
<div>
306+
<FilterSelectPicker
307+
placeholder="Environment"
308+
inputId="app-list-environment-select"
309+
options={environmentOptions}
310+
appliedFilterOptions={selectedEnvironments}
311+
handleApplyFilter={handleUpdateFilters(AppListUrlFilters.environment)}
312+
isDisabled={appListFiltersLoading || !!clusterIdsCsv}
313+
isLoading={appListFiltersLoading}
314+
optionListError={appListFiltersError}
315+
reloadOptionList={reloadAppListFilters}
316+
/>
317+
</div>
318+
</Tooltip>
319+
<div className="dc__border-right h-16" />
320+
</>
321+
)}
322+
</>
323+
)}
324+
{isExternalFlux && (
325+
<>
326+
<Tooltip content={SELECT_CLUSTER_TIPPY} alwaysShowTippyOnHover={!clusterIdsCsv}>
327+
<div>
328+
<FilterSelectPicker
329+
placeholder="Template Type"
330+
inputId="app-list-template-type-filter"
331+
options={TEMPLATE_TYPE_FILTER_OPTIONS}
332+
appliedFilterOptions={selectedTemplateTypes}
333+
handleApplyFilter={handleUpdateFilters(AppListUrlFilters.templateType)}
334+
isDisabled={!clusterIdsCsv}
335+
isLoading={false}
336+
/>
337+
</div>
338+
</Tooltip>
339+
<div className="dc__border-right h-16" />
340+
</>
341+
)}
342+
<Tooltip
343+
content="Remove environment filters to use cluster filter"
344+
alwaysShowTippyOnHover={!(isExternalArgo || isExternalFlux) && !!selectedEnvironments.length}
345+
wordBreak={false}
346+
>
347+
<div className="flexbox dc__position-rel">
348+
<FilterSelectPicker
349+
placeholder="Cluster"
350+
inputId="app-list-cluster-filter"
351+
options={clusterOptions}
352+
appliedFilterOptions={selectedClusters}
353+
isDisabled={!(isExternalArgo || isExternalFlux) && !!selectedEnvironments.length}
354+
isLoading={appListFiltersLoading}
355+
handleApplyFilter={handleUpdateFilters(AppListUrlFilters.cluster)}
356+
optionListError={appListFiltersError}
357+
reloadOptionList={reloadAppListFilters}
358+
isOptionDisabled={getIsClusterOptionDisabled}
359+
/>
360+
{showPulsatingDot && <div className="dc__pulsating-dot dc__position-abs" />}
361+
</div>
362+
</Tooltip>
363+
<Tooltip content={SELECT_CLUSTER_TIPPY} alwaysShowTippyOnHover={!clusterIdsCsv}>
364+
<div>
365+
<FilterSelectPicker
366+
placeholder="Namespace"
367+
inputId="app-list-namespace-filter"
368+
options={namespaceOptions}
369+
appliedFilterOptions={selectedNamespaces}
370+
isDisabled={appListFiltersLoading || !clusterIdsCsv}
371+
isLoading={appListFiltersLoading}
372+
handleApplyFilter={handleUpdateFilters(AppListUrlFilters.namespace)}
373+
shouldMenuAlignRight={!showExportCsvButton}
374+
optionListError={appListFiltersError}
375+
reloadOptionList={reloadAppListFilters}
376+
/>
377+
</div>
378+
</Tooltip>
379+
380+
{showExportCsvButton && (
381+
<>
382+
<div className="dc__border-right h-16" />
383+
<ExportToCsv
384+
apiPromise={() =>
385+
getDevtronAppListDataToExport(
386+
filterConfig,
387+
appListFiltersResponse?.appListFilters.result.environments,
388+
namespaceListResponse?.result,
389+
appListFiltersResponse?.appListFilters.result.clusters,
390+
appListFiltersResponse?.appListFilters.result.teams,
391+
appCount,
392+
)
393+
}
394+
fileName={FILE_NAMES.Apps}
395+
disabled={!appCount}
396+
/>
397+
</>
398+
)}
399+
</div>
400+
)}
263401
</div>
264402
)
265403
}

‎src/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,7 @@ if (!window || !window._env_) {
175175
FEATURE_MANAGE_TRAFFIC_ENABLE: true,
176176
FEATURE_REDFISH_NODE_ENABLE: false,
177177
FEATURE_INFRA_PROVISION_INFO_BLOCK_HIDE: false,
178+
FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE: true,
178179
}
179180
}
180181

0 commit comments

Comments
 (0)