fix: change dashboard and group order in search result (#658)

* fix: change dashboard and group order in search result
Signed-off-by: feng-tao <fengtao04@gmail.com>

* fix: update for inline search result as well
Signed-off-by: feng-tao <fengtao04@gmail.com>

* chore: fix js test
Signed-off-by: feng-tao <fengtao04@gmail.com>

amundsen_application/static/js/components/common/ResourceListItem/DashboardListItem/index.tsx

@@ -58,8 +58,10 @@ class DashboardListItem extends React.Component<DashboardListItemProps, {}> {
             />
             <div className="resource-info-text my-auto">
               <div className="resource-name title-2">
-                <div className="dashboard-group">{dashboard.group_name}</div>
-                <div className="dashboard-name truncated">{dashboard.name}</div>
+                <div className="dashboard-name">{dashboard.name}</div>
+                <div className="dashboard-group truncated">
+                  {dashboard.group_name}
+                </div>
                 <BookmarkIcon
                   bookmarkKey={dashboard.uri}
                   resourceType={dashboard.type}

amundsen_application/static/js/components/common/ResourceListItem/styles.scss

@@ -45,9 +45,12 @@
 
       .dashboard-group {
         color: $text-secondary;
-        margin-right: $spacer-2;
         white-space: nowrap;
       }
+
+      .dashboard-name {
+        margin-right: $spacer-2;
+      }
     }
 
     ul {

amundsen_application/static/js/components/common/SearchBar/InlineSearchResults/index.tsx

@@ -185,10 +185,10 @@ export class InlineSearchResults extends React.Component<
         const dashboard = result as DashboardResource;
         return (
           <div className="dashboard-title">
-            <div className="title-2 dashboard-group">
+            <div className="title-2 dashboard-name">{dashboard.name}</div>
+            <div className="title-2 dashboard-group truncated">
               {dashboard.group_name}
             </div>
-            <div className="title-2 truncated">{dashboard.name}</div>
           </div>
         );
       case ResourceType.table:

amundsen_application/static/js/components/common/SearchBar/InlineSearchResults/styles.scss

@@ -128,9 +128,12 @@
             .dashboard-title {
               display: flex;
 
+              .dashboard-name {
+                margin-right: $spacer-2;
+              }
+
               .dashboard-group {
                 color: $text-secondary;
-                margin-right: $spacer-2;
                 white-space: nowrap;
               }
             }

amundsen_application/static/js/components/common/SearchBar/InlineSearchResults/tests/index.spec.tsx

@@ -385,7 +385,7 @@ describe('InlineSearchResults', () => {
           .getSuggestedResultTitle(ResourceType.dashboard, givenDashboard)
       );
       expect(output.text()).toEqual(
-        `${givenDashboard.group_name}${givenDashboard.name}`
+        `${givenDashboard.name}${givenDashboard.group_name}`
       );
     });
     it('returns the schema.name for ResourceType.table', () => {