Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: WDS table widget polish #33417

Merged
merged 7 commits into from
May 16, 2024
Merged

chore: WDS table widget polish #33417

merged 7 commits into from
May 16, 2024

Conversation

jsartisan
Copy link
Contributor

@jsartisan jsartisan commented May 14, 2024

Fixes #33389

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

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/9112073097
Commit: 89ad682
Cypress dashboard url: Click here!

Copy link
Contributor

coderabbitai bot commented May 14, 2024

Walkthrough

Walkthrough

The updates primarily focus on standardizing button variants and icon positions, refining the primary columns control component, and polishing the WDS table widget. Key adjustments include converting button variant values to uppercase, dynamically setting button variants using objectKeys, and aligning button and text elements to improve UI consistency. Additionally, these changes include modifications to cell wrapping, cell alignment, and pagination input sizing.

Changes

Files/Groups Change Summaries
app/client/packages/design-system/widgets/src/components/Button/src/types.ts Updated button variants and icon positions from lowercase to uppercase.
app/client/src/components/propertyControls/PrimaryColumnsControlWDS.tsx Introduced PrimaryColumnsControlWDS component for managing table widget columns.
app/client/src/widgets/wds/WDSButtonWidget/config/defaultsConfig.ts
app/client/src/widgets/wds/WDSIconButtonWidget/config/defaultsConfig.ts
app/client/src/widgets/wds/WDSInlineButtonsWidget/config/propertyPaneConfig/contentConfig.ts
app/client/src/widgets/wds/WDSMenuButtonWidget/config/defaultsConfig.ts
app/client/src/widgets/wds/WDSIconButtonWidget/config/propertyPaneConfig/styleConfig.ts
app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/propertyPaneConfig/styleConfig.ts
Updated button variant property assignments to use objectKeys for dynamic setting.
app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/HeaderCell.tsx Simplified style prop for Flex component, removed pointerEvents: "none".
app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/URLCell.tsx Removed allowCellWrapping prop, set lineClamp to 1.
app/client/src/widgets/wds/WDSTableWidget/component/styles.module.css Imported colors from shared module, adjusted element widths.
app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/General.ts Removed allowCellWrapping configuration, updated button variant options.
app/client/src/widgets/wds/WDSTableWidget/widget/utilities.ts Conditional setting of horizontalAlignment based on columnType.
app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/ButtonCell.tsx Changed cellColor to buttonColor, defaulting to "accent".
app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts Added buttonColor: "accent" to defaultsConfig.
app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Color.ts Added buttonColor property definition with dynamic hidden function.
app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx Conditional setting for showConnectDataOverlay based on primaryColumns and renderMode.
app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/styles.module.css Adjusted width properties for elements within pagination header.
app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Data.ts Changed defaultValue for date format to "YYYY-MM-DD".
app/client/src/widgets/wds/WDSTableWidget/widget/reactTableUtils/getColumnsPureFn.tsx Set default format value to "YYYY-MM-DD" if column.outputFormat is falsy.

Assessment against linked issues

Objective Addressed Explanation
The button should be aligned to the left (#33389)
Links should be accent in default state (#33389)
Pagination input should be smaller to fit 3 digits (#33389)
Text with number type should be right-aligned (#33389)
Column title with number type should be right-aligned (#33389)

Recent Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 89ad682 and 01e278b.
Files selected for processing (36)
  • app/client/packages/design-system/widgets/src/components/ActionGroup/stories/ActionGroup.stories.tsx (3 hunks)
  • app/client/packages/design-system/widgets/src/components/Button/chromatic/Button.chromatic.stories.tsx (1 hunks)
  • app/client/packages/design-system/widgets/src/components/Button/src/types.ts (1 hunks)
  • app/client/packages/design-system/widgets/src/components/Button/stories/Button.stories.tsx (3 hunks)
  • app/client/packages/design-system/widgets/src/components/ButtonGroup/stories/ButtonGroup.stories.tsx (2 hunks)
  • app/client/packages/design-system/widgets/src/components/IconButton/stories/IconButton.stories.tsx (3 hunks)
  • app/client/packages/design-system/widgets/src/components/Text/chromatic/Text.chromatic.stories.tsx (1 hunks)
  • app/client/packages/design-system/widgets/src/components/Text/src/types.ts (1 hunks)
  • app/client/packages/design-system/widgets/src/utils/index.ts (1 hunks)
  • app/client/packages/design-system/widgets/src/utils/objectKeys.ts (1 hunks)
  • app/client/src/components/propertyControls/PrimaryColumnsControlV2.tsx (2 hunks)
  • app/client/src/components/propertyControls/PrimaryColumnsControlWDS.tsx (1 hunks)
  • app/client/src/components/propertyControls/index.ts (2 hunks)
  • app/client/src/widgets/wds/WDSButtonWidget/config/defaultsConfig.ts (2 hunks)
  • app/client/src/widgets/wds/WDSButtonWidget/config/propertyPaneConfig/styleConfig.ts (3 hunks)
  • app/client/src/widgets/wds/WDSIconButtonWidget/config/defaultsConfig.ts (1 hunks)
  • app/client/src/widgets/wds/WDSIconButtonWidget/config/propertyPaneConfig/styleConfig.ts (3 hunks)
  • app/client/src/widgets/wds/WDSInlineButtonsWidget/config/propertyPaneConfig/contentConfig.ts (3 hunks)
  • app/client/src/widgets/wds/WDSMenuButtonWidget/config/defaultsConfig.ts (1 hunks)
  • app/client/src/widgets/wds/WDSMenuButtonWidget/config/propertyPaneConfig/styleConfig.ts (3 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/component/Constants.ts (3 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/styles.module.css (1 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/ButtonCell.tsx (2 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/HeaderCell.tsx (2 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/PlainTextCell.tsx (1 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/URLCell.tsx (1 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/component/styles.module.css (2 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts (1 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Color.ts (2 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Data.ts (1 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/General.ts (4 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/contentConfig.ts (1 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx (4 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/widget/reactTableUtils/getColumnsPureFn.tsx (1 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/widget/utilities.ts (3 hunks)
  • app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/propertyPaneConfig/styleConfig.ts (3 hunks)
Files skipped from review as they are similar to previous changes (36)
  • app/client/packages/design-system/widgets/src/components/ActionGroup/stories/ActionGroup.stories.tsx
  • app/client/packages/design-system/widgets/src/components/Button/chromatic/Button.chromatic.stories.tsx
  • app/client/packages/design-system/widgets/src/components/Button/src/types.ts
  • app/client/packages/design-system/widgets/src/components/Button/stories/Button.stories.tsx
  • app/client/packages/design-system/widgets/src/components/ButtonGroup/stories/ButtonGroup.stories.tsx
  • app/client/packages/design-system/widgets/src/components/IconButton/stories/IconButton.stories.tsx
  • app/client/packages/design-system/widgets/src/components/Text/chromatic/Text.chromatic.stories.tsx
  • app/client/packages/design-system/widgets/src/components/Text/src/types.ts
  • app/client/packages/design-system/widgets/src/utils/index.ts
  • app/client/packages/design-system/widgets/src/utils/objectKeys.ts
  • app/client/src/components/propertyControls/PrimaryColumnsControlV2.tsx
  • app/client/src/components/propertyControls/PrimaryColumnsControlWDS.tsx
  • app/client/src/components/propertyControls/index.ts
  • app/client/src/widgets/wds/WDSButtonWidget/config/defaultsConfig.ts
  • app/client/src/widgets/wds/WDSButtonWidget/config/propertyPaneConfig/styleConfig.ts
  • app/client/src/widgets/wds/WDSIconButtonWidget/config/defaultsConfig.ts
  • app/client/src/widgets/wds/WDSIconButtonWidget/config/propertyPaneConfig/styleConfig.ts
  • app/client/src/widgets/wds/WDSInlineButtonsWidget/config/propertyPaneConfig/contentConfig.ts
  • app/client/src/widgets/wds/WDSMenuButtonWidget/config/defaultsConfig.ts
  • app/client/src/widgets/wds/WDSMenuButtonWidget/config/propertyPaneConfig/styleConfig.ts
  • app/client/src/widgets/wds/WDSTableWidget/component/Constants.ts
  • app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/styles.module.css
  • app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/ButtonCell.tsx
  • app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/HeaderCell.tsx
  • app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/PlainTextCell.tsx
  • app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/URLCell.tsx
  • app/client/src/widgets/wds/WDSTableWidget/component/styles.module.css
  • app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts
  • app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Color.ts
  • app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Data.ts
  • app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/General.ts
  • app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/contentConfig.ts
  • app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx
  • app/client/src/widgets/wds/WDSTableWidget/widget/reactTableUtils/getColumnsPureFn.tsx
  • app/client/src/widgets/wds/WDSTableWidget/widget/utilities.ts
  • app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/propertyPaneConfig/styleConfig.ts

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions github-actions bot added the skip-changelog Adding this label to a PR prevents it from being listed in the changelog label May 14, 2024
@jsartisan jsartisan requested a review from a team as a code owner May 15, 2024 05:38
@jsartisan jsartisan requested review from riodeuno and removed request for a team May 15, 2024 05:38
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2


return (
<Link
color={cellColor === "default" ? undefined : cellColor}
href={href}
isBold={isBold}
isItalic={isItalic}
lineClamp={lineClamp}
lineClamp={1}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider making lineClamp configurable.

To enhance flexibility, consider making the lineClamp value configurable through props instead of hardcoding it to 1.

- lineClamp={1}
+ lineClamp={props.lineClamp || 1}

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
lineClamp={1}
lineClamp={props.lineClamp || 1}


return (
<Text
color={cellColor === "default" ? undefined : cellColor}
isBold={isBold}
isItalic={isItalic}
lineClamp={lineClamp}
lineClamp={1}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider making lineClamp configurable.

To enhance flexibility, consider making the lineClamp value configurable through props instead of hardcoding it to 1.

- lineClamp={1}
+ lineClamp={props.lineClamp || 1}

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
lineClamp={1}
lineClamp={props.lineClamp || 1}

@@ -958,7 +958,11 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
}
selectedRowIndices={this.getSelectedRowIndices()}
serverSidePaginationEnabled={!!this.props.serverSidePaginationEnabled}
showConnectDataOverlay={false}
showConnectDataOverlay={
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding back the connect overlay. I forgot adding it back once i changed the methods config.

@jsartisan jsartisan requested review from KelvinOm and removed request for riodeuno May 15, 2024 07:26
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Comment on lines +209 to +220
{this.isEditableColumnPresent() && (
<EdtiableCheckboxWrapper
className="flex t--uber-editable-checkbox"
rightPadding={this.state.hasScrollableList}
>
<span className="mr-2">Editable</span>
<Checkbox
isSelected={this.isAllColumnsEditable()}
onChange={this.toggleAllColumnsEditability}
/>
</EdtiableCheckboxWrapper>
)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo in class name EdtiableCheckboxWrapper. It should be EditableCheckboxWrapper.

- const EdtiableCheckboxWrapper = styled.div<{ rightPadding: boolean | null }>`
+ const EditableCheckboxWrapper = styled.div<{ rightPadding: boolean | null }>`

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
{this.isEditableColumnPresent() && (
<EdtiableCheckboxWrapper
className="flex t--uber-editable-checkbox"
rightPadding={this.state.hasScrollableList}
>
<span className="mr-2">Editable</span>
<Checkbox
isSelected={this.isAllColumnsEditable()}
onChange={this.toggleAllColumnsEditability}
/>
</EdtiableCheckboxWrapper>
)}
{this.isEditableColumnPresent() && (
<EditableCheckboxWrapper
className="flex t--uber-editable-checkbox"
rightPadding={this.state.hasScrollableList}
>
<span className="mr-2">Editable</span>
<Checkbox
isSelected={this.isAllColumnsEditable()}
onChange={this.toggleAllColumnsEditability}
/>
</EditableCheckboxWrapper>
)}

@jsartisan jsartisan removed the request for review from KelvinOm May 15, 2024 08:37
@jsartisan jsartisan marked this pull request as draft May 15, 2024 08:37
@jsartisan jsartisan marked this pull request as ready for review May 15, 2024 10:39
@github-actions github-actions bot added Anvil POD Issue related to Anvil project High This issue blocks a user from building or impacts a lot of users Task A simple Todo WDS team labels May 15, 2024
@jsartisan
Copy link
Contributor Author

/build-deploy-preview skip-tests=true

Copy link

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/9094629545.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 33417.
recreate: .

Copy link

Deploy-Preview-URL: https://ce-33417.dp.appsmith.com

KelvinOm
KelvinOm previously approved these changes May 15, 2024
@jsartisan jsartisan added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels May 15, 2024
@jsartisan
Copy link
Contributor Author

/build-deploy-preview skip-tests=true

Copy link

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/9110969131.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 33417.
recreate: .

Copy link

Deploy-Preview-URL: https://ce-33417.dp.appsmith.com

@jsartisan jsartisan requested a review from KelvinOm May 16, 2024 11:10
KelvinOm
KelvinOm previously approved these changes May 16, 2024
@jsartisan jsartisan removed the ok-to-test Required label for CI label May 16, 2024
Copy link

Whoops! Looks like you're using an outdated method of running the Cypress suite.
Please check this doc to learn how to correct this!

@jsartisan jsartisan added the ok-to-test Required label for CI label May 16, 2024
@KelvinOm KelvinOm merged commit 9cdff0a into release May 16, 2024
18 of 19 checks passed
@KelvinOm KelvinOm deleted the chore/table-widget-polish branch May 16, 2024 13:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Anvil POD Issue related to Anvil project High This issue blocks a user from building or impacts a lot of users ok-to-test Required label for CI skip-changelog Adding this label to a PR prevents it from being listed in the changelog Task A simple Todo WDS team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

WDS table polish
2 participants