xxq250
/
gitness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: [code-1044]: fix bypass list (#755)

This commit is contained in:
Calvin Lee 2023-11-01 18:24:13 +00:00 committed by Harness
parent cd2447a82c
commit b9de38e076
3 changed files with 54 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/components/BranchProtection/BranchProtectionForm/BranchProtectionForm.tsx
View File

@ -16,7 +16,6 @@
import React, { useMemo, useState } from 'react'
import cx from 'classnames'
import {
Avatar,
Button,
ButtonVariation,
Container,
@ -51,6 +50,7 @@ import { useAppContext } from 'AppContext'
import ProtectionRulesForm from './ProtectionRulesForm/ProtectionRulesForm'
import Include from '../../../icons/Include.svg'
import Exclude from '../../../icons/Exclude.svg'
import BypassList from './BypassList'
import css from './BranchProtectionForm.module.scss'
const BranchProtectionForm = (props: {
@ -130,6 +130,7 @@ const BranchProtectionForm = (props: {
showError(getErrorMessage(exception))
}
}
const history = useHistory()
const initialValues = useMemo(() => {
if (editMode && rule) {
@ -186,7 +187,6 @@ const BranchProtectionForm = (props: {
return rulesFormInitialPayload // eslint-disable-next-line react-hooks/exhaustive-deps
}, [editMode, rule, ruleUid])
const history = useHistory()
return (
<Formik
formName="branchProtectionRulesNewEditForm"
@ -254,11 +254,15 @@ const BranchProtectionForm = (props: {
}}>
{formik => {
const targetList = formik.values.targetList
const bypassList = formik.values.bypassList
const bypassList = formik.values.bypassList || []
const minReviewers = formik.values.requireMinReviewers
const statusChecks = formik.values.statusChecks
const limitMergeStrats = formik.values.limitMergeStrategies
const requireStatusChecks = formik.values.requireStatusChecks
const filteredUserOptions = userOptions.filter(
(item: SelectOption) => !bypassList.includes(item.value as string)
)
return (
<FormikForm>
<Container className={css.main} padding="xlarge">
@ -397,7 +401,7 @@ const BranchProtectionForm = (props: {
</Text>
<FormInput.CheckBox label={getString('branchProtection.allRepoOwners')} name={'allRepoOwners'} />
<FormInput.Select
items={userOptions}
items={filteredUserOptions}
onQueryChange={setSearchTerm}
className={css.widthContainer}
onChange={item => {
@ -409,32 +413,8 @@ const BranchProtectionForm = (props: {
const uniqueArr = Array.from(new Set(bypassList))
formik.setFieldValue('bypassList', uniqueArr)
}}
name={'bypassList'}></FormInput.Select>
<Container className={cx(css.widthContainer, css.bypassContainer)}>
{bypassList?.map((owner, idx) => {
const nameIdx = owner.indexOf(' ') + 1
const name = owner.substring(nameIdx)
return (
<Layout.Horizontal key={`${name}-${idx}`} flex={{ align: 'center-center' }} padding={'small'}>
<Avatar hoverCard={false} size="small" name={name.toString()} />
<Text padding={{ top: 'tiny' }} lineClamp={1}>
{name}
</Text>
<FlexExpander />
<Icon
name="code-close"
onClick={() => {
const filteredData = bypassList.filter(
item => !(item[0] === owner[0] && item[1] === owner[1])
)
formik.setFieldValue('bypassList', filteredData)
}}
/>
</Layout.Horizontal>
)
})}
</Container>
name={'bypassSelect'}></FormInput.Select>
<BypassList bypassList={bypassList} setFieldValue={formik.setFieldValue} />
</Container>
<ProtectionRulesForm
setFieldValue={formik.setFieldValue}

40
web/src/components/BranchProtection/BranchProtectionForm/BypassList.tsx Normal file
View File

@ -0,0 +1,40 @@
import React, { useMemo } from 'react'
import cx from 'classnames'
import { Icon } from '@harnessio/icons'
import { Avatar, Container, FlexExpander, Layout, Text } from '@harnessio/uicore'
import css from './BranchProtectionForm.module.scss'
const BypassList = (props: {
bypassList?: string[] // eslint-disable-next-line @typescript-eslint/no-explicit-any
setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void
}) => {
const { bypassList, setFieldValue } = props
const bypassContent = useMemo(() => {
return (
<Container className={cx(css.widthContainer, css.bypassContainer)}>
{bypassList?.map((owner: string, idx: number) => {
const name = owner.slice(owner.indexOf(' ') + 1)
return (
<Layout.Horizontal key={`${name}-${idx}`} flex={{ align: 'center-center' }} padding={'small'}>
<Avatar hoverCard={false} size="small" name={name.toString()} />
<Text padding={{ top: 'tiny' }} lineClamp={1}>
{name}
</Text>
<FlexExpander />
<Icon
name="code-close"
onClick={() => {
const filteredData = bypassList.filter(item => !(item[0] === owner[0] && item[1] === owner[1]))
setFieldValue('bypassList', filteredData)
}}
/>
</Layout.Horizontal>
)
})}
</Container>
)
}, [bypassList, setFieldValue])
return <>{bypassContent}</>
}
export default BypassList

5
web/src/components/BranchProtection/BranchProtectionForm/ProtectionRulesForm/ProtectionRulesForm.tsx
View File

@ -41,6 +41,9 @@ const ProtectionRulesForm = (props: {
limitMergeStrats
} = props
const { getString } = useStrings()
const filteredStatusOptions = statusOptions.filter(
(item: SelectOption) => !statusChecks.includes(item.value as string)
)
return (
<Container margin={{ top: 'medium' }} className={css.generalContainer}>
<Text className={css.headingSize} padding={{ bottom: 'medium' }} font={{ variation: FontVariation.H4 }}>
@ -107,7 +110,7 @@ const ProtectionRulesForm = (props: {
<Container padding={{ left: 'xlarge', top: 'large' }} className={css.widthContainer}>
<FormInput.Select
onQueryChange={setSearchStatusTerm}
items={statusOptions}
items={filteredStatusOptions}
onChange={item => {
statusChecks?.push(item.value as string)
const uniqueArr = Array.from(new Set(statusChecks))