Fix #5295 UI layout fixes on setting tab. (#5541)

Co-authored-by: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>

openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Glossary.spec.js

@@ -96,13 +96,10 @@ describe('Glossary page should work properly', () => {
   beforeEach(() => {
     cy.goToHomePage();
     // redirecting to glossary page
-    cy.get(
+    cy.get('[data-testid="appbar-item-glossary"]')
-      '.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
-    )
       .scrollIntoView()
       .should('be.visible')
       .click();
-    cy.get('[data-testid="menu-item-Glossaries"]').should('be.visible').click();
     // Todo: need to remove below uncaught exception once tree-view error resolves
     cy.on('uncaught:exception', () => {
       // return false to prevent the error from
@@ -321,13 +318,10 @@ describe('Glossary page should work properly', () => {
 
     addNewTagToEntity(entity, term);
 
-    cy.get(
+    cy.get('[data-testid="appbar-item-glossary"]')
-      '.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
-    )
       .scrollIntoView()
       .should('be.visible')
       .click();
-    cy.get('[data-testid="menu-item-Glossaries"]').should('be.visible').click();
     goToAssetsTab(term);
     cy.get('[data-testid="column"] > :nth-child(1)')
       .contains(entity)
@@ -377,13 +371,11 @@ describe('Glossary page should work properly', () => {
       .should('be.visible')
       .click();
     cy.get('[data-testid="saveAssociatedTag"]').scrollIntoView().click();
-    cy.get(
+
-      '.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
+    cy.get('[data-testid="appbar-item-glossary"]')
-    )
       .scrollIntoView()
       .should('be.visible')
       .click();
-    cy.get('[data-testid="menu-item-Glossaries"]').should('be.visible').click();
     cy.wait(500);
     goToAssetsTab(term);
     cy.get('.tableBody-cell')

openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Tags.spec.js

@@ -17,12 +17,7 @@ import { NEW_TAG, NEW_TAG_CATEGORY, SEARCH_ENTITY_TABLE } from '../../constants/
 describe('Tags page should work', () => {
   beforeEach(() => {
     cy.goToHomePage();
-    cy.get(
+    cy.get('[data-testid="appbar-item-tags"]').should('be.visible').click();
-      '.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
-    )
-      .should('be.visible')
-      .click();
-    cy.get('[data-testid="menu-item-Tags"]').should('be.visible').click();
   });
 
   it('Required Details should be available', () => {

openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx

@@ -12,6 +12,7 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Card } from 'antd';
 import { capitalize } from 'lodash';
 import React from 'react';
 import { TITLE_FOR_NON_ADMIN_ACTION } from '../../constants/constants';
@@ -22,7 +23,7 @@ import { getActiveCatClass, getCountBadge } from '../../utils/CommonUtils';
 import { getActiveUsers } from '../../utils/TeamUtils';
 import { Button } from '../buttons/Button/Button';
 import NonAdminAction from '../common/non-admin-action/NonAdminAction';
-import PageLayout from '../containers/PageLayout';
+import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
 import Loader from '../Loader/Loader';
 import TeamDetails from '../TeamDetails/TeamDetails';
 import UserDetails from '../UserDetails/UserDetails';
@@ -88,6 +89,7 @@ const TeamsAndUsers = ({
    */
   const fetchLeftPanel = () => {
     return (
+      <Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
         <>
           <div className="tw-mb-8">
             <div
@@ -186,6 +188,7 @@ const TeamsAndUsers = ({
             </div>
           )}
         </>
+      </Card>
     );
   };
 
@@ -195,8 +198,9 @@ const TeamsAndUsers = ({
         <Loader />
       ) : (
         <div
-          className="tw-pb-3 tw-w-full tw-h-full tw-flex tw-flex-col"
+          className="tw-pb-3 tw-w-full tw-h-full tw-flex tw-flex-col tw-bg-white"
-          data-testid="team-and-user-container">
+          data-testid="team-and-user-container"
+          style={{ padding: '14px' }}>
           {!isTeamVisible ? (
             <UserDetails
               currentUserPage={currentUserPage}

openmetadata-ui/src/main/resources/ui/src/components/Webhooks/Webhooks.tsx

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Card } from 'antd';
 import classNames from 'classnames';
 import { cloneDeep, isNil, startCase } from 'lodash';
 import React, { FunctionComponent, useEffect, useState } from 'react';
@@ -25,7 +26,7 @@ import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder'
 import NextPrevious from '../common/next-previous/NextPrevious';
 import NonAdminAction from '../common/non-admin-action/NonAdminAction';
 import WebhookDataCard from '../common/webhook-data-card/WebhookDataCard';
-import PageLayout from '../containers/PageLayout';
+import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
 import { WebhooksProps } from './Webhooks.interface';
 
 const statuses = [
@@ -86,6 +87,7 @@ const Webhooks: FunctionComponent<WebhooksProps> = ({
 
   const fetchLeftPanel = () => {
     return (
+      <Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
         <>
           <h6 className="tw-heading tw-text-base">Webhooks</h6>
           <div className="tw-flex tw-justify-between tw-flex-col">
@@ -122,19 +124,20 @@ const Webhooks: FunctionComponent<WebhooksProps> = ({
             ))}
           </div>
         </>
+      </Card>
     );
   };
 
   const fetchRightPanel = () => {
     return (
-      <>
+      <Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
-        <div className="tw-mb-5 tw-mt-11">
+        <div className="tw-my-2">
           The webhook allows external services to be notified of the metadata
           change events happening in your organization through APIs. Register
           callback URLs with webhook integration to receive metadata event
           notifications. You can add, list, update, and delete webhooks.
         </div>
-      </>
+      </Card>
     );
   };
 
@@ -167,7 +170,7 @@ const Webhooks: FunctionComponent<WebhooksProps> = ({
 
   return data.length ? (
     <PageLayout leftPanel={fetchLeftPanel()} rightPanel={fetchRightPanel()}>
-      <div>
+      <div className="tw-bg-white" style={{ padding: '14px' }}>
         {filteredData.length ? (
           <>
             <div className="tw-flex tw-justify-end tw-items-center">

openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx

@@ -24,6 +24,14 @@ interface PageLayoutProp {
   classes?: string;
 }
 
+export const leftPanelAntCardStyle = {
+  border: '1px rgb(221, 227, 234) solid',
+  borderRadius: '8px',
+  boxShadow: '1px 1px 6px rgb(0 0 0 / 12%)',
+  marginRight: '4px',
+  marginLeft: '4px',
+};
+
 const PageLayout: FC<PageLayoutProp> = ({
   leftPanel,
   header,

openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDown.tsx

@@ -134,7 +134,7 @@ const DropDown: React.FC<DropDownProp> = ({
 
                 {isDropDownIconVisible ? (
                   <DropdownIcon
-                    style={{ marginTop: '7px', color: normalLink }}
+                    style={{ marginTop: '5px', color: normalLink }}
                   />
                 ) : null}
               </>

openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx

@@ -89,6 +89,26 @@ const NavBar = ({
                 label="Settings"
                 type="link"
               />
+              <NavLink
+                className="tw-nav focus:tw-no-underline"
+                data-testid="appbar-item-glossary"
+                id="glossary"
+                style={navStyle(pathname.startsWith('/glossary'))}
+                to={{
+                  pathname: '/glossary',
+                }}>
+                Glossaries
+              </NavLink>
+              <NavLink
+                className="tw-nav focus:tw-no-underline"
+                data-testid="appbar-item-tags"
+                id="tags"
+                style={navStyle(pathname.startsWith('/tags'))}
+                to={{
+                  pathname: '/tags',
+                }}>
+                Tags
+              </NavLink>
             </div>
           </div>
           <div

openmetadata-ui/src/main/resources/ui/src/constants/constants.ts

@@ -417,10 +417,8 @@ export const navLinkSettings = [
     disabled: false,
     isAdminOnly: true,
   },
-  { name: 'Glossaries', to: '/glossary', disabled: false },
   { name: 'Roles', to: '/roles', disabled: false, isAdminOnly: true },
   { name: 'Services', to: '/services', disabled: false },
-  { name: 'Tags', to: '/tags', disabled: false },
   {
     name: 'Teams & Users',
     to: ROUTES.TEAMS_AND_USERS,

openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Card } from 'antd';
 import { AxiosError, AxiosResponse } from 'axios';
 import classNames from 'classnames';
 import { compare } from 'fast-json-patch';
@@ -37,7 +38,9 @@ import Description from '../../components/common/description/Description';
 import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayout, {
+  leftPanelAntCardStyle,
+} from '../../components/containers/PageLayout';
 import Loader from '../../components/Loader/Loader';
 import ConfirmationModal from '../../components/Modals/ConfirmationModal/ConfirmationModal';
 import AddRoleModal from '../../components/Modals/RoleModal/AddRoleModal';
@@ -579,14 +582,19 @@ const RolesPage = () => {
 
   const fetchLeftPanel = (roles: Array<Role>) => {
     return (
-      <Fragment>
+      <Card
-        <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
+        data-testid="data-summary-container"
+        style={leftPanelAntCardStyle}
+        title={
+          <div className="tw-flex tw-justify-between tw-items-center">
             <h6
               className="tw-heading tw-text-base"
               data-testid="left-panel-title">
               Roles
             </h6>
           </div>
+        }>
+        <Fragment>
           {roles &&
             roles.map((role) => (
               <div
@@ -597,15 +605,16 @@ const RolesPage = () => {
                 data-testid="role-name-container"
                 key={role.name}
                 onClick={() => setCurrentRole(role)}>
-              <p
+                <span
                   className="tag-category label-category tw-self-center tw-truncate tw-w-52"
                   title={role.displayName}>
                   <span>{role.displayName}</span>{' '}
-              </p>
+                </span>
                 {role.defaultRole ? getDefaultBadge() : null}
               </div>
             ))}
         </Fragment>
+      </Card>
     );
   };
 
@@ -1113,7 +1122,10 @@ const RolesPage = () => {
             {isLoading ? (
               <Loader />
             ) : (
-              <div className="tw-pb-3" data-testid="role-container">
+              <div
+                className="tw-pb-3 tw-bg-white"
+                data-testid="role-container"
+                style={{ padding: '14px' }}>
                 {getRolesContainer()}
 
                 {getAddRoleForm()}

openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Card } from 'antd';
 import { AxiosError, AxiosResponse } from 'axios';
 import classNames from 'classnames';
 import { isNil } from 'lodash';
@@ -25,7 +26,9 @@ import NextPrevious from '../../components/common/next-previous/NextPrevious';
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayout, {
+  leftPanelAntCardStyle,
+} from '../../components/containers/PageLayout';
 import Loader from '../../components/Loader/Loader';
 import {
   getServiceDetailsPath,
@@ -231,11 +234,15 @@ const ServicesPage = () => {
 
   const fetchLeftPanel = () => {
     return (
-      <>
+      <Card
-        <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
+        data-testid="data-summary-container"
+        style={leftPanelAntCardStyle}
+        title={
+          <div className="tw-flex tw-justify-between tw-items-center">
             <h6 className="tw-heading tw-text-base">Services</h6>
           </div>
-
+        }>
+        <>
           {getServiceTabs()?.map((tab, index) => {
             return (
               <div
@@ -261,6 +268,7 @@ const ServicesPage = () => {
             );
           })}
         </>
+      </Card>
     );
   };
 
@@ -406,10 +414,10 @@ const ServicesPage = () => {
           className="tw-grid xl:tw-grid-cols-4 tw-grid-cols-2 tw-gap-4 tw-mb-4"
           data-testid="data-container">
           {serviceList.map((service, index) => (
+            <Card key={index} style={leftPanelAntCardStyle}>
               <div
-              className="tw-card tw-flex tw-py-2 tw-px-3 tw-justify-between tw-text-grey-muted"
+                className="tw-flex tw-py-2 tw-px-3 tw-justify-between tw-text-grey-muted"
-              data-testid="service-card"
+                data-testid="service-card">
-              key={index}>
                 <div className="tw-flex tw-flex-col tw-justify-between tw-truncate">
                   <div>
                     <Link to={getServiceDetailsPath(service.name, serviceName)}>
@@ -433,7 +441,9 @@ const ServicesPage = () => {
                           markdown={service.description}
                         />
                       ) : (
-                      <span className="tw-no-description">No description</span>
+                        <span className="tw-no-description">
+                          No description
+                        </span>
                       )}
                     </div>
                     {getOptionalFields(service)}
@@ -453,6 +463,7 @@ const ServicesPage = () => {
                   </div>
                 </div>
               </div>
+            </Card>
           ))}
         </div>
       </Fragment>
@@ -490,7 +501,7 @@ const ServicesPage = () => {
       <ErrorPlaceHolder>{errorMessage}</ErrorPlaceHolder>
     ) : (
       <PageLayout leftPanel={fetchLeftPanel()}>
-        <div data-testid="services-container">
+        <div data-testid="services-container" style={{ padding: '14px' }}>
           {getServiceList()}
 
           {getPagination()}

openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx

@@ -12,6 +12,7 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Card } from 'antd';
 import { AxiosError, AxiosResponse } from 'axios';
 import classNames from 'classnames';
 import { isUndefined, toLower } from 'lodash';
@@ -34,7 +35,9 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayout, {
+  leftPanelAntCardStyle,
+} from '../../components/containers/PageLayout';
 import Loader from '../../components/Loader/Loader';
 import ConfirmationModal from '../../components/Modals/ConfirmationModal/ConfirmationModal';
 import FormModal from '../../components/Modals/FormModal';
@@ -397,10 +400,13 @@ const TagsPage = () => {
 
   const fetchLeftPanel = () => {
     return (
+      <Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
         <>
           <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
             <h6 className="tw-heading tw-text-base">Tag Categories</h6>
-          <NonAdminAction position="bottom" title={TITLE_FOR_NON_ADMIN_ACTION}>
+            <NonAdminAction
+              position="bottom"
+              title={TITLE_FOR_NON_ADMIN_ACTION}>
               <Button
                 className={classNames('tw-h-7 tw-px-2 tw-mb-4', {
                   'tw-opacity-40': !isAdminUser && !isAuthDisabled,
@@ -443,6 +449,7 @@ const TagsPage = () => {
               </div>
             ))}
         </>
+      </Card>
     );
   };
 
@@ -458,7 +465,10 @@ const TagsPage = () => {
             {isLoading ? (
               <Loader />
             ) : (
-              <div className="full-height" data-testid="tags-container">
+              <div
+                className="full-height tw-bg-white"
+                data-testid="tags-container"
+                style={{ padding: '14px' }}>
                 {currentCategory && (
                   <div
                     className="tw-flex tw-justify-between tw-items-center"