feat: import changes for uneditable field (#16556)

* Bump design system package version

* Update CopyUrlForm.tsx to use the new API for UneditableField

* Remove UneditableField

* Pass prop as string because that's what the type expects

* use beta version for ds

* update yarn.lock

* Update yarn.lock

* remove yarn.lock from root

Co-authored-by: Albin <albin@appsmith.com>

app/client/src/components/ads/formFields/CopyUrlForm.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
-import { InjectedFormProps, reduxForm } from "redux-form";
+import { Field, InjectedFormProps, reduxForm } from "redux-form";
 import { HelpIcons } from "icons/HelpIcons";
-import UneditableField from "components/ads/formFields/UneditableField";
+import { UneditableField } from "design-system";
 import styled from "styled-components";
 import copy from "copy-to-clipboard";
 import { Toaster } from "components/ads/Toast";
@@ -93,12 +93,15 @@ function CopyUrlForm(
         )}
       </HeaderWrapper>
       <BodyContainer>
-        <UneditableField
+        <Field
+          component={UneditableField}
           disabled
           handleCopy={handleCopy}
           helperText={props.helpText}
-          iscopy={"true"}
+          iscopy="true"
           name={props.fieldName}
+          {...props}
+          asyncControl
         />
       </BodyContainer>
     </Wrapper>

app/client/src/components/ads/formFields/UneditableField.test.tsx

@@ -1,71 +0,0 @@
-import { render } from "test/testUtils";
-import React from "react";
-import UneditableField from "./UneditableField";
-import { REDIRECT_URL_FORM } from "@appsmith/constants/forms";
-import { reduxForm } from "redux-form";
-
-let container: any = null;
-const setting = {
-  id: "SETTING_UNEDITABLE_FIELD_ID",
-  name: "SETTING_UNEDITABLE_FIELD_ID",
-  category: "test category",
-  helpText: "some helper text",
-  label: "test label",
-};
-
-const clickHandler = jest.fn();
-
-function renderComponent() {
-  function UneditableFieldComponent() {
-    return (
-      <UneditableField
-        disabled
-        handleCopy={clickHandler}
-        helperText={setting.helpText}
-        iscopy={"true"}
-        label={setting.label}
-        name={"uneditable-field"}
-      />
-    );
-  }
-  const Parent = reduxForm<any, any>({
-    validate: () => {
-      return {};
-    },
-    form: REDIRECT_URL_FORM,
-    touchOnBlur: true,
-  })(UneditableFieldComponent);
-
-  render(<Parent />, {
-    initialState: {
-      form: {
-        [REDIRECT_URL_FORM]: {
-          values: {
-            "uneditable-field": "value to be copied",
-          },
-        },
-      },
-    },
-  });
-}
-
-describe("Uneditabled Field", () => {
-  beforeEach(() => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-
-  it("is rendered", () => {
-    renderComponent();
-    window.prompt = jest.fn();
-    const inputEl = document.querySelector("input");
-    const value = `value to be copied`;
-    expect(inputEl?.value).toBeDefined();
-    expect(inputEl?.value).toEqual(value);
-    expect(inputEl?.hasAttribute("disabled"));
-    expect(inputEl?.hasAttribute("iscopy")).toEqual(true);
-    const copyIcon = document.querySelector(".copy-icon") as HTMLElement;
-    expect(copyIcon).toBeDefined();
-    copyIcon?.click();
-  });
-});

app/client/src/components/ads/formFields/UneditableField.tsx

@@ -1,78 +0,0 @@
-import React from "react";
-import {
-  Field,
-  WrappedFieldMetaProps,
-  WrappedFieldInputProps,
-} from "redux-form";
-import { TextInput, InputType } from "design-system";
-import { Intent } from "constants/DefaultTheme";
-import { Colors } from "constants/Colors";
-import styled from "styled-components";
-import { HelpIcons } from "icons/HelpIcons";
-
-const CopyIcon = HelpIcons.COPY_ICON;
-
-const Label = styled.div`
-  font-size: 14px;
-  margin: 8px 0;
-  color: ${Colors.CHARCOAL};
-`;
-
-const InputCopyWrapper = styled.div`
-  display: flex;
-  align-items: center;
-
-  input {
-    width: 40rem;
-  }
-
-  .copy-icon {
-    margin-left: 12px;
-  }
-`;
-
-const renderComponent = (
-  componentProps: FormTextFieldProps & {
-    meta: Partial<WrappedFieldMetaProps>;
-    input: Partial<WrappedFieldInputProps>;
-  },
-) => {
-  return (
-    <>
-      {componentProps.label && <Label>{componentProps.label}</Label>}
-      <InputCopyWrapper>
-        <TextInput {...componentProps} {...componentProps.input} fill />
-        {componentProps.iscopy === "true" && (
-          <CopyIcon
-            className={"copy-icon"}
-            color={Colors.GREY_7}
-            height={16}
-            onClick={() =>
-              componentProps.handleCopy(componentProps.input.value)
-            }
-            width={16}
-          />
-        )}
-      </InputCopyWrapper>
-    </>
-  );
-};
-
-export type FormTextFieldProps = {
-  name: string;
-  type?: InputType;
-  label?: string;
-  intent?: Intent;
-  disabled?: boolean;
-  autoFocus?: boolean;
-  value?: string;
-  helperText?: string;
-  iscopy?: string;
-  handleCopy: (value: string) => void;
-};
-
-function UneditableField(props: FormTextFieldProps) {
-  return <Field component={renderComponent} {...props} asyncControl />;
-}
-
-export default UneditableField;

yarn.lock

@@ -1,4 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-