Fix company tags style

ManageIQ · Apr 2, 2024 · 8c243a1 · 8c243a1
1 parent 5a08c23
commit 8c243a1
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 24 deletions.
diff --git a/app/javascript/components/settings-company-tags/index.jsx b/app/javascript/components/settings-company-tags/index.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'carbon-components-react';
+import { Button, Accordion, AccordionItem } from 'carbon-components-react';
+import { AddAlt16 } from '@carbon/icons-react';
 import MiqDataTable from '../miq-data-table';
 import MiqStructuredList from '../miq-structured-list';
 import SettingsCompanyTagsEntryForm from '../settings-company-tags-entry-form';
@@ -70,7 +71,7 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => {
     });
   };
 
-  /** Function to be exeuted after the add/save/cancel/delete action */
+  /** Function to be executed after the add/save/cancel/delete action */
   const formCallback = (actionType, responseData) => {
     if (responseData.status === 'error') {
       return setData({
@@ -130,25 +131,16 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => {
 
   /** Function to render the add new button */
   const renderActionButton = () => (
-    <Button
-      onClick={() => onSelect('new')}
-      onKeyPress={() => onSelect('new')}
-      title={__('Click to add a new entry')}
-    >
-      {__('Add Entry')}
-    </Button>
-  );
-
-  /** Function to render the title bar */
-  const renderTitleBar = (title, hasButton) => (
-    <div className="miq-custom-tab-content-header">
-      <div className="tab-content-header-title">
-        <h3>{title}</h3>
-      </div>
-      <div className="tab-content-header-actions" />
-      {
-        hasButton && renderActionButton()
-      }
+    <div className="custom-accordion-buttons">
+      <Button
+        onClick={() => onSelect('new')}
+        onKeyPress={() => onSelect('new')}
+        renderIcon={AddAlt16}
+        size="sm"
+        title={__('Click to add a new entry')}
+      >
+        {__('Add Entry')}
+      </Button>
     </div>
   );
 
@@ -158,6 +150,7 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => {
     return (
       <MiqStructuredList
         rows={rows}
+        title={pageTitle}
         mode={mode}
         onClick={(dropDownData) => onDropDownChange(dropDownData)} // ToDo: onClick must be generic name
       />
@@ -174,7 +167,7 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => {
     return (
       <>
         <input type="hidden" id="ignore_form_changes" />
-        {renderTitleBar(sprintf(__('%s Entries'), data.selectedCategory.description), true)}
+        {renderActionButton()}
         <MiqDataTable
           rows={miqRows.rowItems}
           headers={data.list.headers}
@@ -205,7 +198,12 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => {
   const renderTabContent = () => (
     <>
       {data.summary && data.options && renderSummary()}
-      {data.pageType === pageTypes.list ? renderList() : renderForm()}
+      <Accordion align="start" className="miq-custom-accordion">
+        <AccordionItem title={sprintf(__('%s Entries'), data.selectedCategory.description)} open>
+          {data.pageType === pageTypes.list ? renderList() : renderForm()}
+        </AccordionItem>
+      </Accordion>
+
     </>
   );
 
@@ -215,7 +213,6 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => {
   */
   return (
     <>
-      {renderTitleBar(pageTitle, false)}
       {!data.isLoading && renderTabContent()}
     </>
   );

diff --git a/app/stylesheet/application-webpack.scss b/app/stylesheet/application-webpack.scss
@@ -14,6 +14,7 @@
 @import './ddf_override.scss';
 @import './menu.scss';
 @import './miq-custom-tab.scss';
+@import './miq-custom-accordion.scss';
 @import './miq-data-table.scss';
 @import './miq-table-toolbar.scss';
 @import './miq-structured-list.scss';

diff --git a/app/stylesheet/miq-custom-accordion.scss b/app/stylesheet/miq-custom-accordion.scss
@@ -0,0 +1,21 @@
+.miq-custom-accordion
+ {
+   border: 1px solid #e0e0e0;
+
+   li button.bx--accordion__heading {
+     background: #e0e0e0;
+   }
+   .bx--accordion__item:last-child{
+     border: 0;
+   }
+
+   .bx--accordion__content {
+     padding: 20px;
+     margin: 0;
+
+     .custom-accordion-buttons {
+       display: flex;
+       justify-content: flex-end;
+     }
+   }
+ }