From cdd8c3cb4524ec16a9db30e38d368641eaeeb4e2 Mon Sep 17 00:00:00 2001
From: Dhruv Parmar <83108871+dhruvjsx@users.noreply.github.com>
Date: Sat, 7 Jun 2025 15:12:07 +0530
Subject: [PATCH] Fix (uI): Domain truncate issue || consistent Domain UX
 (#21574)

* fixed domain truncate

* improved domain ux

* fixed sonar cases

* removed unnecessary states

* addressed comments

* applied max width

(cherry picked from commit 407eb24baf9276a9d2e7146098937b60dd3e4034)
---
 .../DataAssetsHeader/data-asset-header.less   | 20 ++++---
 .../DataAssetsVersionHeader.tsx               |  8 ++-
 .../data-asset-version-header.less            | 18 ++++++
 .../DomainLabel/DomainLabel.component.tsx     |  2 +-
 .../common/DomainLabel/domain-label.less      |  5 +-
 .../DomainSelectableTree.tsx                  | 57 ++++++++++++-------
 6 files changed, 78 insertions(+), 32 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsVersionHeader/data-asset-version-header.less

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/data-asset-header.less b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/data-asset-header.less
index 10ce94c6427..166a35be937 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/data-asset-header.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/data-asset-header.less
@@ -75,16 +75,22 @@
     color: @primary-heading-color;
     max-width: 200px;
   }
-  .owner-label-container {
+  .owner-label-container,
+  .domain-label-container {
     max-width: 148px;
   }
-  .domain-link-text.render-domain-lebel-style {
-    color: @grey-700;
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .domain-link-container {
+    //consistent width for data-asset-header
     max-width: 148px;
+
+    .domain-link-text.render-domain-lebel-style {
+      color: @grey-700;
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 148px;
+    }
   }
   a.source-url-link {
     text-decoration: none;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsVersionHeader/DataAssetsVersionHeader.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsVersionHeader/DataAssetsVersionHeader.tsx
index e381c996c4a..dc08521d649 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsVersionHeader/DataAssetsVersionHeader.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsVersionHeader/DataAssetsVersionHeader.tsx
@@ -26,6 +26,7 @@ import { getDataAssetsVersionHeaderInfo } from '../../../utils/DataAssetsVersion
 import serviceUtilClassBase from '../../../utils/ServiceUtilClassBase';
 import TitleBreadcrumb from '../../common/TitleBreadcrumb/TitleBreadcrumb.component';
 import { EntitiesWithDomainField } from '../DataAssetsHeader/DataAssetsHeader.interface';
+import './data-asset-version-header.less';
 import { DataAssetsVersionHeaderProps } from './DataAssetsVersionHeader.interface';
 
 function DataAssetsVersionHeader({
@@ -64,7 +65,10 @@ function DataAssetsVersionHeader({
   }, [currentVersionData]);
 
   return (
-    <Row gutter={[8, 12]} justify="space-between">
+    <Row
+      className="version-header-container"
+      gutter={[8, 12]}
+      justify="space-between">
       <Col className="self-center" span={21}>
         <Row gutter={[16, 12]}>
           <Col span={24}>
@@ -80,7 +84,7 @@ function DataAssetsVersionHeader({
             />
           </Col>
           <Col span={24}>
-            <div className="d-flex no-wrap">
+            <div className="d-flex version-domain-container no-wrap">
               {entityType !== EntityType.METADATA_SERVICE && (
                 <>
                   <DomainLabel
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsVersionHeader/data-asset-version-header.less b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsVersionHeader/data-asset-version-header.less
new file mode 100644
index 00000000000..8d97cec1964
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsVersionHeader/data-asset-version-header.less
@@ -0,0 +1,18 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+.version-header-container {
+  .domain-label-container {
+    //same as data-asset-header
+    max-width: 148px;
+  }
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.component.tsx
index c2e00c796c4..468c0f9fd3f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.component.tsx
@@ -243,7 +243,7 @@ export const DomainLabel = ({
     }
 
     return (
-      <div className="d-flex   flex-col gap-2 justify-start">
+      <div className="d-flex flex-col domain-label-container gap-2 justify-start">
         {headerLayout && (
           <div
             className="d-flex text-sm gap-1 font-medium items-center "
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/domain-label.less b/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/domain-label.less
index b38b1def877..6ac667dbbeb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/domain-label.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/domain-label.less
@@ -11,6 +11,9 @@
  *  limitations under the License.
  */
 @import (reference) '../../../styles/variables.less';
+.domain-label-container {
+  max-width: 100%;
+}
 .domain-link.ant-typography {
   color: @primary-heading-color;
 }
@@ -21,7 +24,7 @@
 }
 
 .domain-link-container {
-  max-width: 148px;
+  max-width: 100%;
   .domain-link-text {
     text-overflow: ellipsis;
     overflow: hidden;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DomainSelectableTree/DomainSelectableTree.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DomainSelectableTree/DomainSelectableTree.tsx
index b3c31cf4219..fb3fb9c6a7a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DomainSelectableTree/DomainSelectableTree.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DomainSelectableTree/DomainSelectableTree.tsx
@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Button, Empty, Space, Tree, Typography } from 'antd';
+import { Button, Empty, Space, Spin, Tree, Typography } from 'antd';
 import Search from 'antd/lib/input/Search';
 import { AxiosError } from 'axios';
 import { debounce } from 'lodash';
@@ -105,8 +105,11 @@ const DomainSelectablTree: FC<DomainSelectableTreeProps> = ({
         );
         retn = [domain];
       }
-      await onSubmit(retn);
-      setIsSubmitLoading(false);
+      try {
+        await onSubmit(retn);
+      } finally {
+        setIsSubmitLoading(false);
+      }
     } else {
       onCancel();
     }
@@ -211,23 +214,25 @@ const DomainSelectablTree: FC<DomainSelectableTreeProps> = ({
       );
     } else {
       return (
-        <Tree
-          blockNode
-          checkStrictly
-          defaultExpandAll
-          showLine
-          autoExpandParent={Boolean(searchTerm)}
-          checkable={isMultiple}
-          className="domain-selectable-tree"
-          defaultCheckedKeys={isMultiple ? value : []}
-          defaultExpandedKeys={value}
-          defaultSelectedKeys={isMultiple ? [] : value}
-          multiple={isMultiple}
-          switcherIcon={switcherIcon}
-          treeData={treeData}
-          onCheck={onCheck}
-          onSelect={onSelect}
-        />
+        <Spin indicator={<Loader size="small" />} spinning={isSubmitLoading}>
+          <Tree
+            blockNode
+            checkStrictly
+            defaultExpandAll
+            showLine
+            autoExpandParent={Boolean(searchTerm)}
+            checkable={isMultiple}
+            className="domain-selectable-tree"
+            defaultCheckedKeys={isMultiple ? value : []}
+            defaultExpandedKeys={value}
+            defaultSelectedKeys={isMultiple ? [] : value}
+            multiple={isMultiple}
+            switcherIcon={switcherIcon}
+            treeData={treeData}
+            onCheck={onCheck}
+            onSelect={onSelect}
+          />
+        </Spin>
       );
     }
   }, [isLoading, treeData, value, onSelect, isMultiple, searchTerm]);
@@ -238,6 +243,13 @@ const DomainSelectablTree: FC<DomainSelectableTreeProps> = ({
       fetchAPI();
     }
   }, [visible]);
+  const handleAllDomainKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    // To pass Sonar test
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleMyDomainsClick();
+    }
+  };
 
   return (
     <div className="p-sm" data-testid="domain-selectable-tree">
@@ -259,7 +271,10 @@ const DomainSelectablTree: FC<DomainSelectableTreeProps> = ({
             }
           )}
           data-testid="all-domains-selector"
-          onClick={handleMyDomainsClick}>
+          role="button"
+          tabIndex={0}
+          onClick={handleMyDomainsClick}
+          onKeyDown={handleAllDomainKeyPress}>
           <DomainIcon height={20} name="domain" width={20} />
           <Typography.Text
             className={classNames({