@devtron-labs/devtron-fe-common-lib 0.0.61-beta-2 → 0.0.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Common/Api.d.ts +0 -9
- package/dist/Common/Constants.d.ts +0 -1
- package/dist/Common/Types.d.ts +2 -3
- package/dist/index.d.ts +1 -3
- package/dist/index.js +149 -1440
- package/package.json +1 -1
- package/src/Common/Api.ts +0 -21
- package/src/Common/BreadCrumb/Types.ts +1 -0
- package/src/Common/Checkbox.tsx +0 -1
- package/src/Common/Constants.ts +1 -2
- package/src/Common/CustomInput/CustomInput.tsx +1 -2
- package/src/Common/DraggableWrapper/DraggableWrapper.tsx +1 -3
- package/src/Common/RJSF/utils.ts +0 -2
- package/src/Common/SearchBar/SearchBar.component.tsx +0 -1
- package/src/Common/SearchBar/searchBar.scss +1 -1
- package/src/Common/Types.ts +1 -3
- package/src/index.ts +1 -3
- package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraConfigForm.d.ts +0 -4
- package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraDescriptionField.d.ts +0 -4
- package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormAction.d.ts +0 -7
- package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormItem.d.ts +0 -4
- package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraProfileNameField.d.ts +0 -4
- package/dist/Pages/GlobalConfigurations/BuildInfra/Descriptor.d.ts +0 -4
- package/dist/Pages/GlobalConfigurations/BuildInfra/Footer.d.ts +0 -4
- package/dist/Pages/GlobalConfigurations/BuildInfra/constants.d.ts +0 -50
- package/dist/Pages/GlobalConfigurations/BuildInfra/index.d.ts +0 -7
- package/dist/Pages/GlobalConfigurations/BuildInfra/services.d.ts +0 -6
- package/dist/Pages/GlobalConfigurations/BuildInfra/types.d.ts +0 -286
- package/dist/Pages/GlobalConfigurations/BuildInfra/utils.d.ts +0 -12
- package/dist/Pages/GlobalConfigurations/index.d.ts +0 -1
- package/dist/Pages/index.d.ts +0 -1
- package/dist/Shared/Components/APIResponseHandler/APIResponseHandler.d.ts +0 -4
- package/dist/Shared/Components/APIResponseHandler/constants.d.ts +0 -4
- package/dist/Shared/Components/APIResponseHandler/index.d.ts +0 -2
- package/dist/Shared/Components/APIResponseHandler/types.d.ts +0 -37
- package/dist/Shared/Components/BulkSelection/BulkSelection.d.ts +0 -4
- package/dist/Shared/Components/BulkSelection/BulkSelectionDropdownItems.d.ts +0 -4
- package/dist/Shared/Components/BulkSelection/BulkSelectionProvider.d.ts +0 -4
- package/dist/Shared/Components/BulkSelection/constants.d.ts +0 -9
- package/dist/Shared/Components/BulkSelection/index.d.ts +0 -4
- package/dist/Shared/Components/BulkSelection/types.d.ts +0 -54
- package/dist/Shared/Components/ReactSelect/index.d.ts +0 -1
- package/dist/Shared/Components/ReactSelect/utils.d.ts +0 -12
- package/dist/Shared/Components/index.d.ts +0 -3
- package/dist/Shared/Helpers.d.ts +0 -16
- package/dist/Shared/index.d.ts +0 -3
- package/dist/Shared/validations.d.ts +0 -8
- package/src/Assets/Icon/ic-check-all.svg +0 -5
- package/src/Assets/Icon/ic-check-square.svg +0 -4
- package/src/Assets/Icon/ic-close.svg +0 -9
- package/src/Assets/Icon/ic-cpu.svg +0 -4
- package/src/Assets/Icon/ic-memory.svg +0 -3
- package/src/Assets/Icon/ic-timer.svg +0 -3
- package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraConfigForm.tsx +0 -128
- package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraDescriptionField.tsx +0 -44
- package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormAction.tsx +0 -106
- package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormItem.tsx +0 -55
- package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraProfileNameField.tsx +0 -32
- package/src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx +0 -45
- package/src/Pages/GlobalConfigurations/BuildInfra/Footer.tsx +0 -56
- package/src/Pages/GlobalConfigurations/BuildInfra/Readme.md +0 -4
- package/src/Pages/GlobalConfigurations/BuildInfra/constants.tsx +0 -139
- package/src/Pages/GlobalConfigurations/BuildInfra/index.ts +0 -7
- package/src/Pages/GlobalConfigurations/BuildInfra/services.tsx +0 -167
- package/src/Pages/GlobalConfigurations/BuildInfra/types.tsx +0 -339
- package/src/Pages/GlobalConfigurations/BuildInfra/utils.tsx +0 -509
- package/src/Pages/GlobalConfigurations/index.ts +0 -1
- package/src/Pages/index.ts +0 -1
- package/src/Shared/Components/APIResponseHandler/APIResponseHandler.tsx +0 -41
- package/src/Shared/Components/APIResponseHandler/constants.tsx +0 -5
- package/src/Shared/Components/APIResponseHandler/index.ts +0 -2
- package/src/Shared/Components/APIResponseHandler/types.tsx +0 -39
- package/src/Shared/Components/BulkSelection/BulkSelection.tsx +0 -77
- package/src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx +0 -31
- package/src/Shared/Components/BulkSelection/BulkSelectionProvider.tsx +0 -160
- package/src/Shared/Components/BulkSelection/constants.tsx +0 -13
- package/src/Shared/Components/BulkSelection/index.ts +0 -4
- package/src/Shared/Components/BulkSelection/types.tsx +0 -65
- package/src/Shared/Components/ReactSelect/index.ts +0 -1
- package/src/Shared/Components/ReactSelect/utils.tsx +0 -97
- package/src/Shared/Components/index.ts +0 -3
- package/src/Shared/Helpers.tsx +0 -29
- package/src/Shared/index.ts +0 -3
- package/src/Shared/validations.tsx +0 -130
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export declare const BULK_DROPDOWN_TEST_ID: "bulk-selection-pop-up-menu";
|
|
2
|
-
export declare const BulkSelectionOptionsLabels: {
|
|
3
|
-
readonly SELECT_ALL_ON_PAGE: "All on this page";
|
|
4
|
-
readonly SELECT_ALL_ACROSS_PAGES: "All across pages";
|
|
5
|
-
readonly CLEAR_ALL_SELECTIONS: "Clear selection";
|
|
6
|
-
};
|
|
7
|
-
export declare const SELECT_ALL_ACROSS_PAGES_LOCATOR: "*";
|
|
8
|
-
export declare const getInvalidActionMessage: (action: string) => string;
|
|
9
|
-
export declare const BULK_SELECTION_CONTEXT_ERROR = "useBulkSelection must be used within BulkSelectionContext";
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { CHECKBOX_VALUE } from '../../../Common';
|
|
3
|
-
export declare enum BulkSelectionEvents {
|
|
4
|
-
CLEAR_ALL_SELECTIONS = "CLEAR_ALL_SELECTIONS",
|
|
5
|
-
CLEAR_IDENTIFIERS = "CLEAR_IDENTIFIERS",
|
|
6
|
-
SELECT_ALL_ACROSS_PAGES = "SELECT_ALL_ACROSS_PAGES",
|
|
7
|
-
SELECT_ALL_ON_PAGE = "SELECT_ALL_ON_PAGE",
|
|
8
|
-
SELECT_IDENTIFIER = "SELECT_IDENTIFIER",
|
|
9
|
-
CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION = "CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION",
|
|
10
|
-
CLEAR_SELECTIONS_AND_SELECT_ALL_ACROSS_PAGES = "CLEAR_SELECTIONS_AND_SELECT_ALL_ACROSS_PAGES"
|
|
11
|
-
}
|
|
12
|
-
export interface HandleBulkSelectionType<T> {
|
|
13
|
-
action: BulkSelectionEvents;
|
|
14
|
-
data?: {
|
|
15
|
-
identifierIds?: (number | string)[];
|
|
16
|
-
identifierObject?: T;
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
export interface GetBulkSelectionCheckboxValuesType {
|
|
20
|
-
isChecked: boolean;
|
|
21
|
-
checkboxValue: CHECKBOX_VALUE;
|
|
22
|
-
}
|
|
23
|
-
export interface UseBulkSelectionReturnType<T> extends GetBulkSelectionCheckboxValuesType {
|
|
24
|
-
selectedIdentifiers: T;
|
|
25
|
-
handleBulkSelection: ({ action, data }: HandleBulkSelectionType<T>) => void;
|
|
26
|
-
}
|
|
27
|
-
export interface BulkSelectionProps {
|
|
28
|
-
showPagination: boolean;
|
|
29
|
-
}
|
|
30
|
-
export interface BulkSelectionDropdownItemsType {
|
|
31
|
-
locator: BulkSelectionEvents;
|
|
32
|
-
label: string;
|
|
33
|
-
isSelected: boolean;
|
|
34
|
-
icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
|
|
35
|
-
}
|
|
36
|
-
export interface BulkSelectionDropdownItemsProps<T> extends BulkSelectionDropdownItemsType, Pick<UseBulkSelectionReturnType<T>, 'handleBulkSelection'> {
|
|
37
|
-
}
|
|
38
|
-
export declare enum SelectAllDialogStatus {
|
|
39
|
-
OPEN = "OPEN",
|
|
40
|
-
CLOSED = "CLOSED"
|
|
41
|
-
}
|
|
42
|
-
export type BulkSelectionIdentifiersType<T> = Record<string | number, T>;
|
|
43
|
-
export interface UseBulkSelectionProps<T> {
|
|
44
|
-
/**
|
|
45
|
-
* Response from API, assuming structure to be array of objects with key and values
|
|
46
|
-
* This will the given ids on current page
|
|
47
|
-
*/
|
|
48
|
-
identifiers: T;
|
|
49
|
-
/**
|
|
50
|
-
* Act as buffer between select all across pages and select all on page state
|
|
51
|
-
*/
|
|
52
|
-
getSelectAllDialogStatus: () => SelectAllDialogStatus;
|
|
53
|
-
children?: React.ReactNode;
|
|
54
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './utils';
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const getCommonSelectStyle: (styleOverrides?: {}) => {
|
|
3
|
-
menuList: (base: any) => any;
|
|
4
|
-
control: (base: any, state: any) => any;
|
|
5
|
-
option: (base: any, state: any) => any;
|
|
6
|
-
dropdownIndicator: (base: any, state: any) => any;
|
|
7
|
-
valueContainer: (base: any) => any;
|
|
8
|
-
loadingMessage: (base: any) => any;
|
|
9
|
-
noOptionsMessage: (base: any) => any;
|
|
10
|
-
};
|
|
11
|
-
export declare const getCustomOptionSelectionStyle: (styleOverrides?: {}) => (base: any, state: any) => any;
|
|
12
|
-
export declare const SelectOption: (props: any) => JSX.Element;
|
package/dist/Shared/Helpers.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
interface HighlightSearchTextProps {
|
|
2
|
-
/**
|
|
3
|
-
* The text to be highlighted
|
|
4
|
-
*/
|
|
5
|
-
searchText: string;
|
|
6
|
-
/**
|
|
7
|
-
* The whole text string
|
|
8
|
-
*/
|
|
9
|
-
text: string;
|
|
10
|
-
/**
|
|
11
|
-
* The classes to be applied to the highlighted text
|
|
12
|
-
*/
|
|
13
|
-
highlightClasses?: string;
|
|
14
|
-
}
|
|
15
|
-
export declare const highlightSearchText: ({ searchText, text, highlightClasses }: HighlightSearchTextProps) => string;
|
|
16
|
-
export {};
|
package/dist/Shared/index.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export interface ValidationResponseType {
|
|
2
|
-
isValid: boolean;
|
|
3
|
-
message?: string;
|
|
4
|
-
}
|
|
5
|
-
export declare const validateName: (name: string) => ValidationResponseType;
|
|
6
|
-
export declare const validateDescription: (description: string) => ValidationResponseType;
|
|
7
|
-
export declare const validateRequiredPositiveNumber: (value: string | number) => ValidationResponseType;
|
|
8
|
-
export declare const validateRequiredPositiveInteger: (value: string | number) => ValidationResponseType;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<rect x="2" y="2" width="11.2" height="11.2" rx="2" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
-
<path d="M15.4667 5.86621V11.4662C15.4667 13.6754 13.6758 15.4662 11.4667 15.4662H5.8667" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
-
<path d="M10.35 5.84961L6.85004 9.34945L5.10004 7.59961" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
-
</svg>
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<rect x="2" y="2" width="12" height="12" rx="2" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
-
<path d="M11.2083 5.95801L7.12498 10.0412L5.08331 7.99967" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
-
</svg>
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
|
|
2
|
-
<defs>
|
|
3
|
-
<path id="a" class="stroke-color" d="M18.295 5.705a.997.997 0 0 0-1.41 0L12 10.59 7.115 5.705a.997.997 0 1 0-1.41 1.41L10.59 12l-4.885 4.885a.997.997 0 1 0 1.41 1.41L12 13.41l4.885 4.885a.997.997 0 0 0 1.41-1.41L13.41 12l4.885-4.885a.997.997 0 0 0 0-1.41z"/>
|
|
4
|
-
</defs>
|
|
5
|
-
<g fill="none" fill-rule="evenodd">
|
|
6
|
-
<path d=""/>
|
|
7
|
-
<use fill="#999" xlink:href="#a"/>
|
|
8
|
-
</g>
|
|
9
|
-
</svg>
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
2
|
-
<path d="M12.5 5.625H7.5M12.5 8.125H7.5M15.625 3.125V16.875C15.625 17.2202 15.3452 17.5 15 17.5H5C4.65482 17.5 4.375 17.2202 4.375 16.875V3.125C4.375 2.77982 4.65482 2.5 5 2.5H15C15.3452 2.5 15.625 2.77982 15.625 3.125Z" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
-
<path d="M10 15C10.5178 15 10.9375 14.5803 10.9375 14.0625C10.9375 13.5447 10.5178 13.125 10 13.125C9.48223 13.125 9.0625 13.5447 9.0625 14.0625C9.0625 14.5803 9.48223 15 10 15Z" fill="#596168"/>
|
|
4
|
-
</svg>
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
2
|
-
<path d="M16.25 8.125H18.125M16.25 11.875H18.125M1.875 8.125H3.75M1.875 11.875H3.75M11.875 16.25V18.125M8.125 16.25V18.125M11.875 1.875V3.75M8.125 1.875V3.75M7.8125 7.8125H12.1875V12.1875H7.8125V7.8125ZM4.375 3.75H15.625C15.9702 3.75 16.25 4.02982 16.25 4.375V15.625C16.25 15.9702 15.9702 16.25 15.625 16.25H4.375C4.02982 16.25 3.75 15.9702 3.75 15.625V4.375C3.75 4.02982 4.02982 3.75 4.375 3.75Z" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
-
</svg>
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
2
|
-
<path d="M10 11.0415L13.0936 7.94791M8.125 1.6665H11.875M16.875 11.0415C16.875 14.8385 13.797 17.9165 10 17.9165C6.20304 17.9165 3.125 14.8385 3.125 11.0415C3.125 7.24455 6.20304 4.1665 10 4.1665C13.797 4.1665 16.875 7.24455 16.875 11.0415Z" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
-
</svg>
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import { FunctionComponent } from 'react'
|
|
2
|
-
import { Progressing } from '../../../Common'
|
|
3
|
-
import BuildInfraFormAction from './BuildInfraFormAction'
|
|
4
|
-
import BuildInfraFormItem from './BuildInfraFormItem'
|
|
5
|
-
import BuildInfraProfileDescriptionField from './BuildInfraDescriptionField'
|
|
6
|
-
import BuildInfraProfileNameField from './BuildInfraProfileNameField'
|
|
7
|
-
import { BUILD_INFRA_FORM_FIELDS, BUILD_INFRA_TEXT } from './constants'
|
|
8
|
-
import { BuildInfraActionType, BuildInfraConfigFormProps, InheritingHeaderProps } from './types'
|
|
9
|
-
|
|
10
|
-
const InheritingHeader = ({
|
|
11
|
-
defaultHeading,
|
|
12
|
-
inheritingData,
|
|
13
|
-
isInheriting,
|
|
14
|
-
isDefaultProfile,
|
|
15
|
-
}: InheritingHeaderProps) => {
|
|
16
|
-
const inheritingDataString = inheritingData.map((data) => `${data.value} ${data.unit ?? ''}`).join(' - ')
|
|
17
|
-
|
|
18
|
-
if (isDefaultProfile || !isInheriting) {
|
|
19
|
-
// For typing issues
|
|
20
|
-
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
21
|
-
return <>{defaultHeading}</>
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
return (
|
|
25
|
-
<div className="flexbox dc__align-items-center dc__content-space w-100">
|
|
26
|
-
{defaultHeading}
|
|
27
|
-
|
|
28
|
-
<div className="flexbox dc__content-space w-100">
|
|
29
|
-
<span className="m-0 pt-0 pb-0 pl-4 pr-4 fs-13 lh-20 fw-4 cn-9 dc__ellipsis-right dc__word-break-all flex-grow-1">
|
|
30
|
-
{inheritingDataString}
|
|
31
|
-
</span>
|
|
32
|
-
|
|
33
|
-
{/* TODO: Add ellipsis */}
|
|
34
|
-
<p className="m-0 cn-7 fs-13 fw-4 lh-20 dc__no-shrink">
|
|
35
|
-
{BUILD_INFRA_TEXT.INHERITING_HEADING_DESCRIPTION}
|
|
36
|
-
</p>
|
|
37
|
-
</div>
|
|
38
|
-
</div>
|
|
39
|
-
)
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
const BuildInfraConfigForm: FunctionComponent<BuildInfraConfigFormProps> = ({
|
|
43
|
-
profileInput,
|
|
44
|
-
profileInputErrors,
|
|
45
|
-
handleProfileInputChange,
|
|
46
|
-
isDefaultProfile,
|
|
47
|
-
unitsMap,
|
|
48
|
-
configurationContainerLabel,
|
|
49
|
-
}) => {
|
|
50
|
-
const currentConfigurations = profileInput?.configurations
|
|
51
|
-
|
|
52
|
-
// will get the desired configuration from the currentConfigurations and then check if it is active or not
|
|
53
|
-
const isInheritingProfileValues = (actions: BuildInfraActionType[]) =>
|
|
54
|
-
actions.some((action) => !currentConfigurations[action.actionType].active)
|
|
55
|
-
|
|
56
|
-
// Had to show loader for an instance due to batching of state updates not working as expected :/
|
|
57
|
-
if (!currentConfigurations) {
|
|
58
|
-
return <Progressing pageLoader />
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
return (
|
|
62
|
-
<div className="flexbox-col dc__mxw-920 dc__gap-16">
|
|
63
|
-
{!isDefaultProfile && (
|
|
64
|
-
<div className="flexbox-col dc__gap-12">
|
|
65
|
-
<BuildInfraProfileNameField
|
|
66
|
-
handleProfileInputChange={handleProfileInputChange}
|
|
67
|
-
currentValue={profileInput.name}
|
|
68
|
-
error={profileInputErrors.name}
|
|
69
|
-
/>
|
|
70
|
-
|
|
71
|
-
<BuildInfraProfileDescriptionField
|
|
72
|
-
handleProfileInputChange={handleProfileInputChange}
|
|
73
|
-
currentValue={profileInput.description}
|
|
74
|
-
error={profileInputErrors.description}
|
|
75
|
-
/>
|
|
76
|
-
</div>
|
|
77
|
-
)}
|
|
78
|
-
|
|
79
|
-
<div className="flexbox-col dc__gap-12">
|
|
80
|
-
{configurationContainerLabel}
|
|
81
|
-
|
|
82
|
-
<div className="w-100 flexbox-col dc__gap-16 br-4 dc__border-n1 p-16">
|
|
83
|
-
{BUILD_INFRA_FORM_FIELDS.map((field, index) => (
|
|
84
|
-
<BuildInfraFormItem
|
|
85
|
-
key={field.locator}
|
|
86
|
-
marker={field.marker}
|
|
87
|
-
heading={
|
|
88
|
-
<InheritingHeader
|
|
89
|
-
defaultHeading={field.heading}
|
|
90
|
-
inheritingData={field.actions.map(
|
|
91
|
-
(action) => currentConfigurations[action.actionType],
|
|
92
|
-
)}
|
|
93
|
-
isInheriting={isInheritingProfileValues(field.actions)}
|
|
94
|
-
isDefaultProfile={isDefaultProfile}
|
|
95
|
-
/>
|
|
96
|
-
}
|
|
97
|
-
showDivider={index !== BUILD_INFRA_FORM_FIELDS.length - 1}
|
|
98
|
-
isInheriting={isInheritingProfileValues(field.actions)}
|
|
99
|
-
handleProfileInputChange={handleProfileInputChange}
|
|
100
|
-
locator={field.locator}
|
|
101
|
-
isDefaultProfile={isDefaultProfile}
|
|
102
|
-
>
|
|
103
|
-
<div className="w-50 flexbox dc__gap-12 w-100 dc__align-start">
|
|
104
|
-
{field.actions.map((action) => (
|
|
105
|
-
<BuildInfraFormAction
|
|
106
|
-
key={action.actionType}
|
|
107
|
-
actionType={action.actionType}
|
|
108
|
-
label={action.label}
|
|
109
|
-
placeholder={action.placeholder}
|
|
110
|
-
error={profileInputErrors[action.actionType]}
|
|
111
|
-
// Assumption is for default profiles all input fields are required
|
|
112
|
-
isRequired
|
|
113
|
-
profileUnitsMap={unitsMap[action.actionType]}
|
|
114
|
-
handleProfileInputChange={handleProfileInputChange}
|
|
115
|
-
currentUnitName={currentConfigurations[action.actionType].unit}
|
|
116
|
-
currentValue={currentConfigurations[action.actionType].value}
|
|
117
|
-
/>
|
|
118
|
-
))}
|
|
119
|
-
</div>
|
|
120
|
-
</BuildInfraFormItem>
|
|
121
|
-
))}
|
|
122
|
-
</div>
|
|
123
|
-
</div>
|
|
124
|
-
</div>
|
|
125
|
-
)
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
export default BuildInfraConfigForm
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { FormEvent, FunctionComponent } from 'react'
|
|
2
|
-
import { ReactComponent as ErrorIcon } from '../../../Assets/Icon/ic-warning.svg'
|
|
3
|
-
import { BuildInfraInputFieldComponentProps, BuildInfraMetaConfigTypes } from './types'
|
|
4
|
-
import { BUILD_INFRA_TEXT } from './constants'
|
|
5
|
-
|
|
6
|
-
const BuildInfraProfileDescriptionField: FunctionComponent<BuildInfraInputFieldComponentProps> = ({
|
|
7
|
-
handleProfileInputChange,
|
|
8
|
-
currentValue,
|
|
9
|
-
error,
|
|
10
|
-
}) => {
|
|
11
|
-
const handleChange = (e: FormEvent<HTMLTextAreaElement>) => {
|
|
12
|
-
handleProfileInputChange({
|
|
13
|
-
action: BuildInfraMetaConfigTypes.DESCRIPTION,
|
|
14
|
-
data: { value: e.currentTarget.value },
|
|
15
|
-
})
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
return (
|
|
19
|
-
<div className="flexbox-col dc__gap-4 w-100 dc__align-start">
|
|
20
|
-
<label htmlFor="build-infra-profile-description" className="m-0 fs-13 fw-4 lh-20 cn-7">
|
|
21
|
-
{BUILD_INFRA_TEXT.DESCRIPTION_LABEL}
|
|
22
|
-
</label>
|
|
23
|
-
|
|
24
|
-
<textarea
|
|
25
|
-
data-testid="build-infra-profile-description"
|
|
26
|
-
name="profile-description"
|
|
27
|
-
className="form__textarea mxh-140 dc__hover-border-n300"
|
|
28
|
-
id="build-infra-profile-description"
|
|
29
|
-
placeholder={BUILD_INFRA_TEXT.DESCRIPTION_PLACEHOLDER}
|
|
30
|
-
value={currentValue}
|
|
31
|
-
onChange={handleChange}
|
|
32
|
-
/>
|
|
33
|
-
|
|
34
|
-
{error && (
|
|
35
|
-
<div className="form__error">
|
|
36
|
-
<ErrorIcon className="form__icon form__icon--error" />
|
|
37
|
-
{error}
|
|
38
|
-
</div>
|
|
39
|
-
)}
|
|
40
|
-
</div>
|
|
41
|
-
)
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
export default BuildInfraProfileDescriptionField
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import { FormEvent, FunctionComponent, useMemo } from 'react'
|
|
2
|
-
import ReactSelect from 'react-select'
|
|
3
|
-
import { BuildInfraFormActionProps } from './types'
|
|
4
|
-
import { OptionType } from '../../../Common'
|
|
5
|
-
import { unitSelectorStyles } from './utils'
|
|
6
|
-
import { BUILD_INFRA_INPUT_CONSTRAINTS } from './constants'
|
|
7
|
-
import { ReactComponent as ErrorIcon } from '../../../Assets/Icon/ic-warning.svg'
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* In case need arise for variants break this CustomInput and Select as a separate component
|
|
11
|
-
*/
|
|
12
|
-
const BuildInfraFormAction: FunctionComponent<BuildInfraFormActionProps> = ({
|
|
13
|
-
actionType,
|
|
14
|
-
label,
|
|
15
|
-
placeholder,
|
|
16
|
-
error,
|
|
17
|
-
isRequired,
|
|
18
|
-
profileUnitsMap,
|
|
19
|
-
handleProfileInputChange,
|
|
20
|
-
currentUnitName,
|
|
21
|
-
currentValue,
|
|
22
|
-
}) => {
|
|
23
|
-
const handleUnitChange = (selectedUnit: OptionType) => {
|
|
24
|
-
const data = {
|
|
25
|
-
unit: selectedUnit.label,
|
|
26
|
-
value: currentValue,
|
|
27
|
-
}
|
|
28
|
-
handleProfileInputChange({ action: actionType, data })
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
const handleInputChange = (e: FormEvent<HTMLInputElement>) => {
|
|
32
|
-
const data = {
|
|
33
|
-
unit: currentUnitName,
|
|
34
|
-
value: e.currentTarget.value,
|
|
35
|
-
}
|
|
36
|
-
handleProfileInputChange({ action: actionType, data })
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
const unitOptions = useMemo(() => {
|
|
40
|
-
const units =
|
|
41
|
-
Object.values(profileUnitsMap)?.map((unit) => ({
|
|
42
|
-
label: unit.name,
|
|
43
|
-
value: String(unit.conversionFactor),
|
|
44
|
-
})) ?? []
|
|
45
|
-
return units.sort((a, b) => Number(a.value) - Number(b.value))
|
|
46
|
-
}, [profileUnitsMap])
|
|
47
|
-
|
|
48
|
-
const currentUnit = useMemo(
|
|
49
|
-
() => unitOptions.find((unit) => unit.label === currentUnitName),
|
|
50
|
-
[unitOptions, currentUnitName],
|
|
51
|
-
)
|
|
52
|
-
|
|
53
|
-
return (
|
|
54
|
-
<div className="flexbox-col dc__gap-4 dc__mxw-420 w-100 dc__align-start">
|
|
55
|
-
<label
|
|
56
|
-
htmlFor={`${actionType}-input`}
|
|
57
|
-
className={`fs-13 fw-4 lh-20 cn-7 ${isRequired ? 'dc__required-field' : ''}`}
|
|
58
|
-
>
|
|
59
|
-
{label}
|
|
60
|
-
</label>
|
|
61
|
-
<div className="w-100 flexbox dc__align-items-center">
|
|
62
|
-
<div className="flex-grow-1">
|
|
63
|
-
<input
|
|
64
|
-
data-testid={`${actionType}-input-field`}
|
|
65
|
-
name={actionType}
|
|
66
|
-
type="number"
|
|
67
|
-
step={BUILD_INFRA_INPUT_CONSTRAINTS.STEP}
|
|
68
|
-
min={BUILD_INFRA_INPUT_CONSTRAINTS.MIN}
|
|
69
|
-
className="form__input dc__no-right-border dc__no-right-radius"
|
|
70
|
-
placeholder={placeholder}
|
|
71
|
-
value={currentValue}
|
|
72
|
-
onChange={handleInputChange}
|
|
73
|
-
required={isRequired}
|
|
74
|
-
autoComplete="off"
|
|
75
|
-
id={`${actionType}-input`}
|
|
76
|
-
/>
|
|
77
|
-
</div>
|
|
78
|
-
|
|
79
|
-
{profileUnitsMap && (
|
|
80
|
-
<ReactSelect
|
|
81
|
-
name={`${actionType}-unit`}
|
|
82
|
-
className="bcn-0 dc__mxw-120"
|
|
83
|
-
options={unitOptions}
|
|
84
|
-
value={currentUnit}
|
|
85
|
-
onChange={handleUnitChange}
|
|
86
|
-
isSearchable={false}
|
|
87
|
-
components={{
|
|
88
|
-
IndicatorSeparator: null,
|
|
89
|
-
ClearIndicator: null,
|
|
90
|
-
}}
|
|
91
|
-
styles={unitSelectorStyles()}
|
|
92
|
-
/>
|
|
93
|
-
)}
|
|
94
|
-
</div>
|
|
95
|
-
|
|
96
|
-
{error && (
|
|
97
|
-
<div className="form__error">
|
|
98
|
-
<ErrorIcon className="form__icon form__icon--error" />
|
|
99
|
-
{error}
|
|
100
|
-
</div>
|
|
101
|
-
)}
|
|
102
|
-
</div>
|
|
103
|
-
)
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
export default BuildInfraFormAction
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { FormEvent, FunctionComponent } from 'react'
|
|
2
|
-
import { BuildInfraFormItemProps, BuildInfraInheritActions } from './types'
|
|
3
|
-
import { CHECKBOX_VALUE, Checkbox } from '../../../Common'
|
|
4
|
-
|
|
5
|
-
const BuildInfraFormItem: FunctionComponent<BuildInfraFormItemProps> = ({
|
|
6
|
-
heading,
|
|
7
|
-
marker: Marker,
|
|
8
|
-
children,
|
|
9
|
-
isInheriting,
|
|
10
|
-
showDivider,
|
|
11
|
-
handleProfileInputChange,
|
|
12
|
-
locator,
|
|
13
|
-
isDefaultProfile,
|
|
14
|
-
}) => {
|
|
15
|
-
const handleActivationChange = (e: FormEvent<HTMLInputElement>) => {
|
|
16
|
-
const { checked } = e.currentTarget
|
|
17
|
-
const action = (checked ? `activate_${locator}` : `de_activate_${locator}`) as BuildInfraInheritActions
|
|
18
|
-
handleProfileInputChange({ action })
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const renderMarker = () => {
|
|
22
|
-
if (isDefaultProfile) {
|
|
23
|
-
return <Marker className="icon-dim-20 dc__no-shrink" />
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<Checkbox
|
|
28
|
-
onChange={handleActivationChange}
|
|
29
|
-
isChecked={!isInheriting}
|
|
30
|
-
value={CHECKBOX_VALUE.CHECKED}
|
|
31
|
-
dataTestId={`${locator}_marker`}
|
|
32
|
-
/>
|
|
33
|
-
)
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
// If in configuration active is false, means it is inheriting values from other profile
|
|
37
|
-
return (
|
|
38
|
-
<>
|
|
39
|
-
<div className="flexbox-col dc__gap-8 w-100">
|
|
40
|
-
<div className="flexbox dc__gap-12 dc__align-start w-100">
|
|
41
|
-
{renderMarker()}
|
|
42
|
-
|
|
43
|
-
<div className="flexbox-col dc__gap-8 w-100">
|
|
44
|
-
{heading}
|
|
45
|
-
{!isInheriting && children}
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
</div>
|
|
49
|
-
|
|
50
|
-
{showDivider && <div className="w-100 dc__border-bottom-n1" />}
|
|
51
|
-
</>
|
|
52
|
-
)
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
export default BuildInfraFormItem
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { FormEvent, FunctionComponent } from 'react'
|
|
2
|
-
import { BuildInfraMetaConfigTypes, BuildInfraInputFieldComponentProps } from './types'
|
|
3
|
-
import { CustomInput } from '../../../Common'
|
|
4
|
-
import { BUILD_INFRA_TEXT } from './constants'
|
|
5
|
-
|
|
6
|
-
const BuildInfraProfileNameField: FunctionComponent<BuildInfraInputFieldComponentProps> = ({
|
|
7
|
-
handleProfileInputChange,
|
|
8
|
-
currentValue,
|
|
9
|
-
error,
|
|
10
|
-
}) => {
|
|
11
|
-
const handleChange = (e: FormEvent<HTMLInputElement>) => {
|
|
12
|
-
handleProfileInputChange({ action: BuildInfraMetaConfigTypes.NAME, data: { value: e.currentTarget.value } })
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
return (
|
|
16
|
-
<div className="flexbox-col dc__gap-4 w-100 dc__align-start">
|
|
17
|
-
<CustomInput
|
|
18
|
-
name="profile-name"
|
|
19
|
-
label={BUILD_INFRA_TEXT.PROFILE_LABEL}
|
|
20
|
-
labelClassName="m-0 dc__required-field fs-13 fw-4 lh-20 cn-7"
|
|
21
|
-
placeholder={BUILD_INFRA_TEXT.PROFILE_PLACEHOLDER}
|
|
22
|
-
value={currentValue}
|
|
23
|
-
onChange={handleChange}
|
|
24
|
-
error={error}
|
|
25
|
-
required
|
|
26
|
-
inputWrapClassName="w-100"
|
|
27
|
-
/>
|
|
28
|
-
</div>
|
|
29
|
-
)
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export default BuildInfraProfileNameField
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { DescriptorProps } from './types'
|
|
2
|
-
import { BreadCrumb, TippyCustomized, TippyTheme } from '../../../Common'
|
|
3
|
-
import { ReactComponent as QuestionFilled } from '../../../Assets/Icon/ic-help.svg'
|
|
4
|
-
import { ReactComponent as ICHelpOutline } from '../../../Assets/Icon/ic-help-outline.svg'
|
|
5
|
-
import { BUILD_INFRA_TEXT } from './constants'
|
|
6
|
-
|
|
7
|
-
const Descriptor = ({
|
|
8
|
-
additionalContainerClasses,
|
|
9
|
-
breadCrumbs,
|
|
10
|
-
children,
|
|
11
|
-
tippyInfoText,
|
|
12
|
-
tippyAdditionalContent,
|
|
13
|
-
}: DescriptorProps) => (
|
|
14
|
-
<div className={`flexbox dc__content-space dc__align-items-center w-100 ${additionalContainerClasses ?? ''}`}>
|
|
15
|
-
<div className="flexbox dc__align-items-center dc__gap-4">
|
|
16
|
-
<BreadCrumb breadcrumbs={breadCrumbs} />
|
|
17
|
-
|
|
18
|
-
<TippyCustomized
|
|
19
|
-
theme={TippyTheme.white}
|
|
20
|
-
className="w-300 h-100 dc__align-left"
|
|
21
|
-
placement="right"
|
|
22
|
-
Icon={QuestionFilled}
|
|
23
|
-
iconClass="fcv-5"
|
|
24
|
-
infoText={tippyInfoText ?? BUILD_INFRA_TEXT.EDIT_DEFAULT_TOOLTIP}
|
|
25
|
-
additionalContent={tippyAdditionalContent}
|
|
26
|
-
heading={BUILD_INFRA_TEXT.HEADING}
|
|
27
|
-
showCloseButton
|
|
28
|
-
trigger="click"
|
|
29
|
-
interactive
|
|
30
|
-
>
|
|
31
|
-
<button
|
|
32
|
-
className="p-0 h-20 dc__no-background dc__no-border dc__tab-focus"
|
|
33
|
-
type="button"
|
|
34
|
-
aria-label="build-infra-info"
|
|
35
|
-
>
|
|
36
|
-
<ICHelpOutline className="icon-dim-20" />
|
|
37
|
-
</button>
|
|
38
|
-
</TippyCustomized>
|
|
39
|
-
</div>
|
|
40
|
-
|
|
41
|
-
{children}
|
|
42
|
-
</div>
|
|
43
|
-
)
|
|
44
|
-
|
|
45
|
-
export default Descriptor
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { FunctionComponent, ReactElement } from 'react'
|
|
2
|
-
import Tippy from '@tippyjs/react'
|
|
3
|
-
import { BUILD_INFRA_TEST_IDS, BUILD_INFRA_TEXT } from './constants'
|
|
4
|
-
import { FooterProps } from './types'
|
|
5
|
-
import { ConditionalWrap, Progressing } from '../../../Common'
|
|
6
|
-
|
|
7
|
-
const Footer: FunctionComponent<FooterProps> = ({ disabled, handleCancel, editProfile, loading }) => {
|
|
8
|
-
const disableMessage = disabled
|
|
9
|
-
? BUILD_INFRA_TEXT.SUBMIT_BUTTON_TIPPY.INVALID_INPUT
|
|
10
|
-
: BUILD_INFRA_TEXT.SUBMIT_BUTTON_TIPPY.REQUEST_IN_PROGRESS
|
|
11
|
-
|
|
12
|
-
const getButtonText = () => {
|
|
13
|
-
if (editProfile) {
|
|
14
|
-
return BUILD_INFRA_TEXT.EDIT_SUBMIT
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
return BUILD_INFRA_TEXT.SAVE_SUBMIT
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
const renderTippy = (children: ReactElement) => (
|
|
21
|
-
<Tippy content={disableMessage} placement="top" className="default-tt" arrow={false}>
|
|
22
|
-
{children}
|
|
23
|
-
</Tippy>
|
|
24
|
-
)
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<div className="flex pl pr pb pt h-64 dc__gap-12 dc__border-top dc__content-start">
|
|
28
|
-
<ConditionalWrap condition={disabled || loading} wrap={renderTippy}>
|
|
29
|
-
<div className="flexbox dc__align-items-center">
|
|
30
|
-
<button
|
|
31
|
-
type="submit"
|
|
32
|
-
className="cta submit h-32 flex"
|
|
33
|
-
disabled={disabled || loading}
|
|
34
|
-
data-testid={BUILD_INFRA_TEST_IDS.SUBMIT_BUTTON}
|
|
35
|
-
>
|
|
36
|
-
{loading ? <Progressing size={16} /> : getButtonText()}
|
|
37
|
-
</button>
|
|
38
|
-
</div>
|
|
39
|
-
</ConditionalWrap>
|
|
40
|
-
|
|
41
|
-
{handleCancel && (
|
|
42
|
-
<button
|
|
43
|
-
type="button"
|
|
44
|
-
className="cta cancel h-32 flex"
|
|
45
|
-
disabled={loading}
|
|
46
|
-
data-testid={BUILD_INFRA_TEST_IDS.CANCEL_BUTTON}
|
|
47
|
-
onClick={handleCancel}
|
|
48
|
-
>
|
|
49
|
-
{BUILD_INFRA_TEXT.EDIT_CANCEL}
|
|
50
|
-
</button>
|
|
51
|
-
)}
|
|
52
|
-
</div>
|
|
53
|
-
)
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
export default Footer
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
In case someone wants to add a new build infrastructure field, the following steps should be followed:
|
|
2
|
-
- Update the BUILD_INFRA_FORM_FIELDS, in constants.tsx
|
|
3
|
-
- Add BuildInfraConfigTypes, BuildInfraLocators, BuildInfraInheritActions(If any) in types.tsx
|
|
4
|
-
- In utils.tsx, update the handleProfileInputChange and validation functions accordingly
|