refactor: Moves pages into its own folder (#624)

* Announcements, Dashboard, NotFound and Search pages into the pages folder
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Browse, Home, Preferences, and profile pages
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* TableDetail into pages folder
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Renames TableDetail into TableDetailPage
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Fixing some strict null issues
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Update betterer results
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Updates types, adds npm run check and updates stylelint rules due to prettier bug
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Updates betterer results
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Updates test coverage configuration and webpack setup for sourcemaps
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Style linting
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Giving more buffer for test coverage
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

amundsen_application/static/jest.config.js

@@ -7,10 +7,16 @@ module.exports = {
       statements: 90,
     },
     './js/components': {
-      branches: 60, // 75
-      functions: 65, // 75
-      lines: 65, // 75
-      statements: 70, // 75
+      branches: 67, // 75
+      functions: 67, // 75
+      lines: 75, // 75
+      statements: 75, // 75
+    },
+    './js/pages': {
+      branches: 65, // 75
+      functions: 72, // 75
+      lines: 81, // 75
+      statements: 78, // 75
     },
     './js/ducks': {
       branches: 75,
@@ -33,6 +39,7 @@ module.exports = {
   },
   testRegex: '(test|spec)\\.(j|t)sx?$',
   moduleDirectories: ['node_modules', 'js'],
+  coveragePathIgnorePatterns: ['stories/*', 'constants.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   moduleNameMapper: {
     '^.+\\.(css|scss)$': '<rootDir>/node_modules/jest-css-modules',

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

@@ -3,7 +3,6 @@
 
 import * as React from 'react';
 
-import { Button, Panel } from 'react-bootstrap';
 import BugReportFeedbackForm from './FeedbackForm/BugReportFeedbackForm';
 import RatingFeedbackForm from './FeedbackForm/RatingFeedbackForm';
 import RequestFeedbackForm from './FeedbackForm/RequestFeedbackForm';

amundsen_application/static/js/components/common/OwnerEditor/index.tsx

@@ -3,11 +3,11 @@
 
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { Modal } from 'react-bootstrap';
 
 import AppConfig from 'config/config';
 import AvatarLabel, { AvatarLabelProps } from 'components/common/AvatarLabel';
 import LoadingSpinner from 'components/common/LoadingSpinner';
-import { Modal } from 'react-bootstrap';
 import { ResourceType, UpdateMethod, UpdateOwnerPayload } from 'interfaces';
 
 // TODO: Use css-modules instead of 'import'

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

@@ -3,6 +3,7 @@
 
 import * as React from 'react';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
+
 import './styles.scss';
 
 export interface SchemaInfoProps {

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

@@ -6,8 +6,6 @@ import * as Avatar from 'react-avatar';
 import { Link } from 'react-router-dom';
 
 import { UserResource } from 'interfaces';
-import Flag from 'components/common/Flag';
-import { BadgeStyle } from 'config/config-types';
 import { LoggingParams } from '../types';
 
 export interface UserListItemProps {

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

@@ -8,9 +8,6 @@ $shimmer-loader-items: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14;
 $shimmer-loader-tag-max-width: 130;
 $shimmer-loader-tag-min-width: 50;
 
-.shimmer-tag-list-loader {
-}
-
 .shimmer-tag-loader-item {
   margin: 0 $spacer-1 $spacer-1 0;
   height: $shimmer-loader-tag-height;

amundsen_application/static/js/components/common/TabsComponent/index.tsx

@@ -13,10 +13,10 @@ export interface TabsProps {
   onSelect?: (key: string) => void;
 }
 
-interface TabInfo {
+export interface TabInfo {
   content: JSX.Element;
   key: string;
-  title: string;
+  title: string | JSX.Element;
 }
 
 const TabsComponent: React.FC<TabsProps> = ({

amundsen_application/static/js/ducks/dashboard/api/v0.ts

 import axios, { AxiosResponse } from 'axios';
 import * as qs from 'simple-query-string';
 
-import { QueryResource, ResourceType } from 'interfaces/Resources';
+import { ResourceType } from 'interfaces/Resources';
 import { DashboardMetadata } from 'interfaces/Dashboard';
 
 export type GetDashboardAPI = {

amundsen_application/static/js/index.tsx

@@ -6,26 +6,26 @@ import 'core-js/stable';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as ReduxPromise from 'redux-promise';
-
 import createSagaMiddleware from 'redux-saga';
-
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';
 import { Router, Route, Switch } from 'react-router-dom';
 import DocumentTitle from 'react-document-title';
 
-import DashboardPage from 'components/DashboardPage';
-import Preloader from 'components/common/Preloader';
 import { BrowserHistory } from 'utils/navigationUtils';
-import AnnouncementPage from './components/AnnouncementPage';
-import BrowsePage from './components/BrowsePage';
+
+import DashboardPage from './pages/DashboardPage';
+import AnnouncementPage from './pages/AnnouncementPage';
+import BrowsePage from './pages/BrowsePage';
+import HomePage from './pages/HomePage';
+import NotFoundPage from './pages/NotFoundPage';
+import SearchPage from './pages/SearchPage';
+import ProfilePage from './pages/ProfilePage';
+import TableDetail from './pages/TableDetailPage';
+
+import Preloader from './components/common/Preloader';
 import Footer from './components/Footer';
-import HomePage from './components/HomePage';
 import NavBar from './components/NavBar';
-import NotFoundPage from './components/NotFoundPage';
-import ProfilePage from './components/ProfilePage';
-import SearchPage from './components/SearchPage';
-import TableDetail from './components/TableDetail';
 
 import rootReducer from './ducks/rootReducer';
 import rootSaga from './ducks/rootSaga';

amundsen_application/static/js/components/DashboardPage/DashboardOwnerEditor/index.tsx → amundsen_application/static/js/pages/DashboardPage/DashboardOwnerEditor/index.tsx

@@ -44,5 +44,5 @@ export const mapStateToProps = (state: GlobalState) => {
 
 export default connect<StateFromProps, {}, ComponentProps>(
   mapStateToProps,
-  null
+  {}
 )(OwnerEditor);

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

@@ -16,21 +16,9 @@ import Breadcrumb from 'components/common/Breadcrumb';
 import BookmarkIcon from 'components/common/Bookmark/BookmarkIcon';
 import EditableSection from 'components/common/EditableSection';
 import LoadingSpinner from 'components/common/LoadingSpinner';
-import TabsComponent from 'components/common/TabsComponent';
-import DashboardOwnerEditor from 'components/DashboardPage/DashboardOwnerEditor';
-import QueryList from 'components/DashboardPage/QueryList';
-import ChartList from 'components/DashboardPage/ChartList';
+import TabsComponent, { TabInfo } from 'components/common/TabsComponent';
 import ResourceStatusMarker from 'components/common/ResourceStatusMarker';
 import ResourceList from 'components/common/ResourceList';
-import {
-  ADD_DESC_TEXT,
-  EDIT_DESC_TEXT,
-  OWNER_HEADER_TEXT,
-  DASHBOARD_SOURCE,
-  TABLES_PER_PAGE,
-  LAST_RUN_SUCCEEDED,
-  STATUS_TEXT,
-} from 'components/DashboardPage/constants';
 import TagInput from 'components/common/Tags/TagInput';
 import { NO_TIMESTAMP_TEXT } from 'components/constants';
 
@@ -40,6 +28,18 @@ import { getLoggingParams } from 'utils/logUtils';
 
 import { ResourceType } from 'interfaces';
 import { DashboardMetadata } from 'interfaces/Dashboard';
+import {
+  ADD_DESC_TEXT,
+  EDIT_DESC_TEXT,
+  OWNER_HEADER_TEXT,
+  DASHBOARD_SOURCE,
+  TABLES_PER_PAGE,
+  LAST_RUN_SUCCEEDED,
+  STATUS_TEXT,
+} from './constants';
+import ChartList from './ChartList';
+import QueryList from './QueryList';
+import DashboardOwnerEditor from './DashboardOwnerEditor';
 
 import ImagePreview from './ImagePreview';
 
@@ -49,12 +49,6 @@ interface DashboardPageState {
   uri: string;
 }
 
-type TabInfo = {
-  content: JSX.Element;
-  key: string;
-  title: string;
-};
-
 export interface StateFromProps {
   isLoading: boolean;
   statusCode: number;

amundsen_application/static/js/components/SearchPage/ResourceSelector/index.tsx → amundsen_application/static/js/pages/SearchPage/ResourceSelector/index.tsx

@@ -5,11 +5,6 @@ import * as React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-import {
-  DASHBOARD_RESOURCE_TITLE,
-  TABLE_RESOURCE_TITLE,
-  USER_RESOURCE_TITLE,
-} from 'components/SearchPage/constants';
 import { indexDashboardsEnabled, indexUsersEnabled } from 'config/config-utils';
 import { GlobalState } from 'ducks/rootReducer';
 import { updateSearchState } from 'ducks/search/reducer';
@@ -20,6 +15,11 @@ import {
   UserSearchResults,
 } from 'ducks/search/types';
 import { ResourceType } from 'interfaces/Resources';
+import {
+  DASHBOARD_RESOURCE_TITLE,
+  TABLE_RESOURCE_TITLE,
+  USER_RESOURCE_TITLE,
+} from '../constants';
 
 const RESOURCE_SELECTOR_TITLE = 'Resource';
 

amundsen_application/static/js/components/SearchPage/index.spec.tsx → amundsen_application/static/js/pages/SearchPage/index.spec.tsx

@@ -9,9 +9,9 @@ import { shallow } from 'enzyme';
 
 import { ResourceType } from 'interfaces';
 
-import ResourceSelector from 'components/SearchPage/ResourceSelector';
-import SearchFilter from 'components/SearchPage/SearchFilter';
-import SearchPanel from 'components/SearchPage/SearchPanel';
+import ResourceSelector from 'pages/SearchPage/ResourceSelector';
+import SearchFilter from 'pages/SearchPage/SearchFilter';
+import SearchPanel from 'pages/SearchPage/SearchPanel';
 import PaginatedApiResourceList from 'components/common/ResourceList/PaginatedApiResourceList';
 
 import globalState from 'fixtures/globalState';

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

@@ -8,7 +8,6 @@ import * as DocumentTitle from 'react-document-title';
 import { RouteComponentProps } from 'react-router';
 import { Search as UrlSearch } from 'history';
 
-import LoadingSpinner from 'components/common/LoadingSpinner';
 import PaginatedApiResourceList from 'components/common/ResourceList/PaginatedApiResourceList';
 import ShimmeringResourceLoader from 'components/common/ShimmeringResourceLoader';
 

amundsen_application/static/js/components/TableDetail/ColumnListItem/ColumnType/styles.scss → amundsen_application/static/js/pages/TableDetailPage/ColumnListItem/ColumnType/styles.scss

@@ -32,6 +32,7 @@ $modal-dialog-width: 418px;
     height: calc(#{$modal-dialog-height - $modal-header-height - $spacer-3});
     font-family: $font-family-monospace-code;
     font-size: $code-font-size;
+
     /* Override react-bootstrap styles to match design */
     margin: 0 $spacer-3 !important;
     padding: $spacer-1 0 !important;
@@ -51,14 +52,17 @@ $modal-dialog-width: 418px;
   .modal-header {
     border-bottom: none;
     height: $modal-header-height;
+
     /* Override react-bootstrap styles to match design */
     padding: $spacer-3 !important;
 
     .main-title {
       @extend %text-title-w1;
     }
+
     .sub-title {
       @extend %text-subtitle-w3;
+
       color: $text-secondary;
     }
   }
@@ -72,13 +76,15 @@ $modal-dialog-width: 418px;
   text-align: center;
   padding: 0 !important;
 }
-.modal:before {
+
+.modal::before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
   margin-right: -4px;
 }
+
 .modal-dialog {
   display: inline-block;
   vertical-align: middle;

amundsen_application/static/js/components/TableDetail/ColumnListItem/index.spec.tsx → amundsen_application/static/js/pages/TableDetailPage/ColumnListItem/index.spec.tsx

@@ -4,17 +4,13 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
-import ColumnDescEditableText from 'components/TableDetail/ColumnDescEditableText';
-import {
-  ColumnListItem,
-  ColumnListItemProps,
-  mapDispatchToProps,
-} from 'components/TableDetail/ColumnListItem';
-import EditableSection from 'components/common/EditableSection';
-import ColumnStats from 'components/TableDetail/ColumnStats';
 import AppConfig from 'config/config';
+import EditableSection from 'components/common/EditableSection';
 import * as UtilMethods from 'ducks/utilMethods';
 import { RequestMetadataType } from 'interfaces/Notifications';
+import ColumnStats from '../ColumnStats';
+import ColumnDescEditableText from '../ColumnDescEditableText';
+import { ColumnListItem, ColumnListItemProps, mapDispatchToProps } from '.';
 
 import ColumnType from './ColumnType';
 

amundsen_application/static/js/components/TableDetail/ColumnListItem/index.tsx → amundsen_application/static/js/pages/TableDetailPage/ColumnListItem/index.tsx

@@ -6,8 +6,6 @@ import { Dropdown, MenuItem } from 'react-bootstrap';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-import ColumnDescEditableText from 'components/TableDetail/ColumnDescEditableText';
-import ColumnStats from 'components/TableDetail/ColumnStats';
 import { notificationsEnabled, getMaxLength } from 'config/config-utils';
 import { openRequestDescriptionDialog } from 'ducks/notification/reducer';
 import { OpenRequestAction } from 'ducks/notification/types';
@@ -16,6 +14,8 @@ import { RequestMetadataType, TableColumn } from 'interfaces';
 
 import './styles.scss';
 import EditableSection from 'components/common/EditableSection';
+import ColumnStats from '../ColumnStats';
+import ColumnDescEditableText from '../ColumnDescEditableText';
 import ColumnType from './ColumnType';
 
 const MORE_BUTTON_TEXT = 'More options';

amundsen_application/static/js/components/TableDetail/ExploreButton/index.spec.tsx → amundsen_application/static/js/pages/TableDetailPage/ExploreButton/index.spec.tsx

@@ -3,11 +3,13 @@
 
 import * as React from 'react';
 import { shallow } from 'enzyme';
+
 import * as ConfigUtils from 'config/config-utils';
-import ExploreButton from 'components/TableDetail/ExploreButton';
 import { TableMetadata } from 'interfaces/TableMetadata';
 import { logClick } from 'ducks/utilMethods';
 
+import ExploreButton from '.';
+
 let mockExploreEnabled = true;
 let mockExploreUrl = 'https://test-website.com';