pixel-react 1.10.10-2 → 1.10.10-3

package/src/components/Comment/Comments.stories.tsx

@@ -24,9 +24,83 @@ export const basicCommentWithOutData: Story = {
     return (
       <Comments
         onCommentsDataChange={handleCommentsDataChange}
-        commentsData={{
-          comments: [],
-        }}
+        commentsData={[
+          {
+              "createdBy": "USR33186",
+              "modifiedBy": "USR33186",
+              "createdByUname": "Manikantha Ambig",
+              "modifiedByUname": "Manikantha Ambig",
+              "createdOn": "10 Dec 2024 09:14 PM",
+              "modifiedOn": "10 Dec 2024 09:17 PM",
+              "id": "71d31324-bbc8-4c20-becc-524dc45675a5",
+              "name": "Manikantha Ambig",
+              "emailId": [
+                  "manikanth.n@fireflink.com",
+                  "manikantha.a@fireflink.com"
+              ],
+              "description": "@Manikantha Ambig  post the comment",
+              "commentParentId": "",
+              "comments": []
+          },
+          {
+              "createdBy": "USR33186",
+              "modifiedBy": "USR33186",
+              "createdByUname": "Manikantha Ambig",
+              "modifiedByUname": "Manikantha Ambig",
+              "createdOn": "28 Nov 2024 01:55 AM",
+              "modifiedOn": "28 Nov 2024 01:55 AM",
+              "id": "99cf3ea2-f1af-4f63-b709-4664bdcdf1ff",
+              "name": "Manikantha Ambig",
+              "emailId": [],
+              "description": "eferfv3etgrtg",
+              "commentParentId": "",
+              "comments": [
+                  {
+                      "createdBy": "USR33186",
+                      "modifiedBy": "USR33186",
+                      "createdByUname": "Manikantha Ambig",
+                      "modifiedByUname": "Manikantha Ambig",
+                      "createdOn": "28 Nov 2024 01:56 AM",
+                      "modifiedOn": "28 Nov 2024 01:56 AM",
+                      "id": "fc5f7bb8-7a0b-4a58-b943-f7fbe80d39b0",
+                      "name": "Manikantha Ambig",
+                      "emailId": [],
+                      "description": "3fr345f45f",
+                      "commentParentId": "99cf3ea2-f1af-4f63-b709-4664bdcdf1ff",
+                      "comments": []
+                  }
+              ]
+          },
+          {
+              "createdBy": "USR33186",
+              "modifiedBy": "USR33186",
+              "createdByUname": "Manikantha Ambig",
+              "modifiedByUname": "Manikantha Ambig",
+              "createdOn": "13 Nov 2024 07:03 PM",
+              "modifiedOn": "13 Nov 2024 07:03 PM",
+              "id": "030dcb26-a8ba-4f4d-8d3f-8b06b75423b1",
+              "name": "Manikantha Ambig",
+              "emailId": [],
+              "description": "wefwrfrwfr",
+              "commentParentId": "",
+              "comments": [
+                  {
+                      "createdBy": "USR33186",
+                      "modifiedBy": "USR33186",
+                      "createdByUname": "Manikantha Ambig",
+                      "modifiedByUname": "Manikantha Ambig",
+                      "createdOn": "13 Nov 2024 07:05 PM",
+                      "modifiedOn": "13 Nov 2024 07:05 PM",
+                      "id": "a66d24d5-b359-4255-8ac3-364f3da90f2c",
+                      "name": "Manikantha Ambig",
+                      "emailId": [],
+                      "description": "test",
+                      "commentParentId": "030dcb26-a8ba-4f4d-8d3f-8b06b75423b1",
+                      "comments": []
+                  }
+              ]
+          }
+      ]}
         handleAddComment={() => {}}
         handleEditComment={() => {}}
         handleDeleteComment={() => {}}

package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx

@@ -16,24 +16,29 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
   curveHeights,
   itemRefs,
   datasetRef,
+  isReadOnlyMode,
 }) => {
   return (
     <>
       {parentNodeData?.machineInstances?.length === 0 ? (
         <>
-          <div className="ff-selectedMachines-connecting-line">
-            <div className="ff-line">
-              <div className="ff-left-icon"></div>
-              <div className="ff-right-icon"></div>
-            </div>
-          </div>
-          <div className="ff-machine-instance ff-machine-env-button">
-            {getChildNodeComponent({
-              isButton: true,
-              parentNodeData,
-              parentNodeIndex,
-            })}
-          </div>
+          {!isReadOnlyMode && (
+            <>
+              <div className="ff-selectedMachines-connecting-line">
+                <div className="ff-line">
+                  <div className="ff-left-icon"></div>
+                  <div className="ff-right-icon"></div>
+                </div>
+              </div>
+              <div className="ff-machine-instance ff-machine-env-button">
+                {getChildNodeComponent({
+                  isButton: true,
+                  parentNodeData,
+                  parentNodeIndex,
+                })}
+              </div>
+            </>
+          )}
         </>
       ) : (
         parentNodeData?.machineInstances?.map(
@@ -129,21 +134,25 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
                 {childNodeIndex ===
                   parentNodeData.machineInstances.length - 1 && (
                   <>
-                    <div className="ff-selectedMachines-connecting-line ff-second-line">
-                      <div className="ff-line">
-                        <div className="ff-left-icon"></div>
-                        <div className="ff-right-icon"></div>
-                      </div>
-                    </div>
+                    {!isReadOnlyMode && (
+                      <>
+                        <div className="ff-selectedMachines-connecting-line ff-second-line">
+                          <div className="ff-line">
+                            <div className="ff-left-icon"></div>
+                            <div className="ff-right-icon"></div>
+                          </div>
+                        </div>
 
-                    <div className="ff-machine-instance ff-machine-env-button">
-                      {getChildNodeComponent({
-                        isButton: true,
-                        parentNodeData,
-                        parentNodeIndex,
-                        childNodeIndex: childNodeIndex + 1,
-                      })}
-                    </div>
+                        <div className="ff-machine-instance ff-machine-env-button">
+                          {getChildNodeComponent({
+                            isButton: true,
+                            parentNodeData,
+                            parentNodeIndex,
+                            childNodeIndex: childNodeIndex + 1,
+                          })}
+                        </div>
+                      </>
+                    )}
                   </>
                 )}
               </div>

package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx

@@ -52,3 +52,13 @@ export const Default: Story = {
     getChildNodeComponent,
   },
 };
+
+export const readOnly: Story = {
+  args: {
+    data: machineData,
+    getParentNodeComponent,
+    getParentNodeComponentActionItems,
+    getChildNodeComponent,
+    isReadOnlyMode: true,
+  },
+};

package/src/components/ConnectingBranch/ConnectingBranch.tsx

@@ -17,21 +17,31 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
   getParentNodeComponent,
   getParentNodeComponentActionItems,
   childNodeCurveHeight = 1.28,
+  isReadOnlyMode = false,
 }) => {
   const datasetRef = useRef<HTMLDivElement | null>(null);
   const [datasetHeight, setDatasetHeight] = useState<number>(0);
   const [curveHeights, setCurveHeights] = useState<number[]>([]);
   const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
-
   const calculateVerticalLineHeight = (
     machineInstances: MachineInstance[],
     datasetHeight: number,
     gap: number
   ): number => {
-    const totalDataSets = machineInstances.reduce((acc, instance) => {
-      return acc + (instance.runLevelExecutionDataSets?.length || 0);
-    }, 0);
-    return totalDataSets * datasetHeight + totalDataSets * gap;
+    if (machineInstances.length === 1 && isReadOnlyMode) {
+      return 0;
+    }
+
+    const totalDataSets = machineInstances.reduce(
+      (acc, instance, index) =>
+        acc +
+        (index !== machineInstances.length - 1 || !isReadOnlyMode
+          ? instance.runLevelExecutionDataSets?.length || 0
+          : 0),
+      0
+    );
+
+    return totalDataSets * (datasetHeight + gap);
   };
 
   useEffect(() => {
@@ -165,6 +175,7 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
                       itemRefs={itemRefs}
                       datasetRef={datasetRef}
                       getChildNodeComponent={getChildNodeComponent}
+                      isReadOnlyMode={isReadOnlyMode}
                     />
                   </div>
                 </React.Fragment>
@@ -172,25 +183,27 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
             }
           )}
           {/* Select Machine Input */}
-          <div
-            className="ff-select-machine-input"
-            style={{
-              gridRow: `${currentRow}`,
-            }}
-          >
-            <ArcherElement
-              id="lastNode"
-              relations={[
-                {
-                  targetId: 'rootNode',
-                  targetAnchor: 'left',
-                  sourceAnchor: 'left',
-                },
-              ]}
+          {!isReadOnlyMode && (
+            <div
+              className="ff-select-machine-input"
+              style={{
+                gridRow: `${currentRow}`,
+              }}
             >
-              <div>{getParentNodeComponent({ isMultiSelect: true })}</div>
-            </ArcherElement>
-          </div>
+              <ArcherElement
+                id="lastNode"
+                relations={[
+                  {
+                    targetId: 'rootNode',
+                    targetAnchor: 'left',
+                    sourceAnchor: 'left',
+                  },
+                ]}
+              >
+                <div>{getParentNodeComponent({ isMultiSelect: true })}</div>
+              </ArcherElement>
+            </div>
+          )}
         </div>
       </ArcherContainer>
     </div>

package/src/components/ConnectingBranch/types.ts

@@ -19,6 +19,7 @@ export interface MachineInstancesProps {
   itemRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
   datasetRef: React.RefObject<HTMLDivElement>;
   getChildNodeComponent: FC<ConnectingNodeConfig>;
+  isReadOnlyMode?: boolean;
 }
 
 export type indexType = number;
@@ -48,4 +49,5 @@ export interface ConnectBranchProps {
     nodeArgs: ConnectingNodeConfig
   ) => ReactElement;
   getChildNodeComponent: (nodeArgs: ConnectingNodeConfig) => ReactElement;
+  isReadOnlyMode?: boolean;
 }

package/src/components/Select/Select.stories.tsx

@@ -423,38 +423,62 @@ export const SelectWithToolTip: Story = {
     const optionsList = [
       {
         label: 'fire-flink-LIC4900-onPrem',
-        value: 'fire-flink-LIC4900-onPrem',
+        value: {
+          clientId: 'fire-flink-LIC4900-onPrem',
+        },
+        name: 'fire-flink-LIC4900-onPrem',
       },
       {
         label: 'fire-flink-LIC3179',
-        value: 'fire-flink-LIC3179',
+        value: {
+          clientId: 'fire-flink-LIC4900-onPrem',
+        },
+        name: 'fire-flink-LIC3179',
       },
       {
         label: 'fire-flink-LIC4937',
-        value: 'fire-flink-LIC4937',
+        value: {
+          clientId: 'fire-flink-LIC4900-onPrem',
+        },
+        name: 'fire-flink-LIC4937',
       },
       {
         label: 'fire-flink-LIC5937',
-        value: 'fire-flink-LIC5937',
+        value: {
+          clientId: 'fire-flink-LIC4900-onPrem',
+        },
+        name: 'fire-flink-LIC5937',
       },
       {
         label: 'fire-flink-LIC6937',
-        value: 'fire-flink-LIC6937',
+        value: {
+          clientId: 'fire-flink-LIC4900-onPrem',
+        },
+        name: 'fire-flink-LIC6937',
       },
       {
         label: 'fire-flink-LIC7937',
-        value: 'fire-flink-LIC7937',
+        value: {
+          clientId: 'fire-flink-LIC4900-onPrem',
+        },
+        name: 'fire-flink-LIC7937',
       },
       {
         label: 'fire-flink-LIC4999',
-        value: 'fire-flink-LIC4999',
+        value: {
+          clientId: 'fire-flink-LIC4900-onPrem',
+        },
+        name: 'fire-flink-LIC4999',
         recurrence: true,
-      }, 
+      },
     ];
 
     const [selectedOption, setSelectedOption] = useState<Option>({
       label: '',
-      value: '',
+      value: {
+        clientId: '',
+      },
+      name: '',
     });
 
     const handleChange = (option: Option) => {
@@ -466,7 +490,6 @@ export const SelectWithToolTip: Story = {
         <h1>Test Mini Modal</h1>
       </>
     );
-
     return (
       <Select
         optionsList={optionsList}
@@ -475,6 +498,7 @@ export const SelectWithToolTip: Story = {
         label="Select Option"
         showToolTip={true}
         modalJSXProps={getMiniModalJSX()}
+        valueAccessor="name"
         recurrence
       />
     );

package/src/components/Select/Select.tsx

@@ -292,6 +292,7 @@ const Select: FC<SelectProps> = ({
                 onCancelModal={onCancelModal}
                 modalJSXProps={modalJSXProps}
                 recurrence={recurrence}
+                valueAccessor={valueAccessor}
               />,
               document.body
             )}

package/src/components/Select/components/Dropdown.tsx

@@ -6,7 +6,10 @@ import Typography from '../../Typography';
 import { ffid } from '../../../utils/ffID/ffid';
 import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
-import { getLabel } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
+import {
+  getLabel,
+  getValue,
+} from '../../../utils/getSelectOptionValue/getSelectOptionValue';
 import useClickOutside from '../../../hooks/useClickOutside';
 import Icon from '../../Icon';
 import Tooltip from '../../Tooltip';
@@ -133,26 +136,26 @@ const Dropdown: FC<DropdownProps> = ({
       >
         {!checkEmpty(options) ? (
           options.map((option) => (
-            <div
-              className={classNames(
-                'ff-select-dropdown-option',
-                {
-                  'ff-select-dropdown-option__selected':
-                    getLabel(option, valueAccessor) === selectedOption,
-                },
-                currentTheme
-              )}
-              key={ffid()}
-              onClick={() => {
-                if ('disable' in option && option['disable']) return;
-                onSelectOptionSelector(option);
-              }}
-            >
-              {getOptionLabel(
-                getLabel(option, labelAccessor),
-                'iconName' in option && option['iconName']
-              )}
-            </div>
+                <div
+                  className={classNames(
+                    'ff-select-dropdown-option',
+                    {
+                      'ff-select-dropdown-option__selected':
+                        getValue(option, valueAccessor) === selectedOption,
+                    },
+                    currentTheme
+                  )}
+                  key={ffid()}
+                  onClick={() => {
+                    if ('disable' in option && option['disable']) return;
+                    onSelectOptionSelector(option);
+                  }}
+                >
+                  {getOptionLabel(
+                    getLabel(option, labelAccessor),
+                    'iconName' in option && option['iconName']
+                  )}
+                </div>
           ))
         ) : (
           <Typography

package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx

@@ -31,8 +31,9 @@ const Branches = ({
   readOnly,
 }: BranchesProps) => {
   const evenRow = rowIndex % 2 === 0;
+  const getLastIndex = readOnly ? 0 : 1;
   const lastMachineInstance = checkEmpty(
-    machineInstances[machineColumnCount - 1]
+    machineInstances[machineColumnCount - getLastIndex]
   );
 
   const getBorderStyle = (
@@ -263,19 +264,23 @@ const Branches = ({
                           </Typography>
                         </div>
 
-                        <Icon
-                          name="plus_icon"
-                          className="ff-connecting-icon"
-                          onClick={() => onAddRunBrowser(machineInstanceId)}
-                          color="var(--ff-connecting-branch-color)"
-                          hoverEffect
-                        />
-                        <Typography
-                          className="ff-connecting-text"
-                          color="var(--ff-connecting-branch-color)"
-                        >
-                          Run
-                        </Typography>
+                        {!readOnly && (
+                          <>
+                            <Icon
+                              name="plus_icon"
+                              className="ff-connecting-icon"
+                              onClick={() => onAddRunBrowser(machineInstanceId)}
+                              color="var(--ff-connecting-branch-color)"
+                              hoverEffect
+                            />
+                            <Typography
+                              className="ff-connecting-text"
+                              color="var(--ff-connecting-branch-color)"
+                            >
+                              Run
+                            </Typography>
+                          </>
+                        )}
                       </>
                     )}
                     {!readOnly && (

package/src/components/TableTree/Components/AddModule/AddModule.scss

@@ -1,6 +1,78 @@
+@use '../../../../assets/styles/fonts';
+
 .add-module-container {
   display: flex;
+
   .icons {
     cursor: pointer;
   }
-}
+
+  .ff-add-module-input-container {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .ff-add-module-label-container {
+      display: flex;
+      gap: 2px;
+      position: absolute;
+      border: none;
+      outline: none;
+      line-height: 18px;
+      margin-top: 1px;
+      padding: 4px 6px;
+      transition: all 0.3s ease-in-out;
+
+      .ff-add-module-label {
+        color: var(--input-default-label-color);
+      }
+    }
+
+    .add-module-input {
+      height: 24px;
+      padding: 0px 6px;
+      width: 330px;
+      border: 0.5px solid var(--nlp-color);
+      border-radius: 4px;
+      outline: none;
+      line-height: 18px;
+      color: var(--nlp-color);
+    }
+
+    &:focus-within {
+      .ff-add-module-label-container {
+        top: -9px;
+        @extend .fontXs;
+        background-color: var(--input-label-bg-color);
+        line-height: 15px;
+        padding: 0px 2px;
+        margin-left: 10px;
+
+        .ff-add-module-label {
+          color: var(--nlp-color);
+        }
+      }
+    }
+
+    &--float {
+      .ff-add-module-label-container {
+        top: -9px;
+        @extend .fontXs;
+        background-color: var(--input-label-bg-color);
+        line-height: 15px;
+        padding: 0px 2px;
+        margin-left: 10px;
+
+        .ff-add-module-label {
+          color: var(--nlp-color);
+        }
+      }
+    }
+  }
+
+  .ff-module-icon-container {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+}

package/src/components/TableTree/Components/AddModule/AddModule.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import Icon from '../../../Icon';
 import './AddModule.scss';
+import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
+import classNames from 'classnames';
 
 export const AddModule = ({
   onConfirm,
@@ -15,21 +17,43 @@ export const AddModule = ({
 }) => {
   console.log('🚀 ~ value:', value);
   const [text, setText] = useState(value);
+
+   const isValueFilled = !checkEmpty(text);
   return (
     <>
-      <div className="add-module-container">
+      <div className={classNames("add-module-container")}>
+        <div className={classNames("ff-add-module-input-container",
+        {
+          'ff-add-module-input-container--float': isValueFilled,
+        }
+      )}>
+          <label className='ff-add-module-label-container' htmlFor='add-module-input'>
+            <span className={classNames('ff-add-module-label',{
+              'ff-input-label--no-hover': !!text,
+            })}>Edit Script</span>
+          </label>
         <input
+        name='add-module-input'
           type="text"
           className="add-module-input"
           onChange={(e) => setText(e.target.value)}
           value={text}
         />
+        </div>
+        <div className="ff-module-icon-container">
         <Icon
           className="icons"
           name="update_icon"
           onClick={() => onConfirm && onConfirm(text)}
+          color='var(--label-edit-confirm-icon)'
+          height={18}
+          width={18}
+        />
+        <Icon className="icons" name="close" onClick={onCancel} color='var(--label-edit-cancel-icon)' 
+        height={14}
+        width={14}
         />
-        <Icon className="icons" name="close" onClick={onCancel} />
+        </div>
       </div>
       <small>{error}</small>
     </>