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.
- package/lib/1fb4472b34e4fe07.css +1 -0
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
- package/lib/components/AddButton/AddButton.d.ts +5 -0
- package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
- package/lib/components/AddButton/index.d.ts +1 -0
- package/lib/components/AddButton/types.d.ts +4 -0
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
- package/lib/components/AddVariables/AddVariables.d.ts +5 -0
- package/lib/components/AddVariables/index.d.ts +1 -0
- package/lib/components/AddVariables/types.d.ts +35 -0
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
- package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
- package/lib/components/AppHeader/types.d.ts +1 -0
- package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
- package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
- package/lib/components/Button/Button.stories.d.ts +13 -0
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
- package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
- package/lib/components/Chip/Chip.stories.d.ts +14 -0
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
- package/lib/components/ConnectingBranch/types.d.ts +2 -0
- package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
- package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
- package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
- package/lib/components/Editor/Editor.stories.d.ts +6 -0
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
- package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +8 -0
- package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
- package/lib/components/ExcelFile/Types.d.ts +129 -0
- package/lib/components/ExcelFile/index.d.ts +1 -0
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
- package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
- package/lib/components/Form/Form.stories.d.ts +7 -0
- package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
- package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
- package/lib/components/Icon/Icon.stories.d.ts +8 -0
- package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
- package/lib/components/Input/Input.stories.d.ts +9 -0
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +13 -0
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
- package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
- package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
- package/lib/components/Modal/Modal.stories.d.ts +7 -0
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +11 -0
- package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
- package/lib/components/NLPInput/type.d.ts +70 -0
- package/lib/components/Paper/Paper.stories.d.ts +11 -0
- package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
- package/lib/components/Search/Search.stories.d.ts +6 -0
- package/lib/components/Select/Select.stories.d.ts +14 -0
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +3 -0
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +3 -0
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
- package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
- package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
- package/lib/components/Table/Table.stories.d.ts +13 -0
- package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
- package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
- package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
- package/lib/components/Toast/Toast.stories.d.ts +6 -0
- package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
- package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
- package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
- package/lib/components/Typography/Typography.stories.d.ts +10 -0
- package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.esm.js +796 -572
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +796 -572
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
- package/lib/utils/debounce/debounce.stories.d.ts +6 -0
- package/lib/utils/ffID/ffID.stories.d.ts +6 -0
- package/lib/utils/find/findAndInsert.d.ts +7 -0
- package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
- package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
- package/lib/utils/throttle/throttle.stories.d.ts +6 -0
- package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
- package/package.json +1 -1
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/AppHeader/AppHeader.scss +7 -1
- package/src/components/AppHeader/AppHeader.stories.tsx +1 -0
- package/src/components/AppHeader/AppHeader.tsx +8 -1
- package/src/components/AppHeader/types.ts +1 -0
- package/src/components/Comment/Comments.stories.tsx +77 -3
- package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +36 -27
- package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +10 -0
- package/src/components/ConnectingBranch/ConnectingBranch.tsx +36 -23
- package/src/components/ConnectingBranch/types.ts +2 -0
- package/src/components/Select/Select.stories.tsx +34 -10
- package/src/components/Select/Select.tsx +1 -0
- package/src/components/Select/components/Dropdown.tsx +24 -21
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +19 -14
- package/src/components/TableTree/Components/AddModule/AddModule.scss +73 -1
- package/src/components/TableTree/Components/AddModule/AddModule.tsx +26 -2
- package/src/components/TableTree/Components/TableCell.tsx +121 -73
- package/src/components/TableTree/TableTree.scss +13 -2
- 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
|
-
|
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
|
-
|
25
|
-
|
26
|
-
<div className="ff-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
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
|
-
|
133
|
-
|
134
|
-
<div className="ff-
|
135
|
-
|
136
|
-
|
137
|
-
|
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
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
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
|
-
|
32
|
-
return
|
33
|
-
}
|
34
|
-
|
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
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
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
|
-
<
|
192
|
-
|
193
|
-
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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
|
);
|
@@ -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 {
|
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
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
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 -
|
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
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
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
|
-
|
56
|
+
</div>
|
33
57
|
</div>
|
34
58
|
<small>{error}</small>
|
35
59
|
</>
|