Skip to content

Commit

Permalink
feat: Action redesign: Updating the config for Google sheets plugin t…
Browse files Browse the repository at this point in the history
…o use sections and zones format (#36117)

## Description

Action redesign: Updating the config for Google sheets plugin to use
sections and zones format

Fixes [#35483](#35483)

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10818868016>
> Commit: 578b1ca
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10818868016&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Wed, 11 Sep 2024 21:13:39 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced styling flexibility for dynamic input text controls with a
new CSS class.
- Updated Google Sheets plugin configuration to support improved layout
and organization with new control types, including `SECTION_V2`,
`DOUBLE_COLUMN_ZONE`, and `SINGLE_COLUMN_ZONE`.
- Introduced a new `ENTITY_SELECTOR` component for streamlined entity
selection in Google Sheets integration.

- **Bug Fixes**
- Resolved issues with minimum height and width constraints for dynamic
input text controls, improving responsiveness.

- **Style**
- Improved layout responsiveness for various controls by removing
hardcoded widths and enhancing CSS rules.

- **Chores**
- Made formatting adjustments to the HTML and JavaScript code for
improved readability without impacting functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
  • Loading branch information
ankitakinger authored Sep 12, 2024
1 parent 59e2daf commit 0f6305c
Show file tree
Hide file tree
Showing 8 changed files with 428 additions and 316 deletions.
26 changes: 14 additions & 12 deletions app/client/src/components/formControls/SortingControl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,15 @@ const orderFieldConfig: any = {
],
};

const SortingContainer = styled.div<{ isBreakpointSmall: boolean }>`
display: grid;
grid-template-columns: ${({ isBreakpointSmall }) =>
isBreakpointSmall ? "1fr 50px" : "1fr 50px"};
const SortingContainer = styled.div`
display: flex;
gap: 5px;
flex-direction: column;
`;

const SortingDropdownContainer = styled.div`
display: flex;
gap: 5px;
align-items: center;
`;

const SortingFields = styled.div<{ isBreakpointSmall: boolean }>`
Expand Down Expand Up @@ -133,11 +136,7 @@ function SortingComponent(props: SortingComponentProps) {
}, [fields.length]);

return (
<SortingContainer
className={`t--${props?.configProperty}`}
isBreakpointSmall={isBreakpointSmall}
ref={targetRef}
>
<SortingContainer className={`t--${props?.configProperty}`} ref={targetRef}>
{fields &&
fields.length > 0 &&
fields.map((field, index: number) => {
Expand All @@ -152,7 +151,10 @@ function SortingComponent(props: SortingComponentProps) {
);

return (
<React.Fragment key={index}>
<SortingDropdownContainer
className="sorting-dropdown-container"
key={index}
>
<SortingFields isBreakpointSmall={isBreakpointSmall}>
<FormControl
config={{
Expand Down Expand Up @@ -188,7 +190,7 @@ function SortingComponent(props: SortingComponentProps) {
startIcon="close-line"
value={index}
/>
</React.Fragment>
</SortingDropdownContainer>
);
})}
<ButtonWrapper>
Expand Down
29 changes: 29 additions & 0 deletions app/client/src/pages/Editor/ActionForm/Zone/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,35 @@
}
}
}
/* PaginationControl hardcoded width is removed */
& :global(.t--form-control-PAGINATION) {
& > div {
grid-gap: 1rem !important;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;

& > div {
width: unset !important;
margin-right: 0 !important;
}
}
}
/* SortingControl hardcoded width is removed */
& :global(.t--form-control-SORTING) {
& :global(.sorting-dropdown-container) {
width: unset;

& > div {
width: 100%;
flex: 1;
}
}
}
/* WhereClauseControl hardcoded width is removed */
& :global(.t--form-control-WHERE_CLAUSE) {
& > div {
padding-right: 0 !important;
}
}
/* DynamicInputTextControl min height and width removed */
& :global(.uqi-dynamic-input-text) {
width: unset !important;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,18 +1,24 @@
{
"controlType": "SECTION_V2",
"identifier": "DELETE",
"controlType": "SECTION",
"conditionals": {
"show": "{{actionConfiguration.formData.command.data === 'DELETE_ONE' && actionConfiguration.formData.entityType.data == 'ROWS'}}"
},
"children": [
{
"label": "Row Index",
"tooltipText": "The rowIndex property of the row object returned by the fetch query",
"propertyName": "rows_delete_rowIndex",
"configProperty": "actionConfiguration.formData.rowIndex.data",
"controlType": "QUERY_DYNAMIC_INPUT_TEXT",
"isRequired": true,
"placeholderText": "{{Table1.selectedRow.rowIndex}}"
"controlType": "DOUBLE_COLUMN_ZONE",
"identifier": "DELETE-Z1",
"children": [
{
"label": "Row Index",
"tooltipText": "The rowIndex property of the row object returned by the fetch query",
"propertyName": "rows_delete_rowIndex",
"configProperty": "actionConfiguration.formData.rowIndex.data",
"controlType": "QUERY_DYNAMIC_INPUT_TEXT",
"isRequired": true,
"placeholderText": "{{Table1.selectedRow.rowIndex}}"
}
]
}
]
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
{
"controlType": "SECTION_V2",
"identifier": "ENTITY_SELECTOR",
"children": [
{
"controlType": "DOUBLE_COLUMN_ZONE",
"identifier": "ENTITY-SELECTOR-Z1",
"children": [
{
"label": "Entity",
"tooltipText": "The entity to query on the datasource",
"description": "Select the entity that you would like to work with",
"propertyName": "entityType",
"configProperty": "actionConfiguration.formData.entityType.data",
"controlType": "DROP_DOWN",
"initialValue": "ROWS",
"isRequired": true,
"setFirstOptionAsDefault": true,
"options": [
{
"disabled": "{{ ['INSERT_ONE', 'UPDATE_ONE', 'DELETE_ONE', 'FETCH_MANY', 'UPDATE_MANY', 'INSERT_MANY'].includes(actionConfiguration.formData.command.data) === false }}",
"label": "Sheet Row(s)",
"value": "ROWS"
},
{
"disabled": "{{ ['FETCH_MANY', 'FETCH_DETAILS', 'INSERT_ONE', 'DELETE_ONE'].includes(actionConfiguration.formData.command.data) === false || (['INSERT_ONE', 'DELETE_ONE'].includes(actionConfiguration.formData.command.data) === true && ['https://www.googleapis.com/auth/drive.file'].includes(datasourceConfiguration.authentication.scopeString) === true)}}",
"label": "Spreadsheet",
"value": "SPREADSHEET"
},
{
"disabled": "{{ ['DELETE_ONE'].includes(actionConfiguration.formData.command.data) === false }}",
"label": "Sheet",
"value": "SHEET"
}
],
"conditionals": {
"evaluateFormConfig": {
"condition": "{{true}}",
"paths": ["options"]
}
}
},
{
"label": "Spreadsheet",
"tooltipText": "The URL of the spreadsheet in your Google Drive",
"propertyName": "rows_get_spreadsheetUrl",
"configProperty": "actionConfiguration.formData.sheetUrl.data",
"controlType": "DROP_DOWN",
"isSearchable": true,
"isRequired": true,
"-placeholderText": "https://docs.google.com/spreadsheets/d/xyz/edit#gid=0",
"fetchOptionsConditionally": true,
"alternateViewTypes": ["json"],
"conditionals": {
"show": "{{ !!actionConfiguration.formData.entityType.data && (new Object({ 'SPREADSHEET': ['FETCH_DETAILS', 'DELETE_ONE'], 'SHEET': ['DELETE_ONE'], 'ROWS': ['INSERT_ONE', 'UPDATE_ONE', 'DELETE_ONE', 'FETCH_MANY', 'INSERT_MANY', 'UPDATE_MANY'] })[actionConfiguration.formData.entityType.data].includes(actionConfiguration.formData.command.data)) }}",
"fetchDynamicValues": {
"condition": "{{true}}",
"config": {
"params": {
"requestType": "SPREADSHEET_SELECTOR",
"displayType": "DROP_DOWN"
}
}
}
}
},
{
"label": "Sheet name",
"propertyName": "rows_get_sheetName",
"tooltipText": "The name of the sheet inside the spreadsheet",
"configProperty": "actionConfiguration.formData.sheetName.data",
"controlType": "DROP_DOWN",
"isSearchable": true,
"isRequired": true,
"fetchOptionsConditionally": true,
"alternateViewTypes": ["json"],
"conditionals": {
"show": "{{ new Object({ 'SPREADSHEET': [], 'SHEET': ['DELETE_ONE'], 'ROWS': ['INSERT_ONE', 'UPDATE_ONE', 'DELETE_ONE', 'FETCH_MANY', 'INSERT_MANY', 'UPDATE_MANY'] })[actionConfiguration.formData.entityType.data].includes(actionConfiguration.formData.command.data) && !!actionConfiguration.formData.sheetUrl.data }}",
"fetchDynamicValues": {
"condition": "{{ !!actionConfiguration.formData.sheetUrl.data }}",
"config": {
"params": {
"requestType": "SHEET_SELECTOR",
"displayType": "DROP_DOWN",
"parameters": {
"sheetUrl": "{{actionConfiguration.formData.sheetUrl.data}}"
}
}
}
}
}
},
{
"label": "Table heading row index",
"tooltipText": "The index of the column names in the sheet (starts from 1)",
"propertyName": "rows_get_tableHeadingRowIndex",
"configProperty": "actionConfiguration.formData.tableHeaderIndex.data",
"controlType": "QUERY_DYNAMIC_INPUT_TEXT",
"initialValue": "1",
"isRequired": true,
"conditionals": {
"show": "{{ new Object({ 'SPREADSHEET': [], 'SHEET': [], 'ROWS': ['INSERT_ONE', 'UPDATE_ONE', 'DELETE_ONE', 'FETCH_MANY', 'INSERT_MANY', 'UPDATE_MANY'] })[actionConfiguration.formData.entityType.data].includes(actionConfiguration.formData.command.data) && !!actionConfiguration.formData.sheetName.data }}"
}
}
]
}
]
}
Loading

0 comments on commit 0f6305c

Please sign in to comment.