pixel-react 1.6.9 → 1.7.0

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

@@ -1,180 +1,320 @@
-import { ReactNode, useContext, useRef, useState } from 'react';
-import {
-  NlpDropDownListProps,
-  nlpDropdownDefaultCSSData,
-} from './NlpDropDownType';
-import useClickOutside from '../../../../hooks/useClickOutside';
-import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
-import './NlpDropdown.scss';
-import Typography from '../../../Typography';
-import { ffid } from '../../../../utils/ffID/ffid';
-import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
-import classNames from 'classnames';
-
-type OptionType = {
-  label: ReactNode;
-  value: string;
-  displayName?: string;
-  description?: string;
-  nlpType?: string;
-  path?: string;
-  stepInputs?: { type?: string; name?: string }[];
-  returnType?: string;
-};
-
-const NlpDropdown = ({
-  onSelectBlur,
-  onSelectOptionSelector,
-  dropdownPosition,
-  options = [],
-  optionZIndex = 100,
-  inputRef,
-}: NlpDropDownListProps) => {
-  //   const [nlpData, setNlpData] = useState<OptionType | null>(null); need to add setNlpData
-  const [nlpData] = useState<OptionType | null>(null);
-  const themeContext = useContext(ThemeContext);
-  const currentTheme = themeContext?.currentTheme;
-  const optionsWrapperRef = useRef<HTMLDivElement>(null);
-  useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef]);
-
-  const { positionX, positionY, width, fromBottom } = dropdownPosition;
-  const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
-    nlpDropdownDefaultCSSData;
-
-  const updateDropdownPosition = () => {
-    let dropdownContainerHeight;
-
-    if (checkEmpty(options)) {
-      dropdownContainerHeight = optionHeight + 2 * dropDownWrapperPadding;
-    } else if (options.length > 5) {
-      dropdownContainerHeight = 5 * optionHeight + 2 * dropDownWrapperPadding;
-    } else {
-      dropdownContainerHeight =
-        options.length * optionHeight + 2 * dropDownWrapperPadding;
-    }
-
-    if (fromBottom > dropdownContainerHeight + margin) {
-      return {
-        left: positionX,
-        top: positionY,
-        width: width,
-        zIndex: optionZIndex,
-      };
-    }
-    return {
-      zIndex: optionZIndex,
-      left: positionX,
-      width: width,
-      top: positionY - selectInputHeight - dropdownContainerHeight - margin,
-    };
-  };
-
-  return (
-    <div className="ff-nlp-dropdown-wrapper">
-      <div
-        ref={optionsWrapperRef}
-        style={updateDropdownPosition()}
-        className={classNames('ff-nlp-options-wrapper', currentTheme)}
-      >
-        <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)}
-                >
-                  <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
-              textAlign="center"
-              lineHeight="32px"
-              as="p"
-              color="var(--ff-nlp-text-color)"
-              className="ff-nlp-no-option"
-            >
-              No Results Found
-            </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>
-            {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>
-              </>
-            )}
-            <div className="nlp-details-header mt-4">Inputs:</div>
-            {nlpData?.stepInputs?.length ? (
-              nlpData.stepInputs.map((stepInput, index) => {
-                const stepInputType = stepInput.type
-                  ? 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>
-                  </div>
-                );
-              })
-            ) : (
-              <div className="nlp-details mb-4">--</div>
-            )}
-            <div className="nlp-details-header">Output:</div>
-            <div className="nlp-details mb-4">
-              {nlpData?.returnType || '--'}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default NlpDropdown;
+import { ReactNode, useContext, useRef, useState } from 'react';
+import {
+  NlpDropDownListProps,
+  nlpDropdownDefaultCSSData,
+} from './NlpDropDownType';
+import useClickOutside from '../../../../hooks/useClickOutside';
+import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
+import './NlpDropdown.scss';
+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;
+  displayName?: string;
+  videoSrc?: string;
+  description?: string;
+  nlpType?: string;
+  path?: string;
+  platform?: string;
+  stepInputs?: { type?: string; name?: string }[];
+  returnType?: string;
+};
+
+const NlpDropdown = ({
+  onSelectBlur,
+  onSelectOptionSelector,
+  dropdownPosition,
+  options = [],
+  optionZIndex = 100,
+  inputRef,
+  webServiceClick = () => {},
+  containerWidth,
+}: NlpDropDownListProps) => {
+  const [nlpData, setNlpData] = useState<OptionType | null>(null);
+  const [showNlpDetails, setShowNlpDetails] = useState('');
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
+  const optionsWrapperRef = useRef<HTMLDivElement>(null);
+  useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef]);
+
+  const { positionX, positionY, width, fromBottom } = dropdownPosition;
+  const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
+    nlpDropdownDefaultCSSData;
+
+  const updateDropdownPosition = () => {
+    let dropdownContainerHeight;
+
+    if (checkEmpty(options)) {
+      dropdownContainerHeight = optionHeight + 2 * dropDownWrapperPadding;
+    } else if (options.length > 5) {
+      dropdownContainerHeight = 5 * optionHeight + 2 * dropDownWrapperPadding;
+    } else {
+      dropdownContainerHeight =
+        options.length * optionHeight + 2 * dropDownWrapperPadding;
+    }
+
+    if (fromBottom > dropdownContainerHeight + margin) {
+      return {
+        left: positionX,
+        top: positionY,
+        width: width,
+        zIndex: optionZIndex,
+      };
+    }
+    return {
+      zIndex: optionZIndex,
+      left: positionX,
+      width: width,
+      top: positionY - selectInputHeight - dropdownContainerHeight - margin,
+    };
+  };
+
+  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(), width: containerWidth }}
+        className={classNames('ff-nlp-options-wrapper', currentTheme)}
+        onMouseLeave={() => setShowNlpDetails('hide')}
+      >
+        <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');
+                  }}
+                >
+                  <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
+              className="nlp-details-header"
+              fontWeight="semi-bold"
+              fontSize={10}
+            >
+              NLP Details
+              <Typography
+                className="nlp-details"
+                fontWeight="regular"
+                fontSize={10}
+              >
+                {nlpData?.displayName || '--'}
+              </Typography>
+            </Typography>
+
+            <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' && (
+              <>
+                <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>
+              </>
+            )}
+            <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()
+                  : '--';
+                return (
+                  <div key={index}>
+                    <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">--</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>
+    </div>
+  );
+};
+
+export default NlpDropdown;

package/src/components/NLPInput/index.ts

@@ -1 +1 @@
-export { default } from './NlpInput';
+export { default } from './NlpInput';

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',
+    }
+  ]