Skip to content

Commit ada5df3

Browse files
shivani170shivani170
committed
chore: spacing fixes & code refactoring
1 parent caea1bf commit ada5df3

File tree

21 files changed

+270
-233
lines changed

21 files changed

+270
-233
lines changed

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/GUIView/GUIView.component.tsx

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ import {
2424
GenericEmptyState,
2525
GUIViewError,
2626
HIDE_SUBMIT_BUTTON_UI_SCHEMA,
27-
InfoColourBar,
2827
joinObjects,
2928
OverrideMergeStrategyType,
3029
RJSFForm,
@@ -33,14 +32,13 @@ import {
3332
} from '@devtron-labs/devtron-fe-common-lib'
3433

3534
import { ReactComponent as ICArrow } from '@Icons/ic-arrow-forward.svg'
36-
import { ReactComponent as Help } from '@Icons/ic-help.svg'
3735
import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
3836
import EmptyFolderImage from '@Images/empty-folder.webp'
3937
import { importComponentFromFELibrary } from '@Components/common'
4038

4139
import { DEPLOYMENT_TEMPLATE_LABELS_KEYS, GUI_VIEW_TEXTS } from '../constants'
4240
import { GUIViewProps, GUIViewState } from './types'
43-
import { getRenderActionButton } from './utils'
41+
import { GUIInfoBlock } from './utils'
4442

4543
const makeObjectFromJsonPathArray = importComponentFromFELibrary('makeObjectFromJsonPathArray', null, 'function')
4644
const ConfigurableGUIViewPanel = importComponentFromFELibrary('ConfigurableGUIViewPanel', null, 'function')
@@ -234,15 +232,7 @@ const GUIView = ({
234232
)}
235233
</div>
236234

237-
{!state.error && (
238-
<InfoColourBar
239-
message="To modify additional configurations"
240-
classname="dc__content-start ev-2 bw-1 dc__no-border-radius dc__no-bottom-border dc__no-left-border dc__no-right-border bcv-1 bcv-1 w-100 lh-20"
241-
Icon={Help}
242-
iconClass="fcv-5 icon-dim-20 dc__no-shrink"
243-
renderActionButton={getRenderActionButton({ handleChangeToYAMLMode })}
244-
/>
245-
)}
235+
{!state.error && <GUIInfoBlock handleChangeToYAMLMode={handleChangeToYAMLMode} />}
246236
</>
247237
)
248238
}

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/GUIView/utils.tsx

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,40 @@
1414
* limitations under the License.
1515
*/
1616

17+
import { InfoBlock } from '@devtron-labs/devtron-fe-common-lib'
18+
1719
import { GUIViewProps } from './types'
1820

19-
export const getRenderActionButton =
21+
const renderGUIText =
2022
({ handleChangeToYAMLMode }: Pick<GUIViewProps, 'handleChangeToYAMLMode'>) =>
2123
() => (
22-
<button
23-
type="button"
24-
className="dc__unset-button-styles"
25-
onClick={handleChangeToYAMLMode}
26-
data-testid="base-deployment-template-switchtoadvanced-button"
27-
>
28-
<span className="cb-5 cursor fw-6">Switch to Advanced</span>
29-
</button>
24+
<div className="flex left dc__gap-6">
25+
<span> To modify additional configurations</span>
26+
<button
27+
type="button"
28+
className="dc__unset-button-styles"
29+
onClick={handleChangeToYAMLMode}
30+
data-testid="base-deployment-template-switchtoadvanced-button"
31+
>
32+
<span className="cb-5 cursor fw-6">Switch to Advanced</span>
33+
</button>
34+
</div>
3035
)
36+
37+
export const GUIInfoBlock = ({ handleChangeToYAMLMode }: Pick<GUIViewProps, 'handleChangeToYAMLMode'>) => (
38+
<InfoBlock
39+
variant="help"
40+
description={renderGUIText({ handleChangeToYAMLMode })()}
41+
borderConfig={{
42+
left: false,
43+
right: false,
44+
top: false,
45+
}}
46+
borderRadiusConfig={{
47+
left: false,
48+
right: false,
49+
top: false,
50+
bottom: false,
51+
}}
52+
/>
53+
)

‎src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -95,19 +95,6 @@ const EditAPIToken = ({
9595
setShowRegeneratedModal(true)
9696
}
9797

98-
const renderRegenerateInfoBar = () => (
99-
<InfoBlock
100-
description="To set a new expiration date, you can regenerate this token. Any scripts or applications using this token will need to be updated."
101-
buttonProps={{
102-
dataTestId: 'regenerate-token-button',
103-
text: 'Regenerate token',
104-
onClick: onClickShowRegenerateModal,
105-
variant: ButtonVariantType.text,
106-
style: ButtonStyleType.negative,
107-
}}
108-
/>
109-
)
110-
11198
const redirectToTokenList = () => {
11299
history.push(`${match.path.split('edit')[0]}list`)
113100
}
@@ -183,24 +170,38 @@ const EditAPIToken = ({
183170
const getExpirationText = () => {
184171
if (isTokenExpired(editData.expireAtInMs)) {
185172
return (
186-
<span className="cr-5">
173+
<span className="cr-5 fw-6">
187174
This token expired on&nbsp;
188175
{moment(editData.expireAtInMs).format(MomentDateFormat)}.
189176
</span>
190177
)
191178
}
192179
if (editData.expireAtInMs === 0) {
193-
return <span>This token has no expiration date.</span>
180+
return <span className="fw-6">This token has no expiration date.</span>
194181
}
195182

196183
return (
197-
<span>
184+
<span className="fw-6">
198185
This token expires on&nbsp;
199186
{moment(editData.expireAtInMs).format(MomentDateFormat)}.
200187
</span>
201188
)
202189
}
203190

191+
const renderRegenerateInfoBar = () => (
192+
<InfoBlock
193+
heading={getExpirationText()}
194+
description="Regenerate this token to set a new expiration date. Any scripts or applications using this token will need to be updated."
195+
buttonProps={{
196+
dataTestId: 'regenerate-token-button',
197+
text: 'Regenerate token',
198+
onClick: onClickShowRegenerateModal,
199+
variant: ButtonVariantType.text,
200+
style: ButtonStyleType.negative,
201+
}}
202+
/>
203+
)
204+
204205
if (isLoading || !editData) {
205206
return <Progressing pageLoader />
206207
}
@@ -261,17 +262,6 @@ const EditAPIToken = ({
261262
</div>
262263
</div>
263264
</label>
264-
<label className="form__row">
265-
<span className="form__label">Expiration</span>
266-
<div className="dc__align-left">
267-
{getExpirationText()}
268-
&nbsp;
269-
<span className="fw-4">To set a new expiration date you must</span>&nbsp;
270-
<span className="cb-5 cursor" onClick={onClickShowRegenerateModal}>
271-
regenerate the token.
272-
</span>
273-
</div>
274-
</label>
275265
<div className="dc__border-top" />
276266
<PermissionConfigurationForm showUserPermissionGroupSelector isAddMode={false} />
277267
</div>

‎src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -808,9 +808,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
808808
/>
809809
))}
810810
</div>
811-
<div className="flex-grow-1 w-100">
812-
<InfoBlock variant="help" description={renderInfoText()} />
813-
</div>
811+
<InfoBlock variant="help" description={renderInfoText()} />
814812
<div className="flex-grow-1 w-100">
815813
<CustomInput
816814
value={this.state.ssoConfig.url || window.__ORCHESTRATOR_ROOT__}

‎src/Pages/GlobalConfigurations/Authorization/UserPermissions/SSONotConfiguredState.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,12 @@ const renderSsoInfoDescription = () => (
3131
const SSONotConfiguredState = () => (
3232
<GenericEmptyState
3333
image={EmptyImage}
34-
classname="fs-16 dc__align-center lh-24 mb-8-imp mt-20"
3534
title={SSO_NOT_CONFIGURED_STATE_TEXTS.title}
3635
subTitle={
37-
<>
36+
<div className="flexbox-col dc__gap-8">
3837
{SSO_NOT_CONFIGURED_STATE_TEXTS.subTitle}
3938
<InfoBlock variant="error" description={renderSsoInfoDescription()} />
40-
</>
39+
</div>
4140
}
4241
/>
4342
)

‎src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx

Lines changed: 84 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,31 @@ import { EditTaintsModalType, EditTaintsRequest, EFFECT_TYPE, TaintErrorObj, Tai
4545
import { ValidationRules } from './validationRules'
4646
import { EDIT_TAINTS_MODAL_MESSAGING, TAINT_OPTIONS } from '../constants'
4747

48+
const TaintInfoMessage = (tippyContent) => {
49+
return (
50+
<div className="fs-13 fw-4 lh-20">
51+
<span>{EDIT_TAINTS_MODAL_MESSAGING.infoText}</span> &nbsp;
52+
<TippyCustomized
53+
theme={TippyTheme.white}
54+
className="w-400"
55+
placement="top"
56+
Icon={HelpIcon}
57+
iconClass="fcv-5"
58+
heading={EDIT_TAINTS_MODAL_MESSAGING.tippyTitle}
59+
infoText=""
60+
showCloseButton
61+
trigger="click"
62+
interactive
63+
additionalContent={tippyContent()}
64+
>
65+
<span className="cb-5 cursor" onClick={stopPropagation}>
66+
{EDIT_TAINTS_MODAL_MESSAGING.infoLinkText}
67+
</span>
68+
</TippyCustomized>
69+
</div>
70+
)
71+
}
72+
4873
export default function EditTaintsModal({ name, version, kind, taints, closePopup }: EditTaintsModalType) {
4974
const { clusterId } = useParams<{ clusterId: string }>()
5075
const [apiCallInProgress, setAPICallInProgress] = useState(false)
@@ -157,31 +182,6 @@ export default function EditTaintsModal({ name, version, kind, taints, closePopu
157182
)
158183
}
159184

160-
const RenderInfoMessage = () => {
161-
return (
162-
<div className="fs-13 fw-4 lh-20">
163-
<span>{EDIT_TAINTS_MODAL_MESSAGING.infoText}</span> &nbsp;
164-
<TippyCustomized
165-
theme={TippyTheme.white}
166-
className="w-400"
167-
placement="top"
168-
Icon={HelpIcon}
169-
iconClass="fcv-5"
170-
heading={EDIT_TAINTS_MODAL_MESSAGING.tippyTitle}
171-
infoText=""
172-
showCloseButton
173-
trigger="click"
174-
interactive
175-
additionalContent={tippyContent()}
176-
>
177-
<span className="cb-5 cursor" onClick={stopPropagation}>
178-
{EDIT_TAINTS_MODAL_MESSAGING.infoLinkText}
179-
</span>
180-
</TippyCustomized>
181-
</div>
182-
)
183-
}
184-
185185
return (
186186
<Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px">
187187
<div className="flexbox-col bg__primary h-100 flex-grow-1 mh-0">
@@ -191,64 +191,68 @@ export default function EditTaintsModal({ name, version, kind, taints, closePopu
191191
<Close className="icon-dim-24" />
192192
</button>
193193
</div>
194-
<div className="flexbox-col pt-16 pr-20 pb-16 pl-20 dc__overflow-auto flex-grow-1">
195-
<InfoBlock description={<RenderInfoMessage />} />
196-
<div className="cursor cb-5 fw-6 fs-13 flexbox mr-20 mb-12" onClick={addNewTaint}>
197-
<Add className="icon-dim-20 fcb-5" /> {EDIT_TAINTS_MODAL_MESSAGING.addTaint}
198-
</div>
199-
{taintList?.map((taintDetails, index) => {
200-
const _errorObj = errorObj?.taintErrorList[index]
201-
return (
202-
<div className="flex left dc__gap-8 mb-8">
203-
<CustomInput
204-
type="text"
205-
name="key"
206-
data-index={index}
207-
value={taintDetails.key}
208-
onChange={handleInputChange}
209-
placeholder="Key"
210-
error={errorObj && !_errorObj['key'].isValid ? _errorObj['key'].message : null}
211-
fullWidth
212-
/>
213-
<CustomInput
214-
type="text"
215-
name="value"
216-
data-index={index}
217-
value={taintDetails.value}
218-
onChange={handleInputChange}
219-
placeholder="Value"
220-
error={errorObj && !_errorObj['value'].isValid ? _errorObj['value'].message : null}
221-
fullWidth
222-
/>
223-
<div className="w-70">
224-
<SelectPicker
225-
inputId="select-taint-effect"
226-
options={TAINT_OPTIONS}
227-
onChange={(selectedValue: OptionType) => {
228-
onEffectChange(selectedValue, index)
229-
}}
194+
<div className="flexbox-col px-20 py-16 dc__overflow-auto flex-grow-1 dc__gap-16">
195+
<InfoBlock description={<TaintInfoMessage tippyContent={tippyContent} />} />
196+
<div className="flexbox-col dc__gap-12">
197+
<div className="cursor cb-5 fw-6 fs-13 flexbox dc__gap-8" onClick={addNewTaint}>
198+
<Add className="icon-dim-20 fcb-5" /> {EDIT_TAINTS_MODAL_MESSAGING.addTaint}
199+
</div>
200+
{taintList?.map((taintDetails, index) => {
201+
const _errorObj = errorObj?.taintErrorList[index]
202+
return (
203+
<div className="flex left dc__gap-8 mb-8">
204+
<CustomInput
205+
type="text"
206+
name="key"
207+
data-index={index}
208+
value={taintDetails.key}
209+
onChange={handleInputChange}
210+
placeholder="Key"
211+
error={errorObj && !_errorObj['key'].isValid ? _errorObj['key'].message : null}
212+
fullWidth
213+
/>
214+
<CustomInput
215+
type="text"
216+
name="value"
230217
data-index={index}
231-
value={{
232-
label: taintDetails.effect,
233-
value: taintDetails.effect,
234-
}}
235-
size={ComponentSizeType.large}
218+
value={taintDetails.value}
219+
onChange={handleInputChange}
220+
placeholder="Value"
221+
error={
222+
errorObj && !_errorObj['value'].isValid ? _errorObj['value'].message : null
223+
}
224+
fullWidth
225+
/>
226+
<div className="w-70">
227+
<SelectPicker
228+
inputId="select-taint-effect"
229+
options={TAINT_OPTIONS}
230+
onChange={(selectedValue: OptionType) => {
231+
onEffectChange(selectedValue, index)
232+
}}
233+
data-index={index}
234+
value={{
235+
label: taintDetails.effect,
236+
value: taintDetails.effect,
237+
}}
238+
size={ComponentSizeType.large}
239+
/>
240+
</div>
241+
<Button
242+
icon={<DeleteIcon />}
243+
dataTestId={`delete-taint-${index}`}
244+
onClick={deleteTaint}
245+
data-index={index}
246+
ariaLabel="Delete Taint"
247+
showAriaLabelInTippy={false}
248+
size={ComponentSizeType.small}
249+
variant={ButtonVariantType.borderLess}
250+
style={ButtonStyleType.negativeGrey}
236251
/>
237252
</div>
238-
<Button
239-
icon={<DeleteIcon />}
240-
dataTestId={`delete-taint-${index}`}
241-
onClick={deleteTaint}
242-
data-index={index}
243-
ariaLabel="Delete Taint"
244-
showAriaLabelInTippy={false}
245-
size={ComponentSizeType.small}
246-
variant={ButtonVariantType.borderLess}
247-
style={ButtonStyleType.negativeGrey}
248-
/>
249-
</div>
250-
)
251-
})}
253+
)
254+
})}
255+
</div>
252256
</div>
253257
<div className="dc__border-top flex right p-16">
254258
<button

0 commit comments

Comments
 (0)