## Description
Why did this PR appear? I wanted to replace the icons from `ads-old`
with the icons from `ads`. After that, I had to fix some affected
components in `ads-old` and in the main app. In the process, I
discovered that a large amount of code is simply not being used.
## 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/10419944222>
> Commit: 86491f43aff37e34468fb7dc32722b9ef2ec60c9
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10419944222&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Fri, 16 Aug 2024 13:28:03 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Improved precision in UI element targeting for enhanced test
reliability.
- Broadened icon options within the FilePickerComponent for greater
flexibility.
- **Improvements**
- Shifted component imports to a centralized design system for better
consistency.
- Simplified prop structures for the Button component to enhance
clarity.
- Enhanced validation utilities available for form handling and input
validation.
- **Bug Fixes**
- Enhanced robustness of element locators, reducing potential UI
interaction issues.
- **Refactor**
- Adjusted component properties to align with updated design guidelines,
promoting semantic usage.
- Consolidated exports to emphasize type definitions and utility
functions for better maintainability.
- **Chores**
- Cleaned up imports and updated code structure for improved
maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Rename `design-system` package to `@appsmith/ads`
## 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/10319507327>
> Commit: 65d9664dd75b750496458a6e1652e0da858e1fc6
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10319507327&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Fri, 09 Aug 2024 13:47:50 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
## Description
Scrollbar of API response is escaping the viewport. This PR fixes the
issue.
#### Media
<img width="872" alt="Screenshot 2023-12-24 at 3 20 21 PM"
src="https://github.com/appsmithorg/appsmith/assets/33133883/4059c3e3-fb7d-4fe5-875d-16cebcede2bd">
Fixes#29534
_or_
Fixes `Issue URL`
> [!WARNING]
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._
## Automation
/ok-to-test tags="@tag.Datasource"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!CAUTION]
> If you modify the content in this section, you are likely to disrupt
the CI result for your PR.
<!-- end of auto-generated comment: Cypress test results -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Style**
- Improved the visual layout and padding of the `TabPanelWrapper`
component for better readability and user interface experience.
- Updated the layout or styling of the `DebuggerLogs` component to
enhance the user interface.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Show the Suggested widgets panel in the response pane in the bottom
instead of the right side.
This will greatly simplify the Query and Api screens.
- Removes functionality of suggested widgets from the right pane context
- Only renders the right pane if `additionalSections` is passed
- Adds a new Bind Data button in the Response Pane
- OnClick of button, a menu with suggested widget bindings show up
#### PR fixes following issue(s)
Fixes#30968
#### Media
https://github.com/appsmithorg/appsmith/assets/12022471/20e239ad-dea4-4755-b199-4f0920ae1d46
#### Type of change
- New feature (non-breaking change which adds functionality)
- This change requires a documentation update
## Testing
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [x] 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
- [ ] 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
- [ ] 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:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **New Features**
- Introduced a new `BindDataButton` component for easier data binding to
widgets in the visual editor.
- Updated UI elements and interactions in the API and Query editors for
improved usability.
- Added an import statement for `Widgets` from the `DataSources` module.
- Changed the method call from clicking on a suggested table widget to
adding a suggested widget of type `Table`.
- **Refactor**
- Simplified and streamlined the `ActionRightPane` component by removing
outdated functionalities.
- Adjusted UI components and layouts across various editor components
for better consistency and usability.
- **Bug Fixes**
- Fixed text inconsistency in the `CONNECT_EXISTING_WIDGET_LABEL`
constant.
- Removed unnecessary `useEffect` hook in the `EntityBottomTabs`
component to improve performance.
- **Chores**
- Removed deprecated code and unused imports across several files to
clean up the codebase.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Moves the Schema in Query Pane from the right side to the tab on the
bottom. This is done to eventually remove the right side pane for Side
by Side layout
#### PR fixes following issue(s)
Fixes#30873
#### Media
https://github.com/appsmithorg/appsmith/assets/12022471/28c5086a-1967-4a72-8dc5-0717751198cf
#### Type of change
- New feature (non-breaking change which adds functionality)
## Testing
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
- [ x ] Manual
- [ x ] Jest
- [ x ] Cypress
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a refresh button in the datasource structure container for
easy refreshing.
- Added a new state to handle scenarios with no columns to display,
enhancing user feedback.
- Implemented conditional rendering of components based on new props and
states, improving UI responsiveness and interaction.
- **Enhancements**
- Updated placeholder texts and messages for a clearer user experience.
- Improved the layout and styling of various components for better
visual appeal and usability.
- **Refactor**
- Streamlined the rendering logic and state management in several
components, leading to a cleaner codebase.
- Removed unused imports and functions, optimizing component
performance.
- **Bug Fixes**
- Fixed issues in test suites related to table schema handling and
selection.
- **UI Changes**
- Adjusted styling properties for better alignment, display, and gap
spacing in the datasource structure search container.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Updates view of Query / Api and JS to not show the header and right side
panels in side by side view
fixes: #30658
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a compact query editor interface for specific action types.
- Added conditional rendering in various components based on the
`isSideBySideEnabled` feature flag.
- Launched new components for enhanced query editor functionalities,
including `QueryEditorCompact`, `FormRender`, `QueryEditorHeader`.
- **Enhancements**
- Updated selector functions to filter out falsy values, improving data
quality.
- Refined UI and functionality in the API and JS editors, focusing on
user experience.
- **Refactor**
- Removed unused imports and variables, streamlined component
structures, and updated UI component placements for clarity and
efficiency.
- Optimized form rendering logic and action execution handling in the
query editor.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Fixes spacing issue in debugger.
#### PR fixes following issue(s)
Fixes # (issue number)
> if no issue exists, please create an issue and ask the maintainers
about this first
>
#### Media
##### Before
##### After
#### Type of change
- Bug fix (non-breaking change which fixes an issue)
>
## Testing
>
#### How Has This Been Tested?
- [ ] Manual
>
>
#### 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
- [x] 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
- [ ] PR is being merged under a feature flag
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
## 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
This PR includes changes for renaming design system package. Since we
are building new package for the refactored design system components,
the old package is renaming to design-system-old.
Fixes#19536
## Type of change
- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
## How Has This Been Tested?
- Manual
- Jest
- 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
- [ ] 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
- [ ] 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
* Refactor toast to be passed the dispatch hook externally
* Add comments explaining dilemma
* use store.dispatch instead of a hook
* use alpha version
* Change imports
* Refactor DebugButton out
* update release
* fix issue with incorrectly merged package.lock
* fix syntax of alpha version
* bump ds vesion
* copy lock from release
* update lock to have alpha
* make changes
* delete Toast
* DS package version updated
* import change from release
* use new alpha version
* update ds version
* update ds version
* chore: migrate editable text and friends (#17285)
* Delete empty components
* use alpha for ds
* Deleted EditableTextSubComponent, import changes
* Delete EditableText, import changes
* use ds alpha 10
* Delete EditableTextWrapper.tsx
* update ds to use next minor version
* use new alpha
* fix issue with merge
Co-authored-by: Albin <albin@appsmith.com>
* chore: migrate file picker v2 (#17308)
* use alpha ds
* Delete FilePickerV2, import changes
* Delete FilePicker, change imports
* update alpha version
* chore: move copy url form into setting components (#17322)
* move CopyUrlForm to src/pages/settings/formgroup
* update ds version to use next minor release
* feat: Migrate table component to design system (#17329)
* feat: Migrate table component to design system
* removed commented code in ads index file
* fix: table no data hover effect removed
Co-authored-by: Tanvi Bhakta <tanvibhakta@gmail.com>
* feat: Banner message component migrated to design system (#17327)
* feat: Banner image component migrated to design system
* Version update for design system package
* design system version updated
Co-authored-by: Tanvi Bhakta <tanvibhakta@gmail.com>
* feat: Tabs component migrated to design system (#17321)
* feat: Tabs component migrated to design system
* design system package version updated
* Update app/client/src/components/editorComponents/form/FormDialogComponent.tsx
* Update app/client/src/pages/Editor/PropertyPane/PropertyPaneTab.tsx
* Tab component expand issue fix
Co-authored-by: Tanvi Bhakta <tanvibhakta@gmail.com>
Co-authored-by: Albin <albin@appsmith.com>
Co-authored-by: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
