fix: astra-assistants types (#2881)

* merge * [autofix.ci] apply automated fixes * support for MultilineSecretInput * add support for MultilineSecretInput * [autofix.ci] apply automated fixes * ruff * align eye-icon * tweaks and modal * [autofix.ci] apply automated fixes * textare edit modal hidden text plus eye icon * fix pydantic serialization warning * [autofix.ci] apply automated fixes * chore: Add password visibility toggle to text area components * [autofix.ci] apply automated fixes * fix list assistants * fix: remove extraneous property from is-unicode-supported dependency * fix: update TextAreaComponent styling for edit node table Adjust the styling of the TextAreaComponent in the edit node table to fix the positioning of the side-bar button. The right margin of the button was changed from 5.2rem to 4.2rem to align it correctly with the text area. This change improves the visual consistency of the edit node table. * fix modal not sync with outside state * add comment for future devs --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: anovazzi1 <otavio2204@gmail.com>
2024-07-29 13:56:05 -04:00 · 2024-07-29 13:56:05 -04:00 · cffed2c9be
commit cffed2c9be
parent c7575b18df
18 changed files with 415 additions and 237 deletions
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@ -1078,6 +1078,7 @@
    },
    "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
      "version": "1.3.0",
+      "extraneous": true,
      "inBundle": true,
      "license": "MIT",
      "engines": {
--- a/src/frontend/src/components/parameterRenderComponent/component/strRenderComponent/index.tsx
+++ b/src/frontend/src/components/parameterRenderComponent/component/strRenderComponent/index.tsx
@ -39,6 +39,15 @@ export function StrRenderComponent({
      />
    ) : templateData.multiline ? (
      <TextAreaComponent
+        password={templateData.password}
+        updateVisibility={() => {
+          if (templateData.password !== undefined) {
+            handleOnNewValue(
+              { password: !templateData.password },
+              { skipSnapshot: true },
+            );
+          }
+        }}
        id={`textarea_${id}`}
        disabled={disabled}
        editNode={editNode}
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@ -1,4 +1,5 @@
-import { useEffect } from "react";
+import { classNames } from "@/utils/utils";
+import { useEffect, useState } from "react";
 import { EDIT_TEXT_MODAL_TITLE } from "../../constants/constants";
 import { TypeModal } from "../../constants/enums";
 import GenericModal from "../../modals/genericModal";
@ -14,6 +15,8 @@ export default function TextAreaComponent({
  disabled,
  editNode = false,
  id = "",
+  password,
+  updateVisibility,
 }: TextAreaComponentType): JSX.Element {
  // Clear text area
  useEffect(() => {
@ -23,22 +26,29 @@ export default function TextAreaComponent({
  }, [disabled]);

  return (
-    <div className={"flex w-full items-center " + (disabled ? "" : "")}>
+    <div className={"flex w-full items-center" + (disabled ? "" : "")}>
      <div className="flex w-full items-center gap-3" data-testid={"div-" + id}>
-        <Case condition={!editNode}>
-          <Input
-            id={id}
-            data-testid={id}
-            value={value}
-            disabled={disabled}
-            className={editNode ? "input-edit-node w-full" : "w-full"}
-            placeholder={"Type something..."}
-            onChange={(event) => {
-              onChange(event.target.value);
-            }}
-          />
-        </Case>
+        <Input
+          id={id}
+          data-testid={id}
+          value={value}
+          disabled={disabled}
+          className={classNames(
+            password !== undefined && password && value !== ""
+              ? "text-clip password"
+              : "",
+            editNode ? "input-edit-node" : "",
+            password && editNode ? "pr-8" : "",
+            password && !editNode ? "pr-10" : "",
+            "w-full",
+          )}
+          placeholder={"Type something..."}
+          onChange={(event) => {
+            onChange(event.target.value);
+          }}
+        />
        <GenericModal
+          changeVisibility={updateVisibility}
          type={TypeModal.TEXT}
          buttonText="Finish Editing"
          modalTitle={EDIT_TEXT_MODAL_TITLE}
@ -47,40 +57,77 @@ export default function TextAreaComponent({
            onChange(value);
          }}
          disabled={disabled}
+          password={password}
        >
-          {!editNode ? (
-            <div className="flex items-center">
-              <Button unstyled>
-                <IconComponent
-                  strokeWidth={1.5}
-                  id={id}
-                  name="ExternalLink"
-                  className={
-                    "icons-parameters-comp shrink-0" +
-                    (disabled ? " text-ring" : " hover:text-accent-foreground")
-                  }
-                />
-              </Button>
-            </div>
-          ) : (
-            <Button unstyled className="w-full">
-              <div className="flex w-full items-center gap-3">
-                <span
-                  id={id}
-                  data-testid={id}
-                  className={
-                    editNode
-                      ? "input-edit-node input-dialog"
-                      : (disabled ? "input-disable text-ring " : "") +
-                        " primary-input text-muted-foreground"
-                  }
-                >
-                  {value !== "" ? value : "Type something..."}
-                </span>
-              </div>
+          <div
+            className={
+              "flex items-center" + (password ? "relative left-6" : "")
+            }
+          >
+            <Button unstyled>
+              <IconComponent
+                strokeWidth={1.5}
+                id={id}
+                name="ExternalLink"
+                className={
+                  "icons-parameters-comp shrink-0" +
+                  (disabled ? " text-ring" : " hover:text-accent-foreground")
+                }
+              />
            </Button>
-          )}
+          </div>
        </GenericModal>
+        {password !== undefined && (
+          <button
+            type="button"
+            tabIndex={-1}
+            className={classNames(
+              "mb-px",
+              editNode
+                ? "side-bar-button-size absolute bottom-[1.3rem] right-[4.2rem]"
+                : "side-bar-button-size absolute bottom-4 right-[4.2rem]",
+            )}
+            onClick={(event) => {
+              event.preventDefault();
+              if (updateVisibility) updateVisibility();
+            }}
+          >
+            {password ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+                />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                />
+              </svg>
+            ) : (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+                />
+              </svg>
+            )}
+          </button>
+        )}
      </div>
    </div>
  );
--- a/src/frontend/src/components/ui/textarea.tsx
+++ b/src/frontend/src/components/ui/textarea.tsx
@ -2,22 +2,31 @@ import * as React from "react";
 import { cn } from "../../utils/utils";

 export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  password?: boolean;
+  editNode?: boolean;
+}

 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, password, editNode, ...props }, ref) => {
    return (
-      <textarea
-        className={cn(
-          "nopan nodelete nodrag noflow textarea-primary",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
+      <div className="w-full">
+        <textarea
+          className={cn(
+            "nopan nodelete nodrag noflow textarea-primary",
+            className,
+            password ? "password" : "",
+          )}
+          ref={ref}
+          {...props}
+          value={props.value as string}
+          onChange={props.onChange}
+        />
+      </div>
    );
  },
 );
+
 Textarea.displayName = "Textarea";

 export { Textarea };
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@ -41,6 +41,8 @@ export default function GenericModal({
  disabled,
  id = "",
  readonly = false,
+  password,
+  changeVisibility,
 }: genericModalPropsType): JSX.Element {
  const [myButtonText] = useState(buttonText);
  const [myModalTitle] = useState(modalTitle);
@ -201,14 +203,34 @@ export default function GenericModal({
          }
        })()}
      >
-        <span className="pr-2" data-testid="modal-title">
-          {myModalTitle}
-        </span>
-        <IconComponent
-          name={myModalTitle === "Edit Prompt" ? "TerminalSquare" : "FileText"}
-          className="h-6 w-6 pl-1 text-primary"
-          aria-hidden="true"
-        />
+        <div className="flex w-full items-start gap-3">
+          <div className="flex">
+            <span className="pr-2" data-testid="modal-title">
+              {myModalTitle}
+            </span>
+            <IconComponent
+              name={
+                myModalTitle === "Edit Prompt" ? "TerminalSquare" : "FileText"
+              }
+              className="h-6 w-6 pl-1 text-primary"
+              aria-hidden="true"
+            />
+          </div>
+          {password !== undefined && (
+            <div>
+              <button
+                onClick={() => {
+                  if (changeVisibility) changeVisibility();
+                }}
+              >
+                <IconComponent
+                  name={password ? "Eye" : "EyeOff"}
+                  className="h-6 w-6 cursor-pointer text-primary"
+                />
+              </button>
+            </div>
+          )}
+        </div>
      </BaseModal.Header>
      <BaseModal.Content overflowHidden>
        <div className={classNames("flex h-full w-full rounded-lg border")}>
@ -243,6 +265,7 @@ export default function GenericModal({
            />
          ) : type !== TypeModal.PROMPT ? (
            <Textarea
+              password={password}
              ref={textRef}
              className="form-input h-full w-full resize-none overflow-auto rounded-lg focus-visible:ring-1"
              value={inputValue}
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@ -64,6 +64,7 @@ export type InputFieldType = {
  list: boolean;
  show: boolean;
  readonly: boolean;
+  password?: boolean;
  multiline?: boolean;
  value?: any;
  dynamic?: boolean;
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@ -136,6 +136,8 @@ export type TextAreaComponentType = {
  editNode?: boolean;
  id?: string;
  readonly?: boolean;
+  password?: boolean;
+  updateVisibility?: () => void;
 };

 export type TableComponentType = {
@ -653,6 +655,8 @@ export type genericModalPropsType = {
  children: ReactNode;
  id?: string;
  readonly?: boolean;
+  password?: boolean;
+  changeVisibility?: () => void;
 };

 export type newFlowModalPropsType = {
--- a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
@ -102,7 +102,7 @@ test("PromptTemplateComponent", async ({ page }) => {
  await page.getByTestId("edit-button-modal").click();

  value =
-    (await page.locator('//*[@id="textarea_str_edit_prompt"]').textContent()) ??
+    (await page.locator('//*[@id="textarea_str_edit_prompt"]').inputValue()) ??
    "";

  if (value != "prompt_value_!@#!@#") {
@ -112,7 +112,7 @@ test("PromptTemplateComponent", async ({ page }) => {
  value =
    (await page
      .locator('//*[@id="textarea_str_edit_prompt1"]')
-      .textContent()) ?? "";
+      .inputValue()) ?? "";

  if (value != "prompt_name_test_123123!@#!@#") {
    expect(false).toBeTruthy();
@ -126,14 +126,14 @@ test("PromptTemplateComponent", async ({ page }) => {
    expect(false).toBeTruthy();
  }

-  await page.locator('//*[@id="textarea_str_edit_prompt1"]').click();
+  await page.getByTestId('textarea_str_edit_prompt1-ExternalLink').click();
  await page
    .getByTestId("text-area-modal")
    .fill("prompt_edit_test_12312312321!@#$");

  await page.getByText("Finish Editing", { exact: true }).click();

-  await page.locator('//*[@id="textarea_str_edit_prompt"]').click();
+  await page.getByTestId('textarea_str_edit_prompt-ExternalLink').click();
  await page
    .getByTestId("text-area-modal")
    .fill("prompt_edit_test_44444444444!@#$");
@ -186,7 +186,7 @@ test("PromptTemplateComponent", async ({ page }) => {
  expect(await page.locator('//*[@id="showprompt1"]').isChecked()).toBeTruthy();

  value =
-    (await page.locator('//*[@id="textarea_str_edit_prompt"]').textContent()) ??
+    (await page.locator('//*[@id="textarea_str_edit_prompt"]').inputValue()) ??
    "";

  if (value != "prompt_edit_test_44444444444!@#$") {
@ -196,7 +196,7 @@ test("PromptTemplateComponent", async ({ page }) => {
  value =
    (await page
      .locator('//*[@id="textarea_str_edit_prompt1"]')
-      .textContent()) ?? "";
+      .inputValue()) ?? "";

  if (value != "prompt_edit_test_12312312321!@#$") {
    expect(false).toBeTruthy();