chore: Remove style from editor and setting config (#38756)

app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Zone/styles.module.css

@@ -17,60 +17,26 @@
   }
 
   /*
-   This section can be removed once the condition abouve each is resolved
+   This section can be removed once the condition below each is resolved
   */
+
   /*  1. Margin is removed from FieldWrapper component in FormRender file */
+
   & :global(.uqi-form-wrapper) {
     margin: 0;
   }
-  /* DropdownControl default width is removed */
-  & :global(.uqi-dropdown-select) {
-    width: unset !important;
-  }
-  /* InputTexctControl min,max and width removed */
-  & :global(.uqi-input-text) {
-    width: unset !important;
-    min-width: unset !important;
-    max-width: unset !important;
-  }
-  /* FieldArrayControl hardcoded width is removed */
-  & :global(.t--form-control-ARRAY_FIELD) {
-    & :global(.t--form-control-QUERY_DYNAMIC_INPUT_TEXT) > div {
-      width: unset !important;
-    }
-
-    & > div {
-      width: 100% !important;
-
-      & > :global(.array-control-secondary-box) {
-        width: 100% !important;
-
-        & > div {
-          flex: 1;
-        }
-      }
-    }
-  }
-
-  /* DynamicInputTextControl min height and width removed */
-  & :global(.uqi-dynamic-input-text) {
-    width: unset !important;
-    min-height: unset !important;
-  }
-
-  /* Remove when code editor min width is resolved in DynamicTextFeildControl */
-  & :global(.dynamic-text-field-control) {
-    min-width: 260px;
-  }
 
   /* reset ads select min width */
+
   & :global(.ads-v2-select > .rc-select-selector) {
     min-width: unset;
   }
 
   /* Remove this once the config in DB is updated to use Section and Zone (Twilio, Airtable) */
+
   & :global(.ar-form-info-text) {
     max-width: unset;
   }
+
   /* Removable section ends here */
 }

app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx

@@ -179,7 +179,7 @@ const FormRender = (props: Props) => {
         const modifiedSection = modifySectionConfig(section, enabled);
 
         return (
-          // TODO: Remove classname once action redesign epic is done
+          // TODO: Remove classname once DB configs are migrated
           <FieldWrapper
             className="uqi-form-wrapper"
             key={`${configProperty}_${idx}`}

app/client/src/PluginActionEditor/components/PluginActionSettings/SettingsPopover.tsx

@@ -23,19 +23,10 @@ export interface SettingsProps {
   dataTestId?: string;
 }
 
-/* TODO: Remove this after removing custom width from server side (Ankita) */
 const SettingsWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: var(--ads-v2-spaces-4);
-
-  .t--form-control-INPUT_TEXT,
-  .t--form-control-DROP_DOWN {
-    > div {
-      min-width: unset;
-      width: 100%;
-    }
-  }
 `;
 
 const LearnMoreLink = styled(Link)`

app/client/src/components/editorComponents/PartialImportExport/PartialExportModal/unitTestUtils.ts

@@ -10165,7 +10165,6 @@ export const defaultAppState = {
                 controlType: "INPUT_TEXT",
                 configProperty: "actionConfiguration.timeoutInMillisecond",
                 dataType: "NUMBER",
-                width: "270px",
               },
             ],
           },
@@ -10231,7 +10230,6 @@ export const defaultAppState = {
                 controlType: "INPUT_TEXT",
                 configProperty: "actionConfiguration.timeoutInMillisecond",
                 dataType: "NUMBER",
-                width: "270px",
               },
             ],
           },

app/client/src/components/formControls/DropDownControl.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import type { ControlProps } from "./BaseControl";
 import BaseControl from "./BaseControl";
-import styled from "styled-components";
 import type { ControlType } from "constants/PropertyControlConstants";
 import { get, isEmpty, isNil } from "lodash";
 import type { WrappedFieldInputProps, WrappedFieldMetaProps } from "redux-form";
@@ -19,13 +18,6 @@ import type { Action } from "entities/Action";
 import type { SelectOptionProps } from "@appsmith/ads";
 import { Icon, Option, Select } from "@appsmith/ads";
 
-const DropdownSelect = styled.div<{
-  width: string;
-}>`
-  /* font-size: 14px; */
-  width: ${(props) => (props?.width ? props?.width : "270px")};
-`;
-
 class DropDownControl extends BaseControl<Props> {
   componentDidUpdate(prevProps: Props) {
     // if options received by the fetchDynamicValues for the multi select changes, update the config property path's values.
@@ -93,11 +85,10 @@ class DropDownControl extends BaseControl<Props> {
     };
 
     return (
-      <DropdownSelect
+      <div
         className={`t--${this?.props?.configProperty} uqi-dropdown-select`}
         data-testid={this.props.configProperty}
         style={styles}
-        width={styles.width}
       >
         <Field
           component={renderDropdown}
@@ -105,7 +96,7 @@ class DropDownControl extends BaseControl<Props> {
           props={{ ...this.props, width: styles.width }}
           type={this.props?.isMultiSelect ? "select-multiple" : undefined}
         />
-      </DropdownSelect>
+      </div>
     );
   }
 

app/client/src/components/formControls/DynamicInputTextControl.tsx

@@ -13,7 +13,6 @@ import {
   EditorSize,
 } from "components/editorComponents/CodeEditor/EditorConfig";
 import styled from "styled-components";
-import _ from "lodash";
 
 // Enum for the different types of input fields
 export enum INPUT_TEXT_INPUT_TYPES {
@@ -27,13 +26,16 @@ const StyledDynamicTextField = styled(DynamicTextField)`
   .CodeEditorTarget .CodeMirror.CodeMirror-wrap {
     background-color: var(--ads-v2-color-bg);
   }
+
   .CodeEditorTarget .CodeMirror.CodeMirror-wrap:hover {
     background-color: var(--ads-v2-color-bg);
     border-color: var(--ads-v2-color-border-emphasis);
   }
+
   &&& .t--code-editor-wrapper {
     border: none;
   }
+
   .CodeEditorTarget {
     border-radius: var(--ads-v2-border-radius);
   }
@@ -73,25 +75,8 @@ export function InputText(props: {
     };
   }
 
-  let customStyle = { width: "270px", minHeight: "36px" };
-
-  if (!!props.customStyles && _.isEmpty(props.customStyles) === false) {
-    customStyle = { ...props.customStyles };
-
-    if ("width" in props.customStyles) {
-      customStyle.width = props.customStyles.width;
-    }
-
-    if ("minHeight" in props.customStyles) {
-      customStyle.minHeight = props.customStyles.minHeight;
-    }
-  }
-
   return (
-    <div
+    <div className={`t--${props?.name} uqi-dynamic-input-text`}>
-      className={`t--${props?.name} uqi-dynamic-input-text`}
-      style={customStyle}
-    >
       {/* <div style={customStyle}> */}
       <StyledDynamicTextField
         dataTreePath={dataTreePath}

app/client/src/components/formControls/DynamicTextFieldControl.tsx

@@ -23,7 +23,7 @@ import { getSqlEditorModeFromPluginName } from "components/editorComponents/Code
 import { Flex } from "@appsmith/ads";
 
 const Wrapper = styled.div`
-  min-width: 380px;
+  min-width: 260px;
   width: 100%;
   min-height: 200px;
   height: 100%;
@@ -55,7 +55,6 @@ class DynamicTextControl extends BaseControl<
       actionName,
       configProperty,
       evaluationSubstitutionType,
-      isActionRedesignEnabled,
       placeholderText,
       pluginName,
       responseType,
@@ -78,9 +77,7 @@ class DynamicTextControl extends BaseControl<
             mode={mode}
             name={this.props.configProperty}
             placeholder={placeholderText}
-            showLineNumbers={
+            showLineNumbers
-              isActionRedesignEnabled || this.props.showLineNumbers
-            }
             size={EditorSize.EXTENDED}
             tabBehaviour={TabBehaviour.INDENT}
           />
@@ -98,7 +95,6 @@ export interface DynamicTextFieldProps extends ControlProps {
   evaluationSubstitutionType: EvaluationSubstitutionType;
   mutedHinting?: boolean;
   pluginName: string;
-  isActionRedesignEnabled: boolean;
 }
 
 const mapStateToProps = (state: AppState, props: DynamicTextFieldProps) => {

app/client/src/components/formControls/FieldArrayControl.tsx

@@ -28,19 +28,16 @@ const PrimaryBox = styled.div`
 const SecondaryBox = styled.div`
   display: flex;
   flex-direction: row;
-  width: min-content;
+  width: 100%;
   align-items: center;
   justify-content: space-between;
 
   & > div {
+    flex: 1;
     margin-right: 8px;
     margin-bottom: 8px;
   }
 
-  & > .t--form-control-QUERY_DYNAMIC_INPUT_TEXT > div {
-    width: 20vw !important;
-  }
-
   & > .t--form-control-DROP_DOWN,
   & > .t--form-control-DROP_DOWN > div > div,
   & > .t--form-control-DROP_DOWN > div > div > div > div {

app/client/src/components/formControls/InputTextControl.tsx

@@ -23,8 +23,6 @@ const FieldWrapper = styled.div<{
   width: string;
 }>`
   position: relative;
-  min-width: ${(props) => (props?.width ? props.width : "380px")};
-  max-width: 545px;
   width: ${(props) => (props?.width ? props.width : "")};
 `;
 
@@ -193,6 +191,7 @@ class InputTextControl extends BaseControl<InputControlProps> {
         return "text";
     }
   }
+
   getControlType(): ControlType {
     return "INPUT_TEXT";
   }

app/client/src/constants/AppsmithActionConstants/formConfig/ApiSettingsConfig.ts

@@ -54,7 +54,6 @@ export default [
         controlType: "INPUT_TEXT",
         configProperty: "actionConfiguration.timeoutInMillisecond",
         dataType: "NUMBER",
-        width: "270px",
       },
     ],
   },

app/client/src/constants/AppsmithActionConstants/formConfig/GoogleSheetsSettingsConfig.ts

@@ -21,7 +21,6 @@ export default [
         configProperty: "actionConfiguration.timeoutInMillisecond",
         controlType: "INPUT_TEXT",
         dataType: "NUMBER",
-        width: "270px",
       },
     ],
   },

app/client/src/constants/AppsmithActionConstants/formConfig/QuerySettingsConfig.ts

@@ -21,7 +21,6 @@ export default [
         configProperty: "actionConfiguration.timeoutInMillisecond",
         controlType: "INPUT_TEXT",
         dataType: "NUMBER",
-        width: "270px",
       },
     ],
   },

app/client/test/factories/MockPluginsState.ts

@@ -7007,7 +7007,6 @@ export default {
             controlType: "INPUT_TEXT",
             configProperty: "actionConfiguration.timeoutInMillisecond",
             dataType: "NUMBER",
-            width: "270px",
           },
         ],
       },
@@ -7073,7 +7072,6 @@ export default {
             controlType: "INPUT_TEXT",
             configProperty: "actionConfiguration.timeoutInMillisecond",
             dataType: "NUMBER",
-            width: "270px",
           },
         ],
       },

app/server/appsmith-plugins/amazons3Plugin/src/main/resources/setting.json

@@ -27,8 +27,7 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER",
+          "dataType": "NUMBER"
-          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/anthropicPlugin/src/main/resources/editor/chat.json

@@ -44,11 +44,7 @@
           "controlType": "INPUT_TEXT",
           "initialValue": "256",
           "isRequired": true,
-          "dataType": "NUMBER",
+          "dataType": "NUMBER"
-          "customStyles": {
-            "width": "270px",
-            "minWidth": "270px"
-          }
         }
       ]
     },
@@ -63,11 +59,7 @@
           "controlType": "QUERY_DYNAMIC_TEXT",
           "placeholderText": "Write some text or use {{ }} to reference a dynamic text value",
           "initialValue": "",
-          "isRequired": false,
+          "isRequired": false
-          "customStyles": {
-            "width": "590px",
-            "minWidth": "400px"
-          }
         },
         {
           "label": "Messages",
@@ -118,11 +110,7 @@
           "controlType": "INPUT_TEXT",
           "dataType": "NUMBER",
           "initialValue": "1",
-          "isRequired": false,
+          "isRequired": false
-          "customStyles": {
-            "width": "270px",
-            "minWidth": "270px"
-          }
         }
       ]
     }

app/server/appsmith-plugins/anthropicPlugin/src/main/resources/editor/vision.json

@@ -44,11 +44,7 @@
           "controlType": "INPUT_TEXT",
           "initialValue": "256",
           "isRequired": true,
-          "dataType": "NUMBER",
+          "dataType": "NUMBER"
-          "customStyles": {
-            "width": "270px",
-            "minWidth": "270px"
-          }
         }
       ]
     },
@@ -130,11 +126,7 @@
           "controlType": "INPUT_TEXT",
           "dataType": "NUMBER",
           "initialValue": "1",
-          "isRequired": false,
+          "isRequired": false
-          "customStyles": {
-            "width": "270px",
-            "minWidth": "270px"
-          }
         }
       ]
     }

app/server/appsmith-plugins/anthropicPlugin/src/main/resources/setting.json

@@ -21,8 +21,7 @@
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
           "initialValue": 60000,
-          "dataType": "NUMBER",
+          "dataType": "NUMBER"
-          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/appsmithAiPlugin/src/main/resources/setting.json

@@ -21,8 +21,7 @@
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
           "initialValue": 60000,
-          "dataType": "NUMBER",
+          "dataType": "NUMBER"
-          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/firestorePlugin/src/main/resources/setting.json

@@ -27,8 +27,7 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER",
+          "dataType": "NUMBER"
-          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/googleAiPlugin/src/main/resources/setting.json

@@ -21,8 +21,7 @@
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
           "initialValue": 60000,
-          "dataType": "NUMBER",
+          "dataType": "NUMBER"
-          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/googleSheetsPlugin/src/main/resources/form.json

@@ -53,9 +53,6 @@
             }
           ],
           "initialValue": "https://www.googleapis.com/auth/drive.file",
-          "customStyles": {
-            "width": "340px"
-          },
           "hidden": {
             "flagValue": "release_gs_all_sheets_options_enabled",
             "comparison": "FEATURE_FLAG",
@@ -73,9 +70,6 @@
             }
           ],
           "initialValue": "https://www.googleapis.com/auth/drive.file",
-          "customStyles": {
-            "width": "340px"
-          },
           "hidden": {
             "flagValue": "release_gs_all_sheets_options_enabled",
             "comparison": "FEATURE_FLAG",

app/server/appsmith-plugins/googleSheetsPlugin/src/main/resources/setting.json

@@ -27,8 +27,7 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER",
+          "dataType": "NUMBER"
-          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/mongoPlugin/src/main/resources/setting.json

@@ -27,8 +27,7 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER",
+          "dataType": "NUMBER"
-          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/mssqlPlugin/src/main/resources/setting.json

@@ -27,8 +27,7 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER",
+          "dataType": "NUMBER"
-          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/mysqlPlugin/src/main/resources/setting.json

@@ -27,8 +27,7 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER",
+          "dataType": "NUMBER"
-          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/openAiPlugin/src/main/resources/setting.json

@@ -21,8 +21,7 @@
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
           "initialValue": 60000,
-          "dataType": "NUMBER",
+          "dataType": "NUMBER"
-          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/oraclePlugin/src/main/resources/setting.json

@@ -27,8 +27,7 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER",
+          "dataType": "NUMBER"
-          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/postgresPlugin/src/main/resources/setting.json

@@ -27,8 +27,7 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER",
+          "dataType": "NUMBER"
-          "width": "270px"
         }
       ]
     }