pixel-react 1.6.8 → 1.7.0

package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx

@@ -10,14 +10,18 @@ import Typography from '../../../Typography';
 import { ffid } from '../../../../utils/ffID/ffid';
 import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
+import Icon from '../../../Icon';
+import IconButton from '../../../IconButton';
 
 type OptionType = {
-  label: ReactNode;
-  value: string;
+  label?: ReactNode;
+  value?: string;
   displayName?: string;
+  videoSrc?: string;
   description?: string;
   nlpType?: string;
   path?: string;
+  platform?: string;
   stepInputs?: { type?: string; name?: string }[];
   returnType?: string;
 };
@@ -29,9 +33,11 @@ const NlpDropdown = ({
   options = [],
   optionZIndex = 100,
   inputRef,
+  webServiceClick = () => {},
+  containerWidth,
 }: NlpDropDownListProps) => {
-  //   const [nlpData, setNlpData] = useState<OptionType | null>(null); need to add setNlpData
-  const [nlpData] = useState<OptionType | null>(null);
+  const [nlpData, setNlpData] = useState<OptionType | null>(null);
+  const [showNlpDetails, setShowNlpDetails] = useState('');
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
   const optionsWrapperRef = useRef<HTMLDivElement>(null);
@@ -69,107 +75,241 @@ const NlpDropdown = ({
     };
   };
 
+  const getNLPType = (nlpType: string): JSX.Element => {
+    let label = '';
+    let className = '';
+
+    if (nlpType === 'NLP') {
+      label = 'NLP';
+      className = 'ff-nlp'; // red color
+    } else if (nlpType === 'STEP_GROUP') {
+      label = 'SG';
+      className = 'ff-sg'; // green color
+    } else if (nlpType === 'PROGRAM_ELEMENTS') {
+      label = 'PE';
+      className = 'ff-pe'; // yellow color
+    } else {
+      label = '--';
+      className = 'nlp-default'; // default black color
+    }
+
+    return <span className={className}>{label}</span>;
+  };
+
+  const getPlatformIcon = (platform: string): JSX.Element | string => {
+    if (platform === 'Web') {
+      return <Icon name="web_icon" height={8} width={8} />;
+    } else if (platform === 'android') {
+      return <Icon name="android_icon" height={8} width={8} />;
+    } else if (platform === 'ios') {
+      return (
+        <Icon
+          name="ios_icon"
+          height={8}
+          width={8}
+          color="var(--dotted-border-color)"
+        />
+      );
+    } else if (platform === 'Generic') {
+      return <b className="platform-ios">Generic</b>;
+    } else {
+      return '--';
+    }
+  };
+
   return (
     <div className="ff-nlp-dropdown-wrapper">
       <div
         ref={optionsWrapperRef}
-        style={updateDropdownPosition()}
+        style={{ ...updateDropdownPosition(), width: containerWidth }}
         className={classNames('ff-nlp-options-wrapper', currentTheme)}
+        onMouseLeave={() => setShowNlpDetails('hide')}
       >
-        <div className="ff-nlp-options-wrapper1">
-          {!checkEmpty(options) ? (
-            options.map((option) => (
-              //   <div key={ffid()} onMouseEnter={() => setNlpData(option)}> need to add onMouseEnter
-              <div key={ffid()}>
-                <Typography
-                  as="div"
-                  lineHeight="30px"
-                  className={classNames('ff-nlp-option', currentTheme)}
-                  color="var(--ff-nlp-text-color)"
-                  onClick={() => onSelectOptionSelector(option)}
+        <div className="ff-nlp-options-wrapper-main">
+          <div className="ff-nlp-options-primary-wrapper">
+            {!checkEmpty(options) ? (
+              options.map((option) => (
+                <div
+                  key={ffid()}
+                  onMouseEnter={() => {
+                    setNlpData(option as OptionType);
+                    setShowNlpDetails('show');
+                  }}
                 >
-                  <span className="mr-2 fontPoppinsRegularMd">
-                    {option?.nlpType === 'NLP' ? (
-                      <b className="nlp-type-NLP">NLP</b>
-                    ) : option?.nlpType === 'STEP_GROUP' ? (
-                      <b className="nlp-type-step-group">SG</b>
-                    ) : option?.nlpType === 'PROGRAM_ELEMENTS' ? (
-                      <b className="nlp-type-program-elements">PE</b>
-                    ) : (
-                      '--'
-                    )}
-                  </span>
-                  <span className="mr-2 fontPoppinsRegularMd">
-                    {option?.platform === 'web' ? (
-                      <b className="platform-web">Web</b>
-                    ) : option?.platform === 'android' ? (
-                      <b className="platform-android">Android</b>
-                    ) : option?.platform === 'ios' ? (
-                      <b className="platform-ios">iOS</b>
-                    ) : option?.platform === 'Generic' ? (
-                      <b className="platform-ios">Generic</b>
-                    ) : (
-                      '--'
-                    )}
-                  </span>
-                  {option?.displayName}
-                </Typography>
-              </div>
-            ))
-          ) : (
+                  <Typography
+                    as="div"
+                    lineHeight="30px"
+                    fontSize={12}
+                    className={classNames('ff-nlp-option', currentTheme)}
+                    onClick={() => onSelectOptionSelector(option)}
+                  >
+                    <span>
+                      <Typography
+                        className="nlp-categories"
+                        fontWeight="regular"
+                        fontSize={8}
+                      >
+                        {getNLPType(option.nlpType)}
+                      </Typography>
+                    </span>
+
+                    <span>{getPlatformIcon(option.platform)}</span>
+                    {option?.displayName}
+                  </Typography>
+                </div>
+              ))
+            ) : (
+              <Typography
+                textAlign="center"
+                lineHeight="32px"
+                as="p"
+                color="var(--ff-nlp-text-color)"
+                className="ff-nlp-no-option"
+              >
+                No Results Found
+              </Typography>
+            )}
+          </div>
+          <div>
+            <div className="ff-nlp-web-service-div ">
+              <IconButton
+                iconName="plus_user_icon"
+                label="Web Service"
+                onClick={webServiceClick}
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          className={
+            showNlpDetails === 'show' ? 'ff-nlp-data-show' : 'ff-nlp-data-hide'
+          }
+        >
+          <div className="ff-nlp-data-side-menu">
+            {nlpData?.videoSrc && (
+              <Typography
+                className="nlp-details-header"
+                fontWeight="semi-bold"
+                fontSize={10}
+              >
+                Video
+                <div className="nlp-details ">
+                  <video
+                    src={nlpData.videoSrc}
+                    controls
+                    className="nlp-video-player"
+                    width="100%"
+                  >
+                    Your browser does not support the video tag.
+                  </video>
+                </div>
+              </Typography>
+            )}
+
             <Typography
-              textAlign="center"
-              lineHeight="32px"
-              as="p"
-              color="var(--ff-nlp-text-color)"
-              className="ff-nlp-no-option"
+              className="nlp-details-header"
+              fontWeight="semi-bold"
+              fontSize={10}
             >
-              No Results Found
+              NLP Details
+              <Typography
+                className="nlp-details"
+                fontWeight="regular"
+                fontSize={10}
+              >
+                {nlpData?.displayName || '--'}
+              </Typography>
             </Typography>
-          )}
-          <button>+ Web Services</button>
-        </div>
-        <div className="ff-nlp-data">
-          <div>
-            <div className="nlp-details-header mt-4">Name:</div>
-            <div className="nlp-details nlpdiv-check">
-              {nlpData?.displayName || '--'}
-            </div>
-            <div className="nlp-details-header mt-4">Description:</div>
-            <div className="nlp-details nlpdiv-check">
-              {nlpData?.description || '--'}
-            </div>
+
+            <Typography
+              className="nlp-details-header"
+              fontWeight="semi-bold"
+              fontSize={10}
+            >
+              Description
+              <Typography
+                className="nlp-details"
+                fontWeight="regular"
+                fontSize={10}
+              >
+                {nlpData?.description || '--'}
+              </Typography>
+            </Typography>
+
             {nlpData?.nlpType === 'STEP_GROUP' && (
               <>
-                <div className="nlp-details-header mt-4">Path:</div>
-                <div className="nlp-details nlpdiv-check">
-                  {nlpData?.path ? nlpData?.path.slice(6) : '--'}
-                </div>
+                <Typography
+                  className="nlp-details-header"
+                  fontWeight="semi-bold"
+                  fontSize={10}
+                >
+                  Path
+                  <Typography
+                    className="nlp-details"
+                    fontWeight="regular"
+                    fontSize={10}
+                  >
+                    {nlpData?.path ? nlpData?.path.slice(6) : '--'}
+                  </Typography>
+                </Typography>
               </>
             )}
-            <div className="nlp-details-header mt-4">Inputs:</div>
+            <Typography
+              className="nlp-details-header"
+              fontWeight="semi-bold"
+              fontSize={10}
+            >
+              Inputs
+            </Typography>
             {nlpData?.stepInputs?.length ? (
               nlpData.stepInputs.map((stepInput, index) => {
                 const stepInputType = stepInput.type
-                  ? stepInput.type.split('.').pop()
+                  ? stepInput?.type?.split('.')?.pop()
                   : '--';
                 return (
                   <div key={index}>
-                    <div className="nlp-details-header">Input{index + 1}:</div>
-                    <div className="nlp-details">type: {stepInputType}</div>
-                    <div className="nlp-details mb-4">
-                      name: {stepInput.name || '--'}
-                    </div>
+                    <Typography
+                      className="nlp-details-header"
+                      fontWeight="semi-bold"
+                      fontSize={10}
+                    >
+                      Input{index + 1}
+                      <Typography
+                        className="nlp-details"
+                        fontWeight="regular"
+                        fontSize={10}
+                      >
+                        type: {stepInputType}
+                      </Typography>
+                      <Typography
+                        className="nlp-details"
+                        fontWeight="regular"
+                        fontSize={10}
+                      >
+                        name: {stepInput.name || '--'}
+                      </Typography>
+                    </Typography>
                   </div>
                 );
               })
             ) : (
-              <div className="nlp-details mb-4">--</div>
+              <div className="nlp-details">--</div>
             )}
-            <div className="nlp-details-header">Output:</div>
-            <div className="nlp-details mb-4">
-              {nlpData?.returnType || '--'}
-            </div>
+
+            <Typography
+              className="nlp-details-header"
+              fontWeight="semi-bold"
+              fontSize={10}
+            >
+              Output
+              <Typography
+                className="nlp-details "
+                fontWeight="regular"
+                fontSize={10}
+              >
+                {nlpData?.returnType || '--'}
+              </Typography>
+            </Typography>
           </div>
         </div>
       </div>

package/src/components/NLPInput/sampleData.ts

@@ -0,0 +1,162 @@
+export const nlpList= 
+    [
+    {
+      desc: 'randomNumber',
+      displayName:
+        'PostgreSQL : Update value *setValues* into *tableName* table',
+      failMessage: 'randomNumber has failed',
+      isNonPE: false,
+      platform: 'Web',
+      name: 'randomNumber',
+      nlpName: 'randomNumber',
+      videoSrc: '',
+      nlpType: 'NLP',
+      packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
+      parentId: 'PKJ1017',
+      passMessage: 'randomNumber has passed',
+      programElementId: 'PRG_ELE1001',
+      projectId: 'PJT1001',
+      returnType: 'java.lang.Integer',
+      searchName: 'randomNumber',
+      stepInputs: [{}],
+      toolTip: 'Logics : randomNumber',
+      _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
+      _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
+    },
+    {
+      desc: 'randomNumber',
+      displayName: 'Wait for *element* until text contains *text*',
+      platform: 'android',
+
+      failMessage: 'randomNumber has failed',
+      isNonPE: false,
+      name: 'randomNumber',
+      nlpName: 'randomNumber',
+      nlpType: 'PROGRAM_ELEMENTS',
+      packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
+      parentId: 'PKJ1017',
+      passMessage: 'randomNumber has passed',
+      programElementId: 'PRG_ELE1001',
+      projectId: 'PJT1001',
+      returnType: 'java.lang.Integer',
+      searchName: 'randomNumber',
+      stepInputs: [{}],
+      toolTip: 'Logics : randomNumber',
+      _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
+      _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
+    },
+    {
+      desc: 'randomNumber',
+      platform: 'ios',
+
+      displayName:
+        'String : Verify if string *string1* is equal to string *string2*',
+      failMessage: 'randomNumber has failed',
+      isNonPE: false,
+      name: 'randomNumber',
+      nlpName: 'randomNumber',
+      nlpType: 'STEP_GROUP',
+      packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
+      parentId: 'PKJ1017',
+      passMessage: 'randomNumber has passed',
+      programElementId: 'PRG_ELE1001',
+      projectId: 'PJT1001',
+      returnType: 'java.lang.Integer',
+      searchName: 'randomNumber',
+      stepInputs: [{}],
+      toolTip: 'Logics : randomNumber',
+      _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
+      _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
+    },
+    {
+      desc: 'randomNumber',
+      displayName:
+        'Wait for page to load for maximum time limit of *time* second',
+      failMessage: 'randomNumber has failed',
+      isNonPE: false,
+      platform: 'android',
+
+      name: 'randomNumber',
+      nlpName: 'randomNumber',
+      nlpType: 'PROGRAM_ELEMENTS',
+      packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
+      parentId: 'PKJ1017',
+      passMessage: 'randomNumber has passed',
+      programElementId: 'PRG_ELE1001',
+      projectId: 'PJT1001',
+      returnType: 'java.lang.Integer',
+      searchName: 'randomNumber',
+      stepInputs: [
+        { name: 'Range Of The Number', type: 'java.lang.Integer' },
+      ],
+      toolTip: 'Logics : randomNumber',
+      _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
+      _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
+    },
+    {
+      description: '',
+      displayName:
+        'Excel : Get string cell data for given *uniqueData* and *header* for single row table',
+      failMessage: 'Open Browser is failed',
+      imported: false,
+      libraryId: 'LIB1002',
+      name: 'Open Browser',
+      nlpName: 'Open Browser',
+      nlpType: 'STEP_GROUP',
+      parentId: 'STP_GRP1001',
+      passMessage: 'Open Browser is passed',
+      path: '/Root/Open and Close Browser/Open Browser',
+      platform: 'Web',
+      projectId: 'PJT1001',
+      returnType: 'void',
+      searchName: 'Open Browser',
+      stepInputs: [],
+      toolTip: 'Open and Close Browser : Open Browser : Web',
+      _class: 'com.tyss.optimize.data.models.db.model.StepGroupNlp',
+      _id: 'SG_NLP1001',
+    },
+    {
+      desc: 'randomNumber',
+      displayName:
+        'PostgreSQL : Update value *setValues* into *tableName* table',
+      failMessage: 'randomNumber has failed',
+      isNonPE: false,
+      platform: 'Web',
+
+      name: 'randomNumber',
+      nlpName: 'randomNumber',
+      nlpType: 'PROGRAM_ELEMENTS',
+      packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
+      parentId: 'PKJ1017',
+      passMessage: 'randomNumber has passed',
+      programElementId: 'PRG_ELE1001',
+      projectId: 'PJT1001',
+      returnType: 'java.lang.Integer',
+      searchName: 'randomNumber',
+      stepInputs: [{}],
+      toolTip: 'Logics : randomNumber',
+      _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
+      _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
+    },
+    {
+      desc: 'randomNumber',
+      displayName: 'randomNumber',
+      failMessage: 'randomNumber has failed',
+      isNonPE: false,
+      name: 'randomNumber',
+      platform: 'Web',
+      nlpName: 'randomNumber',
+      nlpType: 'PROGRAM_ELEMENTS',
+      packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
+      parentId: 'PKJ1017',
+      passMessage: 'randomNumber has passed',
+      programElementId: 'PRG_ELE1001',
+      projectId: 'PJT1001',
+      returnType: 'java.lang.Integer',
+      searchName: 'randomNumber',
+      stepInputs: [{}],
+      toolTip: 'Logics : randomNumber',
+      _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
+      _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
+    }
+  ]

package/src/components/NLPInput/{type.tsx → types.tsx}

@@ -6,11 +6,18 @@ export interface SelectProps {
    */
   label?: string;
 
+  rightIcon?: string;
+
+  leftIcon?: string;
+
   /*
    * If true, the NLP select dropdown will have a label
    */
   showLabel?: boolean;
-
+  onHelpIconClick?: () => void;
+  webServiceClick?: () => void;
+  aiIconClick?: () => void;
+  rightIconColor: string;
   /*
    * Options for the NLP select dropdown
    */
@@ -19,12 +26,13 @@ export interface SelectProps {
   /*
    * Selected option for the NLP select dropdown
    */
-  selectedOption?: Option;
+  selectedOption?: NlpRenderOption;
+  containerWidth?:string | number,
 
   /*
    * onChange callback function for handling selected option changes
    */
-  onChange: (option: Option) => void;
+  onChange: (option: NlpRenderOption) => void;
 
   /*
    * If error is true, this message will be displayed
@@ -54,12 +62,15 @@ export interface SelectProps {
   /*
    * Provide boolean value to show border or not
    */
+
   showBorder?: boolean;
 
   /*
    * Provide the boolean value if the select component is required or not
    */
   required?: boolean;
+  value: string;
+  onSelect: (e: any) => void;
 }
 
 export interface DrowdownPosition {
@@ -84,8 +95,8 @@ export type SelectAction =
   | {
       type: 'BLUR_INPUT';
       payload: {
-        optionsList: Option[];
-        option: Option['projectId'];
+        optionsList: NlpRenderOption[];
+        option: NlpRenderOption['projectId'];
       };
     }
   | { type: 'MOUSE_ENTER' }
@@ -111,14 +122,15 @@ export type SelectAction =
       type: 'SHOW_ERROR';
       payload: {
         optionsList: any[];
-        option: Option['projectId'];
+        option: NlpRenderOption['projectId'];
       };
     };
 
-export interface Option {
-    displayName: string | ReactNode;
-    projectId: string;
-    nlpType: string;
-    platform:string;
+export interface NlpRenderOption {
+  displayName: string | ReactNode;
+  projectId: string;
+  nlpType: string;
+  platform: string;
   disabled?: boolean;
+  videoSrc?: string;
 }

package/src/components/PopUpModal/PopUpModal.stories.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import PopUpModal from './PopUpModal';
 import Button from '../Button';
+import Typography from '../Typography';
 
 const meta: Meta<typeof PopUpModal> = {
   title: 'Components/PopUpModal',
@@ -15,16 +16,17 @@ const meta: Meta<typeof PopUpModal> = {
 type Story = StoryObj<typeof PopUpModal>;
 
 const defaultArgs = {
-  iconName: "license_warning",
-  titleMessage: "Warning!",
-  subTitleMessage: "Unsaved Changes.",
-  modalMessage: "Your web service data will be lost. Are you sure you want to exit?",
-  footerMessage: "How do you want to proceed?",
-  firstButtonLabel: "Cancel",
-  secondButtonLabel: "Continue",
-  buttonVariant: "warning",
-  border: '1px solid var(--warning-modal-border-color)',
-  colorForTitleMessage: 'var(--status-button-bg-warning)'
+    iconName:"license_warning",
+    titleMessage:"Warning!",
+    subTitleMessage:"Unsaved Changes.",
+    modalMessage:"Your web service data will be lost. Are you sure you want to exit?",
+    firstButtonLabel:"Cancel",
+    secondButtonLabel:"Continue",
+    buttonVariant:"warning",
+    border:'1px solid var(--warning-modal-border-color)',
+    colorForTitleMessage: 'var(--status-button-bg-warning)',
+    popupWidth:'420',
+    footerContent:<Typography children='How do you want to proceed?' fontSize={16}/>
 }
 
 export const DefaultModal: Story = {
@@ -35,6 +37,8 @@ export const DefaultModal: Story = {
     iconName: 'license_warning',
     titleMessage: 'Warning!',
     subTitleMessage: 'Unsaved Changes.',
+    popupWidth: "420",
+    footerContent:<Typography children='How do you want to proceed?' fontSize={16}/>,
   },
 };
 
@@ -53,6 +57,7 @@ export const ControlledPopUp: Story = {
           isOpen={isOpen}
           onClose={() => setIsOpen(false)}
           onContinue={handleContinue}
+          footerContent={<Typography children='How do you want to proceed?' fontSize={16}/>}
         />
       </>
     );