pixel-react 1.5.9 → 1.6.1

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 (110) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/AppHeader/AppHeader.d.ts +1 -0
  3. package/lib/components/AppHeader/types.d.ts +18 -6
  4. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  5. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  6. package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
  7. package/lib/components/FieldSet/FieldSet.d.ts +5 -0
  8. package/lib/components/FieldSet/index.d.ts +1 -0
  9. package/lib/components/FieldSet/types.d.ts +7 -0
  10. package/lib/components/FileDropzone/types.d.ts +8 -0
  11. package/lib/components/MachineInputField/types.d.ts +1 -1
  12. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  13. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  14. package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
  15. package/lib/components/PopUpModal/types.d.ts +14 -0
  16. package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
  17. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
  18. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  19. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
  20. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  21. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
  22. package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
  23. package/lib/components/TableTree/TableTree.d.ts +4 -24
  24. package/lib/components/TableTree/data.d.ts +112 -273
  25. package/lib/components/TableTree/types.d.ts +28 -0
  26. package/lib/index.d.ts +149 -32
  27. package/lib/index.esm.js +1104 -742
  28. package/lib/index.esm.js.map +1 -1
  29. package/lib/index.js +1109 -742
  30. package/lib/index.js.map +1 -1
  31. package/lib/tsconfig.tsbuildinfo +1 -1
  32. package/package.json +2 -2
  33. package/src/assets/Themes/BaseTheme.scss +5 -14
  34. package/src/assets/Themes/DarkTheme.scss +5 -2
  35. package/src/assets/icons/arrow_up.svg +1 -1
  36. package/src/assets/icons/export.svg +5 -0
  37. package/src/assets/icons/import.svg +5 -0
  38. package/src/assets/icons/info_icon.svg +4 -16
  39. package/src/assets/icons/replace_file.svg +14 -0
  40. package/src/assets/icons/web_service_icon.svg +3 -0
  41. package/src/assets/styles/_fonts.scss +4 -2
  42. package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
  43. package/src/components/AppHeader/AppHeader.tsx +158 -139
  44. package/src/components/AppHeader/types.ts +19 -6
  45. package/src/components/Charts/BarChart/BarChart.scss +34 -34
  46. package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
  47. package/src/components/Charts/BarChart/BarChart.tsx +79 -55
  48. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
  49. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
  50. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  51. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
  52. package/src/components/Charts/LineChart/LineChart.scss +13 -4
  53. package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
  54. package/src/components/Charts/LineChart/LineChart.tsx +143 -131
  55. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
  56. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
  57. package/src/components/Charts/PieChart/PieChart.scss +5 -3
  58. package/src/components/Charts/PieChart/PieChart.tsx +1 -2
  59. package/src/components/Checkbox/Checkbox.tsx +1 -7
  60. package/src/components/DatePicker/DatePicker.scss +15 -1
  61. package/src/components/DragAndDrop/DragAndDropList.tsx +5 -4
  62. package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
  63. package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
  64. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
  65. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
  66. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
  67. package/src/components/FieldSet/FieldSet.scss +9 -0
  68. package/src/components/FieldSet/FieldSet.stories.tsx +103 -0
  69. package/src/components/FieldSet/FieldSet.tsx +29 -0
  70. package/src/components/FieldSet/index.ts +1 -0
  71. package/src/components/FieldSet/types.ts +8 -0
  72. package/src/components/FileDropzone/FileDropzone.scss +1 -1
  73. package/src/components/FileDropzone/FileDropzone.stories.tsx +15 -3
  74. package/src/components/FileDropzone/FileDropzone.tsx +5 -0
  75. package/src/components/FileDropzone/FilePreview.tsx +1 -1
  76. package/src/components/FileDropzone/types.ts +8 -0
  77. package/src/components/Icon/Icons.scss +1 -1
  78. package/src/components/Icon/iconList.ts +11 -7
  79. package/src/components/MachineInputField/MachineInputField.scss +15 -2
  80. package/src/components/MachineInputField/MachineInputField.tsx +17 -3
  81. package/src/components/MachineInputField/types.ts +1 -1
  82. package/src/components/MultiSelect/Dropdown.tsx +7 -3
  83. package/src/components/MultiSelect/MultiSelect.stories.tsx +6 -1
  84. package/src/components/MultiSelect/MultiSelect.tsx +4 -20
  85. package/src/components/MultiSelect/MultiSelectTypes.ts +2 -0
  86. package/src/components/PopUpModal/PopUpModal.scss +36 -0
  87. package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
  88. package/src/components/PopUpModal/PopUpModal.tsx +85 -0
  89. package/src/components/PopUpModal/types.ts +14 -0
  90. package/src/components/RadioGroup/RadioGroup.scss +7 -0
  91. package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
  92. package/src/components/RadioGroup/RadioGroup.tsx +16 -0
  93. package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
  94. package/src/components/Select/Select.tsx +3 -4
  95. package/src/components/Select/components/Dropdown.tsx +34 -34
  96. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
  97. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
  98. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
  99. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
  100. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
  101. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
  102. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
  103. package/src/components/SequentialConnectingBranch/types.ts +18 -3
  104. package/src/components/TableTree/TableTree.scss +154 -123
  105. package/src/components/TableTree/TableTree.stories.tsx +148 -96
  106. package/src/components/TableTree/TableTree.tsx +250 -282
  107. package/src/components/TableTree/data.ts +318 -569
  108. package/src/components/TableTree/types.ts +30 -0
  109. package/src/components/Toast/Toast.tsx +1 -1
  110. package/src/index.ts +11 -0
@@ -40,6 +40,8 @@ interface MultiSelectProps {
40
40
  labelAccessor?: string;
41
41
 
42
42
  valueAccessor?: string;
43
+
44
+ onEnter?:(newOption:string)=>void
43
45
  }
44
46
 
45
47
  export { Option, MultiSelectProps };
@@ -0,0 +1,36 @@
1
+ .warning_modal_container {
2
+ height: 100%;
3
+ }
4
+ .warning_modal_content {
5
+ display: flex;
6
+ height: 80%;
7
+ width: 100%;
8
+ }
9
+ .warning_modal_icon {
10
+ position: relative;
11
+ bottom: 16px;
12
+ right: 4px;
13
+ }
14
+ .warning_modal_title_wrapper {
15
+ line-height: 30px;
16
+ }
17
+ .warning_modal_message_wrapper {
18
+ padding-top: 8px;
19
+ display: flex;
20
+ height: 100%;
21
+ flex-direction: column;
22
+ justify-content: space-between;
23
+ }
24
+ .warning_modal_message {
25
+ display: flex;
26
+ flex-direction: column;
27
+ line-height: 24px;
28
+ }
29
+ .warning_modal_footer_button {
30
+ height: 20%;
31
+ width: 100%;
32
+ display: flex;
33
+ align-items: flex-end;
34
+ justify-content: flex-end;
35
+ gap: 8px;
36
+ }
@@ -0,0 +1,61 @@
1
+ import React, { useState } from 'react';
2
+ import type { Meta, StoryObj } from '@storybook/react';
3
+ import PopUpModal from './PopUpModal';
4
+ import Button from '../Button';
5
+
6
+ const meta: Meta<typeof PopUpModal> = {
7
+ title: 'Components/PopUpModal',
8
+ component: PopUpModal,
9
+ parameters: {
10
+ layout: 'centered',
11
+ },
12
+ tags: ['autodocs'],
13
+ };
14
+
15
+ type Story = StoryObj<typeof PopUpModal>;
16
+
17
+ const defaultArgs = {
18
+ iconName:"license_warning",
19
+ titleMessage:"Warning!",
20
+ subTitleMessage:"Unsaved Changes.",
21
+ modalMessage:"Your web service data will be lost. Are you sure you want to exit?",
22
+ footerMessage:"How do you want to proceed?",
23
+ firstButtonLabel:"Cancel",
24
+ secondButtonLabel:"Continue",
25
+ buttonVariant:"warning",
26
+ border:'1px solid var(--warning-modal-border-color)'
27
+ }
28
+
29
+ export const DefaultModal: Story = {
30
+ args: {
31
+ isOpen: true,
32
+ onClose: () => alert('Closed'),
33
+ onContinue: () => alert('Continued'),
34
+ iconName: 'license_warning',
35
+ titleMessage: 'Warning!',
36
+ subTitleMessage: 'Unsaved Changes.',
37
+ },
38
+ };
39
+
40
+ export const ControlledPopUp: Story = {
41
+ render: () => {
42
+ const [isOpen, setIsOpen] = useState(false);
43
+ const handleContinue = () => {
44
+ alert('Continued!');
45
+ setIsOpen(false);
46
+ };
47
+ return (
48
+ <>
49
+ <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp'/>
50
+ <PopUpModal
51
+ {...defaultArgs}
52
+ isOpen={isOpen}
53
+ onClose={() => setIsOpen(false)}
54
+ onContinue={handleContinue}
55
+ />
56
+ </>
57
+ );
58
+ },
59
+ };
60
+
61
+ export default meta;
@@ -0,0 +1,85 @@
1
+ import { FC } from 'react';
2
+ import './PopUpModal.scss';
3
+ import Modal from '../Modal';
4
+ import Icon from '../Icon';
5
+ import Typography from '../Typography';
6
+ import Button from '../Button';
7
+ import { PopUpModalProps } from './types';
8
+
9
+ const PopUpModal: FC<PopUpModalProps> = ({
10
+ isOpen,
11
+ onClose,
12
+ onContinue,
13
+ titleMessage = 'Warning!',
14
+ subTitleMessage = 'Unsaved Changes.',
15
+ iconName,
16
+ modalMessage = 'Your web service data will be lost. Are you sure you want to exit?',
17
+ footerMessage = 'How do you want to proceed?',
18
+ firstButtonLabel = 'Cancel',
19
+ secondButtonLabel = 'Continue',
20
+ buttonVariant = 'warning',
21
+ border = '1px solid var(--warning-modal-border-color)',
22
+ }) => {
23
+ return (
24
+ <Modal
25
+ overlayClassName="custom-overlay"
26
+ isOpen={isOpen}
27
+ onClose={onClose}
28
+ isHeaderDisplayed={false}
29
+ children={
30
+ <div className={'warning_modal_container'}>
31
+ <div className={'warning_modal_content'}>
32
+ <Icon
33
+ name={iconName}
34
+ className={'warning_modal_icon'}
35
+ width={94}
36
+ height={94}
37
+ />
38
+ <div className={'warning_modal_message'}>
39
+ <Typography
40
+ fontSize={20}
41
+ fontWeight="semi-bold"
42
+ className="warning_modal_title_wrapper"
43
+ >
44
+ {' '}
45
+ <Typography
46
+ color="var(--status-button-bg-warning)"
47
+ fontSize={20}
48
+ fontWeight="semi-bold"
49
+ >
50
+ {' '}
51
+ {titleMessage}{' '}
52
+ </Typography>{' '}
53
+ {subTitleMessage}
54
+ </Typography>
55
+ <div className="warning_modal_message_wrapper">
56
+ <Typography fontSize={16}>{modalMessage}</Typography>
57
+ <Typography fontSize={16}>{footerMessage}</Typography>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ <div className={'warning_modal_footer_button'}>
62
+ <Button
63
+ variant="secondary"
64
+ label={firstButtonLabel}
65
+ onClick={onClose}
66
+ />
67
+ <Button
68
+ variant={buttonVariant || 'warning'}
69
+ label={secondButtonLabel}
70
+ onClick={onContinue}
71
+ />
72
+ </div>
73
+ </div>
74
+ }
75
+ ariaHideApp
76
+ isFooterDisplayed={false}
77
+ customWidth="420px"
78
+ customHeight="226px"
79
+ boxShadow="0px 1px 4px 0px var(--toaster-boxshadow)"
80
+ border={border}
81
+ />
82
+ );
83
+ };
84
+
85
+ export default PopUpModal;
@@ -0,0 +1,14 @@
1
+ export interface PopUpModalProps {
2
+ isOpen: boolean;
3
+ onClose: () => void;
4
+ onContinue?: () => void;
5
+ titleMessage:string,
6
+ subTitleMessage?:string,
7
+ iconName:string,
8
+ modalMessage:string,
9
+ footerMessage:string,
10
+ firstButtonLabel?:string,
11
+ secondButtonLabel:string,
12
+ buttonVariant:any,
13
+ border:string,
14
+ }
@@ -3,3 +3,10 @@
3
3
  flex-direction: row;
4
4
  gap: 12px;
5
5
  }
6
+ .ff-radio-label-wrapper {
7
+ position: relative;
8
+ top: 2px;
9
+ }
10
+ .ff-required-asterisk {
11
+ color: var(--input-error-text-color);
12
+ }
@@ -121,4 +121,30 @@ export const WithToolTipIcon: Story = {
121
121
  },
122
122
  };
123
123
 
124
+ export const WithLabelled: Story = {
125
+ render: () => {
126
+ const [selectedOption, setSelectedOption] = useState('restApi');
127
+ const radioOptions = [
128
+ { value: 'restApi', label: 'RestAPI' },
129
+ { value: 'snippets', label: 'Snippet' },
130
+ { value: 'history', label: 'History' },
131
+ ];
132
+ const handleOptionChange = (option: Option) => {
133
+ setSelectedOption(option.value);
134
+ };
135
+ return (
136
+ <RadioGroup
137
+ options={radioOptions}
138
+ onChange={handleOptionChange}
139
+ name="option"
140
+ selectedValue={selectedOption}
141
+ isAsteriskRequired
142
+ isLabel
143
+ label={'Web Services'}
144
+ classNameForLabel='ff-radio-label-wrapper'
145
+ />
146
+ );
147
+ },
148
+ };
149
+
124
150
  export default meta;
@@ -2,16 +2,32 @@ import React from 'react';
2
2
  import RadioButton from '../RadioButton/RadioButton'; // Adjust the import path as necessary
3
3
  import './RadioGroup.scss';
4
4
  import classNames from 'classnames';
5
+ import Typography from '../Typography';
5
6
 
6
7
  const RadioGroup: React.FC<RadioGroupProps> = ({
7
8
  options,
8
9
  name,
9
10
  selectedValue,
10
11
  onChange,
12
+ label,
13
+ isLabel = false,
14
+ isAsteriskRequired = false,
11
15
  className,
16
+ classNameForLabel,
12
17
  }) => {
13
18
  return (
14
19
  <div className={classNames('ff-radio-group', className)}>
20
+ {isLabel && (
21
+ <Typography fontWeight='semi-bold' className={classNames(classNameForLabel)}>
22
+ {' '}
23
+ {isAsteriskRequired && (
24
+ <Typography className={classNames('ff-required-asterisk')}>
25
+ *{' '}
26
+ </Typography>
27
+ )}
28
+ {label}{' '}
29
+ </Typography>
30
+ )}
15
31
  {options.map((option) => (
16
32
  <RadioButton
17
33
  key={option.value}
@@ -64,9 +64,33 @@ interface RadioGroupProps {
64
64
  */
65
65
  onChange?: (option: Option) => void;
66
66
 
67
+ /**
68
+ * Provides a label at starting position when the string is passed.
69
+ * Optional.
70
+ */
71
+ label?: string,
72
+
73
+ /**
74
+ * if isLabel is true then we can display label if not then extra space is not added.
75
+ * Optional.
76
+ */
77
+ isLabel?: boolean,
78
+
79
+ /**
80
+ * if isAsteriskRequired is true then we can display asterisk if not then extra space is not added.
81
+ * Optional.
82
+ */
83
+ isAsteriskRequired?:boolean,
84
+
67
85
  /**
68
86
  * Additional class names to apply to the radio group for custom styling.
69
87
  * Optional.
70
88
  */
71
89
  className?: string;
90
+
91
+ /**
92
+ * Additional class names to apply to the radio group Label for custom styling.
93
+ * Optional.
94
+ */
95
+ classNameForLabel?:string;
72
96
  }
@@ -142,7 +142,6 @@ const Select: FC<SelectProps> = ({
142
142
  }, [showDropdownOptions]);
143
143
 
144
144
  useEffect(() => {
145
- if (checkEmpty(getValue(selectedOption, valueAccessor))) return;
146
145
  setSearchedOption(getValue(selectedOption, valueAccessor));
147
146
  }, [selectedOption]);
148
147
 
@@ -205,8 +204,8 @@ const Select: FC<SelectProps> = ({
205
204
  className={classNames('ff-select-labels', {
206
205
  'ff-select-labels__active': searchedOption,
207
206
  })}
208
- fontSize={searchedOption && 8}
209
- lineHeight={searchedOption && '8px'}
207
+ fontSize={searchedOption || showDropdownOptions ? 8 : 12}
208
+ lineHeight={searchedOption || showDropdownOptions ? '8px' : '12px'}
210
209
  required={required}
211
210
  >
212
211
  {label}
@@ -216,7 +215,7 @@ const Select: FC<SelectProps> = ({
216
215
  {errorMsg && (
217
216
  <Typography
218
217
  as="div"
219
- lineHeight="15px"
218
+ lineHeight="12px"
220
219
  fontSize={10}
221
220
  color="var(--error_light)"
222
221
  className="ff-select-error-msg"
@@ -51,7 +51,7 @@ const Dropdown: FC<DropdownProps> = ({
51
51
  return {
52
52
  left: positionX,
53
53
  top: positionY + heightFromTop,
54
- width: width + 28,
54
+ width: width + 30,
55
55
  zIndex: optionZIndex,
56
56
  marginLeft: '-2px',
57
57
  };
@@ -59,7 +59,7 @@ const Dropdown: FC<DropdownProps> = ({
59
59
  return {
60
60
  zIndex: optionZIndex,
61
61
  left: positionX,
62
- width: width + 28,
62
+ width: width + 30,
63
63
  top: positionY - selectInputHeight - dropdownContainerHeight + 4 * margin,
64
64
  marginLeft: '-2px',
65
65
  };
@@ -67,10 +67,8 @@ const Dropdown: FC<DropdownProps> = ({
67
67
 
68
68
  const getOptionLabel = (label: any) => {
69
69
  if (React.isValidElement(label)) {
70
- console.log('test');
71
70
  return label;
72
71
  }
73
- console.log('test112');
74
72
  return (
75
73
  <Typography
76
74
  as="div"
@@ -88,37 +86,39 @@ const Dropdown: FC<DropdownProps> = ({
88
86
  ref={optionsWrapperRef}
89
87
  style={updateDropdownPosition()}
90
88
  >
91
- {!checkEmpty(options) ? (
92
- options.map((option) => (
93
- <div
94
- className={classNames(
95
- 'ff-select-dropdown-option',
96
- {
97
- 'ff-select-dropdown-option__selected':
98
- getValue(option, valueAccessor) === selectedOption,
99
- },
100
- currentTheme
101
- )}
102
- key={ffid()}
103
- onClick={() => {
104
- if ('disable' in option && option['disable']) return;
105
- onSelectOptionSelector(option);
106
- }}
89
+ <div>
90
+ {!checkEmpty(options) ? (
91
+ options.map((option) => (
92
+ <div
93
+ className={classNames(
94
+ 'ff-select-dropdown-option',
95
+ {
96
+ 'ff-select-dropdown-option__selected':
97
+ getValue(option, valueAccessor) === selectedOption,
98
+ },
99
+ currentTheme
100
+ )}
101
+ key={ffid()}
102
+ onClick={() => {
103
+ if ('disable' in option && option['disable']) return;
104
+ onSelectOptionSelector(option);
105
+ }}
106
+ >
107
+ {getOptionLabel(getLabel(option, labelAccessor))}
108
+ </div>
109
+ ))
110
+ ) : (
111
+ <Typography
112
+ textAlign="center"
113
+ as="div"
114
+ lineHeight="32px"
115
+ color="var(--ff-select-text-color)"
116
+ className={classNames('ff-select-no-option', currentTheme)}
107
117
  >
108
- {getOptionLabel(getLabel(option, labelAccessor))}
109
- </div>
110
- ))
111
- ) : (
112
- <Typography
113
- textAlign="center"
114
- as="div"
115
- lineHeight="32px"
116
- color="var(--ff-select-text-color)"
117
- className={classNames('ff-select-no-option', currentTheme)}
118
- >
119
- No Results found
120
- </Typography>
121
- )}
118
+ No Results found
119
+ </Typography>
120
+ )}
121
+ </div>
122
122
  </div>
123
123
  );
124
124
  };
@@ -93,11 +93,20 @@
93
93
  .ff-scope-wrapper {
94
94
  @include item-center;
95
95
  margin-right: 12px;
96
+
97
+ .ff-scope-text {
98
+ text-transform: capitalize;
99
+ margin: 0;
100
+ }
96
101
  }
97
102
 
98
103
  .ff-datalist-wrapper {
99
104
  @include item-center;
100
105
 
106
+ #ff-sequential-machine-datalist {
107
+ @include item-center
108
+ }
109
+
101
110
  .ff-dataset-icon,
102
111
  .ff-run-delete-icon,
103
112
  .ff-datalist-text {
@@ -5,11 +5,11 @@ import Icon from '../Icon';
5
5
  import Select from '../Select';
6
6
  import Typography from '../Typography';
7
7
  import './SequentialConnectingBranch.scss';
8
- import { useEffect, useRef, useState } from 'react';
8
+ import { FC, useEffect, useRef, useState } from 'react';
9
9
  import ConnectingBranches from './components/ConnectingBranches/ConnectingBranches';
10
10
  import { ExecutionContext, SequentialConnectingBranchProps } from './types';
11
11
 
12
- const SequentialConnectingBranch = ({
12
+ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
13
13
  machineInstances = [],
14
14
  machineColumnWidth = 180,
15
15
  machineColumnCount = 1,
@@ -19,8 +19,15 @@ const SequentialConnectingBranch = ({
19
19
  onAddBrowserInstance = () => {},
20
20
  onAddRunBrowserInstance = () => {},
21
21
  onDeleteBrowserInstance = () => {},
22
- }: SequentialConnectingBranchProps) => {
23
- const dataListRef = useRef<HTMLButtonElement>(null);
22
+ onUpdateDataSetList = () => {},
23
+ onDeleteMachineInstance = () => {},
24
+ dataSetValues = {
25
+ testDataSetId: '',
26
+ globalVariableSetId: '',
27
+ peVariableSetId: '',
28
+ },
29
+ }) => {
30
+ const [selectedMachineInstance, setSelectedMachineInstance] = useState({});
24
31
  const selectButtonRef = useRef<HTMLButtonElement>(null);
25
32
  const defaultMachineColumnCount = Math.max(machineColumnCount, 1);
26
33
  const defaultMachineColumnWidth = Math.max(machineColumnWidth, 180);
@@ -30,13 +37,25 @@ const SequentialConnectingBranch = ({
30
37
  >([]);
31
38
 
32
39
  const isMachineInstances = checkEmpty(machineInstances);
33
- const isMachineSelected = checkEmpty(selectedMachine);
40
+ const isMachineSelected = checkEmpty(selectedMachine.value?.clientId);
41
+
42
+ const getMachineStatusColor = (machineStatus: string = '') => {
43
+ if (machineStatus.toLowerCase().includes('inactive'))
44
+ return 'var(--ff-machine-inactive-status-color)';
45
+ if (machineStatus.toLowerCase().includes('running'))
46
+ return 'var(--ff-machine-running-status-color)';
47
+ if (machineStatus.toLowerCase().includes('active'))
48
+ return 'var(--ff-machine-active-status-color)';
49
+ return 'var(--ff-machine-active-status-color))';
50
+ };
51
+
52
+ useEffect(() => {
53
+ setSelectedMachineInstance(selectedMachine);
54
+ }, [selectedMachine]);
34
55
 
35
56
  useEffect(() => {
36
57
  setMachineBranchInstances([...machineInstances, {}]);
37
58
  }, [machineInstances]);
38
- console.log(machineInstances, 'machineInstances');
39
- console.log(machineBranchInstances, 'machineBranchInstances');
40
59
  return (
41
60
  <div className="ff-sequential-connecting-branch-wrapper">
42
61
  <div className="ff-connecting-select-branch-wrapper">
@@ -44,12 +63,12 @@ const SequentialConnectingBranch = ({
44
63
  <Select
45
64
  onChange={onHandleSelect}
46
65
  optionsList={machineOptionsList}
47
- required={true}
48
66
  label="Choose Machine"
67
+ required={false}
49
68
  showLabel={true}
50
69
  className="ff-sequential-select-branch"
51
70
  width={'240px'}
52
- selectedOption={selectedMachine}
71
+ selectedOption={selectedMachineInstance}
53
72
  valueAccessor={'name'}
54
73
  />
55
74
  {!isMachineSelected && (
@@ -70,11 +89,14 @@ const SequentialConnectingBranch = ({
70
89
  <>
71
90
  <Button
72
91
  variant="tertiary"
73
- label="Browser / Device"
92
+ label="Add Environment"
74
93
  size="small"
75
94
  className="branch-button"
76
95
  ref={selectButtonRef}
77
- onClick={onAddBrowserInstance}
96
+ onClick={() =>
97
+ onAddBrowserInstance('ff-sequential-branch-button')
98
+ }
99
+ id="ff-sequential-branch-button"
78
100
  />
79
101
  </>
80
102
  )}
@@ -82,40 +104,48 @@ const SequentialConnectingBranch = ({
82
104
  </div>
83
105
  )}
84
106
  </div>
85
- <div className="ff-select-scope-datalist">
86
- <div className="ff-scope-wrapper">
87
- <Icon name="windows" />
88
- <Typography
89
- as="span"
90
- fontSize={12}
91
- color="var(--ff-connecting-branch-scope-color)"
92
- className="ff-scope-text"
93
- >
94
- Private
95
- </Typography>
96
- </div>
107
+ {!isMachineSelected && (
108
+ <div className="ff-select-scope-datalist">
109
+ <div className="ff-scope-wrapper">
110
+ <Typography
111
+ as="span"
112
+ fontSize={12}
113
+ color={getMachineStatusColor(selectedMachine.values?.status)}
114
+ className="ff-scope-text"
115
+ >
116
+ {selectedMachine.values?.status}
117
+ </Typography>
118
+ </div>
97
119
 
98
- <div className="ff-datalist-wrapper">
99
- <Icon
100
- name="datalist_icon"
101
- className="ff-dataset-icon"
102
- ref={dataListRef}
103
- />
104
- <Typography
105
- as="span"
106
- fontSize={12}
107
- color="var(--ff-connecting-branch-color)"
108
- className="ff-datalist-text"
109
- >
110
- Dataset List
111
- </Typography>
112
- <Icon
113
- name="delete"
114
- className="ff-run-delete-icon"
115
- color="var(--ff-connecting-branch-delete-color)"
116
- />
120
+ <div className="ff-datalist-wrapper">
121
+ <div
122
+ id="ff-sequential-machine-datalist"
123
+ onClick={() =>
124
+ onUpdateDataSetList(
125
+ 'ff-sequential-machine-datalist',
126
+ dataSetValues
127
+ )
128
+ }
129
+ >
130
+ <Icon name="datalist_icon" className="ff-dataset-icon" />
131
+ <Typography
132
+ as="span"
133
+ fontSize={12}
134
+ color="var(--ff-connecting-branch-color)"
135
+ className="ff-datalist-text"
136
+ >
137
+ Dataset List
138
+ </Typography>
139
+ </div>
140
+ <Icon
141
+ name="delete"
142
+ className="ff-run-delete-icon"
143
+ color="var(--ff-connecting-branch-delete-color)"
144
+ onClick={onDeleteMachineInstance}
145
+ />
146
+ </div>
117
147
  </div>
118
- </div>
148
+ )}
119
149
  </div>
120
150
  <div className="ff-sequential-branches-wrapper">
121
151
  {!isMachineInstances && (
@@ -126,6 +156,7 @@ const SequentialConnectingBranch = ({
126
156
  onAddBrowser={onAddBrowserInstance}
127
157
  onDeleteBrowser={onDeleteBrowserInstance}
128
158
  onAddRunBrowser={onAddRunBrowserInstance}
159
+ onUpdateDataSetList={onUpdateDataSetList}
129
160
  />
130
161
  )}
131
162
  </div>
@@ -61,6 +61,12 @@
61
61
  align-items: center;
62
62
  flex-direction: if($reverse, row-reverse, row);
63
63
 
64
+ .ff-dataset-list-branch {
65
+ display: flex;
66
+ align-items: center;
67
+ flex-direction: if($reverse, row-reverse, row);
68
+ }
69
+
64
70
  .ff-connecting-icon {
65
71
  margin-right: 4px;
66
72
  cursor: pointer;
@@ -154,9 +160,9 @@
154
160
 
155
161
  .ff-connecting-branch-arrow-reverse {
156
162
  @include branch-arrow(
157
- $clip: polygon(0 50%, 100% 100%, 100% 0),
158
- $horizontal-pos: left,
159
- $offset: -1px
163
+ $clip: polygon(0 50%, 100% 100%, 100% 0),
164
+ $horizontal-pos: left,
165
+ $offset: -1px
160
166
  );
161
167
  }
162
168
  }