@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.
Files changed (84) hide show
  1. package/dist/Common/Api.d.ts +0 -9
  2. package/dist/Common/Constants.d.ts +0 -1
  3. package/dist/Common/Types.d.ts +2 -3
  4. package/dist/index.d.ts +1 -3
  5. package/dist/index.js +149 -1440
  6. package/package.json +1 -1
  7. package/src/Common/Api.ts +0 -21
  8. package/src/Common/BreadCrumb/Types.ts +1 -0
  9. package/src/Common/Checkbox.tsx +0 -1
  10. package/src/Common/Constants.ts +1 -2
  11. package/src/Common/CustomInput/CustomInput.tsx +1 -2
  12. package/src/Common/DraggableWrapper/DraggableWrapper.tsx +1 -3
  13. package/src/Common/RJSF/utils.ts +0 -2
  14. package/src/Common/SearchBar/SearchBar.component.tsx +0 -1
  15. package/src/Common/SearchBar/searchBar.scss +1 -1
  16. package/src/Common/Types.ts +1 -3
  17. package/src/index.ts +1 -3
  18. package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraConfigForm.d.ts +0 -4
  19. package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraDescriptionField.d.ts +0 -4
  20. package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormAction.d.ts +0 -7
  21. package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormItem.d.ts +0 -4
  22. package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraProfileNameField.d.ts +0 -4
  23. package/dist/Pages/GlobalConfigurations/BuildInfra/Descriptor.d.ts +0 -4
  24. package/dist/Pages/GlobalConfigurations/BuildInfra/Footer.d.ts +0 -4
  25. package/dist/Pages/GlobalConfigurations/BuildInfra/constants.d.ts +0 -50
  26. package/dist/Pages/GlobalConfigurations/BuildInfra/index.d.ts +0 -7
  27. package/dist/Pages/GlobalConfigurations/BuildInfra/services.d.ts +0 -6
  28. package/dist/Pages/GlobalConfigurations/BuildInfra/types.d.ts +0 -286
  29. package/dist/Pages/GlobalConfigurations/BuildInfra/utils.d.ts +0 -12
  30. package/dist/Pages/GlobalConfigurations/index.d.ts +0 -1
  31. package/dist/Pages/index.d.ts +0 -1
  32. package/dist/Shared/Components/APIResponseHandler/APIResponseHandler.d.ts +0 -4
  33. package/dist/Shared/Components/APIResponseHandler/constants.d.ts +0 -4
  34. package/dist/Shared/Components/APIResponseHandler/index.d.ts +0 -2
  35. package/dist/Shared/Components/APIResponseHandler/types.d.ts +0 -37
  36. package/dist/Shared/Components/BulkSelection/BulkSelection.d.ts +0 -4
  37. package/dist/Shared/Components/BulkSelection/BulkSelectionDropdownItems.d.ts +0 -4
  38. package/dist/Shared/Components/BulkSelection/BulkSelectionProvider.d.ts +0 -4
  39. package/dist/Shared/Components/BulkSelection/constants.d.ts +0 -9
  40. package/dist/Shared/Components/BulkSelection/index.d.ts +0 -4
  41. package/dist/Shared/Components/BulkSelection/types.d.ts +0 -54
  42. package/dist/Shared/Components/ReactSelect/index.d.ts +0 -1
  43. package/dist/Shared/Components/ReactSelect/utils.d.ts +0 -12
  44. package/dist/Shared/Components/index.d.ts +0 -3
  45. package/dist/Shared/Helpers.d.ts +0 -16
  46. package/dist/Shared/index.d.ts +0 -3
  47. package/dist/Shared/validations.d.ts +0 -8
  48. package/src/Assets/Icon/ic-check-all.svg +0 -5
  49. package/src/Assets/Icon/ic-check-square.svg +0 -4
  50. package/src/Assets/Icon/ic-close.svg +0 -9
  51. package/src/Assets/Icon/ic-cpu.svg +0 -4
  52. package/src/Assets/Icon/ic-memory.svg +0 -3
  53. package/src/Assets/Icon/ic-timer.svg +0 -3
  54. package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraConfigForm.tsx +0 -128
  55. package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraDescriptionField.tsx +0 -44
  56. package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormAction.tsx +0 -106
  57. package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormItem.tsx +0 -55
  58. package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraProfileNameField.tsx +0 -32
  59. package/src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx +0 -45
  60. package/src/Pages/GlobalConfigurations/BuildInfra/Footer.tsx +0 -56
  61. package/src/Pages/GlobalConfigurations/BuildInfra/Readme.md +0 -4
  62. package/src/Pages/GlobalConfigurations/BuildInfra/constants.tsx +0 -139
  63. package/src/Pages/GlobalConfigurations/BuildInfra/index.ts +0 -7
  64. package/src/Pages/GlobalConfigurations/BuildInfra/services.tsx +0 -167
  65. package/src/Pages/GlobalConfigurations/BuildInfra/types.tsx +0 -339
  66. package/src/Pages/GlobalConfigurations/BuildInfra/utils.tsx +0 -509
  67. package/src/Pages/GlobalConfigurations/index.ts +0 -1
  68. package/src/Pages/index.ts +0 -1
  69. package/src/Shared/Components/APIResponseHandler/APIResponseHandler.tsx +0 -41
  70. package/src/Shared/Components/APIResponseHandler/constants.tsx +0 -5
  71. package/src/Shared/Components/APIResponseHandler/index.ts +0 -2
  72. package/src/Shared/Components/APIResponseHandler/types.tsx +0 -39
  73. package/src/Shared/Components/BulkSelection/BulkSelection.tsx +0 -77
  74. package/src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx +0 -31
  75. package/src/Shared/Components/BulkSelection/BulkSelectionProvider.tsx +0 -160
  76. package/src/Shared/Components/BulkSelection/constants.tsx +0 -13
  77. package/src/Shared/Components/BulkSelection/index.ts +0 -4
  78. package/src/Shared/Components/BulkSelection/types.tsx +0 -65
  79. package/src/Shared/Components/ReactSelect/index.ts +0 -1
  80. package/src/Shared/Components/ReactSelect/utils.tsx +0 -97
  81. package/src/Shared/Components/index.ts +0 -3
  82. package/src/Shared/Helpers.tsx +0 -29
  83. package/src/Shared/index.ts +0 -3
  84. 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,4 +0,0 @@
1
- export { default as BulkSelection } from './BulkSelection';
2
- export * from './BulkSelectionProvider';
3
- export * from './types';
4
- export * from './constants';
@@ -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;
@@ -1,3 +0,0 @@
1
- export * from './APIResponseHandler';
2
- export * from './ReactSelect';
3
- export * from './BulkSelection';
@@ -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 {};
@@ -1,3 +0,0 @@
1
- export * from './Components';
2
- export * from './validations';
3
- export * from './Helpers';
@@ -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