ui: updated glossary layout to sync with new layout (#12200)

* ui: updated glossary layout to sync with new layout

* fixed failing unit test

* updated row-id for test suite

* fixed 404 page

* addressing comment

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuites/TestSuites.component.tsx

@@ -82,7 +82,8 @@ export const TestSuites = () => {
                   activeTab: TableProfilerTab.DATA_QUALITY,
                 }),
               }}>
-              {getEntityName(record.executableEntityReference)}
+              {record.executableEntityReference?.fullyQualifiedName ??
+                record.executableEntityReference?.name}
             </Link>
           ) : (
             <Link

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx

@@ -65,6 +65,7 @@ const GlossaryTermTab = ({
   termsLoading,
   onAddGlossaryTerm,
   onEditGlossaryTerm,
+  className,
 }: GlossaryTermTabProps) => {
   const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(true);
@@ -264,7 +265,7 @@ const GlossaryTermTab = ({
   }
 
   return (
-    <Row gutter={[0, 16]}>
+    <Row className={className} gutter={[0, 16]}>
       <Col span={24}>
         <div className="d-flex justify-end">
           <Button

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.interface.ts

@@ -24,6 +24,7 @@ export interface GlossaryTermTabProps {
   permissions: OperationPermission;
   onAddGlossaryTerm: (glossaryTerm: GlossaryTerm | undefined) => void;
   onEditGlossaryTerm: (glossaryTerm: GlossaryTerm) => void;
+  className?: string;
 }
 
 export type ModifiedGlossaryTerm = Omit<GlossaryTerm, 'children'> & {

openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportGlossary/ImportGlossary.tsx

@@ -67,7 +67,7 @@ const ImportGlossary: FC<Props> = ({ glossaryName }) => {
   };
 
   return (
-    <Row className="import-glossary" gutter={[16, 8]}>
+    <Row className="import-glossary p-x-md" gutter={[16, 8]}>
       <Col span={24}>
         <TitleBreadcrumb titleLinks={breadcrumbList} />
       </Col>

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

@@ -111,7 +111,7 @@ const GlossaryDetails = ({
       className="glossary-details"
       data-testid="glossary-details"
       gutter={[0, 16]}>
-      <Col span={24}>
+      <Col className="p-x-md" span={24}>
         <GlossaryHeader
           isGlossary
           isVersionView={isVersionView}
@@ -123,12 +123,13 @@ const GlossaryDetails = ({
         />
       </Col>
 
-      <Col span={24}>
+      <Col className="border-top p-x-md" span={24}>
-        <Row gutter={[16, 16]}>
+        <Row className="h-full" gutter={[32, 16]}>
-          <Col span={18}>
+          <Col
+            className="border-right p-y-md glossary-content-container"
+            span={18}>
             <Space className="w-full" direction="vertical" size={24}>
               <DescriptionV1
-                wrapInCard
                 description={description}
                 entityName={glossary.displayName ?? glossary.name}
                 entityType={EntityType.GLOSSARY}
@@ -153,7 +154,7 @@ const GlossaryDetails = ({
               />
             </Space>
           </Col>
-          <Col span={6}>
+          <Col className="p-y-md" span={6}>
             <GlossaryDetailsRightPanel
               isGlossary
               isVersionView={isVersionView}

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

@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Button, Card, Col, Row, Space, Typography } from 'antd';
+import { Button, Col, Row, Space, Typography } from 'antd';
 import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg';
 import { ReactComponent as PlusIcon } from 'assets/svg/plus-primary.svg';
 import ProfilePicture from 'components/common/ProfilePicture/ProfilePicture';
@@ -195,7 +195,6 @@ const GlossaryDetailsRightPanel = ({
   );
 
   return (
-    <Card>
     <Row gutter={[0, 40]}>
       <Col data-testid="glossary-owner-name" span="24">
         <div className="d-flex items-center m-b-xss">
@@ -223,8 +222,7 @@ const GlossaryDetailsRightPanel = ({
           {getUserNames(selectedData)}
         </Space>
 
-          {!selectedData.owner &&
+        {!selectedData.owner && (permissions.EditOwner || permissions.EditAll) && (
-            (permissions.EditOwner || permissions.EditAll) && (
           <UserTeamSelectableList
             hasPermission={permissions.EditOwner || permissions.EditAll}
             owner={selectedData.owner}
@@ -304,7 +302,6 @@ const GlossaryDetailsRightPanel = ({
         </div>
       </Col>
     </Row>
-    </Card>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx

@@ -117,6 +117,7 @@ const GlossaryTermsV1 = ({
               children: (
                 <GlossaryTermTab
                   childGlossaryTerms={childGlossaryTerms}
+                  className="p-md glossary-term-table-container"
                   isGlossary={false}
                   permissions={permissions}
                   refreshGlossaryTerms={refreshGlossaryTerms}
@@ -221,7 +222,7 @@ const GlossaryTermsV1 = ({
   return (
     <>
       <Row data-testid="glossary-term" gutter={[0, 8]}>
-        <Col span={24}>
+        <Col className="p-x-md" span={24}>
           <GlossaryHeader
             isGlossary={false}
             isVersionView={isVersionView}
@@ -238,7 +239,7 @@ const GlossaryTermsV1 = ({
           <Tabs
             destroyInactiveTabPane
             activeKey={activeTab}
-            className="glossary-tabs"
+            className="glossary-tabs custom-tab-spacing"
             items={tabItems}
             onChange={activeTabHandler}
           />

openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/AssetsTabs.component.tsx

@@ -219,7 +219,7 @@ const AssetsTabs = forwardRef(
     }
 
     return (
-      <div data-testid="table-container">
+      <div className="p-md assets-tab-container" data-testid="table-container">
         {AssetsFilterOptions.map((option) => {
           const buttonStyle =
             activeFilter === option.value

openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/GlossaryOverviewTab.component.tsx

@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Card, Col, Row, Space } from 'antd';
+import { Col, Row, Space } from 'antd';
 import DescriptionV1 from 'components/common/description/DescriptionV1';
 import GlossaryDetailsRightPanel from 'components/GlossaryDetailsRightPanel/GlossaryDetailsRightPanel.component';
 import { OperationPermission } from 'components/PermissionProvider/PermissionProvider.interface';
@@ -99,18 +99,18 @@ const GlossaryOverviewTab = ({
   );
 
   return (
-    <Row className="glossary-overview-tab" gutter={[16, 16]}>
+    <Row className="glossary-overview-tab h-full" gutter={[32, 16]}>
-      <Col data-testid="updated-by-container" span={18}>
+      <Col
-        <Card>
+        className="border-right"
-          <Row gutter={[0, 32]}>
+        data-testid="updated-by-container"
+        span={18}>
+        <Row className="p-md p-r-0" gutter={[0, 32]}>
           <Col span={24}>
             <DescriptionV1
               description={glossaryDescription}
               entityName={selectedData?.displayName ?? selectedData?.name}
               entityType={EntityType.GLOSSARY}
-                hasEditAccess={
+              hasEditAccess={permissions.EditDescription || permissions.EditAll}
-                  permissions.EditDescription || permissions.EditAll
-                }
               isEdit={isDescriptionEditable}
               showCommentsIcon={false}
               onCancel={() => setIsDescriptionEditable(false)}
@@ -162,9 +162,8 @@ const GlossaryOverviewTab = ({
             </Row>
           </Col>
         </Row>
-        </Card>
       </Col>
-      <Col span={6}>
+      <Col className="p-t-md" span={6}>
         <GlossaryDetailsRightPanel
           isGlossary={false}
           isVersionView={isVersionView}

openmetadata-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.component.tsx

@@ -13,7 +13,7 @@
 import { Button, Card, Col, Row, Typography } from 'antd';
 import AppState from 'AppState';
 import EntityListSkeleton from 'components/Skeleton/MyData/EntityListSkeleton/EntityListSkeleton.component';
-import { getUserPath } from 'constants/constants';
+import { getUserPath, ROUTES } from 'constants/constants';
 import { AssetsType } from 'enums/entity.enum';
 import { EntityReference } from 'generated/entity/data/table';
 import { observer } from 'mobx-react';
@@ -21,6 +21,7 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { getUserById } from 'rest/userAPI';
+import { Transi18next } from 'utils/CommonUtils';
 import { getEntityName } from 'utils/EntityUtils';
 import { getEntityIcon, getEntityLink } from 'utils/TableUtils';
 
@@ -87,8 +88,8 @@ const MyDataWidgetInternal = () => {
         loading={Boolean(isLoading)}>
         <>
           <div className="entity-list-body">
-            {data.length
+            {data.length ? (
-              ? data.map((item, index) => {
+              data.map((item, index) => {
                 return (
                   <div
                     className="right-panel-list-item flex items-center justify-between"
@@ -120,7 +121,12 @@ const MyDataWidgetInternal = () => {
                   </div>
                 );
               })
-              : t('message.no-owned-data')}
+            ) : (
+              <Transi18next
+                i18nKey="message.no-owned-data"
+                renderElement={<Link to={ROUTES.EXPLORE} />}
+              />
+            )}
           </div>
         </>
       </EntityListSkeleton>

openmetadata-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.test.tsx

@@ -53,7 +53,7 @@ jest.mock(
 describe('MyDataWidget component', () => {
   it('should fetch data', () => {
     act(() => {
-      render(<MyDataWidget />);
+      render(<MyDataWidget />, { wrapper: MemoryRouter });
     });
 
     expect(getUserById).toHaveBeenCalledWith('123', 'owns');

openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/DataQualityTab.tsx

@@ -420,7 +420,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
             emptyText: <FilterTablePlaceHolder />,
           }}
           pagination={false}
-          rowKey="name"
+          rowKey="id"
           size="small"
         />
       </Col>

openmetadata-ui/src/main/resources/ui/src/components/TableQueries/QueryCard.tsx

@@ -215,7 +215,7 @@ const QueryCard: FC<QueryCardProp> = ({
               onChange={handleQueryChange}
             />
           </div>
-          <Row align="middle" className="p-y-xs border-t-1">
+          <Row align="middle" className="p-y-xs border-top">
             <Col className="p-y-0.5 p-l-md" span={16}>
               <QueryUsedByOtherTable query={query} tableId={tableId} />
             </Col>

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -1258,7 +1258,7 @@
     "no-mentions": "There are no instances where you or your team have been referenced in any activities",
     "no-notification-found": "No notifications found",
     "no-open-task": "No Open Tasks",
-    "no-owned-data": "It appears that you or your team do not have any Data Assets under your ownership. To rectify this, kindly click on the \"Explore\" on your menu to discover.",
+    "no-owned-data": "It appears that you or your team are not currently data asset owners. To start owning data assets, click on the <0>Explore</0> option to discover and claim assets.",
     "no-permission-for-action": "You do not have the necessary permissions to perform this action.",
     "no-permission-to-view": "You do not have the necessary permissions to view this data.",
     "no-profiler-enabled-summary-message": "Profiler is not enabled for this table.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json

@@ -1258,7 +1258,7 @@
     "no-mentions": "There are no instances where you or your team have been referenced in any activities",
     "no-notification-found": "No se encontraron notificaciones",
     "no-open-task": "No hay tareas abiertas",
-    "no-owned-data": "It appears that you or your team do not have any Data Assets under your ownership. To rectify this, kindly click on the \"Explore\" on your menu to discover.",
+    "no-owned-data": "It appears that you or your team are not currently data asset owners. To start owning data assets, click on the <0>Explore</0> option to discover and claim assets.",
     "no-permission-for-action": "No tiene los permisos necesarios para realizar esta acción.",
     "no-permission-to-view": "No tiene los permisos necesarios para ver estos datos.",
     "no-profiler-enabled-summary-message": "El profiler no está habilitado para esta tabla.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json

@@ -1258,7 +1258,7 @@
     "no-mentions": "There are no instances where you or your team have been referenced in any activities",
     "no-notification-found": "Aucune notifiaction trouvé",
     "no-open-task": "Aucune tâche ouverte",
-    "no-owned-data": "It appears that you or your team do not have any Data Assets under your ownership. To rectify this, kindly click on the \"Explore\" on your menu to discover.",
+    "no-owned-data": "It appears that you or your team are not currently data asset owners. To start owning data assets, click on the <0>Explore</0> option to discover and claim assets.",
     "no-permission-for-action": "Vous n'avez pas les permissions requises pour effectuer cette action.",
     "no-permission-to-view": "Vous n'avez pas les permissions requises pour voir ces données.",
     "no-profiler-enabled-summary-message": "Profilage n'est pas activé pour cette table.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json

@@ -1258,7 +1258,7 @@
     "no-mentions": "There are no instances where you or your team have been referenced in any activities",
     "no-notification-found": "No notifications found",
     "no-open-task": "開いているタスクはありません",
-    "no-owned-data": "It appears that you or your team do not have any Data Assets under your ownership. To rectify this, kindly click on the \"Explore\" on your menu to discover.",
+    "no-owned-data": "It appears that you or your team are not currently data asset owners. To start owning data assets, click on the <0>Explore</0> option to discover and claim assets.",
     "no-permission-for-action": "あなたはこのアクションを実行する権限を持っていません。",
     "no-permission-to-view": "あなたはこのデータを閲覧する権限を持っていません。",
     "no-profiler-enabled-summary-message": "Profiler is not enabled for this table.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json

@@ -1258,7 +1258,7 @@
     "no-mentions": "There are no instances where you or your team have been referenced in any activities",
     "no-notification-found": "Nenhuma notificação encontrada",
     "no-open-task": "Nenhuma tarefa aberta",
-    "no-owned-data": "It appears that you or your team do not have any Data Assets under your ownership. To rectify this, kindly click on the \"Explore\" on your menu to discover.",
+    "no-owned-data": "It appears that you or your team are not currently data asset owners. To start owning data assets, click on the <0>Explore</0> option to discover and claim assets.",
     "no-permission-for-action": "Você não tem as permissões necessárias para executar esta ação.",
     "no-permission-to-view": "Você não tem as permissões necessárias para visualizar estes dados.",
     "no-profiler-enabled-summary-message": "Profiler não está habilitado para esta tabela.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json

@@ -1258,7 +1258,7 @@
     "no-mentions": "There are no instances where you or your team have been referenced in any activities",
     "no-notification-found": "未找到通知",
     "no-open-task": "无未完成任务",
-    "no-owned-data": "It appears that you or your team do not have any Data Assets under your ownership. To rectify this, kindly click on the \"Explore\" on your menu to discover.",
+    "no-owned-data": "It appears that you or your team are not currently data asset owners. To start owning data assets, click on the <0>Explore</0> option to discover and claim assets.",
     "no-permission-for-action": "您没有执行此操作所需的必要权限",
     "no-permission-to-view": "您没有查看此数据所需的必要权限",
     "no-profiler-enabled-summary-message": "该数据表未启用数据分析工具",

openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx

@@ -11,7 +11,6 @@
  *  limitations under the License.
  */
 
-import { Col, Row } from 'antd';
 import { AxiosError } from 'axios';
 import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder';
 import PageLayoutV1 from 'components/containers/PageLayoutV1';
@@ -281,8 +280,6 @@ const GlossaryPage = () => {
       {isRightPanelLoading ? (
         <Loader />
       ) : (
-        <Row className="page-container" gutter={[16, 0]} wrap={false}>
-          <Col flex="auto">
         <GlossaryV1
           deleteStatus={deleteStatus}
           isGlossaryActive={isGlossaryActive}
@@ -295,8 +292,6 @@ const GlossaryPage = () => {
           onGlossaryTermDelete={handleGlossaryTermDelete}
           onGlossaryTermUpdate={handleGlossaryTermUpdate}
         />
-          </Col>
-        </Row>
       )}
     </PageLayoutV1>
   );

openmetadata-ui/src/main/resources/ui/src/styles/app.less

@@ -119,11 +119,6 @@ a[href].link-text-grey,
 .border-t-0 {
   border-top-width: 0px;
 }
-.border-t-1 {
-  border-top-width: 1px;
-  border-style: solid;
-  border-color: @border-color;
-}
 .border-main {
   border-color: @border-color;
 }

openmetadata-ui/src/main/resources/ui/src/styles/components/glossary.less

@@ -86,6 +86,12 @@
 }
 
 .glossary-tabs {
+  .glossary-overview-tab,
+  .glossary-term-table-container,
+  .assets-tab-container {
+    height: @glossary-term-page-height;
+    overflow-y: scroll;
+  }
   .description-heading {
     font-size: 16px;
     font-weight: 500;
@@ -150,5 +156,14 @@
     border-radius: 0;
     padding-left: 0;
     border-top: 0;
+
+    .summary-panel-container {
+      height: @page-height;
     }
   }
+}
+
+.glossary-content-container {
+  height: @glossary-page-height;
+  overflow-y: scroll;
+}

openmetadata-ui/src/main/resources/ui/src/styles/variables.less

@@ -78,8 +78,11 @@
 @btn-shadow: none;
 
 // Sizing
+@page-height: calc(100vh - 64px);
 @left-side-panel-width: 230px;
 @entity-details-tab-height: calc(100vh - 236px);
 @users-page-tabs-height: calc(
   100vh - 122px
 ); /* navbar+tab_height+padding = 64+46+12  */
+@glossary-page-height: calc(100vh - 165px);
+@glossary-term-page-height: calc(100vh - 200px);

openmetadata-ui/src/main/resources/ui/src/styles/x-master.css

@@ -872,7 +872,7 @@ code {
 
 .page-not-found-container {
   width: 100%;
-  height: calc(100% - 68px);
+  height: 100vh;
   display: flex;
 }