Skip to content

Commit ae9f8d3

Browse files
AbhishekA1509AbhishekA1509
authored
Merge pull request #343 from devtron-labs/uat/deployment-template
UAT: Deployment template
2 parents 0979f59 + 561d78e commit ae9f8d3

File tree

10 files changed

+68
-28
lines changed

10 files changed

+68
-28
lines changed

‎src/Assets/Icon/ic-warning-y5.svg‎

Lines changed: 20 additions & 0 deletions
Loading

‎src/Common/CodeEditor/CodeEditor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ import ReactGA from 'react-ga4'
2121
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
2222
import { configureMonacoYaml } from 'monaco-yaml'
2323

24+
import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
2425
import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
2526
import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-error-exclamation.svg'
26-
import { ReactComponent as WarningIcon } from '../../Assets/Icon/ic-warning.svg'
2727
import './codeEditor.scss'
2828
import 'monaco-editor'
2929

@@ -459,7 +459,7 @@ const ValidationError = () => {
459459

460460
const Warning: React.FC<InformationBarProps> = (props) => (
461461
<div className={`code-editor__warning ${props.className || ''}`}>
462-
<WarningIcon className="code-editor__information-info-icon" />
462+
<ICWarningY5 className="code-editor__information-info-icon" />
463463
{props.text}
464464
{props.children}
465465
</div>

‎src/Common/CodeEditor/codeEditor.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -105,18 +105,6 @@
105105
min-height: 300px;
106106
}
107107

108-
.code-editor__warning {
109-
font-size: 12px;
110-
font-weight: 400;
111-
line-height: 1.33;
112-
letter-spacing: normal;
113-
color: var(--Y700);
114-
height: auto;
115-
padding: 8px 16px;
116-
border-bottom: 1px solid #d6dbdf;
117-
background-color: var(--Y100);
118-
}
119-
120108
.code-editor__information {
121109
font-size: 12px;
122110
font-weight: 400;

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/DeploymentTemplate/DTApplicationMetricsFormField.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ const DTApplicationMetricsFormField = ({
2626
return (
2727
<div className="flexbox dc__align-items-center dc__gap-8 fs-13 fw-4 lh-20 cn-9">
2828
<ICInfoFilledOverride className="icon-dim-16 dc__no-shrink" />
29-
<div className="flexbox">
30-
<span>Application metrics are</span>&nbsp;
29+
<div className="flexbox dc__gap-6">
30+
<span>Application metrics are</span>
3131
<span className="fw-6">{isAppMetricsEnabled ? 'Enabled' : 'Not enabled'}</span>
3232
</div>
3333
</div>
@@ -48,7 +48,7 @@ const DTApplicationMetricsFormField = ({
4848
<InvalidYAMLTippyWrapper parsingError={parsingError} restoreLastSavedYAML={restoreLastSavedYAML}>
4949
<div>
5050
<Checkbox
51-
rootClassName={`mb-0 dc__align-start ${!selectedChart.isAppMetricsSupported ? 'dc__disabled' : ''}`}
51+
rootClassName={`mb-0 dc__align-items-center ${!selectedChart.isAppMetricsSupported ? 'dc__disabled' : ''}`}
5252
isChecked={isAppMetricsEnabled}
5353
value={CHECKBOX_VALUE.CHECKED}
5454
onChange={toggleAppMetrics}
@@ -64,14 +64,14 @@ const DTApplicationMetricsFormField = ({
6464
</div>
6565
</InvalidYAMLTippyWrapper>
6666

67-
<div className={`flexbox ${selectedChart.isAppMetricsSupported ? 'pl-8' : ''}`}>
67+
<div className="flexbox dc__gap-6 pl-6 dc__align-items-center">
6868
{!selectedChart.isAppMetricsSupported && (
6969
<Tooltip
7070
alwaysShowTippyOnHover
7171
content={`Application metrics is not supported for ${selectedChart.name} version ${selectedChart.version}.`}
7272
>
7373
<span className="cr-5 fs-13 fw-4 lh-20 dc__border-bottom-dashed--n3 dc__no-shrink">
74-
&nbsp;Not supported &nbsp;
74+
Not supported
7575
</span>
7676
</Tooltip>
7777
)}

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export interface ConfigToolbarPopupMenuConfigType {
2323
dataTestId: string
2424
disabled?: boolean
2525
icon?: ReactNode | null
26+
variant?: 'default' | 'negative'
2627
}
2728

2829
export enum ConfigToolbarPopupNodeType {

‎src/Shared/Components/InfoIconTippy/InfoIconTippy.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const InfoIconTippy = ({
2626
documentationLink,
2727
documentationLinkText,
2828
additionalContent,
29-
iconClassName = 'icon-dim-16',
29+
iconClassName = 'icon-dim-16 dc__no-shrink',
3030
placement = 'bottom',
3131
dataTestid = 'info-tippy-button',
3232
children,
@@ -49,7 +49,7 @@ const InfoIconTippy = ({
4949
{children || (
5050
<button
5151
type="button"
52-
className="p-0 dc__no-background dc__no-border dc__outline-none-imp flex dc__tab-focus"
52+
className="p-0 dc__no-background dc__no-border dc__outline-none-imp flex dc__tab-focus dc__no-shrink"
5353
aria-label="Info Icon"
5454
data-testid={dataTestid}
5555
>

‎src/Shared/Components/SelectPicker/common.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const SelectPickerDropdownIndicator = <OptionValue,>(
4646

4747
return (
4848
<components.DropdownIndicator {...props}>
49-
<ICCaretDown className={`icon-dim-16 ${isDisabled ? 'scn-3' : 'scn-6'} dc__no-shrink`} />
49+
<ICCaretDown className={isDisabled ? 'scn-3' : 'scn-6'} />
5050
</components.DropdownIndicator>
5151
)
5252
}
@@ -55,7 +55,7 @@ export const SelectPickerClearIndicator = <OptionValue,>(
5555
props: ClearIndicatorProps<SelectPickerOptionType<OptionValue>>,
5656
) => (
5757
<components.ClearIndicator {...props}>
58-
<ICClose className="icon-dim-16 icon-use-fill-n6 dc__no-shrink" />
58+
<ICClose className="icon-use-fill-n6" />
5959
</components.ClearIndicator>
6060
)
6161

@@ -100,6 +100,7 @@ export const SelectPickerValueContainer = <OptionValue, IsMulti extends boolean>
100100
<div className="flex left">
101101
<components.ValueContainer {...props} />
102102
</div>
103+
{/* Size will not work here need to go in details later when prioritized */}
103104
{showSelectedOptionsCount && selectedOptionsLength > 0 && (
104105
<div className="bcb-50 dc__border eb-2 dc__border-radius-4-imp pl-5 pr-5 cb-5 fs-12 fw-6 lh-18 dc__truncate dc__no-shrink">
105106
{selectedOptionsLength}

‎src/Shared/Components/SelectPicker/constants.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { CSSProperties } from 'react'
2+
import { ComponentSizeType } from '@Shared/constants'
3+
import { SelectPickerProps } from './type'
4+
5+
export const SELECT_PICKER_FONT_SIZE_MAP: Record<SelectPickerProps['size'], CSSProperties['fontSize']> = {
6+
[ComponentSizeType.small]: '12px',
7+
[ComponentSizeType.medium]: '13px',
8+
[ComponentSizeType.large]: '13px',
9+
}
10+
11+
export const SELECT_PICKER_ICON_SIZE_MAP: Record<SelectPickerProps['size'], Pick<CSSProperties, 'width' | 'height'>> = {
12+
[ComponentSizeType.small]: { width: '12px', height: '12px' },
13+
[ComponentSizeType.medium]: { width: '16px', height: '16px' },
14+
[ComponentSizeType.large]: { width: '16px', height: '16px' },
15+
}
16+
17+
export const SELECT_PICKER_CONTROL_SIZE_MAP: Record<SelectPickerProps['size'], CSSProperties['minHeight']> = {
18+
[ComponentSizeType.small]: 'auto',
19+
[ComponentSizeType.medium]: 'auto',
20+
[ComponentSizeType.large]: '36px',
21+
}

‎src/Shared/Components/SelectPicker/type.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,11 +136,11 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
136136
*/
137137
customSelectedOptionsCount?: number
138138
/**
139-
* Height of the dropdown
139+
* Size of select
140140
*
141141
* @default 'ComponentSizeType.medium'
142142
*/
143-
size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.large>
143+
size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.large | ComponentSizeType.small>
144144
/**
145145
* Content to be shown in a tippy when disabled
146146
*/

‎src/Shared/Components/SelectPicker/utils.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { CHECKBOX_VALUE } from '@Common/Types'
1818
import { ComponentSizeType } from '@Shared/constants'
1919
import { GroupBase, MultiValue, OptionsOrGroups, StylesConfig } from 'react-select'
2020
import { SelectPickerOptionType, SelectPickerProps, SelectPickerVariantType } from './type'
21+
import { SELECT_PICKER_CONTROL_SIZE_MAP, SELECT_PICKER_FONT_SIZE_MAP, SELECT_PICKER_ICON_SIZE_MAP } from './constants'
2122

2223
const getMenuWidthFromSize = <OptionValue, IsMulti extends boolean>(
2324
menuSize: SelectPickerProps<OptionValue, IsMulti>['menuSize'],
@@ -117,7 +118,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
117118
}),
118119
control: (base, state) => ({
119120
...base,
120-
minHeight: size === ComponentSizeType.medium ? 'auto' : '36px',
121+
minHeight: SELECT_PICKER_CONTROL_SIZE_MAP[size],
121122
minWidth: '56px',
122123
boxShadow: 'none',
123124
backgroundColor: 'var(--N50)',
@@ -165,14 +166,22 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
165166
}),
166167
dropdownIndicator: (base, state) => ({
167168
...base,
169+
...SELECT_PICKER_ICON_SIZE_MAP[size],
170+
display: 'flex',
171+
alignItems: 'center',
172+
flexShrink: '0',
168173
color: 'var(--N600)',
169174
padding: '0',
170175
transition: 'all .2s ease',
171176
transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
172177
}),
173178
clearIndicator: (base) => ({
174179
...base,
180+
...SELECT_PICKER_ICON_SIZE_MAP[size],
175181
padding: 0,
182+
display: 'flex',
183+
alignItems: 'center',
184+
flexShrink: '0',
176185

177186
'&:hover': {
178187
backgroundColor: 'transparent',
@@ -284,7 +293,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
284293
placeholder: (base) => ({
285294
...base,
286295
color: 'var(--N500)',
287-
fontSize: '13px',
296+
fontSize: SELECT_PICKER_FONT_SIZE_MAP[size],
288297
lineHeight: '20px',
289298
fontWeight: 400,
290299
margin: 0,
@@ -301,7 +310,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
301310
...base,
302311
margin: 0,
303312
color: 'var(--N900)',
304-
fontSize: '13px',
313+
fontSize: SELECT_PICKER_FONT_SIZE_MAP[size],
305314
fontWeight: 400,
306315
lineHeight: '20px',
307316
...(getVariantOverrides(variant)?.singleValue(base, state) || {}),

0 commit comments

Comments
 (0)