fix cypress and some ui issues (#12861)

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>

openmetadata-ui/src/main/resources/ui/cypress/common/common.js

@@ -475,7 +475,8 @@ export const visitEntityDetailsPage = (
   serviceName,
   entity,
   dataTestId,
-  entityType
+  entityType,
+  count = 0
 ) => {
   interceptURL('GET', '/api/v1/*/name/*', 'getEntityDetails');
   interceptURL(
@@ -486,7 +487,7 @@ export const visitEntityDetailsPage = (
   interceptURL(
     'GET',
     `/api/v1/search/suggest?q=*&index=*`,
-    `searchQuery-${entity}`
+    `searchQuery-${entity}-${count}`
   );
   interceptURL('GET', `/api/v1/search/*`, 'explorePageSearch');
   const id = dataTestId ?? `${serviceName}-${term}`;
@@ -499,7 +500,7 @@ export const visitEntityDetailsPage = (
   // searching term in search box
   cy.get('[data-testid="searchBox"]').scrollIntoView().should('be.visible');
   cy.get('[data-testid="searchBox"]').type(term);
-  verifyResponseStatusCode(`@searchQuery-${entity}`, 200);
+  verifyResponseStatusCode(`@searchQuery-${entity}-${count}`, 200);
   cy.get('body').then(($body) => {
     // checking if requested term is available in search suggestion
     if ($body.find(`[data-testid="${id}"] [data-testid="data-name"]`).length) {

openmetadata-ui/src/main/resources/ui/cypress/e2e/Features/DataConsumerRole.spec.js

@@ -211,7 +211,10 @@ describe('DataConsumer Edit policy should work properly', () => {
     visitEntityDetailsPage(
       ENTITIES.table.term,
       ENTITIES.table.serviceName,
-      ENTITIES.table.entity
+      ENTITIES.table.entity,
+      undefined,
+      undefined,
+      1
     );
 
     cy.get('[data-testid="add-tag"]')
@@ -225,7 +228,10 @@ describe('DataConsumer Edit policy should work properly', () => {
     visitEntityDetailsPage(
       ENTITIES.dashboard.term,
       ENTITIES.dashboard.serviceName,
-      ENTITIES.dashboard.entity
+      ENTITIES.dashboard.entity,
+      undefined,
+      undefined,
+      1
     );
 
     cy.get('[data-testid="add-tag"]')

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx

@@ -163,7 +163,15 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
 
   return (
     <>
-      <div className={classNames(className)} ref={containerRef}>
+      <div
+        className={classNames(
+          className,
+          'bg-grey-1-hover m--x-sm p-x-sm m--t-xss py-2 m-b-xss rounded-4',
+          {
+            'bg-grey-1-hover': visible,
+          }
+        )}
+        ref={containerRef}>
         <Popover
           align={{ targetOffset: [0, -16] }}
           content={

openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx

@@ -244,7 +244,7 @@ const Appbar: React.FC = (): JSX.Element => {
         <div className="text-grey-muted text-xs">{name}</div>
         {userRoleArr.map((userRole, i) => (
           <Typography.Paragraph
-            className="ant-typography-ellipsis-custom font-normal"
+            className="ant-typography-ellipsis-custom font-normal m-b-0"
             ellipsis={{ tooltip: true }}
             key={i}>
             {userRole}
@@ -287,7 +287,7 @@ const Appbar: React.FC = (): JSX.Element => {
             data-testid="user-name"
             to={getUserPath(currentUser?.name as string)}>
             <Typography.Paragraph
-              className="ant-typography-ellipsis-custom font-medium cursor-pointer text-link-color"
+              className="ant-typography-ellipsis-custom font-medium cursor-pointer text-link-color m-b-0"
               ellipsis={{ rows: 1, tooltip: true }}>
               {name}
             </Typography.Paragraph>
@@ -336,7 +336,7 @@ const Appbar: React.FC = (): JSX.Element => {
               </span>
               {teams.map((t, i) => (
                 <Typography.Paragraph
-                  className="ant-typography-ellipsis-custom text-sm"
+                  className="ant-typography-ellipsis-custom text-sm m-b-0"
                   ellipsis={{ tooltip: true }}
                   key={i}>
                   <Link to={getTeamAndUserDetailsPath(t.name as string)}>
@@ -364,7 +364,7 @@ const Appbar: React.FC = (): JSX.Element => {
     dropDownOption.push({
       label: (
         <Typography.Link
-          className="ant-typography-ellipsis-custom text-sm"
+          className="ant-typography-ellipsis-custom text-sm m-b-0"
           onClick={onLogoutHandler}>
           {t('label.logout')}
         </Typography.Link>

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

@@ -248,6 +248,11 @@ a[href].link-text-grey,
 .bg-grey-4 {
   background-color: @grey-4;
 }
+
+.bg-grey-1-hover:hover {
+  background-color: @grey-1;
+}
+
 .bg-white {
   background-color: @white;
 }

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

@@ -93,6 +93,11 @@
 .m--r-7 {
   margin-right: -28px;
 }
+.m--x-sm {
+  margin-left: -@margin-sm;
+  margin-right: -@margin-sm;
+}
+
 .m--x-6 {
   margin-left: -1.5rem /* -24px */;
   margin-right: -1.5rem /* -24px */;