PLU-343 [FIND-SINGLE-ROW-2]: only show tile row id in update row variables (#953)

### Problem

Show all variables in Row ID input in Update single row is confusing to users.

### Solution

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/ycT2Xb5nBEjN2kf2gy95/8fd5431e-dc5d-467c-9057-d5a0f93669e7.png)

Filter only Row IDs to show as variables
- Added a new variable type `tile_row_id` to the `TDataOutMetadatumType` enum
- Set the type for `rowId` in the Find Single Row, Update Single Row and Create Row actions
- Added `variableTypes` constraint to the Update Row action to accept `tile_row_id` variables

### How to test?
1. Create a workflow with a "Find Single Row" action
2. Add an "Update Row" action after it
3. Verify that only the Row ID output is shown in the variable list

Author: pregnantboy

packages/backend/src/apps/tiles/actions/create-row/get-data-out-metadata.ts

@@ -18,6 +18,8 @@ async function getDataOutMetadata(
   const metadata: IDataOutMetadata = {
     rowId: {
       label: 'Row ID',
+      type: 'tile_row_id',
+      order: 0,
     },
   }
   const rowData = (dataOut as CreateRowOutput).row

packages/backend/src/apps/tiles/actions/find-single-row/get-data-out-metadata.ts

@@ -18,6 +18,7 @@ async function getDataOutMetadata(
   const metadata: IDataOutMetadata = {
     rowId: {
       label: 'Row ID',
+      type: 'tile_row_id',
       order: 2,
     },
     rowsFound: {

packages/backend/src/apps/tiles/actions/update-row/get-data-out-metadata.ts

@@ -18,6 +18,12 @@ async function getDataOutMetadata(
   const metadata: IDataOutMetadata = {
     rowId: {
       label: 'Row ID',
+      type: 'tile_row_id',
+      order: 0,
+    },
+    updated: {
+      label: 'Updated?',
+      order: 1,
     },
   }
   const rowData = (dataOut as UpdateRowOutput).row

packages/backend/src/apps/tiles/actions/update-row/index.ts

@@ -48,6 +48,7 @@ const action: IRawAction = {
         fieldKey: 'tableId',
         op: 'is_empty',
       },
+      variableTypes: ['tile_row_id'],
     },
     {
       label: 'Row data',

packages/frontend/src/components/InputCreator/index.tsx

@@ -136,6 +136,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
           isSingleLine={parentType === 'multicol'}
           variablesEnabled
           tooltipText={tooltipText}
+          variableTypes={schema.variableTypes}
         />
       )
     }

packages/frontend/src/components/RichTextEditor/index.tsx

@@ -1,5 +1,7 @@
 import './RichTextEditor.scss'
 
+import { TDataOutMetadatumType } from '@plumber/types'
+
 import { useCallback, useContext, useEffect, useMemo } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
 import {
@@ -83,6 +85,7 @@ interface EditorProps {
   variablesEnabled?: boolean
   isRich?: boolean
   isSingleLine?: boolean
+  variableTypes?: TDataOutMetadatumType[]
 }
 const Editor = ({
   onChange,
@@ -92,6 +95,7 @@ const Editor = ({
   variablesEnabled,
   isRich,
   isSingleLine,
+  variableTypes,
 }: EditorProps) => {
   const { priorExecutionSteps } = useContext(StepExecutionsContext)
 
@@ -100,12 +104,16 @@ const Editor = ({
       extractVariables(priorExecutionSteps),
       (variable) => {
         const variableType = variable.type ?? 'text'
-        return VISIBLE_VARIABLE_TYPES.includes(variableType)
+        if (variableTypes) {
+          return variableTypes.includes(variableType)
+        } else {
+          return VISIBLE_VARIABLE_TYPES.includes(variableType)
+        }
       },
     )
     const info = genVariableInfoMap(stepsWithVars)
     return [stepsWithVars, info]
-  }, [priorExecutionSteps])
+  }, [priorExecutionSteps, variableTypes])
 
   const extensions: Array<any> = [
     Placeholder.configure({
@@ -264,6 +272,7 @@ interface RichTextEditorProps {
   isRich?: boolean
   isSingleLine?: boolean
   tooltipText?: string
+  variableTypes?: TDataOutMetadatumType[]
 }
 const RichTextEditor = ({
   required,
@@ -277,6 +286,7 @@ const RichTextEditor = ({
   isRich,
   isSingleLine,
   tooltipText,
+  variableTypes,
 }: RichTextEditorProps) => {
   const { control } = useFormContext()
 
@@ -307,6 +317,7 @@ const RichTextEditor = ({
             variablesEnabled={variablesEnabled}
             isRich={isRich}
             isSingleLine={isSingleLine}
+            variableTypes={variableTypes}
           />
         )}
       />

packages/frontend/src/helpers/variables.ts

@@ -8,7 +8,11 @@ import type {
 import get from 'lodash.get'
 
 // these are the variable types to display on the frontend (make visible)
-export const VISIBLE_VARIABLE_TYPES: TDataOutMetadatumType[] = ['text', 'array']
+export const VISIBLE_VARIABLE_TYPES: TDataOutMetadatumType[] = [
+  'text',
+  'array',
+  'tile_row_id',
+]
 
 export interface StepWithVariables {
   id: string

packages/types/index.d.ts

@@ -52,7 +52,7 @@ export interface IConnection {
  * 'array' is currently used only in formSG checkbox field but
  * will be extended to for-each feature handling
  */
-export type TDataOutMetadatumType = 'text' | 'file' | 'array'
+export type TDataOutMetadatumType = 'text' | 'file' | 'array' | 'tile_row_id'
 
 /**
  * This should only be defined on _leaf_ nodes (i.e. **primitive array
@@ -339,6 +339,7 @@ export interface IFieldDropdownOption {
 export interface IFieldText extends IBaseField {
   type: 'string'
   value?: string
+  variableTypes?: TDataOutMetadatumType[]
 
   // Not applicable if field has variables.
   autoComplete?: AutoCompleteValue
@@ -353,6 +354,7 @@ export interface IFieldAttachment extends IBaseField {
 export interface IFieldMultiline extends IBaseField {
   type: 'multiline'
   value?: string
+  variableTypes?: TDataOutMetadatumType[]
 
   // Not applicable if field has variables.
   autoComplete?: AutoCompleteValue