Improve usability of select search on large options content (#3052)

* Improve usability of select search on large options content * Adjust e2e tests * Improve default biheviour for large select options
trento-project · Oct 8, 2024 · be5c58b · be5c58b
1 parent f83bf66
commit be5c58b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git a/assets/js/common/Filter/Filter.jsx b/assets/js/common/Filter/Filter.jsx
@@ -100,7 +100,7 @@ function Filter({ options, title, value = [], onChange }) {
           afterLeave={() => setQuery('')}
           show={open}
         >
-          <div className="absolute mt-1 w-full z-10 rounded-md bg-white shadow-lg">
+          <div className="absolute mt-1 z-10 rounded-md bg-white shadow-lg min-w-full">
             <div className="ring-1 ring-black ring-opacity-5 rounded-md">
               <div className="pt-2 pb-1 px-2 flex justify-center">
                 <input

diff --git a/assets/js/common/Filter/Filter.stories.jsx b/assets/js/common/Filter/Filter.stories.jsx
@@ -34,8 +34,7 @@ export default {
 
     return (
       <Filter
-        title={args.title}
-        options={args.options}
+        {...args}
         value={value}
         onChange={(newValue) => {
           setValue(newValue);
@@ -87,3 +86,15 @@ export const WithLabel = {
     value: ['tony-kekw'],
   },
 };
+
+export const WithLargeOptionContent = {
+  args: {
+    ...Default.args,
+    options: [
+      'Tony Kekw',
+      'Chad Carbonara',
+      'Chuck Amatriciana',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    ],
+  },
+};
diff --git a/assets/js/pages/ActivityLogPage/ActivityLogPage.jsx b/assets/js/pages/ActivityLogPage/ActivityLogPage.jsx
@@ -141,7 +141,7 @@ function ActivityLogPage() {
     {
       key: 'type',
       type: 'select',
-      title: 'Resource type',
+      title: 'Type',
       options: pipe(
         allowedActivities,
         map(([key, value]) => [key, value.label])

diff --git a/test/e2e/cypress/e2e/activity_log.cy.js b/test/e2e/cypress/e2e/activity_log.cy.js
@@ -54,9 +54,7 @@ context('Activity Log page', () => {
       }).as('data');
       cy.visit('/activity_log');
 
-      cy.contains('Filter Resource type', { matchCase: false }).should(
-        'be.visible'
-      );
+      cy.contains('Filter Type', { matchCase: false }).should('be.visible');
       cy.contains('Filter older than', { matchCase: false }).should(
         'be.visible'
       );
@@ -92,7 +90,7 @@ context('Activity Log page', () => {
       cy.contains('Filter newer than').click();
       cy.get('input[type="datetime-local"]:first').type('2024-08-13T10:21');
 
-      cy.contains('Filter Resource type').click();
+      cy.contains('Filter Type').click();
       cy.contains('Login Attempt').click();
       cy.contains('Tag Added').click();
 
@@ -117,9 +115,7 @@ context('Activity Log page', () => {
 
       cy.contains('Reset').click();
 
-      cy.contains('Filter Resource type', { matchCase: false }).should(
-        'be.visible'
-      );
+      cy.contains('Filter Type', { matchCase: false }).should('be.visible');
       cy.contains('Filter older than', { matchCase: false }).should(
         'be.visible'
       );
@@ -246,7 +242,7 @@ context('Activity Log page', () => {
         );
       });
 
-      cy.contains('Filter Resource type').click();
+      cy.contains('Filter Type').click();
       cy.contains('Login Attempt').click();
       cy.contains('Apply').click();