add clear search button

ManageIQ · Feb 29, 2024 · 4e40313 · 4e40313
1 parent 2d64e15
commit 4e40313
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 35 deletions.
diff --git a/app/javascript/components/AeInlineMethod/FilterNamespace.jsx b/app/javascript/components/AeInlineMethod/FilterNamespace.jsx
@@ -1,17 +1,43 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, Select, SelectItem } from 'carbon-components-react';
+import {
+  TextInput, Select, SelectItem, Button,
+} from 'carbon-components-react';
+import { Close16 } from '@carbon/icons-react';
 import { noSelect } from './helper';
 
 const FilterNamespace = ({ domains, filterOnChange }) => {
+  const [searchText, setSearchText] = useState('');
+
+  useEffect(() => {
+    filterOnChange({ text: searchText || noSelect });
+  }, [searchText]);
+
   /** Function to render the search text. */
   const renderSearchText = () => (
-    <TextInput
-      id="search-method"
-      labelText={__('Search')}
-      placeholder={__('Search with Name or Relative path')}
-      onChange={(event) => filterOnChange({ text: event.target.value || noSelect })}
-    />
+    <div className="search-wrapper">
+      <TextInput
+        id="search-method"
+        labelText={__('Search')}
+        placeholder={__('Search with Name or Relative path')}
+        value={searchText}
+        onChange={(event) => setSearchText(event.target.value)}
+      />
+      {
+        searchText && (
+          <Button
+            id="clear-search-text"
+            iconDescription={__('Clear text')}
+            title={__('Clear text')}
+            hasIconOnly
+            kind="primary"
+            onClick={() => setSearchText('')}
+            renderIcon={Close16}
+            size="field"
+          />
+        )
+      }
+    </div>
   );
 
   /** Function to render the domain items in a drop-down list. */

diff --git a/app/javascript/components/AeInlineMethod/NamespaceSelector.jsx b/app/javascript/components/AeInlineMethod/NamespaceSelector.jsx
@@ -64,6 +64,7 @@ const NamespaceSelector = ({ onSelectMethod, selectedIds }) => {
     ? (
       <MiqDataTable
         headers={methodSelectorHeaders}
+        stickyHeader
         rows={data.methods}
         mode="miq-inline-method-list"
         rowCheckBox

diff --git a/app/javascript/components/AeInlineMethod/index.jsx b/app/javascript/components/AeInlineMethod/index.jsx
@@ -1,6 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, Button, ModalBody } from 'carbon-components-react';
+import {
+  Modal, Button, ModalBody, Accordion, AccordionItem,
+} from 'carbon-components-react';
+import { AddAlt16 } from '@carbon/icons-react';
 import NotificationMessage from '../notification-message';
 import MiqDataTable from '../miq-data-table';
 import NamespaceSelector from './NamespaceSelector';
@@ -123,6 +126,7 @@ const AeInlineMethod = ({ type }) => {
         id="add-method"
         kind="primary"
         title={__('Add Method')}
+        renderIcon={AddAlt16}
         onClick={() => showModal(true)}
         size="sm"
       >
@@ -131,18 +135,15 @@ const AeInlineMethod = ({ type }) => {
     </div>
   );
 
-  /** Function to render the Add method button. */
   const renderCustomContents = () => (
-    <>
-      <div className="custom-form-title-wrapper">
-        <div className="custom-form-title">{__('Methods')}</div>
-      </div>
-      <div className="custom-form-component-wrapper">
+    <Accordion align="start" className="miq-custom-form-accordion">
+      <AccordionItem title={__('Methods')} open>
         {renderAddButton()}
         {renderList()}
-      </div>
-    </>
+      </AccordionItem>
+    </Accordion>
   );
+
   return (
     <div className="custom-form-wrapper">
       {renderCustomContents()}

diff --git a/app/javascript/components/AeInlineMethod/style.scss b/app/javascript/components/AeInlineMethod/style.scss
@@ -5,7 +5,15 @@
   .inline-filters {
     display: flex;
     flex-direction: row;
+    align-items: end;
     gap: 10px;
+
+    .search-wrapper {
+      display: flex;
+      flex-grow: 1;
+      flex-direction: row;
+      align-items: end;
+    }
   }
 
   .inline-contents-wrapper {
@@ -24,27 +32,20 @@
   }
 }
 
-.custom-form-wrapper {
-  border: 1px solid lightgray;
-  margin-bottom: 20px;
-  display: flex;
-  flex-direction: column;
+.miq-custom-form-accordion
+{
+  border: 1px solid #e0e0e0;
 
-  .custom-form-title-wrapper {
-    background: lightgray;
-    display: flex;
-    flex-direction: row;
-
-    .custom-form-title {
-      display: flex;
-      flex-grow: 1;
-      font-size: 16px;
-      padding: 8px 10px;
-    }
+  li button.bx--accordion__heading {
+    background: #e0e0e0;
+  }
+  .bx--accordion__item:last-child{
+    border: 0;
   }
 
-  .custom-form-component-wrapper {
-    padding: 10px;
+  .bx--accordion__content {
+    padding: 20px;
+    margin: 0;
 
     .custom-form-buttons {
       display: flex;