UI Fixes: SearchPage & ProfilePage (#220)

* Support for different search info text based on resource

* Consistent styles for empty tab messages

* Cleanup constant names

amundsen_application/static/js/components/ProfilePage/index.tsx

@@ -85,8 +85,8 @@ export class ProfilePage extends React.Component<ProfilePageProps, ProfilePageSt
     // TODO: consider moving logic for empty content into Tab component
     if (resource.length === 0) {
       return (
-        <div className="empty-tab-message">
-          <label>User has no { label } resources.</label>
+        <div className="empty-tab-message body-placeholder">
+          User has no { label } resources.
         </div>
       );
     }

amundsen_application/static/js/components/ProfilePage/styles.scss

@@ -54,8 +54,7 @@
 
     // TODO: consider moving logic for empty content into Tab component
     .empty-tab-message {
-      color: $gray-light;
-      margin-top: 64px;
+      margin-top: 32px;
       text-align: center;
     }
   }

amundsen_application/static/js/components/SearchPage/constants.ts

@@ -6,7 +6,9 @@ export const DOCUMENT_TITLE_SUFFIX = ' - Amundsen Search';
 
 export const PAGE_INDEX_ERROR_MESSAGE = 'Page index out of bounds for available matches';
 
-export const SEARCH_INFO_TEXT = `Ordered by the relevance of matches within a resource's metadata, as well as overall usage.`;
+export const SEARCH_INFO_TEXT_BASE = `Ordered by the relevance of matches within a resource's metadata`;
+export const SEARCH_INFO_TEXT_TABLE_SUFFIX = ', as well as overall usage';
+
 export const SEARCH_SOURCE_NAME = 'search_results';
 export const SEARCH_ERROR_MESSAGE_INFIX = ' - did not match any ';
 export const SEARCH_ERROR_MESSAGE_PREFIX = 'Your search - ';

amundsen_application/static/js/components/SearchPage/index.tsx

@@ -18,11 +18,12 @@ import {
   DashboardSearchResults,
   SearchAllRequest,
   SearchResourceRequest,
+  SearchResults,
   TableSearchResults,
   UserSearchResults,
 } from 'ducks/search/types';
 
-import { ResourceType, SearchAllOptions } from 'interfaces';
+import { Resource, ResourceType, SearchAllOptions } from 'interfaces';
 
 // TODO: Use css-modules instead of 'import'
 import './styles.scss';
@@ -34,7 +35,8 @@ import {
   SEARCH_ERROR_MESSAGE_INFIX,
   SEARCH_ERROR_MESSAGE_PREFIX,
   SEARCH_ERROR_MESSAGE_SUFFIX,
-  SEARCH_INFO_TEXT,
+  SEARCH_INFO_TEXT_BASE,
+  SEARCH_INFO_TEXT_TABLE_SUFFIX,
   SEARCH_SOURCE_NAME,
   TABLE_RESOURCE_TITLE,
   USER_RESOURCE_TITLE,
@@ -155,14 +157,14 @@ export class SearchPage extends React.Component<SearchPageProps, SearchPageState
       {
         title: `${TABLE_RESOURCE_TITLE} (${ this.props.tables.total_results })`,
         key: ResourceType.table,
-        content: this.getTabContent(this.props.tables, TABLE_RESOURCE_TITLE),
+        content: this.getTabContent(this.props.tables, ResourceType.table),
       },
     ];
     if (AppConfig.indexUsers.enabled) {
       tabConfig.push({
         title: `Users (${ this.props.users.total_results })`,
         key: ResourceType.user,
-        content: this.getTabContent(this.props.users, USER_RESOURCE_TITLE),
+        content: this.getTabContent(this.props.users, ResourceType.user),
       })
     }
 
@@ -178,11 +180,32 @@ export class SearchPage extends React.Component<SearchPageProps, SearchPageState
     );
   };
 
-  getTabContent = (results, tabLabel) => {
+  generateInfoText = (tab: ResourceType): string => {
+    switch (tab) {
+      case ResourceType.table:
+        return `${SEARCH_INFO_TEXT_BASE}${SEARCH_INFO_TEXT_TABLE_SUFFIX}`;
+      default:
+        return SEARCH_INFO_TEXT_BASE;
+    }
+  };
+
+  generateTabLabel = (tab: ResourceType): string => {
+    switch (tab) {
+      case ResourceType.table:
+        return TABLE_RESOURCE_TITLE;
+      case ResourceType.user:
+        return USER_RESOURCE_TITLE;
+      default:
+        return '';
+    }
+  };
+
+  getTabContent = (results: SearchResults<Resource>, tab: ResourceType) => {
     const { searchTerm } = this.props;
     const { page_index, total_results } = results;
     const startIndex = (RESULTS_PER_PAGE * page_index) + 1;
     const endIndex = RESULTS_PER_PAGE * (page_index + 1);
+    const tabLabel = this.generateTabLabel(tab);
 
     // TODO - Move error messages into Tab Component
     // Check no results
@@ -208,11 +231,12 @@ export class SearchPage extends React.Component<SearchPageProps, SearchPageState
     }
 
     const title =`${startIndex}-${Math.min(endIndex, total_results)} of ${total_results} results`;
+    const infoText = this.generateInfoText(tab);
     return (
       <div className="search-list-container">
         <div className="search-list-header">
           <label>{ title }</label>
-          <InfoButton infoText={SEARCH_INFO_TEXT}/>
+          <InfoButton infoText={infoText}/>
         </div>
         <ResourceList
           slicedItems={ results.results }

amundsen_application/static/js/components/SearchPage/tests/index.spec.tsx

@@ -15,9 +15,11 @@ import {
   SEARCH_ERROR_MESSAGE_INFIX,
   SEARCH_ERROR_MESSAGE_PREFIX,
   SEARCH_ERROR_MESSAGE_SUFFIX,
-  SEARCH_INFO_TEXT,
+  SEARCH_INFO_TEXT_BASE,
+  SEARCH_INFO_TEXT_TABLE_SUFFIX,
   SEARCH_SOURCE_NAME,
   TABLE_RESOURCE_TITLE,
+  USER_RESOURCE_TITLE,
 } from '../constants';
 
 import InfoButton from 'components/common/InfoButton';
@@ -462,6 +464,46 @@ describe('SearchPage', () => {
     });
   });
 
+  describe('generateInfoText', () => {
+    let wrapper;
+    beforeAll(() => {
+      wrapper = setup().wrapper;
+    });
+
+    it('returns correct text for ResourceType.table', () => {
+      const text = wrapper.instance().generateInfoText(ResourceType.table);
+      const expectedText = `${SEARCH_INFO_TEXT_BASE}${SEARCH_INFO_TEXT_TABLE_SUFFIX}`;
+      expect(text).toEqual(expectedText);
+    });
+
+    it('returns correct text for the default case', () => {
+      const text = wrapper.instance().generateInfoText(ResourceType.user);
+      expect(text).toEqual(SEARCH_INFO_TEXT_BASE);
+    });
+  });
+
+  describe('generateTabLabel', () => {
+    let wrapper;
+    beforeAll(() => {
+      wrapper = setup().wrapper;
+    });
+
+    it('returns correct text for ResourceType.table', () => {
+      const text = wrapper.instance().generateTabLabel(ResourceType.table);
+      expect(text).toEqual(TABLE_RESOURCE_TITLE);
+    });
+
+    it('returns correct text for ResourceType.user', () => {
+      const text = wrapper.instance().generateTabLabel(ResourceType.user);
+      expect(text).toEqual(USER_RESOURCE_TITLE);
+    });
+
+    it('returns empty string for the default case', () => {
+      const text = wrapper.instance().generateTabLabel(ResourceType.dashboard);
+      expect(text).toEqual('');
+    });
+  });
+
   describe('getTabContent', () => {
     let content;
 
@@ -473,7 +515,7 @@ describe('SearchPage', () => {
           results: [],
           total_results: 0,
         };
-        content = shallow(wrapper.instance().getTabContent(testResults, TABLE_RESOURCE_TITLE));
+        content = shallow(wrapper.instance().getTabContent(testResults, ResourceType.table));
         expect(content.children().at(0).text()).toEqual(`${SEARCH_ERROR_MESSAGE_PREFIX}data${SEARCH_ERROR_MESSAGE_INFIX}tables${SEARCH_ERROR_MESSAGE_SUFFIX}`);
       });
     });
@@ -486,7 +528,7 @@ describe('SearchPage', () => {
           results: [],
           total_results: 1,
         };
-        content = shallow(wrapper.instance().getTabContent(testResults, TABLE_RESOURCE_TITLE));
+        content = shallow(wrapper.instance().getTabContent(testResults, ResourceType.table));
         expect(content.children().at(0).text()).toEqual(PAGE_INDEX_ERROR_MESSAGE);
       });
     });
@@ -494,11 +536,14 @@ describe('SearchPage', () => {
     describe('if searchTerm and search results exist', () => {
       let props;
       let wrapper;
+      let generateInfoTextMockResults;
       beforeAll(() => {
         const setupResult = setup({ searchTerm: '' });
         props = setupResult.props;
         wrapper = setupResult.wrapper;
-        content = shallow(wrapper.instance().getTabContent(props.tables, TABLE_RESOURCE_TITLE));
+        generateInfoTextMockResults = 'test info text';
+        jest.spyOn(wrapper.instance(), 'generateInfoText').mockImplementation(() => generateInfoTextMockResults);
+        content = shallow(wrapper.instance().getTabContent(props.tables, ResourceType.table));
       });
 
       it('renders correct label for content', () => {
@@ -507,7 +552,7 @@ describe('SearchPage', () => {
 
       it('renders InfoButton with correct props', () => {
         expect(content.children().at(0).find(InfoButton).props()).toMatchObject({
-          infoText: SEARCH_INFO_TEXT,
+          infoText: generateInfoTextMockResults,
         });
       });
 
@@ -518,7 +563,7 @@ describe('SearchPage', () => {
           results: [],
           total_results: 11,
         };
-        content = shallow(wrapper.instance().getTabContent(testResults, TABLE_RESOURCE_TITLE));
+        content = shallow(wrapper.instance().getTabContent(testResults, ResourceType.table));
 
         expect(content.children().find(ResourceList).props()).toMatchObject({
           activePage: 0,
@@ -565,7 +610,7 @@ describe('SearchPage', () => {
       const firstTab = tabProps.tabs[0];
       expect(firstTab.key).toEqual(ResourceType.table);
       expect(firstTab.title).toEqual(`${TABLE_RESOURCE_TITLE} (${props.tables.total_results})`);
-      expect(firstTab.content).toEqual(wrapper.instance().getTabContent(props.tables, TABLE_RESOURCE_TITLE));
+      expect(firstTab.content).toEqual(wrapper.instance().getTabContent(props.tables, firstTab.key));
     });
 
     it('renders only one tab if people is disabled', () => {

amundsen_application/static/js/ducks/search/types.ts

@@ -7,7 +7,7 @@ import {
   UserResource,
 } from 'interfaces';
 
-interface SearchResults<T extends Resource> {
+export interface SearchResults<T extends Resource> {
   page_index: number;
   total_results: number;
   results: T[];