pixel-react 1.10.10-2 → 1.10.10-4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.10.10-2",
+  "version": "1.10.10-4",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/ComponentProps/TreeNodeProps.ts

@@ -31,4 +31,7 @@ export type TreeNodeProps = {
   expandable?: boolean;
   sourceId?: string;
   isNewNode?: boolean;
+  entityType?: string;
+  type?: string;
+  label?: string;
 };

package/src/assets/icons/spinner.svg

@@ -0,0 +1,42 @@
+<svg width="12" height="12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .spinner_DupU {
+      animation: spinner_sM3D 1.2s infinite;
+      fill: #71347b;
+    }
+    .spinner_GWtZ { animation-delay: .1s; }
+    .spinner_dwN6 { animation-delay: .2s; }
+    .spinner_46QP { animation-delay: .3s; }
+    .spinner_PD82 { animation-delay: .4s; }
+    .spinner_eUgh { animation-delay: .5s; }
+    .spinner_eUaP { animation-delay: .6s; }
+    .spinner_j38H { animation-delay: .7s; }
+    .spinner_tVmX { animation-delay: .8s; }
+    .spinner_DQhX { animation-delay: .9s; }
+    .spinner_GIL4 { animation-delay: 1s; }
+    .spinner_n0Yb { animation-delay: 1.1s; }
+
+    @keyframes spinner_sM3D {
+      0%, 50% {
+        animation-timing-function: cubic-bezier(0, 1, 0, 1);
+        r: 0;
+      }
+      10% {
+        animation-timing-function: cubic-bezier(.53, 0, .61, .73);
+        r: 2px;
+      }
+    }
+  </style>
+  <circle class="spinner_DupU" cx="12" cy="3" r="0" />
+  <circle class="spinner_DupU spinner_GWtZ" cx="16.50" cy="4.21" r="0" />
+  <circle class="spinner_DupU spinner_n0Yb" cx="7.50" cy="4.21" r="0" />
+  <circle class="spinner_DupU spinner_dwN6" cx="19.79" cy="7.50" r="0" />
+  <circle class="spinner_DupU spinner_GIL4" cx="4.21" cy="7.50" r="0" />
+  <circle class="spinner_DupU spinner_46QP" cx="21.00" cy="12.00" r="0" />
+  <circle class="spinner_DupU spinner_DQhX" cx="3.00" cy="12.00" r="0" />
+  <circle class="spinner_DupU spinner_PD82" cx="19.79" cy="16.50" r="0" />
+  <circle class="spinner_DupU spinner_tVmX" cx="4.21" cy="16.50" r="0" />
+  <circle class="spinner_DupU spinner_eUgh" cx="16.50" cy="19.79" r="0" />
+  <circle class="spinner_DupU spinner_j38H" cx="7.50" cy="19.79" r="0" />
+  <circle class="spinner_DupU spinner_eUaP" cx="12" cy="21" r="0" />
+</svg>

package/src/components/AppHeader/AppHeader.scss

@@ -160,6 +160,7 @@
       }
       .more-menu {
         width: 40px;
+        margin-left: 8px;
         display: flex;
         justify-content: center;
         .ff-app-header-more-icon {
@@ -171,6 +172,11 @@
           }
         }
       }
+      .more-menu .ff-menuicon-container {
+        width: 40px !important;
+        height: 32px !important;
+        border-radius: 16px !important;
+      }
     }
     .ff-app-header-left-content,
     .ff-app-header-right-content {
@@ -216,4 +222,4 @@
     max-height: 0;
     opacity: 0;
   }
-}
+}

package/src/components/AppHeader/AppHeader.stories.tsx

@@ -528,6 +528,7 @@ export const Controlled: Story = {
         <div>
           <AppHeader
             width='1120px'
+            borderRadius='8px'
             logoIconName="fireflink_icon"
             leftContent={headerRightSideContent}
             rightContent={headerRightSideContent}

package/src/components/AppHeader/AppHeader.tsx

@@ -12,6 +12,7 @@ import React, { useRef } from 'react';
 const AppHeader: React.FC<AppHeaderProps> = ({
   logoIconName = 'fireflink_icon',
   width,
+  borderRadius,
   leftContent,
   rightContent,
   projectsList,
@@ -31,7 +32,13 @@ const AppHeader: React.FC<AppHeaderProps> = ({
   const hiddenMenuref = useRef<HTMLDivElement>(null);
   return (
     <div className="ff-app-header-main">
-      <div className="ff-app-header">
+      <div
+        className="ff-app-header"
+        style={{
+          borderStartStartRadius: borderRadius,
+          borderStartEndRadius: borderRadius,
+        }}
+      >
         <div className="ff-app-header-left-container">
           <div className="ff-app-header-logo-icon">
             <Icon color="" name={logoIconName} height={24} width={21} />

package/src/components/AppHeader/types.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { optionsType } from '../AllProjectsDropdown/types';
 export interface AppHeaderProps {
   width?: string;
+  borderRadius?:string;
   logoIconName: string;
   leftContent?: ReactNode;
   rightContent?: ReactNode;

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: 430px;
+      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;
+  }
+}