## Description
This PR upgrades Prettier to v2 + enforces TypeScript’s [`import
type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export)
syntax where applicable. It’s submitted as a separate PR so we can merge
it easily.
As a part of this PR, we reformat the codebase heavily:
- add `import type` everywhere where it’s required, and
- re-format the code to account for Prettier 2’s breaking changes:
https://prettier.io/blog/2020/03/21/2.0.0.html#breaking-changes
This PR is submitted against `release` to make sure all new code by team
members will adhere to new formatting standards, and we’ll have fewer
conflicts when merging `bundle-optimizations` into `release`. (I’ll
merge `release` back into `bundle-optimizations` once this PR is
merged.)
### Why is this needed?
This PR is needed because, for the Lodash optimization from
7cbb12af88,
we need to use `import type`. Otherwise, `babel-plugin-lodash` complains
that `LoDashStatic` is not a lodash function.
However, just using `import type` in the current codebase will give you
this:
<img width="962" alt="Screenshot 2023-03-08 at 17 45 59"
src="https://user-images.githubusercontent.com/2953267/223775744-407afa0c-e8b9-44a1-90f9-b879348da57f.png">
That’s because Prettier 1 can’t parse `import type` at all. To parse it,
we need to upgrade to Prettier 2.
### Why enforce `import type`?
Apart from just enabling `import type` support, this PR enforces
specifying `import type` everywhere it’s needed. (Developers will get
immediate TypeScript and ESLint errors when they forget to do so.)
I’m doing this because I believe `import type` improves DX and makes
refactorings easier.
Let’s say you had a few imports like below. Can you tell which of these
imports will increase the bundle size? (Tip: it’s not all of them!)
```ts
// app/client/src/workers/Linting/utils.ts
import { Position } from "codemirror";
import { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
It’s pretty hard, right?
What about now?
```ts
// app/client/src/workers/Linting/utils.ts
import type { Position } from "codemirror";
import type { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
Now, it’s clear that only `lodash` will be bundled.
This helps developers to see which imports are problematic, but it
_also_ helps with refactorings. Now, if you want to see where
`codemirror` is bundled, you can just grep for `import \{.*\} from
"codemirror"` – and you won’t get any type-only imports.
This also helps (some) bundlers. Upon transpiling, TypeScript erases
type-only imports completely. In some environment (not ours), this makes
the bundle smaller, as the bundler doesn’t need to bundle type-only
imports anymore.
## Type of change
- Chore (housekeeping or task changes that don't impact user perception)
## How Has This Been Tested?
This was tested to not break the build.
### Test Plan
> Add Testsmith test cases links that relate to this PR
### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
---------
Co-authored-by: Satish Gandham <hello@satishgandham.com>
Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
## Description
Core features of Auto Layout and mobile responsiveness, hidden under a feature flag.
> Add a TL;DR when description is extra long (helps content team)
Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
## Type of change
> Please delete options that are not relevant.
- New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
> Manual regression and sanity tests for all fixed canvas functionality.
- Manual
- Jest
- Cypress
## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] PR is being merged under a feature flag
---------
Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Co-authored-by: Arsalan <arsalanyaldram0211@outlook.com>
Co-authored-by: Aswath K <aswath.sana@gmail.com>
Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
Evaluated value window improvements:
1. Evaluated value window will not show up unless there is a dynamic
binding within the input field or when there's a validation error on the
input field (this edge case happens when user types an incorrect string
in the field for example typing a wrong date format inside the Default
Date field in the DatePickerWidget).
2. Evaluated value window will be draggable anywhere on the DOM. The new
position would also be remembered the next time the user returns to the
input.
3. The UI of the evaluated value window has been changed: Since the
popup will become draggable, it will have the name of the input it is
attached to. The styling of the evaluated value window fields has been
changed as well.
Design Documentation:
https://www.notion.so/appsmith/Improve-the-evaluated-value-window-experience-fbbdead747a5468b8015c2fbbb5843bc
> Add a TL;DR when description is extra long (helps content team)
Fixes#4458
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- This change requires a documentation update
> Tests
- Manual
- Cypress
### Test Plan
> Add Testsmith test cases links that relate to this PR
### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
---------
Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
* Added boundaryParent prop to Propperto prevent table filter pane overflow.
* Review Changes, done.
* Resolved overflow issue with multiple pages.
* Removed hardcoded Top value while dragging.
* Added parentElement as a function parameter.
The filter pane in the table widget was fixed to top which would hinder the viewport for the end user. We have now changed the filter pane to a draggable component such that the user can place it anywhere on the canvas while they apply filters to see data change in realtime.
* FEATURE #4088 : added draggable filterpane for table widget
* FEATURE #4088 : update icons, editMode prop and added renderDragBlock support in popper
* FIX#5329: added close button for close filter pane
* FIX#5332 : updated zindex for table filter pane
* fix list widget test
* Fix drag icon position and cypress failing tests
* Fix endsWidth comparator function
* temp commit
* using onsubmit to continue using action on form
* added recaptcha site key to env example file
* moved the recaptcha lib loading logic to signup page
* removed unnecessary edit
* handle the case where the recaptcha token is not provided as env var
* added proper env var config for client
* recaptcha config for ansible
* recaptcha config for heroku
* recaptcha config for k8s
* updated app.json
* fixed the typos
* added more description for env vars
* removed api key
* minor typo fix
* added new integration button
* updated the add int default link
* added active and create new tabs
* added the empty components to tabs. will control the section manually.
* added proper grid for integrations page
* added vertical tabs
* Added secondary tabs to integrations page
* added separate page for new apis
* classname changes
* added new components for active queries, new queries etc.
* added a separate component for data source list
* adding screen component conditionally, to be showing upon user's choice
* 1. Added grid styling to datasource home
2. Added connect buttons to em
* fixed data source security banner
* updated the styling for new api page
* added tertiary menu for active integrations
* updated styling for active connections
* updated collapse component to work properly
* added show more option to active data sources
* Slash commands feature init commit
* Added more commands
* Introduced JSX to render custom commands
* Merge conflict fix
* Spacing changes
* removed apis/db tabs and replaced em with integrations tab
* removed the unnecessary + integrations btn
* Added slash commands button
* Adjust styles for better ui
* Ordered the action entries under integrations
* Added new datasource command
* updated the getURL with proper params
* updated the link of create datasource btn
* updated the back btn link from data source editor
* Show connect data cta in property pane
* Styling fixes
* Fix margin
* added scrollable content to create new
* added on click scroll to create new page
* fixed a bug, creating new datasource twice
* added new action creator for integrations.
* Minor changes to add new bindings command.
Changed ui behaviour of / button
* UI style change
* updated the query editor to match the over all theme
* updated the query editor tabs
* Added the run btn to empty response screens
* minor fix
* updated the bg color of api type drop down
* updated the url being visited after delete api/query
* removed log
* Insert binding command UI change
* More UI changes
* removed unnecessary junk from integrations editor index
* clean up, removed unnecessary files
* removed useless routes
* for debugger only checking if integrations editor
* Removed all the links for api/query home pages
* Move command actions to a saga
Added support to binding the data back to the widget when are new API is created from widget
* Added reverse binding for DB queries
* Show / button only on hover
* not routing to integrations on create query/api
* Hide actions from suggestions in action pages
* removed the query/datasource/api home pages
* Changes widget.data to widget in slash commands
* Show dependencies in property pane
* Fix warning
* fixed scrolling issue
* will show a list of queries and apis for action picker
* showing icons for each action under integrations
* Fix dropdown not showing up
* Minor refactoring.
Changed commands
* added a way to list data sources in action creators
* Update query page url
* cam show icons for datasources
* Removed unused code
* Feature/slash commands (#5002)
* Slash commands feature init commit
* Added more commands
* Introduced JSX to render custom commands
* Merge conflict fix
* Spacing changes
* Added slash commands button
* Adjust styles for better ui
* Added new datasource command
* Minor changes to add new bindings command.
Changed ui behaviour of / button
* UI style change
* Insert binding command UI change
* More UI changes
* Move command actions to a saga
Added support to binding the data back to the widget when are new API is created from widget
* Added reverse binding for DB queries
* Show / button only on hover
* Hide actions from suggestions in action pages
* Changes widget.data to widget in slash commands
* Minor refactoring.
Changed commands
* Removed unused code
* remove more unusued code
* Added support to generate new api from a datasource in quick commands
* Code correction to use types
* Refactored commands code
* Minor bug fixes
* Remove new integrations command for actions.
Fixed autocomplete not showing up
* Changes to prevent autocomplete trigger for navigation commands
* Prevent hinter execution when show hint is open already.
* Show hinter on focus
* Update text to be called in the omnibar
* updated the copy for empty active datasources
* Update url
* Fix text decoration
* updated the redirection for back btns
* Use themes
* Add cypress test
* fixed back btn nav
* fetching form configs for datasources
* a callback fixed
* Fix slash command not executed on click (#5540)
* Replace the value if not a string else append
* Log commands menu events
* updated mock data base navigation
* updated mock data base navigation
* updated the close editors and back buttons
* All back btns from editors will go back to data sources and back from data source will go back to canvas
* fixed bg colors
* minor styled updates
* removed margin from header of generic datasource
* warnings fixes
* If user is already on the location not redirecting em
* when editing, will check if the coming from data source and redirect accordingly
* updated redirection for newly created api/queries
* updated back btn for newly created datasources
* back for new curl goes to data sources
* Revert "[Fix] revert new nav (#5533)"
This reverts commit 1647815d
* remaining original reverted chagnes
* fixed the width of incoming/outgoing entity bar in property pane
* removing residue from resolved merge conflicts
* Fix widget icons not visible in dropdown menu
* minor fix to use proper integration URL
* updated the URLs for unified datasources
* converted back and close to btns from banners
* on accessing data source from sidebar, it'll always go to view mode
* updated the edit path for saas editors
* Added saved state for google sheet
* on google sheet delete redirecting to create new
* minor fix
* fixed the redirection call on saving a datasource
* removed save and test cmd as it wasn't needed
* Removing test cases to be fixed by Arun
* commenting more tests to be fixed by Arun
* updated call api cy command
* Fix extra margin issue
* fixed the update datasource saga
* fixed video spec
* Revert "commenting more tests to be fixed by Arun"
This reverts commit 42087a95ad77107401a1619e4c2d4c541a81d6c3.
* Revert "Removing test cases to be fixed by Arun"
This reverts commit f6fad67e558d22045114a90409428ef9b737478f.
* fixed the entity explorer query datasource spec
* cautious fix
* update widget locators
* fixed leave org test
* fixes for FormWidgets
* updated the image spec
* Use memo
* Fix debugger url checks
* for copy and delete widget pointing directly to svgs
* Fix entity text
* Fix styling and show tooltip for property pane dependencies
* removed the unnecessary callback
* added a separate saga to to redirect to new integrations using onSuccess
* Bug Fixes - New nav (#5629)
* will show scrollbar only on hover
* made mock data cards clickable
* fixed the grid view
* fixed the cursor position when clicking on / btn
* updated the hint for `/` command
* binding prompt will close on focus change
* hiding / command for api body
* hiding / command for query pane
* Added 2 new icons
* Fix cursor position on selecting a binding and clicking on the slash menu button
* trying out fix to copyWidget cy command
* removing zero width space characters from the property pane text
Co-authored-by: arunvjn <arun@appsmith.com>
Co-authored-by: Akash N <akash@codemonk.in>
Co-authored-by: arunvjn <32433245+arunvjn@users.noreply.github.com>
Co-authored-by: Rishabh Saxena <rishabh.robben@gmail.com>
