pixel-react 1.9.5 → 1.9.7

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 (69) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/ComponentProps/TreeNodeProps.d.ts +31 -0
  3. package/lib/components/ConditionalDropdown/types.d.ts +4 -3
  4. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +1 -0
  5. package/lib/components/Input/types.d.ts +2 -0
  6. package/lib/components/MobileSkin/MobileSkinInterface.d.ts +2 -2
  7. package/lib/components/MobileSkin/types.d.ts +9 -8
  8. package/lib/components/Select/types.d.ts +4 -0
  9. package/lib/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.d.ts +4 -0
  10. package/lib/components/SequentialConnectingBranch/components/DatasetTooltip/types.d.ts +8 -0
  11. package/lib/components/SequentialConnectingBranch/types.d.ts +17 -4
  12. package/lib/components/TableTree/Components/TableBody.d.ts +1 -1
  13. package/lib/components/TableTree/types.d.ts +5 -32
  14. package/lib/index.d.ts +46 -75
  15. package/lib/index.esm.js +292 -98
  16. package/lib/index.esm.js.map +1 -1
  17. package/lib/index.js +292 -98
  18. package/lib/index.js.map +1 -1
  19. package/lib/tsconfig.tsbuildinfo +1 -1
  20. package/lib/utils/getSequentialPayload/types.d.ts +6 -0
  21. package/lib/utils/getTreeDetails/getTreeDetails.d.ts +1 -29
  22. package/lib/utils/handleTreeNodeSelect/handleTreeNodeSelect.d.ts +1 -30
  23. package/package.json +1 -1
  24. package/src/ComponentProps/TreeNodeProps.ts +31 -0
  25. package/src/assets/Themes/BaseTheme.scss +3 -0
  26. package/src/assets/Themes/DarkTheme.scss +3 -0
  27. package/src/assets/styles/_colors.scss +5 -0
  28. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +149 -30
  29. package/src/components/ConditionalDropdown/types.ts +27 -25
  30. package/src/components/Drawer/Drawer.scss +1 -1
  31. package/src/components/Drawer/Drawer.tsx +1 -1
  32. package/src/components/Editor/VariableDropdown.tsx +1 -1
  33. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +39 -8
  34. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +0 -4
  35. package/src/components/Input/Input.tsx +4 -0
  36. package/src/components/Input/types.ts +5 -0
  37. package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -0
  38. package/src/components/MobileSkin/MobileSkin.scss +0 -8
  39. package/src/components/MobileSkin/MobileSkin.stories.tsx +10 -9
  40. package/src/components/MobileSkin/MobileSkin.tsx +16 -31
  41. package/src/components/MobileSkin/MobileSkinInterface.ts +2 -2
  42. package/src/components/MobileSkin/types.ts +9 -8
  43. package/src/components/RadioButton/RadioButton.tsx +5 -1
  44. package/src/components/Select/Select.stories.tsx +2 -0
  45. package/src/components/Select/Select.tsx +4 -1
  46. package/src/components/Select/components/Dropdown.tsx +1 -2
  47. package/src/components/Select/types.ts +6 -1
  48. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +35 -28
  49. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +58 -14
  50. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -20
  51. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +41 -0
  52. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/types.ts +9 -0
  53. package/src/components/SequentialConnectingBranch/types.ts +19 -5
  54. package/src/components/TableTree/Components/TableBody.tsx +22 -20
  55. package/src/components/TableTree/Components/TableCell.tsx +18 -6
  56. package/src/components/TableTree/Components/TableHead.tsx +5 -3
  57. package/src/components/TableTree/Components/TableRow.tsx +0 -3
  58. package/src/components/TableTree/TableTree.scss +88 -51
  59. package/src/components/TableTree/TableTree.stories.tsx +8 -7
  60. package/src/components/TableTree/TableTree.tsx +7 -2
  61. package/src/components/TableTree/data.ts +1 -1
  62. package/src/components/TableTree/types.ts +5 -33
  63. package/src/components/Tabs/Tabs.scss +1 -1
  64. package/src/index.ts +7 -0
  65. package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx +1 -0
  66. package/src/utils/getSequentialPayload/getSequentialPayload.ts +1 -1
  67. package/src/utils/getSequentialPayload/types.ts +6 -0
  68. package/src/utils/getTreeDetails/getTreeDetails.ts +1 -29
  69. package/src/utils/handleTreeNodeSelect/handleTreeNodeSelect.ts +1 -30
@@ -9,6 +9,7 @@ import {
9
9
  EntireColumnsSelection,
10
10
  EntireRowsSelection,
11
11
  } from './selection';
12
+ import { createFormulaParser, Model } from './engine';
12
13
 
13
14
  export function applyBoldToCells(
14
15
  currentData: Matrix.Matrix<Types.CellBase<any>>,
@@ -557,19 +558,47 @@ export function edit(state: Types.StoreState): Types.StoreState {
557
558
  return { ...state, mode: 'edit' };
558
559
  }
559
560
 
561
+
562
+ const canClearCell = (cell: Types.CellBase | undefined) =>
563
+ cell && !cell.readOnly;
564
+ const clearCell = (cell: Types.CellBase | undefined) => {
565
+ if (!canClearCell(cell)) {
566
+ return cell;
567
+ }
568
+ return Object.assign({}, cell, { value: '', style: cell?.style });
569
+ };
570
+
560
571
  export function clear(state: Types.StoreState): Types.StoreState {
561
572
  if (!state.active) {
562
573
  return state;
563
574
  }
564
575
 
565
- const canClearCell = (cell: Types.CellBase | undefined) =>
566
- cell && !cell.readOnly;
567
- const clearCell = (cell: Types.CellBase | undefined) => {
568
- if (!canClearCell(cell)) {
569
- return cell;
570
- }
571
- return Object.assign({}, cell, { value: undefined });
576
+ const selectedRange = state.selected.toRange(state.model.data);
577
+
578
+ const changes: Types.CommitChanges = [];
579
+ let newData = state.model.data;
580
+
581
+ for (const point of selectedRange || []) {
582
+ const cell = Matrix.get(point, state.model.data);
583
+ const clearedCell = clearCell(cell);
584
+ changes.push({
585
+ prevCell: cell || null,
586
+ nextCell: clearedCell || null,
587
+ });
588
+ newData = Matrix.set(point, clearedCell, newData);
589
+ }
590
+
591
+ return {
592
+ ...state,
593
+ model: new Model(createFormulaParser, newData),
594
+ ...commit(changes),
572
595
  };
596
+ }
597
+
598
+ export function clearEditMode(state: Types.StoreState): Types.StoreState {
599
+ if (!state.active) {
600
+ return state;
601
+ }
573
602
 
574
603
  const selectedRange = state.selected.toRange(state.model.data);
575
604
 
@@ -588,6 +617,8 @@ export function clear(state: Types.StoreState): Types.StoreState {
588
617
 
589
618
  return {
590
619
  ...state,
620
+ mode: 'edit',
621
+ model: new Model(createFormulaParser, newData),
591
622
  ...commit(changes),
592
623
  };
593
624
  }
@@ -655,7 +686,7 @@ const keyDownHandlers: KeyDownHandlers = {
655
686
  ArrowRight: go(0, +1),
656
687
  Tab: go(0, +1),
657
688
  Enter: edit,
658
- Backspace: clear,
689
+ Backspace: clearEditMode,
659
690
  Delete: clear,
660
691
  Escape: blur,
661
692
  };
@@ -187,10 +187,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
187
187
  label: 'Courier',
188
188
  value: 'Courier',
189
189
  },
190
- {
191
- label: 'Helvetica',
192
- value: 'Helvetica',
193
- },
194
190
  {
195
191
  label: 'Arial Rounded MT Bold',
196
192
  value: '"Arial Rounded MT Bold"',
@@ -29,6 +29,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
29
29
  transparentBackground = false,
30
30
  size = 'small',
31
31
  isLabelRequired = true,
32
+ onClick,
33
+ onKeyUp,
32
34
  ...props
33
35
  },
34
36
  ref
@@ -101,6 +103,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
101
103
  autoFocus={autoFocus}
102
104
  min={minValue}
103
105
  max={maxValue}
106
+ onClick={onClick}
107
+ onKeyUp={onKeyUp}
104
108
  {...props}
105
109
  />
106
110
 
@@ -57,6 +57,11 @@ export interface InputProps {
57
57
  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
58
58
 
59
59
  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
60
+
61
+ onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
62
+
63
+ onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
64
+
60
65
  /**
61
66
  * id to select the input field uniquely
62
67
  */
@@ -55,6 +55,7 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
55
55
  showBorder={false}
56
56
  onChange={onDropdownChangeHandler}
57
57
  disabled={disabled || !optionsRequired}
58
+ optionZIndex={999999}
58
59
  optionsRequired={optionsRequired}
59
60
  className={classNames('ff-floating-dropdown', {
60
61
  'ff-floating-dropdown--disabled': !!disabled,
@@ -37,14 +37,6 @@
37
37
  }
38
38
  }
39
39
 
40
- .ff-notch {
41
- background-color: var(--text-color);
42
- border-radius: 24px;
43
- position: absolute;
44
- &.android-notch {
45
- border-radius: 50%;
46
- }
47
- }
48
40
  .ff-nav-bar {
49
41
  height: 32px;
50
42
  padding: 8px;
@@ -1,5 +1,6 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react';
2
2
  import MobileSkin from './MobileSkin';
3
+ import React from 'react';
3
4
 
4
5
  const meta: Meta<typeof MobileSkin> = {
5
6
  title: 'Components/MobileSkin',
@@ -56,38 +57,38 @@ const defaultArgs = {
56
57
  navBarIcons: navBarIcons,
57
58
  mobileWidth: 220,
58
59
  mobileHeight: 448,
59
- children: randomImage,
60
+ children: <p>No Data Found</p>,
60
61
  };
61
62
 
62
- export const iosPortraitView: Story = {
63
+ export const PortraitView: Story = {
63
64
  args: {
64
65
  ...defaultArgs,
65
66
  orientation: 'portrait',
66
- type: 'ios',
67
67
  },
68
68
  };
69
69
 
70
- export const iosLandscapeView: Story = {
70
+ export const LandscapeView: Story = {
71
71
  args: {
72
72
  ...defaultArgs,
73
73
  orientation: 'landscape',
74
- type: 'ios',
75
74
  },
76
75
  };
77
76
 
78
- export const androidPortraitView: Story = {
77
+ export const PortraitViewWithNavbar: Story = {
79
78
  args: {
80
79
  ...defaultArgs,
81
80
  orientation: 'portrait',
82
- type: 'android',
81
+ UtilityBar: true,
82
+ navBarIcons: navBarIcons,
83
83
  },
84
84
  };
85
85
 
86
- export const androidLandscapeView: Story = {
86
+ export const LandscapeViewWithNavbar: Story = {
87
87
  args: {
88
88
  ...defaultArgs,
89
89
  orientation: 'landscape',
90
- type: 'android',
90
+ UtilityBar: true,
91
+ navBarIcons: navBarIcons,
91
92
  },
92
93
  };
93
94
  export default meta;
@@ -7,16 +7,12 @@ import { MobileSkinProps } from './MobileSkinInterface';
7
7
  const MobileSkin: React.FC<MobileSkinProps> = ({
8
8
  children,
9
9
  orientation = '',
10
- type = '',
11
10
  navBarIcons,
12
11
  mobileHeight = 448,
13
12
  mobileWidth = 220,
13
+ UtilityBar,
14
14
  }) => {
15
- const notchHeight = (mobileHeight / 448) * 20;
16
- const notchWidth = (mobileWidth / 220) * 60;
17
-
18
15
  const isPortrait = orientation === 'portrait';
19
- const isIos = type === 'ios';
20
16
  const containerHeight = isPortrait ? mobileHeight : mobileWidth;
21
17
  const containerWidth = isPortrait ? mobileWidth : mobileHeight;
22
18
 
@@ -55,33 +51,22 @@ const MobileSkin: React.FC<MobileSkinProps> = ({
55
51
  )}
56
52
  </div>
57
53
  </div>
58
-
59
- <div
60
- className={`ff-notch ${!isIos ? 'android-notch' : ''}`}
61
- style={{
62
- height: !isIos ? 15 : isPortrait ? notchHeight : notchWidth,
63
- width: !isIos ? 15 : isPortrait ? notchWidth : notchHeight,
64
- transform: isPortrait
65
- ? `translate(${mobileWidth * 0.01}px, ${mobileHeight * -0.43}px)`
66
- : `translate(${containerWidth * -0.46}px, ${
67
- containerHeight * -0.01
68
- }px)`,
69
- }}
70
- ></div>
71
- </div>
72
- <div className="ff-nav-bar">
73
- {navBarIcons.map((icon, index) => (
74
- <div
75
- key={index}
76
- className={`ff-nav-bar-icon ${icon?.className || ''} ${
77
- index === navBarIcons.length - 1 ? 'last-icon' : ''
78
- }`}
79
- onClick={icon.onClick}
80
- >
81
- <Tooltip title={icon?.title} children={<Icon {...icon} />} />
82
- </div>
83
- ))}
84
54
  </div>
55
+ {UtilityBar && (
56
+ <div className="ff-nav-bar">
57
+ {navBarIcons?.map((icon, index) => (
58
+ <div
59
+ key={index}
60
+ className={`ff-nav-bar-icon ${icon?.className || ''} ${
61
+ index === navBarIcons.length - 1 ? 'last-icon' : ''
62
+ }`}
63
+ onClick={icon.onClick}
64
+ >
65
+ <Tooltip title={icon?.title} children={<Icon {...icon} />} />
66
+ </div>
67
+ ))}
68
+ </div>
69
+ )}
85
70
  </div>
86
71
  );
87
72
  };
@@ -6,8 +6,8 @@ interface NavBarIcon {
6
6
  export interface MobileSkinProps {
7
7
  children: React.ReactNode | string;
8
8
  orientation?: 'portrait' | 'landscape';
9
- type: 'ios' | 'android';
10
- navBarIcons: NavBarIcon[];
9
+ UtilityBar?: boolean;
10
+ navBarIcons?: NavBarIcon[];
11
11
  mobileHeight?: number;
12
12
  mobileWidth?: number;
13
13
  }
@@ -1,7 +1,8 @@
1
1
  export interface iconDetails {
2
2
  /**
3
- * details of each icon
3
+ * details of each icon in which name must be there
4
4
  */
5
+ name: string;
5
6
  [key: string]: any;
6
7
  }
7
8
  export interface MobileSkinProps {
@@ -12,11 +13,7 @@ export interface MobileSkinProps {
12
13
  /**
13
14
  * Portrait or landScape View of the Mobile
14
15
  */
15
- orientation: "portrait" | "landscape";
16
- /**
17
- * type either it will be ios or android
18
- */
19
- type: string;
16
+ orientation: 'portrait' | 'landscape';
20
17
  /**
21
18
  * height of the MobileSkin
22
19
  */
@@ -26,7 +23,11 @@ export interface MobileSkinProps {
26
23
  */
27
24
  mobileWidth?: number;
28
25
  /**
29
- * takes the icons details like icon name , title, onClick event, height , width, etc
26
+ * if you need the lower navbar below the mobileSkin you pass this prop
27
+ */
28
+ UtilityBar?: boolean;
29
+ /**
30
+ * takes the icons details like icon name , title, onClick event, height , width, etc but name is must
30
31
  */
31
- navbarIcons: Array<iconDetails>;
32
+ navbarIcons?: Array<iconDetails>;
32
33
  }
@@ -33,7 +33,11 @@ const RadioButton: React.FC<RadioButtonProps> = ({
33
33
  <span className="ff-radio-custom" />
34
34
  <Typography color="var(--text-color)" children={label} />
35
35
  </label>
36
- {showTooltip && <Tooltip title={tooltipTitle}>{tooltipChildren}</Tooltip>}
36
+ {showTooltip && (
37
+ <Tooltip title={tooltipTitle} placement="right">
38
+ {tooltipChildren}
39
+ </Tooltip>
40
+ )}
37
41
  </div>
38
42
  );
39
43
  };
@@ -347,6 +347,8 @@ export const IconOptionSelection: Story = {
347
347
  onChange={handleChange}
348
348
  showIcon={true}
349
349
  width={200}
350
+ optionsRequired={false}
351
+ disabled
350
352
  />
351
353
  );
352
354
  },
@@ -9,6 +9,7 @@ import Dropdown from './components/Dropdown';
9
9
  import { getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
10
10
  import usePortalPosition from '../../hooks/usePortalPosition';
11
11
  import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
12
+ import Tooltip from '../Tooltip';
12
13
 
13
14
  const Select: FC<SelectProps> = ({
14
15
  label = 'Default Label',
@@ -192,7 +193,9 @@ const Select: FC<SelectProps> = ({
192
193
  })}
193
194
  >
194
195
  {showIcon && (
195
- <Icon name={searchedIcon} className="ff-select-input-icon" />
196
+ <Tooltip placement="bottom" title={searchedText}>
197
+ <Icon name={searchedIcon} className="ff-select-input-icon" />
198
+ </Tooltip>
196
199
  )}
197
200
  <input
198
201
  type="text"
@@ -8,7 +8,6 @@ import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
8
8
  import classNames from 'classnames';
9
9
  import {
10
10
  getLabel,
11
- getValue,
12
11
  } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
13
12
  import useClickOutside from '../../../hooks/useClickOutside';
14
13
  import Icon from '../../Icon';
@@ -113,7 +112,7 @@ const Dropdown: FC<DropdownProps> = ({
113
112
  'ff-select-dropdown-option',
114
113
  {
115
114
  'ff-select-dropdown-option__selected':
116
- getValue(option, valueAccessor) === selectedOption,
115
+ getLabel(option, valueAccessor) === selectedOption,
117
116
  },
118
117
  currentTheme
119
118
  )}
@@ -117,7 +117,12 @@ export interface SelectProps {
117
117
  /**
118
118
  * Provide the boolean value if tooltip is reuired or not
119
119
  */
120
- showToolTip?: boolean
120
+ showToolTip?: boolean;
121
+
122
+ /**
123
+ * Provide the background color for the select label on the hover state
124
+ */
125
+ labelBackgroundColor?: string;
121
126
  }
122
127
 
123
128
  export interface DropdownPosition {
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
2
2
  import SequentialConnectingBranch from './SequentialConnectingBranch';
3
3
  import { useState } from 'react';
4
4
  import React from 'react';
5
+ import { Option } from '../Select/types';
5
6
 
6
7
  const meta: Meta<typeof SequentialConnectingBranch> = {
7
8
  title: 'Components/SequentialConnectingBranch',
@@ -16,48 +17,54 @@ type Story = StoryObj<typeof SequentialConnectingBranch>;
16
17
 
17
18
  export const Primary: Story = {
18
19
  render: () => {
19
- const machineList = [
20
- {
21
- label: 'FFE 123',
22
- value: 'FFE 123',
23
- },
24
- {
25
- label: 'FFE 234',
26
- value: 'FFE 234',
20
+ const [machineSelect, setMachineSelect] = useState<Option>({
21
+ label: 'ffe-Mahesh',
22
+ value: {
23
+ status: 'running',
27
24
  },
25
+ name: 'ffe-Mahesh',
26
+ });
27
+ const [machineInstance, setMachineInstance] = useState<Option>({});
28
+
29
+ const machineOptionList = [
28
30
  {
29
- label: 'FFE 345',
30
- value: 'FFE 345',
31
+ label: 'ffe-Ganesh',
32
+ value: {
33
+ status: 'running',
34
+ },
35
+ name: 'ffe-Ganesh',
31
36
  },
32
37
  {
33
- label: 'FFE 456',
34
- value: 'FFE 456',
38
+ label: 'ffe-Mahesh',
39
+ value: {
40
+ status: 'running',
41
+ },
42
+ name: 'ffe-Mahesh',
35
43
  },
36
44
  ];
37
- const [selectedMachine, setSelectedMachine] = useState({});
38
- const [machineInstances, setMachineInstances] = useState<any>([]);
45
+
46
+ const onMachineHandleSelect = (option: Option) => {
47
+ setMachineSelect(option);
48
+ };
49
+
50
+ const onAddMachine = () => {};
51
+
39
52
  return (
40
53
  <>
41
54
  <SequentialConnectingBranch
42
- machineOptionsList={machineList}
43
- machineInstances={machineInstances}
44
- selectedMachine={selectedMachine}
45
- onHandleSelect={(option) => {
46
- setSelectedMachine(option);
47
- }}
48
- onAddBrowserInstance={() => {}}
49
- onUpdateAddBrowserInstance={() => {}}
50
- onAddRunBrowserInstance={() => {}}
51
- onDeleteMachineInstance={() => {}}
52
- onDeleteBrowserInstance={() => {}}
55
+ projectType="web"
53
56
  dataSetValues={{
54
57
  peVariableSetId: 'Test dev',
55
58
  globalVariableSetId: 'Test dev',
56
59
  testDataSetId: 'Test dev',
57
60
  }}
58
- onUpdateDataSetList={() => {}}
59
- machineColumnWidth={500}
60
- machineColumnCount={3}
61
+ machineColumnWidth={340}
62
+ machineColumnCount={2}
63
+ machineOptionsList={machineOptionList}
64
+ machineInstances={[]}
65
+ selectedMachine={machineSelect}
66
+ onHandleSelect={onMachineHandleSelect}
67
+ scriptType="Manual"
61
68
  />
62
69
  </>
63
70
  );
@@ -7,7 +7,14 @@ import Typography from '../Typography';
7
7
  import './SequentialConnectingBranch.scss';
8
8
  import { FC, useEffect, useRef, useState } from 'react';
9
9
  import ConnectingBranches from './components/ConnectingBranches/ConnectingBranches';
10
- import { ExecutionContext, SequentialConnectingBranchProps } from './types';
10
+ import {
11
+ dataSetValues,
12
+ ExecutionContext,
13
+ SequentialConnectingBranchProps,
14
+ } from './types';
15
+ import Tooltip from '../Tooltip';
16
+ import DataSetTooltip from './components/DatasetTooltip/DataSetTooltip';
17
+ import { DataSetToolTip } from './components/DatasetTooltip/types';
11
18
 
12
19
  const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
13
20
  machineInstances = [],
@@ -25,12 +32,15 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
25
32
  testDataSetId: '',
26
33
  globalVariableSetId: '',
27
34
  peVariableSetId: '',
35
+ globalVariableSetName: '',
36
+ peVariableSetName: '',
37
+ testDataSetName: '',
28
38
  },
29
39
  onUpdateAddBrowserInstance = () => {},
30
40
  addInstanceLabel = 'Add Environment',
31
41
  scriptType = 'Automation',
32
42
  projectType = 'Web',
33
- readOnly = true,
43
+ readOnly = false,
34
44
  }) => {
35
45
  const [selectedMachineInstance, setSelectedMachineInstance] = useState({});
36
46
  const selectButtonRef = useRef<HTMLButtonElement>(null);
@@ -63,11 +73,29 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
63
73
  }, [selectedMachine]);
64
74
 
65
75
  useEffect(() => {
66
- setMachineBranchInstances([...machineInstances, {}]);
76
+ if (readOnly) {
77
+ setMachineBranchInstances(machineInstances);
78
+ } else {
79
+ setMachineBranchInstances([...machineInstances, {}]);
80
+ }
67
81
  }, [machineInstances]);
68
82
 
69
83
  const hideDataSet = scriptType.toLowerCase() !== 'manual';
70
84
 
85
+ const removeKeysContainingSubstring = (
86
+ obj: dataSetValues,
87
+ substring: string
88
+ ) => {
89
+ return Object.fromEntries(
90
+ Object.entries(obj).filter(([key]) => !key.includes(substring))
91
+ );
92
+ };
93
+
94
+ const filteredDataSetValues = removeKeysContainingSubstring(
95
+ dataSetValues,
96
+ 'Id'
97
+ );
98
+
71
99
  return (
72
100
  <div className="ff-sequential-connecting-branch-wrapper">
73
101
  <div className="ff-connecting-select-branch-wrapper">
@@ -82,6 +110,8 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
82
110
  width={'240px'}
83
111
  selectedOption={selectedMachineInstance}
84
112
  valueAccessor={'name'}
113
+ optionsRequired={!readOnly}
114
+ disableInput={readOnly}
85
115
  />
86
116
  {!isMachineSelected && (
87
117
  <div
@@ -121,11 +151,10 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
121
151
  <div className="ff-scope-wrapper">
122
152
  <Typography
123
153
  as="span"
124
- fontSize={12}
125
- color={getMachineStatusColor(selectedMachine.values?.status)}
154
+ color={getMachineStatusColor(selectedMachine.value?.status)}
126
155
  className="ff-scope-text"
127
156
  >
128
- {selectedMachine.values?.status}
157
+ {selectedMachine.value?.status}
129
158
  </Typography>
130
159
  </div>
131
160
 
@@ -140,10 +169,22 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
140
169
  )
141
170
  }
142
171
  >
143
- <Icon name="datalist_icon" className="ff-dataset-icon" />
172
+ <Tooltip
173
+ placement="bottom"
174
+ title={
175
+ <DataSetTooltip
176
+ datSetToolTip={filteredDataSetValues as DataSetToolTip}
177
+ />
178
+ }
179
+ >
180
+ <Icon
181
+ name="datalist_icon"
182
+ className="ff-dataset-icon"
183
+ hoverEffect
184
+ />
185
+ </Tooltip>
144
186
  <Typography
145
187
  as="span"
146
- fontSize={12}
147
188
  color="var(--ff-connecting-branch-color)"
148
189
  className="ff-datalist-text"
149
190
  >
@@ -151,12 +192,15 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
151
192
  </Typography>
152
193
  </div>
153
194
  )}
154
- <Icon
155
- name="delete"
156
- className="ff-run-delete-icon"
157
- color="var(--ff-connecting-branch-delete-color)"
158
- onClick={onDeleteMachineInstance}
159
- />
195
+ {!readOnly && (
196
+ <Icon
197
+ name="delete"
198
+ className="ff-run-delete-icon"
199
+ color="var(--ff-connecting-branch-delete-color)"
200
+ onClick={onDeleteMachineInstance}
201
+ hoverEffect
202
+ />
203
+ )}
160
204
  </div>
161
205
  </div>
162
206
  )}