pixel-react 1.10.10-2 → 1.10.10-3

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 (177) hide show
  1. package/lib/1fb4472b34e4fe07.css +1 -0
  2. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
  3. package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
  4. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  5. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  6. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  7. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  8. package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
  9. package/lib/components/AddButton/AddButton.d.ts +5 -0
  10. package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
  11. package/lib/components/AddButton/index.d.ts +1 -0
  12. package/lib/components/AddButton/types.d.ts +4 -0
  13. package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
  14. package/lib/components/AddVariables/AddVariables.d.ts +5 -0
  15. package/lib/components/AddVariables/index.d.ts +1 -0
  16. package/lib/components/AddVariables/types.d.ts +35 -0
  17. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
  18. package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
  19. package/lib/components/AppHeader/types.d.ts +1 -0
  20. package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
  21. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
  22. package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
  23. package/lib/components/Button/Button.stories.d.ts +13 -0
  24. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
  25. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
  26. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
  27. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
  28. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
  29. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
  30. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
  31. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
  32. package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
  33. package/lib/components/Chip/Chip.stories.d.ts +14 -0
  34. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
  35. package/lib/components/ConnectingBranch/types.d.ts +2 -0
  36. package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
  37. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
  38. package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
  39. package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
  40. package/lib/components/Editor/Editor.stories.d.ts +6 -0
  41. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
  42. package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
  43. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
  44. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +8 -0
  45. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
  46. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
  47. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
  48. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
  49. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
  50. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
  51. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
  52. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
  53. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
  54. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
  55. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
  56. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
  57. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
  58. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
  59. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
  60. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
  61. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
  62. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
  63. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
  64. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
  65. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
  66. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
  67. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
  68. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
  69. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
  70. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
  71. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
  72. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
  73. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
  74. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
  75. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
  76. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
  77. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
  78. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
  79. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
  80. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
  81. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
  82. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
  83. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
  84. package/lib/components/ExcelFile/Types.d.ts +129 -0
  85. package/lib/components/ExcelFile/index.d.ts +1 -0
  86. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
  87. package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
  88. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
  89. package/lib/components/Form/Form.stories.d.ts +7 -0
  90. package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
  91. package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
  92. package/lib/components/Icon/Icon.stories.d.ts +8 -0
  93. package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
  94. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
  95. package/lib/components/Input/Input.stories.d.ts +9 -0
  96. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
  97. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +13 -0
  98. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
  99. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
  100. package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
  101. package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
  102. package/lib/components/Modal/Modal.stories.d.ts +7 -0
  103. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
  104. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +11 -0
  105. package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
  106. package/lib/components/NLPInput/type.d.ts +70 -0
  107. package/lib/components/Paper/Paper.stories.d.ts +11 -0
  108. package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
  109. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
  110. package/lib/components/Search/Search.stories.d.ts +6 -0
  111. package/lib/components/Select/Select.stories.d.ts +14 -0
  112. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
  113. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
  114. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
  115. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +4 -0
  116. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +3 -0
  117. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +4 -0
  118. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +3 -0
  119. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
  120. package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
  121. package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
  122. package/lib/components/Table/Table.stories.d.ts +13 -0
  123. package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
  124. package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
  125. package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
  126. package/lib/components/Toast/Toast.stories.d.ts +6 -0
  127. package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
  128. package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
  129. package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
  130. package/lib/components/Typography/Typography.stories.d.ts +10 -0
  131. package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
  132. package/lib/index.d.ts +2 -0
  133. package/lib/index.esm.js +796 -572
  134. package/lib/index.esm.js.map +1 -1
  135. package/lib/index.js +796 -572
  136. package/lib/index.js.map +1 -1
  137. package/lib/tsconfig.tsbuildinfo +1 -1
  138. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
  139. package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
  140. package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
  141. package/lib/utils/debounce/debounce.stories.d.ts +6 -0
  142. package/lib/utils/ffID/ffID.stories.d.ts +6 -0
  143. package/lib/utils/find/findAndInsert.d.ts +7 -0
  144. package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
  145. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
  146. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
  147. package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
  148. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
  149. package/lib/utils/throttle/throttle.stories.d.ts +6 -0
  150. package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
  151. package/package.json +1 -1
  152. package/src/assets/icons/approval_pending.svg +8 -8
  153. package/src/assets/icons/configuration.svg +3 -3
  154. package/src/assets/icons/defects.svg +8 -8
  155. package/src/assets/icons/element.svg +4 -4
  156. package/src/assets/icons/project_element.svg +4 -4
  157. package/src/assets/icons/step_group.svg +10 -10
  158. package/src/assets/icons/variable.svg +3 -3
  159. package/src/assets/icons/web_service_icon.svg +3 -3
  160. package/src/components/AppHeader/AppHeader.scss +7 -1
  161. package/src/components/AppHeader/AppHeader.stories.tsx +1 -0
  162. package/src/components/AppHeader/AppHeader.tsx +8 -1
  163. package/src/components/AppHeader/types.ts +1 -0
  164. package/src/components/Comment/Comments.stories.tsx +77 -3
  165. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +36 -27
  166. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +10 -0
  167. package/src/components/ConnectingBranch/ConnectingBranch.tsx +36 -23
  168. package/src/components/ConnectingBranch/types.ts +2 -0
  169. package/src/components/Select/Select.stories.tsx +34 -10
  170. package/src/components/Select/Select.tsx +1 -0
  171. package/src/components/Select/components/Dropdown.tsx +24 -21
  172. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +19 -14
  173. package/src/components/TableTree/Components/AddModule/AddModule.scss +73 -1
  174. package/src/components/TableTree/Components/AddModule/AddModule.tsx +26 -2
  175. package/src/components/TableTree/Components/TableCell.tsx +121 -73
  176. package/src/components/TableTree/TableTree.scss +13 -2
  177. package/src/components/TableTree/TableTree.stories.tsx +5 -5
@@ -24,9 +24,83 @@ export const basicCommentWithOutData: Story = {
24
24
  return (
25
25
  <Comments
26
26
  onCommentsDataChange={handleCommentsDataChange}
27
- commentsData={{
28
- comments: [],
29
- }}
27
+ commentsData={[
28
+ {
29
+ "createdBy": "USR33186",
30
+ "modifiedBy": "USR33186",
31
+ "createdByUname": "Manikantha Ambig",
32
+ "modifiedByUname": "Manikantha Ambig",
33
+ "createdOn": "10 Dec 2024 09:14 PM",
34
+ "modifiedOn": "10 Dec 2024 09:17 PM",
35
+ "id": "71d31324-bbc8-4c20-becc-524dc45675a5",
36
+ "name": "Manikantha Ambig",
37
+ "emailId": [
38
+ "manikanth.n@fireflink.com",
39
+ "manikantha.a@fireflink.com"
40
+ ],
41
+ "description": "@Manikantha Ambig post the comment",
42
+ "commentParentId": "",
43
+ "comments": []
44
+ },
45
+ {
46
+ "createdBy": "USR33186",
47
+ "modifiedBy": "USR33186",
48
+ "createdByUname": "Manikantha Ambig",
49
+ "modifiedByUname": "Manikantha Ambig",
50
+ "createdOn": "28 Nov 2024 01:55 AM",
51
+ "modifiedOn": "28 Nov 2024 01:55 AM",
52
+ "id": "99cf3ea2-f1af-4f63-b709-4664bdcdf1ff",
53
+ "name": "Manikantha Ambig",
54
+ "emailId": [],
55
+ "description": "eferfv3etgrtg",
56
+ "commentParentId": "",
57
+ "comments": [
58
+ {
59
+ "createdBy": "USR33186",
60
+ "modifiedBy": "USR33186",
61
+ "createdByUname": "Manikantha Ambig",
62
+ "modifiedByUname": "Manikantha Ambig",
63
+ "createdOn": "28 Nov 2024 01:56 AM",
64
+ "modifiedOn": "28 Nov 2024 01:56 AM",
65
+ "id": "fc5f7bb8-7a0b-4a58-b943-f7fbe80d39b0",
66
+ "name": "Manikantha Ambig",
67
+ "emailId": [],
68
+ "description": "3fr345f45f",
69
+ "commentParentId": "99cf3ea2-f1af-4f63-b709-4664bdcdf1ff",
70
+ "comments": []
71
+ }
72
+ ]
73
+ },
74
+ {
75
+ "createdBy": "USR33186",
76
+ "modifiedBy": "USR33186",
77
+ "createdByUname": "Manikantha Ambig",
78
+ "modifiedByUname": "Manikantha Ambig",
79
+ "createdOn": "13 Nov 2024 07:03 PM",
80
+ "modifiedOn": "13 Nov 2024 07:03 PM",
81
+ "id": "030dcb26-a8ba-4f4d-8d3f-8b06b75423b1",
82
+ "name": "Manikantha Ambig",
83
+ "emailId": [],
84
+ "description": "wefwrfrwfr",
85
+ "commentParentId": "",
86
+ "comments": [
87
+ {
88
+ "createdBy": "USR33186",
89
+ "modifiedBy": "USR33186",
90
+ "createdByUname": "Manikantha Ambig",
91
+ "modifiedByUname": "Manikantha Ambig",
92
+ "createdOn": "13 Nov 2024 07:05 PM",
93
+ "modifiedOn": "13 Nov 2024 07:05 PM",
94
+ "id": "a66d24d5-b359-4255-8ac3-364f3da90f2c",
95
+ "name": "Manikantha Ambig",
96
+ "emailId": [],
97
+ "description": "test",
98
+ "commentParentId": "030dcb26-a8ba-4f4d-8d3f-8b06b75423b1",
99
+ "comments": []
100
+ }
101
+ ]
102
+ }
103
+ ]}
30
104
  handleAddComment={() => {}}
31
105
  handleEditComment={() => {}}
32
106
  handleDeleteComment={() => {}}
@@ -16,24 +16,29 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
16
16
  curveHeights,
17
17
  itemRefs,
18
18
  datasetRef,
19
+ isReadOnlyMode,
19
20
  }) => {
20
21
  return (
21
22
  <>
22
23
  {parentNodeData?.machineInstances?.length === 0 ? (
23
24
  <>
24
- <div className="ff-selectedMachines-connecting-line">
25
- <div className="ff-line">
26
- <div className="ff-left-icon"></div>
27
- <div className="ff-right-icon"></div>
28
- </div>
29
- </div>
30
- <div className="ff-machine-instance ff-machine-env-button">
31
- {getChildNodeComponent({
32
- isButton: true,
33
- parentNodeData,
34
- parentNodeIndex,
35
- })}
36
- </div>
25
+ {!isReadOnlyMode && (
26
+ <>
27
+ <div className="ff-selectedMachines-connecting-line">
28
+ <div className="ff-line">
29
+ <div className="ff-left-icon"></div>
30
+ <div className="ff-right-icon"></div>
31
+ </div>
32
+ </div>
33
+ <div className="ff-machine-instance ff-machine-env-button">
34
+ {getChildNodeComponent({
35
+ isButton: true,
36
+ parentNodeData,
37
+ parentNodeIndex,
38
+ })}
39
+ </div>
40
+ </>
41
+ )}
37
42
  </>
38
43
  ) : (
39
44
  parentNodeData?.machineInstances?.map(
@@ -129,21 +134,25 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
129
134
  {childNodeIndex ===
130
135
  parentNodeData.machineInstances.length - 1 && (
131
136
  <>
132
- <div className="ff-selectedMachines-connecting-line ff-second-line">
133
- <div className="ff-line">
134
- <div className="ff-left-icon"></div>
135
- <div className="ff-right-icon"></div>
136
- </div>
137
- </div>
137
+ {!isReadOnlyMode && (
138
+ <>
139
+ <div className="ff-selectedMachines-connecting-line ff-second-line">
140
+ <div className="ff-line">
141
+ <div className="ff-left-icon"></div>
142
+ <div className="ff-right-icon"></div>
143
+ </div>
144
+ </div>
138
145
 
139
- <div className="ff-machine-instance ff-machine-env-button">
140
- {getChildNodeComponent({
141
- isButton: true,
142
- parentNodeData,
143
- parentNodeIndex,
144
- childNodeIndex: childNodeIndex + 1,
145
- })}
146
- </div>
146
+ <div className="ff-machine-instance ff-machine-env-button">
147
+ {getChildNodeComponent({
148
+ isButton: true,
149
+ parentNodeData,
150
+ parentNodeIndex,
151
+ childNodeIndex: childNodeIndex + 1,
152
+ })}
153
+ </div>
154
+ </>
155
+ )}
147
156
  </>
148
157
  )}
149
158
  </div>
@@ -52,3 +52,13 @@ export const Default: Story = {
52
52
  getChildNodeComponent,
53
53
  },
54
54
  };
55
+
56
+ export const readOnly: Story = {
57
+ args: {
58
+ data: machineData,
59
+ getParentNodeComponent,
60
+ getParentNodeComponentActionItems,
61
+ getChildNodeComponent,
62
+ isReadOnlyMode: true,
63
+ },
64
+ };
@@ -17,21 +17,31 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
17
17
  getParentNodeComponent,
18
18
  getParentNodeComponentActionItems,
19
19
  childNodeCurveHeight = 1.28,
20
+ isReadOnlyMode = false,
20
21
  }) => {
21
22
  const datasetRef = useRef<HTMLDivElement | null>(null);
22
23
  const [datasetHeight, setDatasetHeight] = useState<number>(0);
23
24
  const [curveHeights, setCurveHeights] = useState<number[]>([]);
24
25
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
25
-
26
26
  const calculateVerticalLineHeight = (
27
27
  machineInstances: MachineInstance[],
28
28
  datasetHeight: number,
29
29
  gap: number
30
30
  ): number => {
31
- const totalDataSets = machineInstances.reduce((acc, instance) => {
32
- return acc + (instance.runLevelExecutionDataSets?.length || 0);
33
- }, 0);
34
- return totalDataSets * datasetHeight + totalDataSets * gap;
31
+ if (machineInstances.length === 1 && isReadOnlyMode) {
32
+ return 0;
33
+ }
34
+
35
+ const totalDataSets = machineInstances.reduce(
36
+ (acc, instance, index) =>
37
+ acc +
38
+ (index !== machineInstances.length - 1 || !isReadOnlyMode
39
+ ? instance.runLevelExecutionDataSets?.length || 0
40
+ : 0),
41
+ 0
42
+ );
43
+
44
+ return totalDataSets * (datasetHeight + gap);
35
45
  };
36
46
 
37
47
  useEffect(() => {
@@ -165,6 +175,7 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
165
175
  itemRefs={itemRefs}
166
176
  datasetRef={datasetRef}
167
177
  getChildNodeComponent={getChildNodeComponent}
178
+ isReadOnlyMode={isReadOnlyMode}
168
179
  />
169
180
  </div>
170
181
  </React.Fragment>
@@ -172,25 +183,27 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
172
183
  }
173
184
  )}
174
185
  {/* Select Machine Input */}
175
- <div
176
- className="ff-select-machine-input"
177
- style={{
178
- gridRow: `${currentRow}`,
179
- }}
180
- >
181
- <ArcherElement
182
- id="lastNode"
183
- relations={[
184
- {
185
- targetId: 'rootNode',
186
- targetAnchor: 'left',
187
- sourceAnchor: 'left',
188
- },
189
- ]}
186
+ {!isReadOnlyMode && (
187
+ <div
188
+ className="ff-select-machine-input"
189
+ style={{
190
+ gridRow: `${currentRow}`,
191
+ }}
190
192
  >
191
- <div>{getParentNodeComponent({ isMultiSelect: true })}</div>
192
- </ArcherElement>
193
- </div>
193
+ <ArcherElement
194
+ id="lastNode"
195
+ relations={[
196
+ {
197
+ targetId: 'rootNode',
198
+ targetAnchor: 'left',
199
+ sourceAnchor: 'left',
200
+ },
201
+ ]}
202
+ >
203
+ <div>{getParentNodeComponent({ isMultiSelect: true })}</div>
204
+ </ArcherElement>
205
+ </div>
206
+ )}
194
207
  </div>
195
208
  </ArcherContainer>
196
209
  </div>
@@ -19,6 +19,7 @@ export interface MachineInstancesProps {
19
19
  itemRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
20
20
  datasetRef: React.RefObject<HTMLDivElement>;
21
21
  getChildNodeComponent: FC<ConnectingNodeConfig>;
22
+ isReadOnlyMode?: boolean;
22
23
  }
23
24
 
24
25
  export type indexType = number;
@@ -48,4 +49,5 @@ export interface ConnectBranchProps {
48
49
  nodeArgs: ConnectingNodeConfig
49
50
  ) => ReactElement;
50
51
  getChildNodeComponent: (nodeArgs: ConnectingNodeConfig) => ReactElement;
52
+ isReadOnlyMode?: boolean;
51
53
  }
@@ -423,38 +423,62 @@ export const SelectWithToolTip: Story = {
423
423
  const optionsList = [
424
424
  {
425
425
  label: 'fire-flink-LIC4900-onPrem',
426
- value: 'fire-flink-LIC4900-onPrem',
426
+ value: {
427
+ clientId: 'fire-flink-LIC4900-onPrem',
428
+ },
429
+ name: 'fire-flink-LIC4900-onPrem',
427
430
  },
428
431
  {
429
432
  label: 'fire-flink-LIC3179',
430
- value: 'fire-flink-LIC3179',
433
+ value: {
434
+ clientId: 'fire-flink-LIC4900-onPrem',
435
+ },
436
+ name: 'fire-flink-LIC3179',
431
437
  },
432
438
  {
433
439
  label: 'fire-flink-LIC4937',
434
- value: 'fire-flink-LIC4937',
440
+ value: {
441
+ clientId: 'fire-flink-LIC4900-onPrem',
442
+ },
443
+ name: 'fire-flink-LIC4937',
435
444
  },
436
445
  {
437
446
  label: 'fire-flink-LIC5937',
438
- value: 'fire-flink-LIC5937',
447
+ value: {
448
+ clientId: 'fire-flink-LIC4900-onPrem',
449
+ },
450
+ name: 'fire-flink-LIC5937',
439
451
  },
440
452
  {
441
453
  label: 'fire-flink-LIC6937',
442
- value: 'fire-flink-LIC6937',
454
+ value: {
455
+ clientId: 'fire-flink-LIC4900-onPrem',
456
+ },
457
+ name: 'fire-flink-LIC6937',
443
458
  },
444
459
  {
445
460
  label: 'fire-flink-LIC7937',
446
- value: 'fire-flink-LIC7937',
461
+ value: {
462
+ clientId: 'fire-flink-LIC4900-onPrem',
463
+ },
464
+ name: 'fire-flink-LIC7937',
447
465
  },
448
466
  {
449
467
  label: 'fire-flink-LIC4999',
450
- value: 'fire-flink-LIC4999',
468
+ value: {
469
+ clientId: 'fire-flink-LIC4900-onPrem',
470
+ },
471
+ name: 'fire-flink-LIC4999',
451
472
  recurrence: true,
452
- },
473
+ },
453
474
  ];
454
475
 
455
476
  const [selectedOption, setSelectedOption] = useState<Option>({
456
477
  label: '',
457
- value: '',
478
+ value: {
479
+ clientId: '',
480
+ },
481
+ name: '',
458
482
  });
459
483
 
460
484
  const handleChange = (option: Option) => {
@@ -466,7 +490,6 @@ export const SelectWithToolTip: Story = {
466
490
  <h1>Test Mini Modal</h1>
467
491
  </>
468
492
  );
469
-
470
493
  return (
471
494
  <Select
472
495
  optionsList={optionsList}
@@ -475,6 +498,7 @@ export const SelectWithToolTip: Story = {
475
498
  label="Select Option"
476
499
  showToolTip={true}
477
500
  modalJSXProps={getMiniModalJSX()}
501
+ valueAccessor="name"
478
502
  recurrence
479
503
  />
480
504
  );
@@ -292,6 +292,7 @@ const Select: FC<SelectProps> = ({
292
292
  onCancelModal={onCancelModal}
293
293
  modalJSXProps={modalJSXProps}
294
294
  recurrence={recurrence}
295
+ valueAccessor={valueAccessor}
295
296
  />,
296
297
  document.body
297
298
  )}
@@ -6,7 +6,10 @@ import Typography from '../../Typography';
6
6
  import { ffid } from '../../../utils/ffID/ffid';
7
7
  import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
8
8
  import classNames from 'classnames';
9
- import { getLabel } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
9
+ import {
10
+ getLabel,
11
+ getValue,
12
+ } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
10
13
  import useClickOutside from '../../../hooks/useClickOutside';
11
14
  import Icon from '../../Icon';
12
15
  import Tooltip from '../../Tooltip';
@@ -133,26 +136,26 @@ const Dropdown: FC<DropdownProps> = ({
133
136
  >
134
137
  {!checkEmpty(options) ? (
135
138
  options.map((option) => (
136
- <div
137
- className={classNames(
138
- 'ff-select-dropdown-option',
139
- {
140
- 'ff-select-dropdown-option__selected':
141
- getLabel(option, valueAccessor) === selectedOption,
142
- },
143
- currentTheme
144
- )}
145
- key={ffid()}
146
- onClick={() => {
147
- if ('disable' in option && option['disable']) return;
148
- onSelectOptionSelector(option);
149
- }}
150
- >
151
- {getOptionLabel(
152
- getLabel(option, labelAccessor),
153
- 'iconName' in option && option['iconName']
154
- )}
155
- </div>
139
+ <div
140
+ className={classNames(
141
+ 'ff-select-dropdown-option',
142
+ {
143
+ 'ff-select-dropdown-option__selected':
144
+ getValue(option, valueAccessor) === selectedOption,
145
+ },
146
+ currentTheme
147
+ )}
148
+ key={ffid()}
149
+ onClick={() => {
150
+ if ('disable' in option && option['disable']) return;
151
+ onSelectOptionSelector(option);
152
+ }}
153
+ >
154
+ {getOptionLabel(
155
+ getLabel(option, labelAccessor),
156
+ 'iconName' in option && option['iconName']
157
+ )}
158
+ </div>
156
159
  ))
157
160
  ) : (
158
161
  <Typography
@@ -31,8 +31,9 @@ const Branches = ({
31
31
  readOnly,
32
32
  }: BranchesProps) => {
33
33
  const evenRow = rowIndex % 2 === 0;
34
+ const getLastIndex = readOnly ? 0 : 1;
34
35
  const lastMachineInstance = checkEmpty(
35
- machineInstances[machineColumnCount - 1]
36
+ machineInstances[machineColumnCount - getLastIndex]
36
37
  );
37
38
 
38
39
  const getBorderStyle = (
@@ -263,19 +264,23 @@ const Branches = ({
263
264
  </Typography>
264
265
  </div>
265
266
 
266
- <Icon
267
- name="plus_icon"
268
- className="ff-connecting-icon"
269
- onClick={() => onAddRunBrowser(machineInstanceId)}
270
- color="var(--ff-connecting-branch-color)"
271
- hoverEffect
272
- />
273
- <Typography
274
- className="ff-connecting-text"
275
- color="var(--ff-connecting-branch-color)"
276
- >
277
- Run
278
- </Typography>
267
+ {!readOnly && (
268
+ <>
269
+ <Icon
270
+ name="plus_icon"
271
+ className="ff-connecting-icon"
272
+ onClick={() => onAddRunBrowser(machineInstanceId)}
273
+ color="var(--ff-connecting-branch-color)"
274
+ hoverEffect
275
+ />
276
+ <Typography
277
+ className="ff-connecting-text"
278
+ color="var(--ff-connecting-branch-color)"
279
+ >
280
+ Run
281
+ </Typography>
282
+ </>
283
+ )}
279
284
  </>
280
285
  )}
281
286
  {!readOnly && (
@@ -1,6 +1,78 @@
1
+ @use '../../../../assets/styles/fonts';
2
+
1
3
  .add-module-container {
2
4
  display: flex;
5
+
3
6
  .icons {
4
7
  cursor: pointer;
5
8
  }
6
- }
9
+
10
+ .ff-add-module-input-container {
11
+ display: flex;
12
+ flex-direction: column;
13
+ position: relative;
14
+
15
+ .ff-add-module-label-container {
16
+ display: flex;
17
+ gap: 2px;
18
+ position: absolute;
19
+ border: none;
20
+ outline: none;
21
+ line-height: 18px;
22
+ margin-top: 1px;
23
+ padding: 4px 6px;
24
+ transition: all 0.3s ease-in-out;
25
+
26
+ .ff-add-module-label {
27
+ color: var(--input-default-label-color);
28
+ }
29
+ }
30
+
31
+ .add-module-input {
32
+ height: 24px;
33
+ padding: 0px 6px;
34
+ width: 330px;
35
+ border: 0.5px solid var(--nlp-color);
36
+ border-radius: 4px;
37
+ outline: none;
38
+ line-height: 18px;
39
+ color: var(--nlp-color);
40
+ }
41
+
42
+ &:focus-within {
43
+ .ff-add-module-label-container {
44
+ top: -9px;
45
+ @extend .fontXs;
46
+ background-color: var(--input-label-bg-color);
47
+ line-height: 15px;
48
+ padding: 0px 2px;
49
+ margin-left: 10px;
50
+
51
+ .ff-add-module-label {
52
+ color: var(--nlp-color);
53
+ }
54
+ }
55
+ }
56
+
57
+ &--float {
58
+ .ff-add-module-label-container {
59
+ top: -9px;
60
+ @extend .fontXs;
61
+ background-color: var(--input-label-bg-color);
62
+ line-height: 15px;
63
+ padding: 0px 2px;
64
+ margin-left: 10px;
65
+
66
+ .ff-add-module-label {
67
+ color: var(--nlp-color);
68
+ }
69
+ }
70
+ }
71
+ }
72
+
73
+ .ff-module-icon-container {
74
+ display: flex;
75
+ gap: 8px;
76
+ align-items: center;
77
+ }
78
+ }
@@ -1,6 +1,8 @@
1
1
  import { useState } from 'react';
2
2
  import Icon from '../../../Icon';
3
3
  import './AddModule.scss';
4
+ import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
5
+ import classNames from 'classnames';
4
6
 
5
7
  export const AddModule = ({
6
8
  onConfirm,
@@ -15,21 +17,43 @@ export const AddModule = ({
15
17
  }) => {
16
18
  console.log('🚀 ~ value:', value);
17
19
  const [text, setText] = useState(value);
20
+
21
+ const isValueFilled = !checkEmpty(text);
18
22
  return (
19
23
  <>
20
- <div className="add-module-container">
24
+ <div className={classNames("add-module-container")}>
25
+ <div className={classNames("ff-add-module-input-container",
26
+ {
27
+ 'ff-add-module-input-container--float': isValueFilled,
28
+ }
29
+ )}>
30
+ <label className='ff-add-module-label-container' htmlFor='add-module-input'>
31
+ <span className={classNames('ff-add-module-label',{
32
+ 'ff-input-label--no-hover': !!text,
33
+ })}>Edit Script</span>
34
+ </label>
21
35
  <input
36
+ name='add-module-input'
22
37
  type="text"
23
38
  className="add-module-input"
24
39
  onChange={(e) => setText(e.target.value)}
25
40
  value={text}
26
41
  />
42
+ </div>
43
+ <div className="ff-module-icon-container">
27
44
  <Icon
28
45
  className="icons"
29
46
  name="update_icon"
30
47
  onClick={() => onConfirm && onConfirm(text)}
48
+ color='var(--label-edit-confirm-icon)'
49
+ height={18}
50
+ width={18}
51
+ />
52
+ <Icon className="icons" name="close" onClick={onCancel} color='var(--label-edit-cancel-icon)'
53
+ height={14}
54
+ width={14}
31
55
  />
32
- <Icon className="icons" name="close" onClick={onCancel} />
56
+ </div>
33
57
  </div>
34
58
  <small>{error}</small>
35
59
  </>