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;
+ }
+ }
+ }