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

This commit is contained in:
Hetu Nandu 2025-01-23 13:29:03 +05:30 committed by GitHub
parent 928a00e9b1
commit 78718229da
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
28 changed files with 35 additions and 155 deletions

View File

@ -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 */
}

View File

@ -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}`}

View File

@ -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)`

View File

@ -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",
},
],
},

View File

@ -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>
);
}

View File

@ -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
className={`t--${props?.name} uqi-dynamic-input-text`}
style={customStyle}
>
<div className={`t--${props?.name} uqi-dynamic-input-text`}>
{/* <div style={customStyle}> */}
<StyledDynamicTextField
dataTreePath={dataTreePath}

View File

@ -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={
isActionRedesignEnabled || this.props.showLineNumbers
}
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) => {

View File

@ -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 {

View File

@ -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";
}

View File

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

View File

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

View File

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

View File

@ -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",
},
],
},

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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",

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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