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

Nc feat/filter UI #8429

Merged
merged 23 commits into from May 20, 2024
Merged

Nc feat/filter UI #8429

merged 23 commits into from May 20, 2024

Conversation

dstala
Copy link
Member

@dstala dstala commented May 8, 2024

Change Summary

Provide summary of changes with issue number if any.

Change type

  • feat: (new feature for the user, not a new feature for build script)
  • fix: (bug fix for the user, not a fix to a build script)
  • docs: (changes to the documentation)
  • style: (formatting, missing semi colons, etc; no production code change)
  • refactor: (refactoring production code, eg. renaming a variable)
  • test: (adding missing tests, refactoring tests; no production code change)
  • chore: (updating grunt tasks etc; no production code change)

Test/ Verification

Provide summary of changes.

Additional information / screenshots (optional)

Anything for maintainers to be made aware of

Copy link
Contributor

coderabbitai bot commented May 8, 2024

Warning

Rate Limit Exceeded

@pranavxc has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 6 minutes and 23 seconds before requesting another review.

How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.
Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.
Please see our FAQ for further information.

Commits Files that changed from the base of the PR and between 0342d06 and 6f016b5.

Walkthrough

The recent updates aim to enhance the filtering functionality within the application by improving the visibility and focus behaviors of the filter components. The FieldListAutoCompleteDropdown now sorts fields with a focus on system columns. Additionally, adjustments have been made to the test scripts for the toolbar filter to target UI elements more effectively.

Changes

File Path Summary of Changes
.../smartsheet/toolbar/ColumnFilter.vue
.../smartsheet/toolbar/ColumnFilterMenu.vue
Added isOpen prop to ColumnFilter.vue and :is-open="open" prop to ColumnFilterMenu.vue, enhancing visibility and focus behavior.
.../smartsheet/toolbar/FieldListAutoCompleteDropdown.vue Updated functionality to sort fields, prioritizing system columns at the end before mapping to a new structure.
.../composables/useViewFilters.ts Updated logical_op assignment in useViewFilters function to dynamically set the logical operator based on logicalOps size.
.../pages/Dashboard/common/Toolbar/Filter.ts Modified selector for clicking the "Add Filter" button and added action for clicking "Add Filter" in a submenu.

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.

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: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 34a0003 and 76430c2.
Files selected for processing (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (4 hunks)
  • packages/nc-gui/composables/useViewFilters.ts (2 hunks)
Additional comments not posted (5)
packages/nc-gui/composables/useViewFilters.ts (2)

209-209: Improved code readability by adding a space after the colon in the ternary operation.


490-490: Improved code readability by adding a space after the colon in the ternary operation.

packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (3)

424-426: Enhanced UI control and responsiveness by adding a conditional class and updating the event handler for logical operator changes.


479-479: Enhanced UI responsiveness by adding a conditional class based on user permissions and operational rules.


687-692: Improved visual consistency and usability by adjusting the minimum height of the select element and hiding the select arrow when disabled.

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: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 34a0003 and 63f6e24.
Files selected for processing (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (5 hunks)
  • packages/nc-gui/composables/useViewFilters.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
  • packages/nc-gui/composables/useViewFilters.ts

Copy link
Contributor

github-actions bot commented May 8, 2024

Uffizzi Preview deployment-51763 was deleted.

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: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 34a0003 and 4d7c84b.
Files selected for processing (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (7 hunks)
  • packages/nc-gui/composables/useViewFilters.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
  • packages/nc-gui/composables/useViewFilters.ts

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: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 34a0003 and 06223f8.
Files selected for processing (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (7 hunks)
  • packages/nc-gui/composables/useViewFilters.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
  • packages/nc-gui/composables/useViewFilters.ts

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: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 06223f8 and 760df5c.
Files selected for processing (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (7 hunks)
  • packages/nc-gui/composables/useViewFilters.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
  • packages/nc-gui/composables/useViewFilters.ts

@o1lab o1lab force-pushed the nc-feat/filter-ui branch 2 times, most recently from 3d0acee to 9e91dc3 Compare May 9, 2024 23:43
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: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 760df5c and 3d0acee.
Files selected for processing (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (12 hunks)
  • packages/nc-gui/composables/useViewFilters.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
  • packages/nc-gui/composables/useViewFilters.ts

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: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 3d0acee and 9e91dc3.
Files selected for processing (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (12 hunks)
  • packages/nc-gui/composables/useViewFilters.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
  • packages/nc-gui/composables/useViewFilters.ts

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: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 9e91dc3 and cdce4c5.
Files selected for processing (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (12 hunks)
  • packages/nc-gui/composables/useViewFilters.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
  • packages/nc-gui/composables/useViewFilters.ts

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: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between cdce4c5 and 2abe27b.
Files selected for processing (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (11 hunks)
  • packages/nc-gui/composables/useViewFilters.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
  • packages/nc-gui/composables/useViewFilters.ts

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: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 2abe27b and 2a2aa10.
Files selected for processing (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (11 hunks)
  • packages/nc-gui/composables/useViewFilters.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
  • packages/nc-gui/composables/useViewFilters.ts

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

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 2a2aa10 and 659488d.
Files selected for processing (3)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (12 hunks)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue (1 hunks)
  • packages/nc-gui/composables/useViewFilters.ts (1 hunks)
Files skipped from review as they are similar to previous changes (1)
  • packages/nc-gui/composables/useViewFilters.ts
Additional comments not posted (2)
packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue (1)

84-84: The addition of :is-open="open" to control the visibility of the SmartsheetToolbarColumnFilter component is correctly implemented.

Verification successful

The search results from the script indicate that the open ref is indeed used within the ColumnFilterMenu.vue component. Here's a breakdown of the usage:

  1. Initialization: const open = ref(false) - This line initializes the open ref with a default value of false, indicating that the component is closed by default.
  2. Functionality: useMenuCloseOnEsc(open) - This function likely handles the logic to close the menu when the escape key is pressed, utilizing the open ref to control the visibility state.
  3. State Change: open.value = true - This line explicitly sets the open value to true, which is typically done to open the menu.
  4. Data Binding: v-model:visible="open" - This binds the visibility of some part of the component to the open ref, ensuring that changes to open will reflect in the component's visibility.
  5. Property Binding: :is-open="open" - This passes the open ref as a prop to another component or element, likely to control its visibility as well.

Based on this information, it appears that the open ref is actively managed and used appropriately within the component to control visibility and interaction behaviors. The addition of :is-open="open" is consistent with the usage pattern of the open ref and seems to be correctly implemented.

Final Response:

The usage of the open ref in the ColumnFilterMenu.vue component is well-managed and correctly implemented to control the visibility of the SmartsheetToolbarColumnFilter component. The addition of the :is-open="open" property aligns with the existing management of the open state.

  • Proper initialization and state management of open ref.
  • Correct implementation of visibility control through v-model:visible and :is-open.
Scripts Executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify that the `open` ref is managed correctly in the `ColumnFilterMenu.vue` component.

# Test: Search for the usage of the `open` ref. Expect: Proper management of the `open` state.
rg --type vue $'open' packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue

Length of output: 115



Script:

#!/bin/bash
# Description: Verify that the `open` ref is managed correctly in the `ColumnFilterMenu.vue` component.

# Test: Search for the usage of the `open` ref. Expect: Proper management of the `open` state.
rg 'open' packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue

Length of output: 197

packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (1)

14-14: Addition of isOpen?: boolean to the Props interface is correctly implemented to enhance component interactivity.

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

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 659488d and 28b0bf0.
Files selected for processing (4)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (12 hunks)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue (1 hunks)
  • packages/nc-gui/composables/useViewFilters.ts (1 hunks)
  • tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts (1 hunks)
Files skipped from review as they are similar to previous changes (3)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
  • packages/nc-gui/composables/useViewFilters.ts

tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts Outdated Show resolved Hide resolved
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: 3

Out of diff range and nitpick comments (1)
packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (1)

Line range hint 752-865: Consider using CSS variables for colors and spacing to maintain consistency and improve maintainability.

.nc-filter-wrapper {
  @apply bg-white !rounded-lg border-1px border-[#E7E7E9];
  --border-color: #E7E7E9;
  --bg-color: white;
}
Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 28b0bf0 and 7b8c64c.
Files selected for processing (4)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (12 hunks)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue (1 hunks)
  • packages/nc-gui/composables/useViewFilters.ts (1 hunks)
  • tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts (1 hunks)
Files skipped from review as they are similar to previous changes (3)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
  • packages/nc-gui/composables/useViewFilters.ts
  • tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts
Additional comments not posted (1)
packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (1)

374-375: Ensure that the saveOrUpdate function handles all necessary conditions previously managed by filterUpdateCondition.

Verification successful

The saveOrUpdate function in useViewFilters.ts handles various conditions, including undo functionality, nested mode, API calls for creating and updating filters, error handling, and data reloading. This confirms that it manages all necessary conditions previously handled by filterUpdateCondition.

Scripts Executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify the implementation of the `saveOrUpdate` function.

# Test: Search for the `saveOrUpdate` function implementation. Expect: Proper handling of all conditions.
rg --type vue $'saveOrUpdate'

Length of output: 56



Script:

#!/bin/bash
# Description: Verify the implementation of the `saveOrUpdate` function.

# Test: Search for the `saveOrUpdate` function implementation. Expect: Proper handling of all conditions.
rg 'saveOrUpdate'

Length of output: 4763



Script:

#!/bin/bash
# Description: Extract the implementation of the `saveOrUpdate` function from `useViewFilters.ts`.

# Test: Extract the `saveOrUpdate` function implementation.
ast-grep --lang typescript --pattern $'const saveOrUpdate = async ($_) => {
  $$$
}' packages/nc-gui/composables/useViewFilters.ts

Length of output: 131



Script:

#!/bin/bash
# Description: Extract the implementation of the `saveOrUpdate` function from `useViewFilters.ts`.

# Test: Extract the `saveOrUpdate` function implementation.
ast-grep --lang typescript --pattern $'const saveOrUpdate = async function($_) {
  $$$
}' packages/nc-gui/composables/useViewFilters.ts

Length of output: 136



Script:

#!/bin/bash
# Description: Search for the `saveOrUpdate` function definition in `useViewFilters.ts`.

# Test: Search for the `saveOrUpdate` function definition.
rg 'const saveOrUpdate' packages/nc-gui/composables/useViewFilters.ts

Length of output: 251



Script:

#!/bin/bash
# Description: Extract the full implementation of the `saveOrUpdate` function from `useViewFilters.ts`.

# Test: Extract the lines of code for the `saveOrUpdate` function.
rg -A 20 'const saveOrUpdate = async (filter: Filter, i: number, force = false, undo = false, skipDataReload = false) =>' packages/nc-gui/composables/useViewFilters.ts

Length of output: 169



Script:

#!/bin/bash
# Description: Extract the full implementation of the `saveOrUpdate` function from `useViewFilters.ts`.

# Test: Extract the lines of code for the `saveOrUpdate` function.
rg -A 50 'const saveOrUpdate = async' packages/nc-gui/composables/useViewFilters.ts

Length of output: 1827



Script:

#!/bin/bash
# Description: Extract the full implementation of the `saveOrUpdate` function from `useViewFilters.ts`.

# Test: Extract more lines of code for the `saveOrUpdate` function.
rg -A 100 'const saveOrUpdate = async' packages/nc-gui/composables/useViewFilters.ts

Length of output: 3418

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: 3

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 7b8c64c and e1f635f.
Files selected for processing (3)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (13 hunks)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue (1 hunks)
  • tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
  • tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts
Additional comments not posted (2)
packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (2)

405-415: The focus logic implemented to enhance user experience by focusing the add button when the component is reopened is a good practice.


426-476: The template updates are consistent and follow best practices. Ensure all new elements and event handlers are tested thoroughly.

Also applies to: 480-750

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: 5

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 38132cb and 503d3c8.
Files selected for processing (4)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (13 hunks)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue (1 hunks)
  • packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue (1 hunks)
  • tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts (1 hunks)
Files skipped from review as they are similar to previous changes (3)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
  • packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
  • tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts

Comment on lines 426 to 472
<div v-if="nested" class="flex w-full items-center mb-2">
<div :class="[`nc-filter-logical-op-level-${nestedLevel}`]"><slot name="start"></slot></div>
<div class="flex-grow"></div>
<NcDropdown :trigger="['hover']" overlay-class-name="nc-dropdown-filter-group-sub-menu">
<GeneralIcon icon="plus" class="cursor-pointer" />

<template #overlay>
<NcMenu>
<template v-if="isEeUI && !isPublic">
<template v-if="filtersCount < getPlanLimit(PlanLimitTypes.FILTER_LIMIT)">
<NcMenuItem @click.stop="addFilter()">
<div class="flex items-center gap-1">
<component :is="iconMap.plus" />
<!-- Add Filter -->
{{ $t('activity.addFilter') }}
</div>
</NcMenuItem>

<NcMenuItem v-if="nestedLevel < 5" @click.stop="addFilterGroup()">
<div class="flex items-center gap-1">
<!-- Add Filter Group -->
<component :is="iconMap.plusSquare" />
{{ $t('activity.addFilterGroup') }}
</div>
</NcMenuItem>
</template>
</template>
<template v-else>
<NcMenuItem @click.stop="addFilter()">
<div class="flex items-center gap-1">
<component :is="iconMap.plus" />
<!-- Add Filter -->
{{ $t('activity.addFilter') }}
</div>
</NcMenuItem>

<NcButton v-if="!webHook && nestedLevel < 5" @click.stop="addFilterGroup()">
<div class="flex items-center gap-1">
<!-- Add Filter Group -->
<component :is="iconMap.plusSquare" />
{{ $t('activity.addFilterGroup') }}
</div>
</NcButton>
</template>
</NcMenu>
</template>
</NcDropdown>
Copy link
Contributor

@coderabbitai coderabbitai bot May 17, 2024

Choose a reason for hiding this comment

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

Ensure that the NcDropdown component has proper accessibility attributes, such as aria-haspopup and aria-expanded, to improve accessibility.

<NcDropdown :trigger="['hover']" overlay-class-name="nc-dropdown-filter-group-sub-menu" aria-haspopup="true" aria-expanded="false">

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
<div v-if="nested" class="flex w-full items-center mb-2">
<div :class="[`nc-filter-logical-op-level-${nestedLevel}`]"><slot name="start"></slot></div>
<div class="flex-grow"></div>
<NcDropdown :trigger="['hover']" overlay-class-name="nc-dropdown-filter-group-sub-menu">
<GeneralIcon icon="plus" class="cursor-pointer" />
<template #overlay>
<NcMenu>
<template v-if="isEeUI && !isPublic">
<template v-if="filtersCount < getPlanLimit(PlanLimitTypes.FILTER_LIMIT)">
<NcMenuItem @click.stop="addFilter()">
<div class="flex items-center gap-1">
<component :is="iconMap.plus" />
<!-- Add Filter -->
{{ $t('activity.addFilter') }}
</div>
</NcMenuItem>
<NcMenuItem v-if="nestedLevel < 5" @click.stop="addFilterGroup()">
<div class="flex items-center gap-1">
<!-- Add Filter Group -->
<component :is="iconMap.plusSquare" />
{{ $t('activity.addFilterGroup') }}
</div>
</NcMenuItem>
</template>
</template>
<template v-else>
<NcMenuItem @click.stop="addFilter()">
<div class="flex items-center gap-1">
<component :is="iconMap.plus" />
<!-- Add Filter -->
{{ $t('activity.addFilter') }}
</div>
</NcMenuItem>
<NcButton v-if="!webHook && nestedLevel < 5" @click.stop="addFilterGroup()">
<div class="flex items-center gap-1">
<!-- Add Filter Group -->
<component :is="iconMap.plusSquare" />
{{ $t('activity.addFilterGroup') }}
</div>
</NcButton>
</template>
</NcMenu>
</template>
</NcDropdown>
<div v-if="nested" class="flex w-full items-center mb-2">
<div :class="[`nc-filter-logical-op-level-${nestedLevel}`]"><slot name="start"></slot></div>
<div class="flex-grow"></div>
<NcDropdown :trigger="['hover']" overlay-class-name="nc-dropdown-filter-group-sub-menu" aria-haspopup="true" aria-expanded="false">
<GeneralIcon icon="plus" class="cursor-pointer" />
<template #overlay>
<NcMenu>
<template v-if="isEeUI && !isPublic">
<template v-if="filtersCount < getPlanLimit(PlanLimitTypes.FILTER_LIMIT)">
<NcMenuItem @click.stop="addFilter()">
<div class="flex items-center gap-1">
<component :is="iconMap.plus" />
<!-- Add Filter -->
{{ $t('activity.addFilter') }}
</div>
</NcMenuItem>
<NcMenuItem v-if="nestedLevel < 5" @click.stop="addFilterGroup()">
<div class="flex items-center gap-1">
<!-- Add Filter Group -->
<component :is="iconMap.plusSquare" />
{{ $t('activity.addFilterGroup') }}
</div>
</NcMenuItem>
</template>
</template>
<template v-else>
<NcMenuItem @click.stop="addFilter()">
<div class="flex items-center gap-1">
<component :is="iconMap.plus" />
<!-- Add Filter -->
{{ $t('activity.addFilter') }}
</div>
</NcMenuItem>
<NcButton v-if="!webHook && nestedLevel < 5" @click.stop="addFilterGroup()">
<div class="flex items-center gap-1">
<!-- Add Filter Group -->
<component :is="iconMap.plusSquare" />
{{ $t('activity.addFilterGroup') }}
</div>
</NcButton>
</template>
</NcMenu>
</template>
</NcDropdown>

Copy link
Member

Choose a reason for hiding this comment

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

This we have to do with all existing NcDropdown or a-dropdown usage so we can do it later.

Copy link
Contributor

Choose a reason for hiding this comment

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

@pranavxc, understood! It sounds like a plan to enhance accessibility across all dropdown components in a future update. If you need any assistance or reminders when you decide to implement these changes, feel free to reach out. Happy coding! 🚀

Copy link
Member

Choose a reason for hiding this comment

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

keep a reminder if possible

Copy link
Contributor

Choose a reason for hiding this comment

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

@pranavxc, I can help by creating a GitHub issue to serve as a reminder for enhancing accessibility across all dropdown components. This issue can include all the necessary details and can be labeled for easy tracking. Would you like me to go ahead and create this issue for you?

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: 5

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 503d3c8 and e3f6334.
Files selected for processing (5)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue (13 hunks)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue (1 hunks)
  • packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue (1 hunks)
  • packages/nc-gui/composables/useViewFilters.ts (1 hunks)
  • tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts (1 hunks)
Files skipped from review as they are similar to previous changes (4)
  • packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
  • packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
  • packages/nc-gui/composables/useViewFilters.ts
  • tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts

pranavxc and others added 2 commits May 20, 2024 15:18
…pleteDropdown.vue

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
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: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between e3f6334 and 0342d06.
Files selected for processing (2)
  • packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue (1 hunks)
  • tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
  • tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts

Signed-off-by: Pranav C <pranavxc@gmail.com>
Signed-off-by: Pranav C <pranavxc@gmail.com>
@dstala dstala merged commit afe99e2 into develop May 20, 2024
23 checks passed
@dstala dstala deleted the nc-feat/filter-ui branch May 20, 2024 14:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants