Commit Graph

14 Commits

Author SHA1 Message Date
balajisoundar
d2fc0af659
fix: [Table Widget] Remove unnecessary scrollbar when page size fits in available height (#32327)
Fixes https://github.com/appsmithorg/appsmith/issues/17857

## Automation

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

### 🔍 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/8645383412>
> Commit: a0001d83d5826441c0e0dde59100b8eb5732974b
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8645383412&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->
2024-04-15 12:21:08 +05:30
Sangeeth Sivan
43940b7f2f
feat: JSON form widget one click binding integration (#25873)
## Description
- Adds one click binding support for JSON form widget.

#### PR fixes following issue(s)
Fixes #25561 
Fixes #26375 

#### 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

- 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.
> Delete anything that is not relevant
- [x] Manual
- [x] Jest
- [x] Cypress

#### Test Plan
> [One click binding support on JSON Form (Test
plan)](https://github.com/appsmithorg/TestSmith/issues/2523)

#### 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:
- [ ] [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

---------

Co-authored-by: balajisoundar <balaji@appsmith.com>
2023-10-03 13:40:51 +05:30
Sheikh Jamir Alam
6aec092795
fix: Sort/Freeze control existing after they are disabled (#24005)
## Description
Sort and Freeze controls where visible even after disabling them. This
caused unwanted premature truncation of the header text.
Now, when both the controls are disabled, we don't see the freeze/sort
drop-down.
#### PR fixes following issue(s)
Fixes #23200 
#### Media
[Screencast from 02-06-23 11:59:25 AM
IST.webm](https://github.com/appsmithorg/appsmith/assets/48979376/b0381f6a-f596-4931-bf45-e7b397097091)

#### Type of change
- Bug fix (non-breaking change which fixes an issue)
## 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
- [X] 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:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change)
have been covered
- [x] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#areas-of-interest)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [x] 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
2023-06-15 12:48:04 +05:30
balajisoundar
a72e3347f5
feat: Table one click binding for MongoDB and Postgres (#23629)
> Pull Request Template
>
> Use this template to quickly create a well written pull request.
Delete all quotes before creating the pull request.
>
## Description
> Add a TL;DR when description is extra long (helps content team)
>
> Please include a summary of the changes and which issue has been
fixed. Please also include relevant motivation
> and context. List any dependencies that are required for this change
>
> Links to Notion, Figma or any other documents that might be relevant
to the PR
>
>
#### PR fixes following issue(s)
Fixes # (issue number)
> if no issue exists, please create an issue and ask the maintainers
about this first
>
>
#### 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.
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Chore (housekeeping or task changes that don't impact user perception)
- 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
- [x] Manual
- [x] Jest
- [x] Cypress
>
>
#### Test Plan
> One Click Binding -
https://github.com/appsmithorg/TestSmith/issues/2390
>
#### 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:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#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

---------

Co-authored-by: Vemparala Surya Vamsi <vamsi@appsmith.com>
2023-06-01 22:56:05 +05:30
Ivan Akulov
424d2f6965
chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
## 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>
2023-03-16 17:11:47 +05:30
Keyur Paralkar
2ccd20e1e5
fix: column dragging and column reordering (#20928)
## Description

This PR implements the following changes:
- Move the drag events from the Parent component's useEffect to the
`HeaderCell` component.
- Refactored the code. Inside the table component, we refactored the
code such that when SSP is disabled the component uses `StaticTable` and
when SSP enabled then we use `VirtualTable`.
- It also includes the fix for the following issue. Whenever the user
has a scroll to the bottom of the page, on clicking of add new button it
is expected that the scroll should move to the top but it wasn't
happening.

> Add a TL;DR when description is extra long (helps content team)

Fixes #20858
> if no issue exists, please create an issue and ask the maintainers
about this first


## Type of change


- Bug fix (non-breaking change which fixes an issue)


## How Has This Been Tested?

- Manual
    - Test cases:
        - Column name should appear on update from the property pane
        - reorder whenever SSP is enabled
        - On column re-size
        - When a col is frozen
        - When a col is unfrozen
        - When all the headers or one of them is removed
        - When sorted also should work
        - Enable multi-row selection
        - When in preview mode and back and forth(Check the above cases)
        - When in Deployed mode
- Dragging of columns from the column header should work as expected
both in Deploy and Published mode.
- 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
- [ ] 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
- [ ] 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
2023-03-05 19:49:44 +05:30
Keyur Paralkar
b22ad3a769
feat: added column freeze and unfreeze functionality to table widget (#18757)
**PRD**:
https://www.notion.so/appsmith/Ability-to-freeze-columns-dd118f7ed2e14e008ee305056b79874a?d=300f4968889244da9f737e1bfd8c06dc#2ddaf28e10a0475cb69f1af77b938d0b

This PR adds the following features to the table widget:

- Freeze the columns to the left or right of the table.(Both canvas and
page view mode).
- Unfreeze the frozen columns. (Both canvas and page view mode).
- Columns that are left frozen, will get unfrozen at a position after
the last left frozen column. (Both canvas and page view mode).
- Columns that are right frozen, will get unfrozen at a position before
the first right frozen column. (Both canvas and page view mode).
- Column order can be persisted in the Page view mode.
- Users can also unfreeze the columns that are frozen by the developers.
- Columns that are frozen cannot be reordered(Both canvas and page view
mode)
- **Property pane changes (Columns property)**:
- If the column is frozen to the left then that column should appear at
top of the list.
- If the column is frozen to the right then that column should appear at
the bottom of the list.
- The columns that are frozen cannot be moved or re-ordered in the list.
They remain fixed in their position.
- In-Page mode, If there is a change in frozen or unfrozen columns in
multiple tables then the order of columns and frozen and unfrozen
columns should get persisted on refresh i.e. changes should get
persisted across refreshes.
2023-02-15 17:12:46 +05:30
balajisoundar
2df27a6fb2
feat: Option to add new row in Table widget (#17515) 2022-11-05 15:24:20 +05:30
Souma Ghosh
99dc583514
feat: Resize Image option in Table Widget v2 (#17482)
* feat: Resize image option in Table Widget

* Change default image size from 64px to 32px

* Add cypress tests

* Move Image Size property control under Style tab

* Review changes

* Fix failing cypress tests

* fix prettier issue
2022-10-14 17:51:54 +05:30
Pawan Kumar
5ab8e57e0d
fix: Table reskinning (#17228)
* update rich text editor styles

* fix disalbed text  color

* add border

* fix gaps and borders in json form

* fix disabled state

* fix checkbox disabled state color on checkbox + font size of title in json

* fix pagination arrows

* update list + modal

* update tabs widget

* fix border color

* fix pagination styles

* fix font weight

* update colors

* update colors

* fix table hidden header

* add config for variant

* add check header border

* fix hover colors

* fix hover colors

* add fixes for feedbacks from dilip

* move cell borders

* move cell borders

* update label

* add dilip feedback fixes

* remove unused import

* fix font in filter popup

* fix margin and datepicker getting cut off

* table disabled state for header input

* fix icon color

* fix cypress tests
2022-10-14 10:23:31 +05:30
balajisoundar
81458035d5
feat: Support row virtualization using react-window in Table widget (#16872) 2022-10-06 15:02:09 +05:30
Souma Ghosh
57f3b6fde5
fix: Table's last column doesn't resize properly (#16448)
* fix: Table's last column doesn't resize properly

* Adds comments to code responsible for dynamic resizing of last column width
Adjusts component width to account for widget padding
  - This fixes issue where last column goes outside the table container resulting in showing less padding-right for the last column cells

* Review changes

* Review changes

* Fix failing test
2022-09-22 16:45:00 +05:30
Souma Ghosh
5cf06cd071
fix: Table Widget shows scrollbar when not in focus (#15573)
* fix: Table Widget shows scrollbar when not in focus

* Scroll bar fix for table widget v1

* - Shows all table scrollbars on hover for table widget v2
- Extends ScrollIndicator component to support showScrollbarOnHover functionality

* json field spec fix

* Changes requested in review

* index.js revert

* Review changes

* Club hover and active css together in scrollbarOnHoverCSS

* Fix "scroll thumb not visible until first scroll" issue

* Fix some typos in comment

Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
2022-08-23 12:02:48 +05:30
balajisoundar
a97ab3d9a2
feat: Table widget v2 with support for non-ASCII characters and improved jest coverage (#11307) 2022-07-14 12:32:35 +05:30