feat(PowerInput): show humanized variable label

packages/web/src/components/PowerInput/Suggestions.tsx

@@ -38,10 +38,10 @@ const Suggestions = (props: SuggestionsProps) => {
     onSuggestionClick = () => null,
   } = props;
   const [current, setCurrent] = React.useState<number | null>(0);
-  const [listLength, setListLength] = React.useState<number | undefined>(SHORT_LIST_LENGTH);
+  const [listLength, setListLength] = React.useState<number>(SHORT_LIST_LENGTH);
 
   const expandList = () => {
-    setListLength(undefined);
+    setListLength(Infinity);
   };
 
   const collapseList = () => {
@@ -72,7 +72,7 @@ const Suggestions = (props: SuggestionsProps) => {
                 primary={option.name}
               />
 
-              {option.output?.length && (
+              {!!option.output?.length && (
                 current === index ? <ExpandLess /> : <ExpandMore />
               )}
             </ListItemButton>
@@ -105,7 +105,7 @@ const Suggestions = (props: SuggestionsProps) => {
                 }
               </List>
 
-              {listLength && (
+              {option.output?.length > listLength && (
                 <Button
                   fullWidth
                   onClick={expandList}

packages/web/src/components/PowerInput/data.ts

@@ -38,7 +38,7 @@ export const processStepWithExecutions = (steps: IStep[]): any[] => {
   return steps.map((step: IStep, index: number) => ({
     id: step.id,
     // TODO: replace with step.name once introduced
-    name: `${index + 1}. ${step.appKey}`,
+    name: `${index + 1}. ${step.appKey?.charAt(0)?.toUpperCase() + step.appKey?.slice(1)}`,
     output: process(step.executionSteps?.[0]?.dataOut || {}, `step.${step.id}`),
   }));
 };

packages/web/src/components/PowerInput/index.tsx

@@ -72,11 +72,11 @@ const PowerInput = (props: PowerInputProps) => {
     (variable: Pick<VariableElement, "name" | "value">) => {
       if (target) {
         Transforms.select(editor, target);
-        insertVariable(editor, variable);
+        insertVariable(editor, variable, stepsWithVariables);
         setTarget(null);
       }
     },
-    [index, target]
+    [index, target, stepsWithVariables]
   );
 
   const onKeyDown = React.useCallback(
@@ -97,7 +97,7 @@ const PowerInput = (props: PowerInputProps) => {
           case 'Enter': {
             event.preventDefault();
             Transforms.select(editor, target);
-            insertVariable(editor, stepsWithVariables[0].output[index]);
+            insertVariable(editor, stepsWithVariables[0].output[index], stepsWithVariables);
             setTarget(null);
             break
           }
@@ -122,7 +122,7 @@ const PowerInput = (props: PowerInputProps) => {
       render={({ field: { value, onChange: controllerOnChange, onBlur: controllerOnBlur, } }) => (
         <Slate
           editor={editor}
-          value={deserialize(value)}
+          value={deserialize(value, stepsWithVariables)}
           onChange={value => {
             controllerOnChange(serialize(value));
             const { selection } = editor
@@ -195,7 +195,7 @@ const PowerInput = (props: PowerInputProps) => {
               <Popper
                 open={target !== null && search !== null}
                 anchorEl={editorRef.current}
-                style={{ width: editorRef.current?.clientWidth }}
+                style={{ width: editorRef.current?.clientWidth, zIndex: 1, }}
               >
                 <Suggestions
                   query={search}

packages/web/src/components/PowerInput/utils.ts

@@ -8,9 +8,26 @@ import type {
   VariableElement,
 } from './types';
 
-export const deserialize = (value: string): Descendant[] => {
+function getStepPosition(id: string, stepsWithVariables: Record<string, unknown>[]) {
-  const variableRegExp = /({{.*?}})/g;
+  const stepIndex = stepsWithVariables.findIndex((stepWithVariables) => {
+    return stepWithVariables.id === id;
+  });
 
+  return stepIndex + 1;
+}
+
+function humanizeVariableName(variableName: string, stepsWithVariables: Record<string, unknown>[]) {
+  const nameWithoutCurlies = variableName.replace(/{{|}}/g, '');
+  const stepId = nameWithoutCurlies.match(stepIdRegExp)?.[1] || '';
+  const stepPosition = getStepPosition(stepId, stepsWithVariables);
+  const humanizedVariableName = nameWithoutCurlies.replace(`step.${stepId}.`, `step${stepPosition}.`);
+
+  return humanizedVariableName;
+}
+
+const variableRegExp = /({{.*?}})/;
+const stepIdRegExp = /^step.([\da-zA-Z-]*)/;
+export const deserialize = (value: string, stepsWithVariables: any[]): Descendant[] => {
   if (!value) return [{
     type: 'paragraph',
     children: [{ text: '', }],
@@ -26,7 +43,8 @@ export const deserialize = (value: string): Descendant[] => {
           if (node.match(variableRegExp)) {
             return {
               type: 'variable',
-              name: node.replace(/{{|}}/g, ''),
+              name: humanizeVariableName(node, stepsWithVariables),
+              value: node,
               children: [{ text: '' }],
             };
           }
@@ -55,7 +73,7 @@ const serializeNode = (node: CustomElement | Descendant): string => {
   }
 
   if (node.type === 'variable') {
-    return `{{${node.name}}}`;
+    return node.value as string;
   }
 
   return node.children.map(n => serializeNode(n)).join('');
@@ -75,13 +93,14 @@ export const withVariables = (editor: CustomEditor) => {
   return editor;
 }
 
-export const insertVariable = (editor: CustomEditor, variableData: Pick<VariableElement, "name" | "value">) => {
+export const insertVariable = (editor: CustomEditor, variableData: Pick<VariableElement, "name" | "value">, stepsWithVariables: Record<string, unknown>[]) => {
   const variable: VariableElement = {
     type: 'variable',
-    name: variableData.name,
+    name: humanizeVariableName(variableData.name as string, stepsWithVariables),
-    value: variableData.value,
+    value: `{{${variableData.name}}}`,
     children: [{ text: '' }],
   };
+
   Transforms.insertNodes(editor, variable);
   Transforms.move(editor);
 }