fix(web) set domain dropdown ui to match domains page (#13294)

datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNavigator.tsx

@@ -17,10 +17,11 @@ const NavigatorWrapper = styled.div`
 
 interface Props {
     domainUrnToHide?: string;
+    displayDomainColoredIcon?: boolean;
     selectDomainOverride?: (domain: Domain) => void;
 }
 
-export default function DomainNavigator({ domainUrnToHide, selectDomainOverride }: Props) {
+export default function DomainNavigator({ domainUrnToHide, selectDomainOverride, displayDomainColoredIcon }: Props) {
     const { sortedDomains, error } = useListDomains({});
     const noDomainsFound: boolean = !sortedDomains || sortedDomains.length === 0;
 
@@ -42,6 +43,7 @@ export default function DomainNavigator({ domainUrnToHide, selectDomainOverride
                         numDomainChildren={domain.children?.total || 0}
                         domainUrnToHide={domainUrnToHide}
                         selectDomainOverride={selectDomainOverride}
+                        displayDomainColoredIcon={displayDomainColoredIcon}
                     />
                 ))}
         </NavigatorWrapper>

datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNode.tsx

@@ -8,6 +8,7 @@ import { useDomainsContext } from '@app/domain/DomainsContext';
 import useHasDomainChildren from '@app/domain/nestedDomains/domainNavigator/useHasDomainChildren';
 import useListDomains from '@app/domain/useListDomains';
 import { ANTD_GRAY_V2 } from '@app/entity/shared/constants';
+import { DomainColoredIcon } from '@app/entityV2/shared/links/DomainColoredIcon';
 import { BodyContainer, BodyGridExpander } from '@app/shared/components';
 import { RotatingTriangle } from '@app/shared/sidebar/components';
 import { applyOpacity } from '@app/shared/styleUtils';
@@ -66,10 +67,17 @@ interface Props {
     domain: Domain;
     numDomainChildren: number;
     domainUrnToHide?: string;
+    displayDomainColoredIcon?: boolean;
     selectDomainOverride?: (domain: Domain) => void;
 }
 
-export default function DomainNode({ domain, numDomainChildren, domainUrnToHide, selectDomainOverride }: Props) {
+export default function DomainNode({
+    domain,
+    numDomainChildren,
+    domainUrnToHide,
+    selectDomainOverride,
+    displayDomainColoredIcon,
+}: Props) {
     const shouldHideDomain = domainUrnToHide === domain.urn;
     const history = useHistory();
     const entityRegistry = useEntityRegistry();
@@ -108,7 +116,11 @@ export default function DomainNode({ domain, numDomainChildren, domainUrnToHide,
             <RowWrapper data-testid="domain-list-item">
                 {hasDomainChildren && (
                     <ButtonWrapper>
-                        <RotatingTriangle isOpen={isOpen && !isClosing} onClick={toggle} />
+                        <RotatingTriangle
+                            isOpen={isOpen && !isClosing}
+                            onClick={toggle}
+                            testId={`open-domain-action-item-${domain.urn}`}
+                        />
                     </ButtonWrapper>
                 )}
                 <NameWrapper
@@ -117,8 +129,9 @@ export default function DomainNode({ domain, numDomainChildren, domainUrnToHide,
                     isSelected={!!isOnEntityPage && !isInSelectMode}
                     addLeftPadding={!hasDomainChildren}
                 >
-                    {!isInSelectMode && <DomainIcon />}
-                    {displayName}
+                    {!isInSelectMode && !displayDomainColoredIcon && <DomainIcon />}
+                    {displayDomainColoredIcon && <DomainColoredIcon domain={domain} size={24} fontSize={12} />}
+                    <span style={{ marginLeft: 8 }}>{displayName}</span>
                 </NameWrapper>
             </RowWrapper>
             <StyledExpander isOpen={isOpen && !isClosing}>
@@ -130,6 +143,7 @@ export default function DomainNode({ domain, numDomainChildren, domainUrnToHide,
                             numDomainChildren={childDomain.children?.total || 0}
                             domainUrnToHide={domainUrnToHide}
                             selectDomainOverride={selectDomainOverride}
+                            displayDomainColoredIcon={displayDomainColoredIcon}
                         />
                     ))}
                 </BodyContainer>

datahub-web-react/src/app/domainV2/DomainAutocompleteOptions.tsx

@@ -5,9 +5,10 @@ import styled from 'styled-components';
 import { getParentDomains } from '@app/domain/utils';
 import EntityRegistry from '@app/entity/EntityRegistry';
 import { ANTD_GRAY } from '@app/entityV2/shared/constants';
+import { DomainColoredIcon } from '@app/entityV2/shared/links/DomainColoredIcon';
 import ParentEntities from '@app/search/filters/ParentEntities';
 
-import { Entity } from '@types';
+import { Domain, Entity } from '@types';
 
 const LoadingWrapper = styled.div`
     padding: 8px;
@@ -20,6 +21,16 @@ const LoadingWrapper = styled.div`
         color: ${ANTD_GRAY[8]};
     }
 `;
+const LabelWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+`;
+const LabelContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    margin-left: 8px;
+`;
 
 interface AntOption {
     label: JSX.Element;
@@ -45,10 +56,13 @@ export default function domainAutocompleteOptions(
     }
     return entities.map((entity) => ({
         label: (
-            <>
-                <ParentEntities parentEntities={getParentDomains(entity, entityRegistry)} />
-                {entityRegistry.getDisplayName(entity.type, entity)}
-            </>
+            <LabelWrapper>
+                <DomainColoredIcon domain={entity as Domain} size={24} fontSize={12} />
+                <LabelContent>
+                    {entityRegistry.getDisplayName(entity.type, entity)}
+                    <ParentEntities hideIcon parentEntities={getParentDomains(entity, entityRegistry)} />
+                </LabelContent>
+            </LabelWrapper>
         ),
         value: entity.urn,
     }));

datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SetDomainModal.tsx

@@ -204,7 +204,7 @@ export const SetDomainModal = ({ urns, onCloseModal, refetch, defaultValue, onOk
                             options={domainAutocompleteOptions(domainResult, searchLoading, entityRegistry)}
                         />
                         <BrowserWrapper isHidden={!isShowingDomainNavigator}>
-                            <DomainNavigator selectDomainOverride={selectDomainFromBrowser} />
+                            <DomainNavigator selectDomainOverride={selectDomainFromBrowser} displayDomainColoredIcon />
                         </BrowserWrapper>
                     </ClickOutside>
                 </Form.Item>

datahub-web-react/src/app/shared/sidebar/components.tsx

@@ -1,5 +1,5 @@
-import { RightOutlined } from '@ant-design/icons';
 import { countries } from 'country-data-list';
+import { CaretRight } from 'phosphor-react';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -14,15 +14,24 @@ export const SidebarWrapper = styled.div<{ width: number }>`
     flex-direction: column;
 `;
 
-export function RotatingTriangle({ isOpen, onClick }: { isOpen: boolean; onClick?: () => void }) {
+export function RotatingTriangle({
+    isOpen,
+    onClick,
+    testId,
+}: {
+    isOpen: boolean;
+    onClick?: () => void;
+    testId?: string;
+}) {
     return (
         <RotatingButton
             ghost
             size="small"
             type="ghost"
             deg={isOpen ? 90 : 0}
-            icon={<RightOutlined style={{ color: 'black' }} />}
+            icon={<CaretRight style={{ color: 'black' }} />}
             onClick={onClick}
+            data-testid={testId}
         />
     );
 }

smoke-test/tests/cypress/cypress/e2e/domains/nested_domains.js

@@ -1,6 +1,21 @@
 const domainName = "CypressNestedDomain";
 const chartUrn = "urn:li:chart:(looker,cypress_baz1)";
 
+const handledResizeLoopErrors = () => {
+  const resizeObserverLoopLimitErrRe = "ResizeObserver loop limit exceeded";
+  const resizeObserverLoopErrRe =
+    "ResizeObserver loop completed with undelivered notifications.";
+
+  cy.on("uncaught:exception", (err) => {
+    if (
+      err.message.includes(resizeObserverLoopLimitErrRe) ||
+      err.message.includes(resizeObserverLoopErrRe)
+    ) {
+      return false; // Prevent Cypress from failing the test on these specific errors
+    }
+  });
+};
+
 const createDomain = () => {
   cy.get(".anticon-plus").first().click();
   cy.waitTextVisible("Create New Domain");
@@ -21,10 +36,9 @@ const moveDomaintoRootLevel = () => {
 };
 
 const moveDomaintoParent = () => {
-  cy.get('[data-testid="domain-list-item"]')
-    .contains("Marketing")
-    .prev()
-    .click();
+  cy.get(
+    '[data-testid="open-domain-action-item-urn:li:domain:marketing"]',
+  ).click();
   cy.clickOptionWithText(domainName);
   cy.waitTextVisible(domainName);
   cy.openThreeDotDropdown();
@@ -36,7 +50,11 @@ const moveDomaintoParent = () => {
 const getDomainList = (domainName) => {
   cy.contains("span.ant-typography-ellipsis", domainName)
     .parent('[data-testid="domain-list-item"]')
-    .find('[aria-label="right"]')
+    .find(
+      '[data-testid="open-domain-action-item-urn:li:domain:' +
+        domainName.toLowerCase() +
+        '"]',
+    )
     .click();
 };
 
@@ -74,7 +92,7 @@ const clearAndType = (text) => {
 };
 
 const clearAndDelete = () => {
-  cy.clickOptionWithText("Edit");
+  cy.clickFirstOptionWithTestId("edit-documentation-button");
   cy.get('[role="textbox"]').click().clear();
   cy.clickOptionWithTestId("description-editor-save-button");
   cy.waitTextVisible("No documentation");
@@ -92,6 +110,7 @@ describe("Verify nested domains test functionalities", () => {
     cy.setIsThemeV2Enabled(false);
     cy.loginWithCredentials();
     cy.goToDomainList();
+    handledResizeLoopErrors();
   });
 
   it("Verify Create a new domain", () => {
@@ -135,6 +154,8 @@ describe("Verify nested domains test functionalities", () => {
     cy.enterTextInTestId("add-link-modal-label", "Test Label");
     cy.clickOptionWithTestId("add-link-modal-add-button");
     cy.waitTextVisible("Test Label");
+
+    // add owners
     cy.clickOptionWithTestId("add-owners-button");
     cy.waitTextVisible("Find a user or group");
     cy.get('[data-testid="users-group-search"]').type(