Skip to content

Commit 3bc1830

Browse files
Elessar1802Elessar1802
committed
Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/bulk-trigger-deployment
2 parents 1344683 + b63105d commit 3bc1830

File tree

14 files changed

+218
-75
lines changed

14 files changed

+218
-75
lines changed

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "1.3.11",
3+
"version": "1.4.0-beta-2",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Common/Common.service.ts

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
import { MutableRefObject } from 'react'
1818
import moment from 'moment'
19-
import { sanitizeApprovalConfigData, sanitizeUserApprovalList } from '@Shared/Helpers'
19+
import { sanitizeApprovalConfigData, sanitizeUserApprovalList, stringComparatorBySortOrder } from '@Shared/Helpers'
2020
import { PolicyBlockInfo, RuntimeParamsAPIResponseType, RuntimePluginVariables } from '@Shared/types'
2121
import { get, post } from './Api'
2222
import { GitProviderType, ROUTES } from './Constants'
@@ -42,7 +42,7 @@ import {
4242
GlobalVariableOptionType,
4343
} from './Types'
4444
import { ApiResourceType, STAGE_MAP } from '../Pages'
45-
import { RefVariableType } from './CIPipeline.Types'
45+
import { RefVariableType, VariableTypeFormat } from './CIPipeline.Types'
4646

4747
export const getTeamListMin = (): Promise<TeamList> => {
4848
// ignore active field
@@ -196,7 +196,7 @@ const cdMaterialListModal = ({
196196
deploymentWindowArtifactMetadata: material.deploymentWindowArtifactMetadata ?? null,
197197
configuredInReleases: material.configuredInReleases ?? [],
198198
appWorkflowId: material.appWorkflowId ?? null,
199-
deploymentBlockedState: sanitizeDeploymentBlockedState(material.deploymentBlockedState)
199+
deploymentBlockedState: sanitizeDeploymentBlockedState(material.deploymentBlockedState),
200200
}
201201
})
202202
return materials
@@ -237,8 +237,37 @@ const processCDMaterialsApprovalInfo = (enableApproval: boolean, cdMaterialsResu
237237
}
238238
}
239239

240-
export const parseRuntimeParams = (response: RuntimeParamsAPIResponseType): RuntimePluginVariables[] =>
241-
(response?.runtimePluginVariables ?? []).map((variable) => ({ ...variable, defaultValue: variable.value }))
240+
export const parseRuntimeParams = (response: RuntimeParamsAPIResponseType): RuntimePluginVariables[] => {
241+
const envVariables = Object.entries(response?.envVariables || {}).map<RuntimePluginVariables>(
242+
([key, value]) => ({
243+
name: key,
244+
value,
245+
defaultValue: '',
246+
format: VariableTypeFormat.STRING,
247+
isRequired: false,
248+
valueType: RefVariableType.NEW,
249+
variableStepScope: RefVariableType.GLOBAL,
250+
stepName: null,
251+
stepType: null,
252+
// TODO: (Rohit/Eshank) Replace this with getUniqueId (nanoId method)
253+
stepVariableId: Math.floor(new Date().valueOf() * Math.random()),
254+
valueConstraint: null,
255+
description: null,
256+
fileReferenceId: null,
257+
fileMountDir: null,
258+
}),
259+
)
260+
261+
const runtimeParams = (response?.runtimePluginVariables ?? []).map<RuntimePluginVariables>((variable) => ({
262+
...variable,
263+
defaultValue: variable.value,
264+
}))
265+
266+
runtimeParams.push(...envVariables)
267+
runtimeParams.sort((a, b) => stringComparatorBySortOrder(a.name, b.name))
268+
269+
return runtimeParams
270+
}
242271

243272
const processCDMaterialsMetaInfo = (cdMaterialsResult): CDMaterialsMetaInfo => {
244273
if (!cdMaterialsResult) {

‎src/Common/Constants.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ export const DOCUMENTATION = {
3535
export const PATTERNS = {
3636
STRING: /^[a-zA-Z0-9_]+$/,
3737
DECIMAL_NUMBERS: /^-?\d*\.?\d*$/,
38-
NATURAL_NUMBERS: /^\d*\.?\d*$/,
38+
POSITIVE_DECIMAL_NUMBERS: /^\d*\.?\d*$/,
39+
NATURAL_NUMBERS: /^[1-9]\d*$/,
3940
KUBERNETES_KEY_PREFIX: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
4041
KUBERNETES_KEY_NAME: /^(([A-Za-z0-9][-A-Za-z0-9_.]*)?[A-Za-z0-9])$/,
4142
START_END_ALPHANUMERIC: /^(([A-Za-z0-9].*[A-Za-z0-9])|[A-Za-z0-9])$/,

‎src/Shared/Components/CICDHistory/LogStageAccordion.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,13 +95,13 @@ const LogStageAccordion = ({
9595
>
9696
<span
9797
ref={scrollIntoView}
98-
className="cn-4 col-2 lh-20 dc__text-align-end dc__word-break mono fs-14"
98+
className="cn-4 col-2 lh-20 dc__text-align-end dc__word-break mono fs-14 dc__user-select-none"
9999
data-contains-match={doesLineContainSearchMatch}
100100
>
101101
{logsIndex + 1}
102102
</span>
103-
<p
104-
className="mono fs-14 mb-0-imp cn-0 dc__word-break lh-20"
103+
<pre
104+
className="mono fs-14 mb-0-imp cn-0 dc__word-break lh-20 dc__unset-pre"
105105
// eslint-disable-next-line react/no-danger
106106
dangerouslySetInnerHTML={{
107107
__html: DOMPurify.sanitize(log),

‎src/Shared/Components/CICDHistory/LogsRenderer.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -196,8 +196,7 @@ const LogsRenderer = ({ triggerDetails, isBlobStorageConfigured, parentType, ful
196196

197197
const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
198198

199-
const areStagesAvailable =
200-
(window._env_.FEATURE_STEP_WISE_LOGS_ENABLE && streamDataList[0]?.startsWith(LOGS_STAGE_IDENTIFIER)) || false
199+
const areStagesAvailable = streamDataList[0]?.startsWith(LOGS_STAGE_IDENTIFIER) || false
201200

202201
function createMarkup({
203202
log,

‎src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
1-
import { createElement, createRef, Fragment, ReactElement, RefObject, useEffect, useRef, useState } from 'react'
1+
import {
2+
createElement,
3+
createRef,
4+
Fragment,
5+
ReactElement,
6+
RefObject,
7+
useEffect,
8+
useMemo,
9+
useRef,
10+
useState,
11+
} from 'react'
212
// eslint-disable-next-line import/no-extraneous-dependencies
313
import { followCursor } from 'tippy.js'
414

@@ -74,10 +84,10 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
7484
{},
7585
)
7686
}
87+
const rowIds = useMemo(() => rows.map(({ id }) => id), [rows])
7788

7889
useEffect(() => {
7990
setIsRowAdded(rows.length > 0 && Object.keys(cellRef.current).length < rows.length)
80-
const rowIds = rows.map(({ id }) => id)
8191

8292
const updatedCellRef = rowIds.reduce((acc, curr) => {
8393
if (cellRef.current[curr]) {
@@ -89,14 +99,16 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
8999
}, {})
90100

91101
cellRef.current = updatedCellRef
92-
}, [rows.length])
102+
}, [JSON.stringify(rowIds)])
93103

94104
useEffect(() => {
95-
// Using the below logic to ensure the cell is focused after row addition.
96-
const cell = cellRef.current[rows[0].id][focusableFieldKey || headers[0].key].current
97-
if (isRowAdded && cell) {
98-
cell.focus()
99-
setIsRowAdded(false)
105+
if (isRowAdded) {
106+
// Using the below logic to ensure the cell is focused after row addition.
107+
const cell = cellRef.current[rows[0].id][focusableFieldKey || headers[0].key].current
108+
if (cell) {
109+
cell.focus()
110+
setIsRowAdded(false)
111+
}
100112
}
101113
}, [isRowAdded])
102114

@@ -164,8 +176,10 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
164176
isClearable
165177
{...props}
166178
variant={SelectPickerVariantType.BORDER_LESS}
167-
classNamePrefix="dynamic-data-table__cell__select-picker"
179+
classNamePrefix="dynamic-data-table__cell__select-picker-text-area"
168180
inputId={`data-table-${row.id}-${key}-cell`}
181+
minHeight={20}
182+
maxHeight={160}
169183
value={getSelectPickerOptionByValue(
170184
props?.options,
171185
value,
@@ -174,6 +188,8 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
174188
onChange={onChange(row, key)}
175189
isDisabled={isDisabled}
176190
formatCreateLabel={(input) => `Use ${input}`}
191+
refVar={cellRef?.current?.[row.id]?.[key]}
192+
dependentRefs={cellRef?.current?.[row.id]}
177193
fullWidth
178194
/>
179195
</div>
@@ -287,7 +303,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
287303
plugins={[followCursor]}
288304
>
289305
<div
290-
className={`dynamic-data-table__cell bcn-0 flexbox dc__align-items-center dc__gap-4 dc__position-rel ${isDisabled ? 'dc__disabled no-hover' : ''} ${!isDisabled && hasError ? 'dynamic-data-table__cell--error no-hover' : ''} ${!rowTypeHasInputField(row.data[key].type) ? 'no-hover no-focus' : ''}`}
306+
className={`dynamic-data-table__cell bcn-0 flexbox dc__align-items-center dc__gap-4 dc__position-rel ${isDisabled ? 'cursor-not-allowed no-hover' : ''} ${!isDisabled && hasError ? 'dynamic-data-table__cell--error no-hover' : ''} ${!rowTypeHasInputField(row.data[key].type) ? 'no-hover no-focus' : ''}`}
291307
>
292308
{renderCellIcon(row, key, true)}
293309
{renderCellContent(row, key)}

‎src/Shared/Components/DynamicDataTable/styles.scss

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,38 @@
8686
max-height: 160px !important;
8787
}
8888

89+
&__select-picker-text-area {
90+
&__control {
91+
padding: 0 !important;
92+
max-height: 160px !important;
93+
}
94+
95+
&__placeholder {
96+
align-self: start;
97+
padding: 8px 50px 8px 8px;
98+
}
99+
100+
&__indicators {
101+
position: absolute;
102+
top: 10px;
103+
right: 8px;
104+
}
105+
106+
&__input-container {
107+
display: flex !important;
108+
width: 100%;
109+
110+
&::after {
111+
content: none !important;
112+
}
113+
}
114+
115+
&__input {
116+
flex-grow: 1;
117+
padding: 8px 50px 8px 8px !important;
118+
}
119+
}
120+
89121
&:hover:not(:focus-within):not(.no-hover) {
90122
outline: 1px solid var(--N200);
91123
}

‎src/Shared/Components/DynamicDataTable/types.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,14 +63,25 @@ export type DynamicDataTableCellPropsMap = {
6363
| 'disableOnBlurResizeToMinHeight'
6464
| 'refVar'
6565
| 'dependentRef'
66+
| 'dependentRefs'
6667
>
6768
[DynamicDataTableRowDataType.DROPDOWN]: Omit<
6869
SelectPickerProps<string, false>,
6970
'inputId' | 'value' | 'onChange' | 'fullWidth' | 'isDisabled'
7071
>
7172
[DynamicDataTableRowDataType.SELECT_TEXT]: Omit<
7273
SelectPickerTextAreaProps,
73-
'inputId' | 'value' | 'onChange' | 'fullWidth' | 'isDisabled' | 'variant' | 'formatCreateLabel'
74+
| 'inputId'
75+
| 'value'
76+
| 'onChange'
77+
| 'fullWidth'
78+
| 'isDisabled'
79+
| 'variant'
80+
| 'formatCreateLabel'
81+
| 'minHeight'
82+
| 'maxHeight'
83+
| 'refVar'
84+
| 'dependentRefs'
7485
>
7586
[DynamicDataTableRowDataType.BUTTON]: Pick<
7687
DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ import {
4444
SelectPickerOption,
4545
SelectPickerValueContainer,
4646
SelectPickerInput,
47-
SelectPickerIndicatorsContainer,
4847
} from './common'
4948
import { SelectPickerOptionType, SelectPickerProps, SelectPickerVariantType } from './type'
5049
import { GenericSectionErrorState } from '../GenericSectionErrorState'
@@ -285,10 +284,9 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
285284
{...valueContainerProps}
286285
showSelectedOptionsCount={showSelectedOptionsCount}
287286
customSelectedOptionsCount={customSelectedOptionsCount}
288-
isFocussed={isFocussed}
289287
/>
290288
),
291-
[showSelectedOptionsCount, customSelectedOptionsCount, isFocussed],
289+
[showSelectedOptionsCount, customSelectedOptionsCount],
292290
)
293291

294292
const renderOption = useCallback(
@@ -441,7 +439,6 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
441439
Control: SelectPickerControl,
442440
Option: renderOption,
443441
MenuList: SelectPickerMenuList,
444-
IndicatorsContainer: SelectPickerIndicatorsContainer,
445442
ClearIndicator: SelectPickerClearIndicator,
446443
ValueContainer: renderValueContainer,
447444
MultiValueLabel: renderMultiValueLabel,
@@ -467,10 +464,11 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
467464
onKeyDown={handleKeyDown}
468465
shouldRenderTextArea={shouldRenderTextArea}
469466
customDisplayText={customDisplayText}
470-
onFocus={handleFocus}
467+
{...(!shouldRenderTextArea ? { onFocus: handleFocus } : {})}
471468
onBlur={handleBlur}
472469
onChange={handleChange}
473470
controlShouldRenderValue={controlShouldRenderValue}
471+
isFocussed={isFocussed}
474472
/>
475473
</div>
476474
</ConditionalWrap>

0 commit comments

Comments
 (0)