Skip to content

Commit 84ddeaa

Browse files
AbhishekA1509AbhishekA1509
authored
Merge pull request #1586 from devtron-labs/chore(ci-pipeline)/linting
chore: ci-pipeline linting
2 parents 54b5b54 + acffff5 commit 84ddeaa

File tree

5 files changed

+63
-54
lines changed

5 files changed

+63
-54
lines changed

‎src/components/CIPipelineN/DockerArgs.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1-
import React from 'react'
1+
import React, { FunctionComponent } from 'react'
22
import { TippyCustomized, TippyTheme, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
33
import { DockerArgsAction, DockerArgsItemProps, DockerArgsProps } from './types'
44
import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
55
import { ReactComponent as QuestionIcon } from '../v2/assets/icons/ic-question.svg'
66
import { ReactComponent as HelpIcon } from '../../assets/icons/ic-help.svg'
77

8-
function DockerArgsItem({ arg, index, handleDockerArgsUpdate, fromBuildPack, readOnly }: DockerArgsItemProps) {
8+
const DockerArgsItem: FunctionComponent<DockerArgsItemProps> = ({
9+
arg,
10+
index,
11+
handleDockerArgsUpdate,
12+
fromBuildPack,
13+
readOnly,
14+
}) => {
915
const handleDockerArgKeyUpdate = (event: React.ChangeEvent<HTMLInputElement>) => {
1016
const argData = {
1117
index,
@@ -62,6 +68,7 @@ function DockerArgsItem({ arg, index, handleDockerArgsUpdate, fromBuildPack, rea
6268
className="dc__no-background flexbox dc__align-start dc__no-border dc__outline-none-imp"
6369
onClick={handleRemoveDockerArg}
6470
type="button"
71+
aria-label="remove-docker-args"
6572
>
6673
<Close className="icon-dim-24 mt-6 ml-6" />
6774
</button>
@@ -70,7 +77,7 @@ function DockerArgsItem({ arg, index, handleDockerArgsUpdate, fromBuildPack, rea
7077
)
7178
}
7279

73-
export default function DockerArgs({ args, handleDockerArgsUpdate, fromBuildPack, readOnly }: DockerArgsProps) {
80+
const DockerArgs: FunctionComponent<DockerArgsProps> = ({ args, handleDockerArgsUpdate, fromBuildPack, readOnly }) => {
7481
const handleAddDockerArgs = () => {
7582
handleDockerArgsUpdate({ action: DockerArgsAction.ADD })
7683
}
@@ -125,6 +132,7 @@ export default function DockerArgs({ args, handleDockerArgsUpdate, fromBuildPack
125132
{args.length > 0 &&
126133
args.map((arg, index) => (
127134
<DockerArgsItem
135+
// eslint-disable-next-line react/no-array-index-key
128136
key={`build-${index}`}
129137
index={index}
130138
arg={arg}
@@ -136,3 +144,5 @@ export default function DockerArgs({ args, handleDockerArgsUpdate, fromBuildPack
136144
</div>
137145
)
138146
}
147+
148+
export default DockerArgs

‎src/components/CIPipelineN/types.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,16 @@ export enum DockerArgsAction {
77
UPDATE_VALUE = 'update_docker_arg_value',
88
}
99

10+
export interface DockerArgsActionData {
11+
index?: number
12+
value?: string
13+
}
14+
15+
export interface HandleDockerArgsUpdateType {
16+
action: DockerArgsAction
17+
argData?: DockerArgsActionData
18+
}
19+
1020
interface DockerArgsCommonType {
1121
handleDockerArgsUpdate: ({ action, argData }: HandleDockerArgsUpdateType) => void
1222
fromBuildPack?: boolean
@@ -21,13 +31,3 @@ export interface DockerArgsItemProps extends DockerArgsCommonType {
2131
arg: PipelineFormType['args'][number]
2232
index: number
2333
}
24-
25-
export interface DockerArgsActionData {
26-
index?: number
27-
value?: string
28-
}
29-
30-
export interface HandleDockerArgsUpdateType {
31-
action: DockerArgsAction
32-
argData?: DockerArgsActionData
33-
}

‎src/components/ciConfig/BuildContext.tsx

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import React, { useEffect, useState } from 'react'
1+
// Disabling for ReactSelect
2+
/* eslint-disable jsx-a11y/label-has-associated-control */
3+
import React, { FunctionComponent, useEffect, useState } from 'react'
24
import ReactSelect from 'react-select'
35
import { CustomInput, OptionType, TippyCustomized, TippyTheme } from '@devtron-labs/devtron-fe-common-lib'
46
import { checkoutPathOption, renderOptionIcon, repositoryControls, repositoryOption } from './CIBuildpackBuildOptions'
@@ -9,7 +11,7 @@ import { ReactComponent as QuestionFilled } from '../../assets/icons/ic-help.svg
911
import { ReactComponent as Question } from '../../assets/icons/ic-help-outline.svg'
1012
import { RootBuildContext } from './ciConfigConstant'
1113

12-
function getBuildContextAdditionalContent() {
14+
const getBuildContextAdditionalContent = () => {
1315
return (
1416
<div className="p-12 fs-13">
1517
To build all files from the root, use (.) as the build context, or set build context by referring a
@@ -22,7 +24,7 @@ function getBuildContextAdditionalContent() {
2224
)
2325
}
2426

25-
function InfoCard() {
27+
const InfoCard: FunctionComponent = () => {
2628
return (
2729
<div className="flex row ml-0">
2830
<TippyCustomized
@@ -46,7 +48,7 @@ function InfoCard() {
4648
)
4749
}
4850

49-
export default function BuildContext({
51+
const BuildContext: FunctionComponent<BuildContextProps> = ({
5052
readOnly,
5153
isDefaultBuildContext,
5254
configOverrideView,
@@ -63,7 +65,7 @@ export default function BuildContext({
6365
setCurrentCIBuildConfig,
6466
currentBuildContextGitMaterial,
6567
readOnlyBuildContextPath,
66-
}: BuildContextProps) {
68+
}) => {
6769
const [isCollapsed, setIsCollapsed] = useState<boolean>(!isDefaultBuildContext)
6870

6971
const useRootBuildContextFlag = currentCIBuildConfig?.useRootBuildContext
@@ -75,14 +77,14 @@ export default function BuildContext({
7577
const [checkoutPathOptions, setCheckoutPathOptions] = useState<OptionType[]>(checkoutPathArray)
7678

7779
useEffect(() => {
78-
const checkoutPathArray = [{ label: RootBuildContext, value: RootBuildContext }]
80+
const _checkoutPathArray = [{ label: RootBuildContext, value: RootBuildContext }]
7981
if (selectedBuildContextGitMaterial?.checkoutPath !== RootBuildContext) {
80-
checkoutPathArray.push({
82+
_checkoutPathArray.push({
8183
label: selectedBuildContextGitMaterial?.checkoutPath,
8284
value: selectedBuildContextGitMaterial?.checkoutPath,
8385
})
8486
}
85-
setCheckoutPathOptions(checkoutPathArray)
87+
setCheckoutPathOptions(_checkoutPathArray)
8688
}, [selectedBuildContextGitMaterial])
8789

8890
const toggleCollapse = () => {
@@ -91,13 +93,14 @@ export default function BuildContext({
9193

9294
const getSelectedBuildContextGitMaterial = () => selectedBuildContextGitMaterial ?? currentMaterial
9395

94-
const handleBuildContextPathChange = (selectedBuildContextGitMaterial): void => {
95-
setSelectedBuildContextGitMaterial(selectedBuildContextGitMaterial)
96+
const handleBuildContextPathChange = (_selectedBuildContextGitMaterial): void => {
97+
setSelectedBuildContextGitMaterial(_selectedBuildContextGitMaterial)
9698
// Don't know how and why we are directly setting state.
97-
formState.repository.value = selectedBuildContextGitMaterial.name
99+
// eslint-disable-next-line no-param-reassign
100+
formState.repository.value = _selectedBuildContextGitMaterial.name
98101
setCurrentCIBuildConfig({
99102
...currentCIBuildConfig,
100-
buildContextGitMaterialId: selectedBuildContextGitMaterial.id,
103+
buildContextGitMaterialId: _selectedBuildContextGitMaterial.id,
101104
})
102105
}
103106

@@ -109,9 +112,9 @@ export default function BuildContext({
109112
})
110113
}
111114

112-
const getCheckoutPathValue = (useRootBuildContextFlag: boolean): OptionType => {
115+
const getCheckoutPathValue = (_useRootBuildContextFlag: boolean): OptionType => {
113116
const path = getSelectedBuildContextGitMaterial()?.checkoutPath
114-
const val = useRootBuildContextFlag ? RootBuildContext : path
117+
const val = _useRootBuildContextFlag ? RootBuildContext : path
115118

116119
return { label: val, value: val }
117120
}
@@ -125,7 +128,7 @@ export default function BuildContext({
125128
return (
126129
<div className="form-row__docker">
127130
<div className={`form__field ${configOverrideView ? 'mb-0-imp' : ''}`}>
128-
<label className="form__label">Repository containing build context</label>
131+
<span className="form__label">Repository containing build context</span>
129132

130133
<div className="flex left">
131134
{currentBuildContextGitMaterial?.url && renderOptionIcon(currentBuildContextGitMaterial.url)}
@@ -134,13 +137,11 @@ export default function BuildContext({
134137
</span>
135138
</div>
136139

137-
{repositoryError && <label className="form__error">{repositoryError}</label>}
140+
{repositoryError && <span className="form__error">{repositoryError}</span>}
138141
</div>
139142

140143
<div className={`form__field ${configOverrideView ? 'mb-0-imp' : ''}`}>
141-
<label htmlFor="" className="form__label">
142-
Build Context (Relative)
143-
</label>
144+
<span className="form__label">Build Context (Relative)</span>
144145

145146
<span className="fs-14 fw-4 lh-20 cn-9">{readOnlyBuildContextPath}</span>
146147
</div>
@@ -159,7 +160,7 @@ export default function BuildContext({
159160
<Dropdown
160161
className="icon-dim-26 rotate"
161162
data-testid="set-build-context-button"
162-
style={{ ['--rotateBy' as any]: isCollapsed ? '360deg' : '270deg' }}
163+
style={{ ['--rotateBy' as string]: isCollapsed ? '360deg' : '270deg' }}
163164
/>
164165
Set Build context
165166
</button>
@@ -175,7 +176,6 @@ export default function BuildContext({
175176
<ReactSelect
176177
className="m-0"
177178
classNamePrefix="build-config__select-repository-containing-build-context"
178-
tabIndex={3}
179179
isMulti={false}
180180
isClearable={false}
181181
options={sourceConfig.material}
@@ -210,7 +210,6 @@ export default function BuildContext({
210210
<ReactSelect
211211
className="m-0 br-0"
212212
classNamePrefix="build-config__select-checkout-path-for-build-context"
213-
tabIndex={4}
214213
isMulti={false}
215214
isClearable={false}
216215
isSearchable={false}
@@ -227,7 +226,6 @@ export default function BuildContext({
227226
/>
228227

229228
<CustomInput
230-
tabIndex={4}
231229
type="text"
232230
rootClassName="file-name"
233231
data-testid="build-context-path-text-box"
@@ -244,3 +242,5 @@ export default function BuildContext({
244242
</>
245243
)
246244
}
245+
246+
export default BuildContext

‎src/components/ciConfig/CISelfDockerBuildOption.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
import React from 'react'
1+
// Disabling due to react select issue
2+
/* eslint-disable jsx-a11y/label-has-associated-control */
3+
import React, { FunctionComponent } from 'react'
24
import ReactSelect from 'react-select'
35
import Tippy from '@tippyjs/react'
46
import { CustomInput } from '@devtron-labs/devtron-fe-common-lib'
57
import { renderOptionIcon, repositoryControls, repositoryOption } from './CIBuildpackBuildOptions'
68
import { _multiSelectStyles } from './CIConfig.utils'
79
import { CISelfDockerBuildOptionProps } from './types'
810

9-
export default function CISelfDockerBuildOption({
11+
const CISelfDockerBuildOption: FunctionComponent<CISelfDockerBuildOptionProps> = ({
1012
readOnly,
1113
sourceMaterials,
1214
readonlyDockerfileRelativePath,
@@ -18,25 +20,23 @@ export default function CISelfDockerBuildOption({
1820
handleOnChangeConfig,
1921
handleFileLocationChange,
2022
dockerfileError,
21-
}: CISelfDockerBuildOptionProps) {
23+
}) => {
2224
if (readOnly) {
2325
return (
2426
<div className={`${configOverrideView ? 'mb-12' : ''} form-row__docker`}>
2527
<div className={`form__field ${configOverrideView ? 'mb-0-imp' : ''}`}>
26-
<label className="form__label">Repository containing Dockerfile</label>
28+
<span className="form__label">Repository containing Dockerfile</span>
2729

2830
<div className="flex left">
2931
{currentMaterial?.url && renderOptionIcon(currentMaterial.url)}
3032
<span className="fs-14 fw-4 lh-20 cn-9">{currentMaterial?.name || 'Not selected'}</span>
3133
</div>
3234

33-
{repositoryError && <label className="form__error">{repositoryError}</label>}
35+
{repositoryError && <span className="form__error">{repositoryError}</span>}
3436
</div>
3537

3638
<div className={`form__field ${configOverrideView ? 'mb-0-imp' : ''}`}>
37-
<label htmlFor="" className="form__label dc__required-field">
38-
Dockerfile Path (Relative)
39-
</label>
39+
<span className="form__label dc__required-field">Dockerfile Path (Relative)</span>
4040

4141
<span className="fs-14 fw-4 lh-20 cn-9">{readonlyDockerfileRelativePath}</span>
4242
</div>
@@ -52,7 +52,6 @@ export default function CISelfDockerBuildOption({
5252
<ReactSelect
5353
className="m-0"
5454
classNamePrefix="build-config__select-repository-containing-dockerfile"
55-
tabIndex={3}
5655
isMulti={false}
5756
isClearable={false}
5857
options={sourceMaterials}
@@ -96,7 +95,6 @@ export default function CISelfDockerBuildOption({
9695
</Tippy>
9796

9897
<CustomInput
99-
tabIndex={4}
10098
rootClassName="file-name"
10199
data-testid="dockerfile-path-text-box"
102100
placeholder="Dockerfile"
@@ -112,3 +110,5 @@ export default function CISelfDockerBuildOption({
112110
</div>
113111
)
114112
}
113+
114+
export default CISelfDockerBuildOption

‎src/components/ciConfig/CreateDockerFileLanguageOptions.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { FunctionComponent } from 'react'
22
import Tippy from '@tippyjs/react'
33
import ReactSelect from 'react-select'
44
import { repositoryControls, repositoryOption } from './CIBuildpackBuildOptions'
@@ -8,7 +8,7 @@ import { CREATE_DOCKER_FILE_LANGUAGE_OPTIONS_TEXT } from './ciConfigConstant'
88
import { CreateDockerFileLanguageOptionsProps, ResetEditorChangesProps } from './types'
99
import { ReactComponent as Reset } from '../../assets/icons/ic-arrow-anticlockwise.svg'
1010

11-
function Title() {
11+
const Title: FunctionComponent = () => {
1212
return (
1313
<Tippy
1414
className="default-tt w-200"
@@ -21,7 +21,7 @@ function Title() {
2121
)
2222
}
2323

24-
function ResetEditorChanges({ resetChanges, editorData, editorValue }: ResetEditorChangesProps) {
24+
const ResetEditorChanges: FunctionComponent<ResetEditorChangesProps> = ({ resetChanges, editorData, editorValue }) => {
2525
const showReset = !editorData?.fetching && editorData?.data !== editorValue
2626
if (!showReset) {
2727
return null
@@ -44,7 +44,7 @@ function ResetEditorChanges({ resetChanges, editorData, editorValue }: ResetEdit
4444
)
4545
}
4646

47-
export default function CreateDockerFileLanguageOptions({
47+
export const CreateDockerFileLanguageOptions: FunctionComponent<CreateDockerFileLanguageOptionsProps> = ({
4848
editorData,
4949
editorValue,
5050
handleGitRepoChange,
@@ -59,7 +59,7 @@ export default function CreateDockerFileLanguageOptions({
5959
handleLanguageSelection,
6060
handleFrameworkSelection,
6161
readOnly,
62-
}: CreateDockerFileLanguageOptionsProps) {
62+
}) => {
6363
const selectedLanguageFrameworks = languageFrameworks?.get(selectedLanguage?.value)
6464

6565
if (readOnly) {
@@ -103,7 +103,6 @@ export default function CreateDockerFileLanguageOptions({
103103
<Title />
104104

105105
<ReactSelect
106-
tabIndex={3}
107106
isSearchable={false}
108107
options={materialOptions}
109108
getOptionLabel={(option) => `${option.name}`}
@@ -124,7 +123,6 @@ export default function CreateDockerFileLanguageOptions({
124123

125124
<ReactSelect
126125
classNamePrefix="select-create-dockerfile-language-dropdown"
127-
tabIndex={3}
128126
options={languages}
129127
value={selectedLanguage}
130128
isSearchable={false}
@@ -144,7 +142,6 @@ export default function CreateDockerFileLanguageOptions({
144142
<span className="fs-13 fw-4 lh-20 cn-7 mr-8">Framework</span>
145143

146144
<ReactSelect
147-
tabIndex={3}
148145
options={selectedLanguageFrameworks || []}
149146
value={selectedFramework}
150147
classNamePrefix="build-config__select-framework"
@@ -164,3 +161,5 @@ export default function CreateDockerFileLanguageOptions({
164161
</div>
165162
)
166163
}
164+
165+
export default CreateDockerFileLanguageOptions

0 commit comments

Comments
 (0)