chore: support different page titles + use text label for single api …

…version (#3245) * support different page titles Signed-off-by: at670475 <[email protected]> * use label instead of dropdown for single api version Signed-off-by: at670475 <[email protected]> * fix tests Signed-off-by: at670475 <[email protected]> * fix css for zowe catalog too Signed-off-by: at670475 <[email protected]> --------- Signed-off-by: at670475 <[email protected]>
zowe · Jan 11, 2024 · 5c4175c · 5c4175c
1 parent 9824852
commit 5c4175c
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 38 deletions.
diff --git a/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.jsx b/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.jsx
@@ -37,6 +37,7 @@ const FeedbackButton = React.lazy(loadFeedbackButton);
 export default class Dashboard extends Component {
     componentDidMount() {
         if (isAPIPortal()) {
+            document.title = process.env.REACT_APP_API_PORTAL_DASHBOARD_TITLE;
             const goBackButton = document.getElementById('go-back-button-portal');
             if (goBackButton) {
                 goBackButton.style.display = 'none';

diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx
@@ -44,6 +44,7 @@ export default class DetailPage extends Component {
 
     componentDidMount() {
         if (isAPIPortal()) {
+            document.title = process.env.REACT_APP_API_PORTAL_SERVICE_TITLE;
             closeMobileMenu();
             const goBackButton = document.getElementById('go-back-button-portal');
             if (goBackButton) {

diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.css b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.css
@@ -131,3 +131,8 @@ p.MuiTypography-root.version-text.MuiTypography-body1 {
 #no-tiles-error > p {
     margin-left: 88px;
 }
+
+#single-api-version-label {
+    margin-left: 5px;
+    margin-top: 16px;
+}
diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx
@@ -291,23 +291,25 @@ export default class ServiceTab extends Component {
                             <Typography id="swagger-label" className="title1" size="medium" variant="outlined">
                                 Swagger
                             </Typography>
-                            {containsVersion && currentService && (
-                                <Typography id="version-label" variant="subtitle2">
-                                    Service ID and Version:
-                                </Typography>
-                            )}
+                            <div style={{ display: 'flex', alignItems: 'center' }}>
+                                {containsVersion && currentService && (
+                                    <Typography id="version-label" variant="subtitle2">
+                                        Service ID and Version:
+                                    </Typography>
+                                )}
+                                {currentService && apiVersions?.length === 1 && apiVersions[0]?.key && (
+                                    <Typography id="single-api-version-label" variant="subtitle2">
+                                        {apiVersions[0].key}
+                                    </Typography>
+                                )}
+                            </div>
                         </div>
-                        {currentService && apiVersions?.length > 0 && (
+                        {currentService && apiVersions?.length > 1 && (
                             <div id="version-div">
                                 <Select
-                                    disabled={apiVersions.length < 2}
                                     displayEmpty
                                     id="version-menu"
-                                    style={
-                                        apiVersions.length < 2
-                                            ? { color: '#6b6868', opacity: '0.5' }
-                                            : { backgroundColor: '#fff', color: '#0056B3' }
-                                    }
+                                    style={{ backgroundColor: '#fff', color: '#0056B3' }}
                                     value={
                                         this.state.selectedVersion
                                             ? this.state.selectedVersion
@@ -320,12 +322,7 @@ export default class ServiceTab extends Component {
                                 </Select>
                                 <Button
                                     id="compare-button"
-                                    disabled={apiVersions.length < 2}
-                                    style={
-                                        apiVersions.length < 2
-                                            ? { backgroundColor: '#e4e4e4', color: '#6b6868', opacity: '0.5' }
-                                            : { backgroundColor: '#fff', color: '#0056B3' }
-                                    }
+                                    style={{ backgroundColor: '#fff', color: '#0056B3' }}
                                     onClick={() => this.handleDialogOpen(currentService)}
                                     key="diff"
                                 >

diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx
@@ -247,7 +247,7 @@ describe('>>> ServiceTab component tests', () => {
         expect(handleDialogOpenSpy).toHaveBeenCalledTimes(1);
     });
 
-    it('should disable the button and dropdown if apiVersions length is less than 2', () => {
+    it('should display single text label if apiVersions length is less than 2', () => {
         const selectService = jest.fn();
         const apiVersions = ['1.0.0'];
         selectedService.apiVersions = apiVersions;
@@ -257,21 +257,12 @@ describe('>>> ServiceTab component tests', () => {
         wrapper.setState({ apiVersions });
 
         const button = wrapper.find('#compare-button');
-        const dropdownMenu = wrapper.find('#version-menu');
-        expect(button.prop('disabled')).toEqual(true);
-        expect(dropdownMenu.prop('disabled')).toEqual(true);
-        expect(button.prop('style')).toEqual({
-            backgroundColor: '#e4e4e4',
-            color: '#6b6868',
-            opacity: '0.5',
-        });
-        expect(dropdownMenu.prop('style')).toEqual({
-            color: '#6b6868',
-            opacity: '0.5',
-        });
+        const versionLabel = wrapper.find('#single-api-version-label');
+        expect(button.exists()).toEqual(false);
+        expect(versionLabel.exists()).toEqual(true);
     });
 
-    it('should enable the button if apiVersions length is greater than or equal to 2', () => {
+    it('should display compare button and dropdown if apiVersions length is greater than or equal to 2', () => {
         const selectService = jest.fn();
         const wrapper = shallow(
             <ServiceTab match={params} selectedService={selectService} tiles={[tiles]} selectService={selectService} />
@@ -281,12 +272,8 @@ describe('>>> ServiceTab component tests', () => {
         wrapper.setState({ apiVersions });
 
         const button = wrapper.find('#compare-button');
-
-        expect(button.prop('disabled')).toEqual(false);
-        expect(button.prop('style')).toEqual({
-            backgroundColor: '#fff',
-            color: '#0056B3',
-        });
+        expect(wrapper.find('[data-testid="version-menu"]').exists()).toEqual(true);
+        expect(button.exists()).toEqual(true);
     });
 
     it('should show more videos', () => {

diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss b/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss
@@ -125,3 +125,8 @@ button.MuiButtonBase-root.MuiIconButton-root.more-content-button {
 .author {
     color: var(--text-secondary, #3B4151);
 }
+
+#single-api-version-label {
+    margin-left: 5px;
+    margin-top: 16px;
+}