feat: Show more tags in browse and home

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

@@ -0,0 +1 @@
+export const BROWSE_PAGE_DOCUMENT_TITLE = 'Browse - Amundsen';

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

@@ -4,20 +4,21 @@
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 
-import TagsList from 'components/common/TagsList';
+import TagsListContainer from 'components/common/Tags';
+
+import { BROWSE_PAGE_DOCUMENT_TITLE } from './constants';
+
+import './styles.scss';
 
 export class BrowsePage extends React.Component {
   render() {
     return (
-      <DocumentTitle title="Browse - Amundsen">
+      /* TODO: add expand/collapse behavior */
+      <DocumentTitle title={BROWSE_PAGE_DOCUMENT_TITLE}>
         <main className="container">
           <div className="row">
             <div className="col-xs-12">
-              <h1 className="h3" id="browse-header">
-                Browse Tags
-              </h1>
-              <hr className="header-hr" />
-              <TagsList />
+              <TagsListContainer shortTagsList={false} />
             </div>
           </div>
         </main>

amundsen_application/static/js/components/common/TagsList/styles.scss → amundsen_application/static/js/components/BrowsePage/styles.scss

@@ -2,11 +2,3 @@
 // SPDX-License-Identifier: Apache-2.0
 
 @import 'variables';
-
-hr.header-hr {
-  border: 2px solid $brand-color-4;
-}
-
-.tags-list {
-  margin: 0 -4px;
-}

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

@@ -6,7 +6,7 @@ import * as DocumentTitle from 'react-document-title';
 
 import { shallow } from 'enzyme';
 
-import TagsList from 'components/common/TagsList';
+import TagsListContainer from 'components/common/Tags';
 import { BrowsePage } from '..';
 
 describe('BrowsePage', () => {
@@ -31,16 +31,14 @@ describe('BrowsePage', () => {
       );
     });
 
-    it('renders correct header', () => {
-      expect(wrapper.find('#browse-header').text()).toEqual('Browse Tags');
-    });
-
     it('renders <hr>', () => {
       expect(wrapper.contains(<hr className="header-hr" />));
     });
 
     it('contains TagsList', () => {
-      expect(wrapper.contains(<TagsList />));
+      const expected = 1;
+      const actual = wrapper.find(TagsListContainer).length;
+      expect(actual).toEqual(expected);
     });
   });
 });

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

@@ -35,7 +35,7 @@ import {
   NO_OWNER_TEXT,
   TABLES_PER_PAGE,
 } from 'components/DashboardPage/constants';
-import TagInput from 'components/Tags/TagInput';
+import TagInput from 'components/common/Tags/TagInput';
 import { ResourceType } from 'interfaces';
 
 import { getSourceDisplayName, getSourceIconClass } from 'config/config-utils';

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

@@ -1,3 +1,2 @@
 export const SEARCH_BREADCRUMB_TEXT = 'Advanced Search';
 export const HOMEPAGE_TITLE = 'Amundsen Homepage';
-export const TAGS_TITLE = 'Browse Tags';

amundsen_application/static/js/components/HomePage/index.spec.tsx

@@ -9,7 +9,7 @@ import Breadcrumb from 'components/common/Breadcrumb';
 import MyBookmarks from 'components/common/Bookmark/MyBookmarks';
 import PopularTables from 'components/common/PopularTables';
 import SearchBar from 'components/common/SearchBar';
-import TagsList from 'components/common/TagsList';
+import TagsListContainer from 'components/common/Tags';
 
 import { getMockRouterProps } from 'fixtures/mockRouter';
 import { mapDispatchToProps, HomePage, HomePageProps } from '.';
@@ -48,8 +48,7 @@ describe('HomePage', () => {
     });
 
     it('contains TagsList', () => {
-      expect(wrapper.find('#browse-tags-header').text()).toEqual('Browse Tags');
-      expect(wrapper.contains(<TagsList />));
+      expect(wrapper.contains(<TagsListContainer shortTagsList />));
     });
 
     it('contains MyBookmarks', () => {

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

@@ -15,12 +15,8 @@ import PopularTables from 'components/common/PopularTables';
 import { resetSearchState } from 'ducks/search/reducer';
 import { UpdateSearchStateReset } from 'ducks/search/types';
 import SearchBar from 'components/common/SearchBar';
-import TagsList from 'components/common/TagsList';
-import {
-  SEARCH_BREADCRUMB_TEXT,
-  HOMEPAGE_TITLE,
-  TAGS_TITLE,
-} from './constants';
+import TagsListContainer from 'components/common/Tags';
+import { SEARCH_BREADCRUMB_TEXT, HOMEPAGE_TITLE } from './constants';
 
 export interface DispatchFromProps {
   searchReset: () => UpdateSearchStateReset;
@@ -34,6 +30,9 @@ export class HomePage extends React.Component<HomePageProps> {
   }
 
   render() {
+    /* TODO, just display either popular or curated tags,
+    do we want the title to change based on which
+    implementation is being used? probably not */
     return (
       <main className="container home-page">
         <div className="row">
@@ -48,13 +47,7 @@ export class HomePage extends React.Component<HomePageProps> {
               />
             </div>
             <div className="home-element-container">
-              <h2
-                id="browse-tags-header"
-                className="title-1 browse-tags-header"
-              >
-                {TAGS_TITLE}
-              </h2>
-              <TagsList />
+              <TagsListContainer shortTagsList />
             </div>
             <div className="home-element-container">
               <MyBookmarks />

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

@@ -5,11 +5,7 @@
 
 .home-page {
   .home-element-container {
-    margin-top: 64px;
-  }
-
-  .browse-tags-header {
-    margin-bottom: 32px;
+    margin-top: $spacer-4 * 2;
   }
 
   .filter-breadcrumb {

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

@@ -23,6 +23,7 @@ import BadgeList from 'components/common/BadgeList';
 import BookmarkIcon from 'components/common/Bookmark/BookmarkIcon';
 import Breadcrumb from 'components/common/Breadcrumb';
 import TabsComponent from 'components/common/TabsComponent';
+import TagInput from 'components/common/Tags/TagInput';
 import EditableText from 'components/common/EditableText';
 import LoadingSpinner from 'components/common/LoadingSpinner';
 import Flag from 'components/common/Flag';
@@ -40,7 +41,6 @@ import TableHeaderBullets from 'components/TableDetail/TableHeaderBullets';
 import TableIssues from 'components/TableDetail/TableIssues';
 import WatermarkLabel from 'components/TableDetail/WatermarkLabel';
 import WriterLink from 'components/TableDetail/WriterLink';
-import TagInput from 'components/Tags/TagInput';
 import { ResourceType, TableMetadata } from 'interfaces';
 
 import EditableSection from 'components/common/EditableSection';

amundsen_application/static/js/components/common/Bookmark/MyBookmarks/styles.scss

@@ -6,10 +6,6 @@
 .bookmark-list {
   margin: 32px 0;
 
-  .title-1 {
-    margin-bottom: 32px;
-  }
-
   .tabs-component {
     .nav.nav-tabs {
       margin: 0;

amundsen_application/static/js/components/common/EditableSection/index.spec.tsx

@@ -4,7 +4,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
-import TagInput from 'components/Tags/TagInput';
+import TagInput from 'components/common/Tags/TagInput';
 import { ResourceType } from 'interfaces/Resources';
 import EditableSection, { EditableSectionProps } from '.';
 

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

@@ -6,5 +6,4 @@
 .popular-tables-header {
   display: flex;
   flex-direction: row;
-  margin-bottom: 32px;
 }

amundsen_application/static/js/components/common/Tags/TagsList/constants.ts

@@ -0,0 +1,6 @@
+export const POPULAR_TAGS_TITLE = 'Popular Tags';
+export const CURATED_TAGS_TITLE = 'Curated Tags';
+export const OTHER_TAGS_TITLE = 'Other Tags';
+export const BROWSE_TAGS_TITLE = 'Browse Tags';
+export const BROWSE_MORE_TAGS_TEXT = 'Browse all tags';
+export const BROWSE_PAGE_PATH = '/browse';

amundsen_application/static/js/components/common/Tags/TagsList/index.spec.tsx

@@ -0,0 +1,150 @@
+// Copyright Contributors to the Amundsen project.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+import { Link, BrowserRouter } from 'react-router-dom';
+
+import { shallow } from 'enzyme';
+
+import { strict } from 'assert';
+import { all } from 'redux-saga/effects';
+import { allTestTags } from 'fixtures/metadata/tagsList';
+import TagsList, { TagsListProps } from '.';
+
+const POPULAR_TAGS_NUMBER = 20;
+
+const popularTags = allTestTags.slice(0, POPULAR_TAGS_NUMBER).sort((a, b) => {
+  if (a.tag_name < b.tag_name) return -1;
+  if (a.tag_name > b.tag_name) return 1;
+  return 0;
+});
+
+const otherTags = allTestTags
+  .slice(POPULAR_TAGS_NUMBER, allTestTags.length)
+  .sort((a, b) => {
+    if (a.tag_name < b.tag_name) return -1;
+    if (a.tag_name > b.tag_name) return 1;
+    return 0;
+  });
+
+const setup = (propOverrides?: Partial<TagsListProps>) => {
+  const props = {
+    curatedTags: [],
+    popularTags: [],
+    otherTags: [],
+    ...propOverrides,
+  };
+  const wrapper = shallow<typeof TagsList>(<TagsList {...props} />).dive();
+  return { props, wrapper };
+};
+
+describe('TagsList', () => {
+  describe('render shimmer loader whe isLoading is true', () => {
+    const { wrapper } = setup({
+      popularTags,
+      otherTags,
+      isLoading: true,
+      shortTagsList: true,
+    });
+
+    it('should render ShimmeringTagListLoader', () => {
+      const expected = 1;
+      const actual = wrapper.find('.shimmer-tag-list-loader').length;
+
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe('render shortTagsList with popular tags', () => {
+    const { wrapper } = setup({
+      popularTags,
+      otherTags,
+      isLoading: false,
+      shortTagsList: true,
+    });
+
+    it('should render shortTagsList', () => {
+      const expected = 1;
+      const actual = wrapper.find('.short-tag-list').length;
+
+      expect(actual).toEqual(expected);
+    });
+
+    it('should render TagsListTitle', () => {
+      wrapper.children();
+      const expected = 1;
+      const actual = wrapper.childAt(0).shallow().find('.section-title').length;
+
+      expect(actual).toEqual(expected);
+    });
+
+    it('should render TagsListBlock', () => {
+      const expected = 1;
+      const actual = wrapper.childAt(1).shallow().find('.tags-list').length;
+
+      expect(actual).toEqual(expected);
+    });
+
+    it('should render Browse more tags link', () => {
+      const expected = 1;
+      const actual = wrapper.find('.browse-tags-link').length;
+
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe('render longTagsList with popular tags', () => {
+    const { wrapper } = setup({
+      popularTags,
+      otherTags,
+      isLoading: false,
+      shortTagsList: false,
+    });
+
+    const allChildren = wrapper.children().map((child) => child.shallow());
+
+    it('should render longTagsList', () => {
+      const expected = 1;
+      const actual = wrapper.find('.full-tag-list').length;
+
+      expect(actual).toEqual(expected);
+    });
+
+    it('should render TagsListTitle', () => {
+      const expected = 1;
+      let actual = 0;
+
+      allChildren.forEach((comp) => {
+        if (comp.find('#browse-header').exists()) {
+          actual++;
+        }
+      });
+
+      expect(actual).toEqual(expected);
+    });
+
+    it('should render TagsListLabels for both sections', () => {
+      const expected = 2;
+      let actual = 0;
+
+      allChildren.forEach((comp) => {
+        if (comp.find('.section-label').exists()) {
+          actual++;
+        }
+      });
+
+      expect(actual).toEqual(expected);
+    });
+
+    it('should render TagsListBlock for both Popular Tags section and Other Tags section', () => {
+      const expected = 2;
+      let actual = 0;
+
+      allChildren.forEach((comp) => {
+        if (comp.find('.tags-list').exists()) {
+          actual++;
+        }
+      });
+      expect(actual).toEqual(expected);
+    });
+  });
+});