Skip to content

Commit 10555b5

Browse files
Elessar1802Elessar1802
committed
Merge branch 'develop' of github.com:devtron-labs/dashboard into fix/filter-chip
2 parents 0b6e3a3 + 3d87500 commit 10555b5

File tree

91 files changed

+2823
-3008
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

91 files changed

+2823
-3008
lines changed

‎.eslintignore

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -142,14 +142,10 @@ src/components/charts/ChartGroupUpdate.tsx
142142
src/components/charts/ChartHeaderFilters.tsx
143143
src/components/charts/Charts.tsx
144144
src/components/charts/MultiChartSummary.tsx
145-
src/components/charts/SavedValues/SavedValuesList.tsx
146145
src/components/charts/chartValues/ChartValues.tsx
147146
src/components/charts/charts.service.ts
148147
src/components/charts/charts.util.tsx
149148
src/components/charts/dialogs/ValuesYamlConfirmDialog.tsx
150-
src/components/charts/discoverChartDetail/About.tsx
151-
src/components/charts/discoverChartDetail/ChartDeploymentList.tsx
152-
src/components/charts/discoverChartDetail/DiscoverChartDetails.tsx
153149
src/components/charts/list/ChartGroup.tsx
154150
src/components/charts/list/ChartListPopUpRow.tsx
155151
src/components/charts/list/DeployedChartFilters.tsx
@@ -373,7 +369,6 @@ src/components/workflowEditor/workflowEditor.tsx
373369
src/config/constants.ts
374370
src/config/routes.ts
375371
src/config/utils.ts
376-
src/index.tsx
377372
src/services/fetchWithFullRoute.ts
378373
src/services/service.ts
379374
src/services/service.types.ts

‎.eslintrc.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const tsconfigPath = require('./tsconfig.json')
1818

1919
module.exports = {
2020
parser: '@typescript-eslint/parser',
21-
plugins: ['@typescript-eslint', 'react', 'prettier', 'import', 'simple-import-sort'],
21+
plugins: ['@typescript-eslint', 'react', 'prettier', 'import', 'simple-import-sort', '@tanstack/query'],
2222
env: {
2323
browser: true,
2424
es2021: true,
@@ -42,6 +42,7 @@ module.exports = {
4242
'airbnb',
4343
'airbnb/hooks',
4444
'prettier',
45+
'plugin:@tanstack/query/recommended',
4546
],
4647
rules: {
4748
'prettier/prettier': ['error'],
@@ -126,9 +127,9 @@ module.exports = {
126127
// Side effect imports.
127128
['^\\u0000'],
128129
// Put same-folder imports, `..` and `.` last. Other relative imports.
129-
['^\\.\\.(?!/?$)', '^\\.\\./?$', '^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$',],
130+
['^\\.\\.(?!/?$)', '^\\.\\./?$', '^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
130131
// Style imports.
131-
[ '^.+\\.?(css|scss)$'],
132+
['^.+\\.?(css|scss)$'],
132133
],
133134
},
134135
],

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "1.17.0-pre-11",
7+
"@devtron-labs/devtron-fe-common-lib": "1.18.0-pre-0",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",
@@ -70,12 +70,14 @@
7070
"devDependencies": {
7171
"@playwright/test": "^1.32.1",
7272
"@sentry/cli": "^2.2.0",
73+
"@tanstack/eslint-plugin-query": "<5",
7374
"@testing-library/jest-dom": "^5.16.2",
7475
"@testing-library/react": "^12.1.4",
7576
"@types/jest": "^27.4.1",
7677
"@types/node": "20.11.0",
7778
"@types/react": "17.0.39",
7879
"@types/react-csv": "^1.1.3",
80+
"@types/react-dates": "^21.8.6",
7981
"@types/react-dom": "17.0.13",
8082
"@types/react-router-dom": "^5.3.3",
8183
"@types/react-transition-group": "^4.4.4",

‎src/App.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,8 +168,6 @@ const App = () => {
168168
<Route path="/" render={() => <NavigationRoutes reloadVersionConfig={reloadVersionConfig} />} />
169169
<Redirect to={window._env_.K8S_CLIENT ? '/' : `${URLS.LOGIN_SSO}${location.search}`} />
170170
</Switch>
171-
<div id="visible-modal" />
172-
<div id="visible-modal-2" />
173171
</BreadcrumbStore>
174172
</ErrorBoundary>
175173
)

‎src/Pages/App/CreateAppModal/CreateAppModal.component.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import { getHostURLConfiguration } from '@Services/service'
3636

3737
import ApplicationInfoForm from './ApplicationInfoForm'
3838
import { CloneApplicationSelectionList } from './CloneApplicationSelectionList'
39-
import { createAppInitialFormErrorState, createAppInitialFormState } from './constants'
39+
import { createAppInitialFormErrorState, createAppInitialFormState, PROJECT_SELECT_INPUT_ID } from './constants'
4040
import HeaderSection from './HeaderSection'
4141
import { createApp } from './service'
4242
import Sidebar from './Sidebar'
@@ -374,7 +374,7 @@ const CreateAppModal = ({ isJobView, handleClose }: CreateAppModalProps) => {
374374
}
375375

376376
return (
377-
<Drawer position="right" width="1024px" onEscape={handleClose}>
377+
<Drawer position="right" width="1024px" onEscape={handleClose} initialFocus={`#${PROJECT_SELECT_INPUT_ID}`}>
378378
<div className="h-100 bg__modal--primary flexbox-col dc__overflow-hidden">
379379
<HeaderSection isJobView={isJobView} handleClose={handleClose} isCloseDisabled={isSubmitting} />
380380
<div className="flexbox flex-grow-1 dc__overflow-hidden">

‎src/Pages/App/CreateAppModal/ProjectSelector.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424

2525
import { ReactComponent as ICFolderColor } from '@Icons/ic-folder-color.svg'
2626

27+
import { PROJECT_SELECT_INPUT_ID } from './constants'
2728
import { CreateAppFormStateType, ProjectSelectorProps } from './types'
2829

2930
const ProjectSelector = ({ selectedProjectId, handleProjectIdChange, error }: ProjectSelectorProps) => {
@@ -47,7 +48,7 @@ const ProjectSelector = ({ selectedProjectId, handleProjectIdChange, error }: Pr
4748
<div className="w-300">
4849
<SelectPicker
4950
icon={<ICFolderColor />}
50-
inputId="project"
51+
inputId={PROJECT_SELECT_INPUT_ID}
5152
options={projectOptions}
5253
label="Project"
5354
required
@@ -60,7 +61,6 @@ const ProjectSelector = ({ selectedProjectId, handleProjectIdChange, error }: Pr
6061
value={selectedProject}
6162
onChange={handleChange}
6263
error={error}
63-
autoFocus
6464
/>
6565
</div>
6666
)

‎src/Pages/App/CreateAppModal/constants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,5 @@ export const createAppInitialFormErrorState: CreateAppFormErrorStateType = {
3939
gitMaterials: null,
4040
workflowConfig: null,
4141
}
42+
43+
export const PROJECT_SELECT_INPUT_ID = 'project'

‎src/Pages/ChartStore/ChartDetails/ChartDetails.tsx

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import { useEffect, useMemo, useState } from 'react'
2+
import { Route, Switch, useRouteMatch } from 'react-router-dom'
3+
4+
import {
5+
APIResponseHandler,
6+
BreadCrumb,
7+
handleAnalyticsEvent,
8+
PageHeader,
9+
SegmentedControl,
10+
SegmentedControlProps,
11+
SelectPickerProps,
12+
useAsync,
13+
useBreadcrumb,
14+
useUrlFilters,
15+
} from '@devtron-labs/devtron-fe-common-lib'
16+
17+
import { ChartSelector } from '@Components/AppSelector'
18+
import { getChartSelectAPI } from '@Components/charts/charts.util'
19+
import { URLS } from '@Config/routes'
20+
21+
import { ChartDetailsAbout } from './ChartDetailsAbout'
22+
import { ChartDetailsDeploy } from './ChartDetailsDeploy'
23+
import { ChartDetailsDeployments } from './ChartDetailsDeployments'
24+
import { ChartDetailsPresetValues } from './ChartDetailsPresetValues'
25+
import { ChartDetailsReadme } from './ChartDetailsReadme'
26+
import { CHART_DETAILS_PORTAL_CONTAINER_ID, CHART_DETAILS_SEGMENTS } from './constants'
27+
import { fetchChartDetails, fetchChartVersions } from './services'
28+
import { ChartDetailsRouteParams, ChartDetailsSearchParams, ChartDetailsSegment } from './types'
29+
import { chartSelectorFilterOption, chartSelectorFormatOptionLabel, parseChartDetailsSearchParams } from './utils'
30+
31+
import './chartDetails.scss'
32+
33+
export const ChartDetails = () => {
34+
// STATES
35+
const [selectedChartVersion, setSelectedChartVersion] = useState<number>(null)
36+
37+
// HOOKS
38+
const {
39+
path,
40+
params: { chartId },
41+
} = useRouteMatch<ChartDetailsRouteParams>()
42+
43+
const { tab, updateSearchParams } = useUrlFilters<void, ChartDetailsSearchParams>({
44+
parseSearchParams: parseChartDetailsSearchParams,
45+
})
46+
47+
// ASYNC CALLS
48+
const [isFetchingChartVersions, chartVersions, chartVersionsErr, reloadChartVersions] = useAsync(
49+
() => fetchChartVersions(chartId),
50+
[chartId],
51+
)
52+
53+
const [isFetchingChartDetails, chartDetails, chartDetailsErr, reloadChartDetails] = useAsync(
54+
() => fetchChartDetails(selectedChartVersion),
55+
[selectedChartVersion],
56+
!!selectedChartVersion,
57+
{ resetOnChange: false },
58+
)
59+
60+
useEffect(() => {
61+
if (!isFetchingChartVersions && chartVersions?.length) {
62+
setSelectedChartVersion(chartVersions[0].id)
63+
}
64+
}, [isFetchingChartVersions, chartVersions])
65+
66+
// CONFIGS
67+
const { breadcrumbs } = useBreadcrumb(
68+
{
69+
alias: {
70+
':chartSegment?': null,
71+
':chartId': {
72+
component: (
73+
<ChartSelector
74+
primaryKey="chartId"
75+
primaryValue="name"
76+
api={getChartSelectAPI}
77+
matchedKeys={[]}
78+
apiPrimaryKey="id"
79+
formatOptionLabel={chartSelectorFormatOptionLabel}
80+
filterOption={chartSelectorFilterOption}
81+
/>
82+
),
83+
linked: false,
84+
},
85+
chart: null,
86+
'chart-store': null,
87+
},
88+
},
89+
[chartId],
90+
)
91+
92+
const chartOptions = useMemo(
93+
() =>
94+
(chartVersions ?? []).map(({ id, version }) => ({
95+
label: version.startsWith('v') ? version : `v${version}`,
96+
value: id,
97+
})),
98+
[JSON.stringify(chartVersions)],
99+
)
100+
101+
// CONSTANTS
102+
const isChartDetailsLoading = isFetchingChartDetails || !chartDetails
103+
104+
// HANDLERS
105+
const handleSegmentChange: SegmentedControlProps['onChange'] = (selectedSegment) => {
106+
const updatedTab = selectedSegment.value as ChartDetailsSegment
107+
108+
if (updatedTab === ChartDetailsSegment.PRESET_VALUES) {
109+
handleAnalyticsEvent({ category: 'Chart Store', action: 'CS_CHART_PRESET_VALUES' })
110+
}
111+
112+
updateSearchParams({ tab: updatedTab })
113+
}
114+
115+
const handleChartChange: SelectPickerProps<number>['onChange'] = ({ value }) => {
116+
setSelectedChartVersion(value)
117+
}
118+
119+
// RENDERERS
120+
const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
121+
122+
const renderSegments = () => {
123+
switch (tab) {
124+
case ChartDetailsSegment.README:
125+
return (
126+
<ChartDetailsReadme
127+
chartName={chartDetails?.name}
128+
readme={chartDetails?.readme}
129+
chartsOptions={chartOptions}
130+
selectedChartVersion={selectedChartVersion}
131+
onChartChange={handleChartChange}
132+
isLoading={isChartDetailsLoading}
133+
error={chartDetailsErr}
134+
reload={reloadChartDetails}
135+
/>
136+
)
137+
case ChartDetailsSegment.PRESET_VALUES:
138+
return <ChartDetailsPresetValues />
139+
case ChartDetailsSegment.DEPLOYMENTS:
140+
return <ChartDetailsDeployments chartIcon={chartDetails?.icon} />
141+
default:
142+
return null
143+
}
144+
}
145+
146+
return (
147+
<div className="flex-grow-1 flexbox-col bg__secondary dc__overflow-hidden">
148+
<PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} />
149+
150+
<APIResponseHandler
151+
isLoading={isFetchingChartVersions}
152+
progressingProps={{ pageLoader: true }}
153+
error={chartVersionsErr}
154+
errorScreenManagerProps={{ code: chartVersionsErr?.code, reload: reloadChartVersions }}
155+
>
156+
<Switch>
157+
<Route path={`${path}${URLS.DEPLOY_CHART}/:presetValueId?`}>
158+
<ChartDetailsDeploy
159+
chartDetails={chartDetails}
160+
chartVersions={chartVersions}
161+
selectedChartVersion={selectedChartVersion}
162+
/>
163+
</Route>
164+
<Route>
165+
<div className="chart-details flex-grow-1 p-20 dc__overflow-auto">
166+
<div className="flexbox-col dc__gap-16 mw-none">
167+
<div id={CHART_DETAILS_PORTAL_CONTAINER_ID} className="flex dc__content-space">
168+
<SegmentedControl
169+
name="chart-details-segmented-control"
170+
segments={CHART_DETAILS_SEGMENTS}
171+
value={tab}
172+
onChange={handleSegmentChange}
173+
/>
174+
</div>
175+
{renderSegments()}
176+
</div>
177+
<ChartDetailsAbout isLoading={isChartDetailsLoading} chartDetails={chartDetails} />
178+
</div>
179+
</Route>
180+
</Switch>
181+
</APIResponseHandler>
182+
</div>
183+
)
184+
}

0 commit comments

Comments
 (0)