Skip to content

Commit a749e3f

Browse files
shivani170shivani170
authored
Merge pull request #2810 from devtron-labs/feat/chart-source-layout
feat: chart-source-layout
2 parents fc1e814 + 46a66df commit a749e3f

File tree

9 files changed

+200
-180
lines changed

9 files changed

+200
-180
lines changed

‎.eslintignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,6 @@ src/components/charts/discoverChartDetail/About.tsx
152152
src/components/charts/discoverChartDetail/ChartDeploymentList.tsx
153153
src/components/charts/discoverChartDetail/DiscoverChartDetails.tsx
154154
src/components/charts/list/ChartGroup.tsx
155-
src/components/charts/list/ChartListPopUp.tsx
156155
src/components/charts/list/ChartListPopUpRow.tsx
157156
src/components/charts/list/DeployedChartFilters.tsx
158157
src/components/charts/list/DiscoverCharts.tsx

‎src/components/charts/ChartGroupCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export const ChartGroupCard = ({ chartGroup }: ChartGroupCardProps) => {
8383
<ChartIcon icon={chart.chartMetaData.icon} key={chart.id} isChartGroupCard />
8484
))}
8585
{chartGroup.chartGroupEntries.length > CHART_CARD_MAX_LENGTH && (
86-
<div className="flex chart-group-card__icon-wrapper border__secondary-translucent bg__secondary br-8 p-8 h-50 fs-20 lh-1-5 cn-8 icon-dim-50">
86+
<div className="flex chart-group-card__icon-wrapper border__secondary-translucent bg__secondary br-8 p-8 h-50 fs-16 lh-1-5 cn-8 icon-dim-50">
8787
+{chartGroup.chartGroupEntries.length - CHART_CARD_MAX_LENGTH}
8888
</div>
8989
)}

‎src/components/charts/ChartHeaderFilters.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { useRouteMatch, useHistory, useLocation } from 'react-router-dom'
1919
import { ReactComponent as Grid } from '../../assets/icons/ic-grid-view.svg'
2020
import { ReactComponent as List } from '../../assets/icons/ic-list-view.svg'
2121
import { QueryParams } from './constants'
22-
import { Accordian } from '../common/Accordian/Accordian'
22+
import { ChartSourceAccordion } from './ChartSourceAccordion'
2323
import { URLS } from '../../config'
2424
import { CHART_KEYS } from './constants'
2525
import { ChartHeaderFilterProps } from './charts.types'
@@ -256,12 +256,11 @@ const ChartHeaderFilter = ({
256256
/>
257257
)}
258258
<hr className="mt-8 mb-8" />
259-
<Accordian
259+
<ChartSourceAccordion
260260
header="CHART SOURCE"
261261
options={chartRepoList}
262262
value={selectedChartRepo}
263263
onChange={handleSelection}
264-
onClickViewChartButton={handleViewAllCharts}
265264
dataTestId="chart-store-repository"
266265
/>
267266
</div>

‎src/components/common/Accordian/Accordian.tsx renamed to ‎src/components/charts/ChartSourceAccordion.tsx

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,23 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React, { useState } from 'react'
18-
import { CHECKBOX_VALUE, Checkbox } from '@devtron-labs/devtron-fe-common-lib'
19-
import { ReactComponent as Dropdown } from '../../../assets/icons/ic-chevron-down.svg'
20-
import { ReactComponent as AddIcon } from '../../../assets/icons/ic-add.svg'
21-
import AddChartSource from '../../charts/list/AddChartSource'
17+
import { useState } from 'react'
2218

23-
export const Accordian = ({ header, options, value, onChange, onClickViewChartButton, dataTestId }) => {
19+
import { Checkbox, CHECKBOX_VALUE } from '@devtron-labs/devtron-fe-common-lib'
20+
21+
import { ReactComponent as Dropdown } from '@Icons/ic-chevron-down.svg'
22+
import AddChartSource from '@Components/charts/list/AddChartSource'
23+
24+
import { ChartSourceAccordionProps, SelectedChartRepositoryType } from './charts.types'
25+
26+
export const ChartSourceAccordion = ({ header, options, value, onChange, dataTestId }: ChartSourceAccordionProps) => {
2427
const [collapsed, setCollapse] = useState<boolean>(true)
25-
const [showAddSource, toggleAddSource] = useState<boolean>(false)
2628
const toggleDropdown = (): void => {
2729
setCollapse(!collapsed)
2830
}
2931

30-
const handleTogleAddSource = () => {
31-
toggleAddSource(!showAddSource)
32+
const onChangeToggleSource = (option: SelectedChartRepositoryType) => () => {
33+
onChange(option)
3234
}
3335

3436
return (
@@ -47,30 +49,17 @@ export const Accordian = ({ header, options, value, onChange, onClickViewChartBu
4749

4850
{collapsed && (
4951
<div>
50-
<button
51-
type="button"
52-
className="dc__position-rel dc__transparent dc__hover-n50 cursor flex left cb-5 fs-13 fw-6 lh-20 h-32 pl-10 w-100"
53-
onClick={handleTogleAddSource}
54-
>
55-
<AddIcon className="icon-dim-16 fcb-5 mr-8" />
56-
Add chart source
57-
</button>
58-
59-
{showAddSource && (
60-
<div className="dc__transparent-div" onClick={handleTogleAddSource}>
61-
<AddChartSource baseClass="accordian-add-position" />
62-
</div>
63-
)}
52+
<AddChartSource text="Add chart source" />
6453
{options.map((option) => (
6554
<div
6655
className="dc__position-rel flex left cursor dc__hover-n50"
6756
data-testid={`${option.label}-chart-repo`}
6857
>
6958
<Checkbox
7059
rootClassName="ml-7 h-32 fs-13 mb-0 mr-10 w-100"
71-
isChecked={value?.filter((selectedVal) => selectedVal.value === option.value).length}
60+
isChecked={!!value?.filter((selectedVal) => selectedVal.value === option.value).length}
7261
value={CHECKBOX_VALUE.CHECKED}
73-
onChange={() => onChange(option)}
62+
onChange={onChangeToggleSource(option)}
7463
>
7564
<div className="dc__ellipsis-right ml-5 dc__mxw-180">{option.label}</div>
7665
</Checkbox>

‎src/components/charts/charts.types.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
import { Dispatch, SetStateAction } from 'react'
1818
import { RouteComponentProps } from 'react-router-dom'
1919

20-
import { OptionType, ResponseType } from '@devtron-labs/devtron-fe-common-lib'
20+
import { ActionMenuProps, OptionType, ResponseType } from '@devtron-labs/devtron-fe-common-lib'
2121

2222
export interface ChartGroupCardProps {
2323
chartGroup: ChartGroup
@@ -390,7 +390,7 @@ export interface ChartListPopUpType {
390390
filteredChartList: ChartListType[]
391391
isLoading: boolean
392392
setFilteredChartList: React.Dispatch<React.SetStateAction<ChartListType[]>>
393-
setShowSourcePopoUp: React.Dispatch<React.SetStateAction<boolean>>
393+
setShowSourcePopUp: React.Dispatch<React.SetStateAction<boolean>>
394394
chartActiveMap: Record<string, boolean>
395395
setChartActiveMap: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
396396
}
@@ -450,3 +450,18 @@ export interface ChartDescriptionTypes {
450450
isDeprecated?: boolean
451451
isListView?: boolean
452452
}
453+
454+
export enum CHART_SOURCE_TYPE {
455+
CHART_REPO = 'chart-repo',
456+
OCI = 'oci',
457+
}
458+
459+
export type AddSourceMenuOptions = ActionMenuProps<CHART_SOURCE_TYPE>
460+
461+
export interface ChartSourceAccordionProps {
462+
header: string
463+
options: SelectedChartRepositoryType[]
464+
value: SelectedChartRepositoryType[]
465+
onChange: (option: SelectedChartRepositoryType) => void
466+
dataTestId: string
467+
}

‎src/components/charts/constants.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
* limitations under the License.
1515
*/
1616

17+
import { URLS } from '@Config/routes'
18+
19+
import { AddSourceMenuOptions, CHART_SOURCE_TYPE } from './charts.types'
20+
1721
export const REGEX_ERROR_MESSAGES = {
1822
MIN_5_CHAR: 'Minimum 5 characters required',
1923
LOWER_CASE: 'Use only lowercase alphanumeric characters "-" or "."',
@@ -49,3 +53,22 @@ export const QueryParams = {
4953
}
5054

5155
export const CHART_CARD_MAX_LENGTH = 4
56+
57+
export const getAddSourceActionMenuOptions = (): AddSourceMenuOptions['options'] => [
58+
{
59+
items: [
60+
{
61+
id: CHART_SOURCE_TYPE.CHART_REPO,
62+
label: 'Add Chart Repository',
63+
componentType: 'link',
64+
to: URLS.GLOBAL_CONFIG_CHART,
65+
},
66+
{
67+
id: CHART_SOURCE_TYPE.OCI,
68+
label: 'Add OCI Registry',
69+
componentType: 'link',
70+
to: `${URLS.GLOBAL_CONFIG_DOCKER}/0`,
71+
},
72+
],
73+
},
74+
]

‎src/components/charts/list/AddChartSource.tsx

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,23 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { NavLink } from 'react-router-dom'
17+
import { ActionMenu, ButtonVariantType, ComponentSizeType, Icon, noop } from '@devtron-labs/devtron-fe-common-lib'
1818

19-
import { URLS } from '../../../config'
19+
import { getAddSourceActionMenuOptions } from '../constants'
2020

21-
const AddChartSource = ({ baseClass }: { baseClass?: string }) => (
22-
<div
23-
className={`chart-list__add w-200 en-2 bw-1 br-4 bg__primary fw-4 fs-13 cn-9 mt-8 pt-4 pb-4 ${baseClass || ''}`}
24-
>
25-
<NavLink className="add-repo-row dc__no-decor pl-8 pr-8 flex left cn-9" to={URLS.GLOBAL_CONFIG_CHART}>
26-
Add Chart Repository
27-
</NavLink>
28-
29-
<NavLink className="add-repo-row dc__no-decor pl-8 pr-8 flex left cn-9" to={`${URLS.GLOBAL_CONFIG_DOCKER}/0`}>
30-
Add OCI Registry
31-
</NavLink>
32-
</div>
21+
const AddChartSource = ({ text }: { text?: string }) => (
22+
<ActionMenu
23+
id="chart-store-add-source-action-menu"
24+
onClick={noop}
25+
options={getAddSourceActionMenuOptions()}
26+
buttonProps={{
27+
text,
28+
dataTestId: 'add-chart-source-button',
29+
startIcon: <Icon name="ic-add" color="B500" />,
30+
size: ComponentSizeType.xxs,
31+
variant: ButtonVariantType.borderLess,
32+
}}
33+
/>
3334
)
3435

3536
export default AddChartSource

0 commit comments

Comments
 (0)