chore: Support go back button for portal (#3116)

* add go back button Signed-off-by: at670475 <[email protected]> * cleanup Signed-off-by: at670475 <[email protected]> * remove non relevant test Signed-off-by: at670475 <[email protected]> --------- Signed-off-by: at670475 <[email protected]>
zowe · Sep 29, 2023 · 41a31e5 · 41a31e5
1 parent 5afda74
commit 41a31e5
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 31 deletions.
diff --git a/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.jsx b/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.jsx
@@ -35,9 +35,9 @@ const FeedbackButton = React.lazy(loadFeedbackButton);
 export default class Dashboard extends Component {
     componentDidMount() {
         if (isAPIPortal()) {
-            const productLabel = document.getElementById('product-title');
-            if (productLabel) {
-                productLabel.style.display = 'none';
+            const goBackButton = document.getElementById('go-back-button-portal');
+            if (goBackButton) {
+                goBackButton.style.display = 'none';
             }
         }
         const { fetchTilesStart, clearService } = this.props;

diff --git a/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.test.jsx b/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.test.jsx
@@ -275,7 +275,7 @@ describe('>>> Dashboard component tests', () => {
         expect(button.length).toEqual(1);
     });
 
-    it('should call getElementById to get product title and hide it', () => {
+    it('should call getElementById to get go back button and hide it', () => {
         process.env.REACT_APP_API_PORTAL = true;
         const spyElementById = jest.spyOn(document, 'getElementById').mockReturnValue({ style: { display: 'block' } });
         const wrapper = shallow(
@@ -289,31 +289,12 @@ describe('>>> Dashboard component tests', () => {
                 authentication={jest.fn()}
             />
         );
-        expect(spyElementById).toHaveBeenCalledWith('product-title');
-        const productLabel = wrapper.find('#product-title');
-        expect(document.getElementById('product-title').style.display).toBe('none');
+        expect(spyElementById).toHaveBeenCalledWith('go-back-button-portal');
+        const productLabel = wrapper.find('#go-back-button-portal');
+        expect(document.getElementById('go-back-button-portal').style.display).toBe('none');
         expect(productLabel.length).toEqual(0);
     });
 
-    it('should not hide the product label', () => {
-        process.env.REACT_APP_API_PORTAL = true;
-        const spyElementById = jest.spyOn(document, 'getElementById').mockImplementation(() => false);
-        const wrapper = shallow(
-            <Dashboard
-                tiles={null}
-                fetchTilesStart={jest.fn()}
-                fetchTilesStop={jest.fn()}
-                clearService={jest.fn()}
-                clear={jest.fn()}
-                assertAuthorization={jest.fn()}
-                authentication={jest.fn()}
-            />
-        );
-        const productLabel = wrapper.find('#product-title');
-        expect(productLabel).toBeDefined();
-        expect(spyElementById).toHaveBeenCalledWith('product-title');
-    });
-
     it('should lazily load feedback button component in api portal mode', async () => {
         process.env.REACT_APP_API_PORTAL = true;
 

diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx
@@ -32,9 +32,11 @@ const FeedbackButton = React.lazy(loadFeedbackButton);
 
 export default class DetailPage extends Component {
     componentDidMount() {
-        const productLabel = document.getElementById('product-title');
-        if (productLabel) {
-            productLabel.style.removeProperty('display');
+        if (isAPIPortal()) {
+            const goBackButton = document.getElementById('go-back-button-portal');
+            if (goBackButton) {
+                goBackButton.style.removeProperty('display');
+            }
         }
         const { fetchTilesStart, currentTileId, fetchNewTiles, history } = this.props;
         fetchNewTiles();

diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx
@@ -321,7 +321,7 @@ describe('>>> Detailed Page component tests', () => {
         },
     };
 
-    it('should call getElementById to get product title and hide it', () => {
+    it('should call getElementById to get go back button and hide it', () => {
         process.env.REACT_APP_API_PORTAL = true;
         const spyElementById = jest.spyOn(document, 'getElementById');
         const removePropSpy = jest.spyOn(productLabel.style, 'removeProperty');
@@ -343,7 +343,7 @@ describe('>>> Detailed Page component tests', () => {
                 history={history}
             />
         );
-        expect(spyElementById).toHaveBeenCalledWith('product-title');
+        expect(spyElementById).toHaveBeenCalledWith('go-back-button-portal');
         expect(removePropSpy).toHaveBeenCalled();
     });
 });
diff --git a/api-catalog-ui/frontend/src/components/Header/_header.scss b/api-catalog-ui/frontend/src/components/Header/_header.scss
@@ -5,6 +5,23 @@ body {
             display: contents;
         }
     }
+  #go-back-button-portal {
+      background-color: #CC092F;
+      margin-right: 25px;
+      border-radius: 3px;
+      width: 42%;
+      height: 40px;
+      &, > span {
+          &, > a {
+              text-decoration: none;
+              color: white;
+              font-size: var( --fontMedium );
+          }
+          &, > a:hover {
+              color: var(--linkHover);
+          }
+      }
+  }
   #product-title {
       font-size: var( --spaceLarger );
       font-family: var( --fontFamily00 );