diff --git a/app/javascript/components/settings-company-tags/index.jsx b/app/javascript/components/settings-company-tags/index.jsx index 92d325ac5a03..0a63299bb260 100644 --- 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 = () => ( - - ); - - /** Function to render the title bar */ - const renderTitleBar = (title, hasButton) => ( -
-
-

{title}

-
-
- { - hasButton && renderActionButton() - } +
+
); @@ -158,6 +150,7 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => { return ( onDropDownChange(dropDownData)} // ToDo: onClick must be generic name /> @@ -174,7 +167,7 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => { return ( <> - {renderTitleBar(sprintf(__('%s Entries'), data.selectedCategory.description), true)} + {renderActionButton()} { const renderTabContent = () => ( <> {data.summary && data.options && renderSummary()} - {data.pageType === pageTypes.list ? renderList() : renderForm()} + + + {data.pageType === pageTypes.list ? renderList() : renderForm()} + + + ); @@ -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 index 071395f0456e..aa61b6787dca 100644 --- 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 new file mode 100644 index 000000000000..8544f05acf52 --- /dev/null +++ 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; + } + } + }