pixel-react-excel-sheet 1.0.20 → 1.0.22

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

@@ -7,57 +7,51 @@
   bottom: $bottom;
   left: $left;
 }
-
+.ff-nlp-option {
+  color: var(--nlp-option-color);
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
 .ff-nlp-dropdown-wrapper {
   .ff-nlp-options-wrapper {
-    max-height: 160px;
+    max-height: 256px;
     z-index: 100;
     position: absolute;
-    min-width: 100px;
-    border: 1px solid var(--ff-select-option-border-color);
+    border: 1px solid var(--nlp-border-color);
     box-sizing: border-box;
     margin-top: 4px;
     border-radius: 4px;
-    background-color: var(--ff-select-background-color);
-    box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
+    background-color: var(--primary-icon-color);
     overflow: hidden auto;
     display: flex;
     justify-content: space-between;
+    overflow: hidden;
 
-    .ff-nlp-options-wrapper1 {
-      max-height: 160px;
+    .ff-nlp-options-primary-wrapper {
+      max-height: 240px;
       z-index: 100;
-      min-width: auto;
+      min-width: 290px;
       box-sizing: border-box;
+      overflow: scroll;
+      scrollbar-width: none;
+      flex-grow: 1;
     }
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 12px;
-
-      &-thumb {
-        background-color: var(--ff-select-scroll-thumb-color);
-        border-radius: 4px;
-      }
-
-      &-track {
-        background-color: transparent;
-        border-radius: 4px;
-      }
+    .ff-nlp-options-primary-wrapper::-webkit-scrollbar {
+      display: none;
     }
 
     .ff-nlp-option {
-      width: calc(100% - 18px);
+      width: calc(100% - 10px);
       border: 1px solid transparent;
-      border-radius: 4px;
-      padding: 0px 8px;
+      padding: 0 4px;
       overflow: hidden;
       white-space: nowrap;
+      height: 32px;
       text-overflow: ellipsis;
       cursor: pointer;
-
       &:hover {
-        border-color: var(--ff-select-background-color);
-        background-color: var(--ff-select-option-hover-color);
+        background-color: var(--nlp-hover-color);
       }
     }
 
@@ -65,19 +59,76 @@
       width: calc(100% - 16px);
       margin: 0;
       overflow: hidden;
-      padding: 0px 8px;
+      padding: 0 8px;
       white-space: nowrap;
       text-overflow: ellipsis;
       cursor: not-allowed;
     }
   }
-  .ff-nlp-data {
-    width: 200px;
-    height: 134px;
-
+  .ff-nlp-data-show {
+    width: 380px;
+    height: 235px;
     border: 1px solid transparent;
-    border-radius: 5px;
-    box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
     overflow: scroll;
+    scrollbar-width: none;
+    padding: 8px;
+    border: 1px solid var(--nlp-border-color);
+    position: relative;
+    border-radius: 4px;
+  }
+  .ff-nlp-data-hide {
+    display: none;
+  }
+  .nlp-categories {
+    padding: 0px 2px;
+    gap: 10px;
+    border-radius: 2px;
+    background: var(--nlp-background-color);
+    color: var(--nlp-color);
+  }
+
+  .ff-nlp-data-side-menu {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    color: var(--nlp-option-color);
+  }
+  .ff-nlp-data-show::-webkit-scrollbar {
+    display: none;
   }
+
+  .nlp-details-header {
+    color: var(--status-skipped-text-color);
+    display: flex;
+    flex-direction: column;
+  }
+  .nlp-details {
+    color: var(--status-skipped-text-color);
+  }
+  .ff-nlp-options-wrapper-main {
+    display: flex;
+    flex-direction: column;
+    width: 302px;
+    justify-content: space-between;
+    flex-grow: 1;
+  }
+}
+.ff-nlp {
+  color: var(--nlp-color);
+}
+
+.ff-sg {
+  color: var(--nlp-step-group-color);
+  background-color: var(--nlp-step-group-background);
+}
+
+.ff-pe {
+  color: var(--nlp-pe-color);
+  background-color: var(--nlp-pe-background);
+}
+
+.ff-nlp-web-service-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

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