Consolidate Containers (#56)

* Consolidate un-nested containers

* Consolidate TableDetail related containers

* Consolidate FeedbackForms

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

@@ -3,10 +3,15 @@ import * as DocumentTitle from 'react-document-title';
 // TODO - Consider an alternative to react-sanitized-html (large filesize)
 import SanitizedHTML from 'react-sanitized-html';
 
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
 // TODO: Use css-modules instead of 'import'
 import './styles.scss';
 
+import { GlobalState } from "../../ducks/rootReducer";
 import { AnnouncementsGetRequest } from "../../ducks/announcements/types";
+import { announcementsGet } from '../../ducks/announcements/reducer';
 import { AnnouncementPost } from "./types";
 
 interface AnnouncementPageState {
@@ -23,7 +28,7 @@ export interface DispatchFromProps {
 
 type AnnouncementPageProps = StateFromProps & DispatchFromProps;
 
-class AnnouncementPage extends React.Component<AnnouncementPageProps, AnnouncementPageState> {
+export class AnnouncementPage extends React.Component<AnnouncementPageProps, AnnouncementPageState> {
   constructor(props) {
     super(props);
 
@@ -80,4 +85,14 @@ class AnnouncementPage extends React.Component<AnnouncementPageProps, Announceme
   }
 }
 
-export default AnnouncementPage;
+export const mapStateToProps = (state: GlobalState) => {
+  return {
+    posts: state.announcements.posts,
+  };
+};
+
+export const mapDispatchToProps = (dispatch: any) => {
+  return bindActionCreators({ announcementsGet } , dispatch);
+};
+
+export default connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(AnnouncementPage);

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

 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 
 import './styles.scss';
 
@@ -7,6 +9,9 @@ import AppConfig from '../../../config/config';
 import LoadingSpinner from '../common/LoadingSpinner';
 import TagInfo from "../Tags/TagInfo";
 import { Tag } from "../Tags/types";
+
+import { GlobalState } from "../../ducks/rootReducer";
+import { getAllTags } from '../../ducks/allTags/reducer';
 import { GetAllTagsRequest } from "../../ducks/allTags/types";
 
 export interface StateFromProps {
@@ -26,7 +31,7 @@ interface BrowsePageState {
 
 type BrowsePageProps = StateFromProps & DispatchFromProps;
 
-class BrowsePage extends React.Component<BrowsePageProps, BrowsePageState> {
+export class BrowsePage extends React.Component<BrowsePageProps, BrowsePageState> {
   constructor(props) {
     super(props);
 
@@ -98,4 +103,15 @@ class BrowsePage extends React.Component<BrowsePageProps, BrowsePageState> {
   }
 }
 
-export default BrowsePage;
+export const mapStateToProps = (state: GlobalState) => {
+  return {
+    allTags: state.allTags.allTags,
+    isLoading: state.allTags.isLoading,
+  };
+};
+
+export const mapDispatchToProps = (dispatch: any) => {
+  return bindActionCreators({ getAllTags } , dispatch);
+};
+
+export default connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(BrowsePage);

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

+import * as React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import AbstractFeedbackForm, { DispatchFromProps, StateFromProps } from '../../FeedbackForm';
+
+import { GlobalState } from "../../../../ducks/rootReducer";
+import { submitFeedback, resetFeedback } from '../../../../ducks/feedback/reducer';
+
+export class BugReportFeedbackForm extends AbstractFeedbackForm {
+  constructor(props) {
+    super(props)
+  }
+
+  renderCustom() {
+    return (
+      <form id={AbstractFeedbackForm.FORM_ID} onSubmit={ this.submitForm }>
+        <input type="hidden" name="feedback-type" value="Bug Report"/>
+        <div className="form-group">
+          <label>Bug Summary</label>
+          <textarea name="bug-summary" className="form-control" required={ true }
+                    rows={3} maxLength={ 2000 } placeholder="What went wrong?"/>
+        </div>
+        <div className="form-group">
+          <label>Reproduction Steps</label>
+          <textarea name="repro-steps" className="form-control" rows={5} required={ true }
+                    maxLength={ 2000 } placeholder="What you did to encounter this bug?"/>
+        </div>
+        <div>
+          <button className="btn btn-default submit" type="submit">Submit</button>
+        </div>
+      </form>
+    );
+  }
+}
+
+export const mapStateToProps = (state: GlobalState) => {
+  return {
+    sendState: state.feedback.sendState,
+  };
+};
+
+export const mapDispatchToProps = (dispatch: any) => {
+  return bindActionCreators({ submitFeedback, resetFeedback } , dispatch);
+};
+
+export default connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(BugReportFeedbackForm);

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

+import * as React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import AbstractFeedbackForm, { DispatchFromProps, StateFromProps } from '../../FeedbackForm';
+
+import { GlobalState } from "../../../../ducks/rootReducer";
+import { submitFeedback, resetFeedback } from '../../../../ducks/feedback/reducer';
+
+export class RatingFeedbackForm extends AbstractFeedbackForm {
+  constructor(props) {
+    super(props)
+  }
+
+  renderCustom() {
+    const ratings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    const radioButtonSet = ratings.map(rating => (
+      <div className="radio-set-item" key={`value${rating}:item`}>
+        <input type="radio" id={`value${rating}:input`} name="rating" value={`${rating}`}/>
+        <label id={`value${rating}:label`} htmlFor={`value${rating}:input`}>{rating}</label>
+      </div>
+    ));
+
+    /* TODO: harcoded strings that should be translatable/customizable */
+    return (
+      <form id={AbstractFeedbackForm.FORM_ID} onSubmit={ this.submitForm }>
+        <input type="hidden" name="feedback-type" value="NPS Rating"/>
+        <div>How likely are you to recommend this tool to a friend or co-worker?</div>
+        <div className="radio-set">
+          { radioButtonSet }
+        </div>
+        <div>
+          <div className="nps-label pull-left text-left">Not Very Likely</div>
+          <div className="nps-label pull-right text-right">Very Likely</div>
+        </div>
+        <textarea name="comment" form={AbstractFeedbackForm.FORM_ID}
+          rows={ 5 } maxLength={ 2000 } placeholder="Additional Comments"/>
+        <div>
+          <button className="btn btn-default submit" type="submit">Submit</button>
+        </div>
+      </form>
+    );
+  }
+}
+
+export const mapStateToProps = (state: GlobalState) => {
+  return {
+    sendState: state.feedback.sendState,
+  };
+};
+
+export const mapDispatchToProps = (dispatch: any) => {
+  return bindActionCreators({ submitFeedback, resetFeedback } , dispatch);
+};
+
+export default connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(RatingFeedbackForm);

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

+import * as React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import AbstractFeedbackForm, { DispatchFromProps, StateFromProps } from '../../FeedbackForm';
+
+import { GlobalState } from "../../../../ducks/rootReducer";
+import { submitFeedback, resetFeedback } from '../../../../ducks/feedback/reducer';
+
+
+export class RequestFeedbackForm extends AbstractFeedbackForm {
+  constructor(props) {
+    super(props)
+  }
+
+  renderCustom() {
+    return (
+      <form id={AbstractFeedbackForm.FORM_ID} onSubmit={ this.submitForm }>
+        <input type="hidden" name="feedback-type" value="Feature Request"/>
+        <div className="form-group">
+          <label>Feature Summary</label>
+          <textarea name="feature-summary" className="form-control" rows={3} required={ true }
+                    maxLength={ 2000 } placeholder="What feature are you requesting?"/>
+        </div>
+        <div className="form-group">
+          <label>Value Proposition</label>
+          <textarea name="value-prop" className="form-control" rows={5} required={ true }
+                    maxLength={ 2000 } placeholder="How does this feature add value?"/>
+        </div>
+        <div>
+          <button className="btn btn-default submit" type="submit">Submit</button>
+        </div>
+      </form>
+    );
+  }
+}
+
+export const mapStateToProps = (state: GlobalState) => {
+  return {
+    sendState: state.feedback.sendState,
+  };
+};
+
+export const mapDispatchToProps = (dispatch: any) => {
+  return bindActionCreators({ submitFeedback, resetFeedback } , dispatch);
+};
+
+export default connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(RequestFeedbackForm);

amundsen_application/static/js/components/common/Feedback/FeedbackForm/index.tsx → amundsen_application/static/js/components/Feedback/FeedbackForm/index.tsx

 import * as React from 'react';
-import LoadingSpinner from '../../LoadingSpinner';
+import LoadingSpinner from '../../common/LoadingSpinner';
 
 // TODO: Use css-modules instead of 'import'
 import './styles.scss';
-import { ResetFeedbackRequest, SubmitFeedbackRequest } from "../../../../ducks/feedback/types";
+import { ResetFeedbackRequest, SubmitFeedbackRequest } from "../../../ducks/feedback/types";
 
 import { SendingState } from '../types';
 
@@ -68,95 +68,4 @@ abstract class AbstractFeedbackForm extends React.Component<FeedbackFormProps, F
   abstract renderCustom();
 }
 
-
-export class RatingFeedbackForm extends AbstractFeedbackForm {
-  constructor(props) {
-    super(props)
-  }
-
-  renderCustom() {
-    const ratings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-    const radioButtonSet = ratings.map(rating => (
-      <div className="radio-set-item" key={`value${rating}:item`}>
-        <input type="radio" id={`value${rating}:input`} name="rating" value={`${rating}`}/>
-        <label id={`value${rating}:label`} htmlFor={`value${rating}:input`}>{rating}</label>
-      </div>
-    ));
-
-    /* TODO: harcoded strings that should be translatable/customizable */
-    return (
-      <form id={AbstractFeedbackForm.FORM_ID} onSubmit={ this.submitForm }>
-        <input type="hidden" name="feedback-type" value="NPS Rating"/>
-        <div>How likely are you to recommend this tool to a friend or co-worker?</div>
-        <div className="radio-set">
-          { radioButtonSet }
-        </div>
-        <div>
-          <div className="nps-label pull-left text-left">Not Very Likely</div>
-          <div className="nps-label pull-right text-right">Very Likely</div>
-        </div>
-        <textarea name="comment" form={AbstractFeedbackForm.FORM_ID}
-          rows={ 5 } maxLength={ 2000 } placeholder="Additional Comments"/>
-        <div>
-          <button className="btn btn-default submit" type="submit">Submit</button>
-        </div>
-      </form>
-    );
-  }
-}
-
-export class BugReportFeedbackForm extends AbstractFeedbackForm {
-  constructor(props) {
-    super(props)
-  }
-
-  renderCustom() {
-    return (
-      <form id={AbstractFeedbackForm.FORM_ID} onSubmit={ this.submitForm }>
-        <input type="hidden" name="feedback-type" value="Bug Report"/>
-        <div className="form-group">
-          <label>Bug Summary</label>
-          <textarea name="bug-summary" className="form-control" required={ true }
-                    rows={3} maxLength={ 2000 } placeholder="What went wrong?"/>
-        </div>
-        <div className="form-group">
-          <label>Reproduction Steps</label>
-          <textarea name="repro-steps" className="form-control" rows={5} required={ true }
-                    maxLength={ 2000 } placeholder="What you did to encounter this bug?"/>
-        </div>
-        <div>
-          <button className="btn btn-default submit" type="submit">Submit</button>
-        </div>
-      </form>
-    );
-  }
-}
-
-export class RequestFeedbackForm extends AbstractFeedbackForm {
-  constructor(props) {
-    super(props)
-  }
-
-  renderCustom() {
-    return (
-      <form id={AbstractFeedbackForm.FORM_ID} onSubmit={ this.submitForm }>
-        <input type="hidden" name="feedback-type" value="Feature Request"/>
-        <div className="form-group">
-          <label>Feature Summary</label>
-          <textarea name="feature-summary" className="form-control" rows={3} required={ true }
-                    maxLength={ 2000 } placeholder="What feature are you requesting?"/>
-        </div>
-        <div className="form-group">
-          <label>Value Proposition</label>
-          <textarea name="value-prop" className="form-control" rows={5} required={ true }
-                    maxLength={ 2000 } placeholder="How does this feature add value?"/>
-        </div>
-        <div>
-          <button className="btn btn-default submit" type="submit">Submit</button>
-        </div>
-      </form>
-    );
-  }
-}
-
 export default AbstractFeedbackForm;

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

 import * as React from 'react';
-import {
-  RatingFeedbackContainer,
-  BugReportFeedbackContainer,
-  RequestFeedbackContainer } from '../../../containers/common/Feedback';
+
+import BugReportFeedbackForm from './FeedbackForm/BugReportFeedbackForm';
+import RatingFeedbackForm from './FeedbackForm/RatingFeedbackForm';
+import RequestFeedbackForm from './FeedbackForm/RequestFeedbackForm';
+
 import { Button, Panel } from 'react-bootstrap';
 
 // TODO: Use css-modules instead of 'import'
@@ -28,7 +29,7 @@ enum FeedbackType {
 export default class Feedback extends React.Component<FeedbackProps, FeedbackState> {
   /* TODO: harcoded string that should be translatable/customizable */
   static defaultProps = {
-    content: <RatingFeedbackContainer />,
+    content: <RatingFeedbackForm />,
     title: 'Product Feedback'
   };
 
@@ -51,11 +52,11 @@ export default class Feedback extends React.Component<FeedbackProps, FeedbackSta
   changeType = (type: FeedbackType) => (e) =>  {
     let content;
     if (type === FeedbackType.Request) {
-      content = <RequestFeedbackContainer />;
+      content = <RequestFeedbackForm />;
     } else if (type === FeedbackType.Bug) {
-      content = <BugReportFeedbackContainer />;
+      content = <BugReportFeedbackForm />;
     } else {
-      content = <RatingFeedbackContainer />;
+      content = <RatingFeedbackForm />;
     }
     this.setState({
       content,

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

@@ -24,7 +24,7 @@ interface FooterState {
   lastIndexed: number;
 }
 
-class Footer extends React.Component<FooterProps, FooterState> {
+export class Footer extends React.Component<FooterProps, FooterState> {
   constructor(props) {
     super(props);
 
@@ -61,13 +61,13 @@ class Footer extends React.Component<FooterProps, FooterState> {
 }
 
 
-const mapStateToProps = (state: GlobalState) => {
+export const mapStateToProps = (state: GlobalState) => {
   return {
     lastIndexed: state.tableMetadata.lastIndexed
   }
 };
 
-const mapDispatchToProps = (dispatch) => {
+export const mapDispatchToProps = (dispatch) => {
   return bindActionCreators({ getLastIndexed }, dispatch);
 };
 

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

 import * as React from 'react';
-import Avatar from 'react-avatar';
-import { Link, NavLink } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+
+import Avatar from 'react-avatar';
+import { Link, NavLink } from 'react-router-dom';
 import { withRouter } from 'react-router-dom'
 
 import AppConfig from '../../../config/config';
 import { GlobalState } from "../../ducks/rootReducer";
+import { executeSearch } from '../../ducks/search/reducer';
+import { getPopularTables } from '../../ducks/popularTables/reducer';
 import { getCurrentUser } from "../../ducks/user/reducer";
 import { CurrentUser, GetCurrentUserRequest } from "../../ducks/user/types";
 
@@ -28,7 +31,7 @@ interface NavBarState {
   currentUser: CurrentUser;
 }
 
-class NavBar extends React.Component<NavBarProps, NavBarState> {
+export class NavBar extends React.Component<NavBarProps, NavBarState> {
   constructor(props) {
     super(props);
 
@@ -81,13 +84,13 @@ class NavBar extends React.Component<NavBarProps, NavBarState> {
   }
 }
 
-const mapStateToProps = (state: GlobalState) => {
+export const mapStateToProps = (state: GlobalState) => {
   return {
     currentUser: state.user.currentUser,
   }
 };
 
-const mapDispatchToProps = (dispatch) => {
+export const mapDispatchToProps = (dispatch) => {
   return bindActionCreators({ getCurrentUser }, dispatch);
 };
 

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

 import * as React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import * as DocumentTitle from 'react-document-title';
 import * as qs from 'simple-query-string';
 import Pagination from 'react-js-pagination';
@@ -8,13 +10,17 @@ import SearchList from './SearchList';
 import InfoButton from '../common/InfoButton';
 import { TableResource } from "../common/ResourceListItem/types";
 
+import { GlobalState } from "../../ducks/rootReducer";
+import { executeSearch } from '../../ducks/search/reducer';
 import {
   ExecuteSearchRequest,
   DashboardSearchResults,
   TableSearchResults,
   UserSearchResults
 } from "../../ducks/search/types";
+import { getPopularTables } from '../../ducks/popularTables/reducer';
 import { GetPopularTablesRequest } from '../../ducks/popularTables/types';
+
 // TODO: Use css-modules instead of 'import'
 import './styles.scss';
 
@@ -41,7 +47,7 @@ interface SearchPageState {
   searchTerm: string;
 }
 
-class SearchPage extends React.Component<SearchPageProps, SearchPageState> {
+export class SearchPage extends React.Component<SearchPageProps, SearchPageState> {
   public static defaultProps: SearchPageProps = {
     executeSearch: () => undefined,
     getPopularTables: () => undefined,
@@ -201,4 +207,18 @@ class SearchPage extends React.Component<SearchPageProps, SearchPageState> {
   }
 }
 
-export default SearchPage;
+export const mapStateToProps = (state: GlobalState) => {
+  return {
+    searchTerm: state.search.searchTerm,
+    popularTables: state.popularTables,
+    tables: state.search.tables,
+    users: state.search.users,
+    dashboards: state.search.dashboards,
+  };
+};
+
+export const mapDispatchToProps = (dispatch: any) => {
+  return bindActionCreators({ executeSearch, getPopularTables } , dispatch);
+};
+
+export default connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(SearchPage);

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

 import * as React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 
 import { Button, Modal, OverlayTrigger, Popover, Table } from 'react-bootstrap';
 import Linkify from 'react-linkify'
 
+import { GlobalState } from "../../../ducks/rootReducer";
 import { PreviewData } from '../types';
 
 // TODO: Use css-modules instead of 'import'
@@ -56,7 +59,7 @@ export function getStatusFromCode(httpErrorCode: number) {
   }
 }
 
-class DataPreviewButton extends React.Component<DataPreviewButtonProps, DataPreviewButtonState> {
+export class DataPreviewButton extends React.Component<DataPreviewButtonProps, DataPreviewButtonState> {
 
   static getDerivedStateFromProps(nextProps, prevState) {
     const { previewData, status } = nextProps;
@@ -232,4 +235,12 @@ class DataPreviewButton extends React.Component<DataPreviewButtonProps, DataPrev
     )
   }
 }
-export default DataPreviewButton;
+
+export const mapStateToProps = (state: GlobalState) => {
+  return {
+    previewData: state.tableMetadata.preview.data,
+    status: getStatusFromCode(state.tableMetadata.preview.status),
+  };
+};
+
+export default connect<StateFromProps, {}, ComponentProps>(mapStateToProps, null)(DataPreviewButton);

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

 import * as React from 'react';
 import moment from 'moment-timezone';
 
-import ColumnDescEditableText from '../../../../containers/TableDetail/ColumnDescEditableText';
+import ColumnDescEditableText from '../../ColumnDescEditableText';
 import { TableColumn } from '../../types';
 
 // TODO: Use css-modules instead of 'import'

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

 import * as React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
 import ReactDOM from 'react-dom';
 import serialize from 'form-serialize';
 
-import AvatarLabel, { AvatarLabelProps } from '../common/AvatarLabel';
-import LoadingSpinner from '../common/LoadingSpinner';
+import AvatarLabel, { AvatarLabelProps } from '../../common/AvatarLabel';
+import LoadingSpinner from '../../common/LoadingSpinner';
 import { Modal } from 'react-bootstrap';
 import { UpdateMethod } from './types';
 
@@ -12,6 +15,9 @@ import './styles.scss';
 
 const DEFAULT_ERROR_TEXT = 'There was a problem with the request, please reload the page.';
 
+import { GlobalState } from "../../../ducks/rootReducer";
+import { updateTableOwner } from '../../../ducks/tableMetadata/owners/reducer';
+
 export interface DispatchFromProps {
   onUpdateList: (updateArray: { method: UpdateMethod; id: string; }[], onSuccess?: () => any, onFailure?: () => any) => void;
 }
@@ -37,7 +43,7 @@ interface OwnerEditorState {
   tempItemProps: { [id: string]: AvatarLabelProps };
 }
 
-class OwnerEditor extends React.Component<OwnerEditorProps, OwnerEditorState> {
+export class OwnerEditor extends React.Component<OwnerEditorProps, OwnerEditorState> {
   private inputRef: React.RefObject<HTMLInputElement>;
 
   public static defaultProps: OwnerEditorProps = {
@@ -231,4 +237,21 @@ class OwnerEditor extends React.Component<OwnerEditorProps, OwnerEditorState> {
   }
 }
 
-export default OwnerEditor;
+export const mapStateToProps = (state: GlobalState) => {
+  const ownerObj = state.tableMetadata.tableOwners.owners;
+  const items = Object.keys(ownerObj).reduce((obj, ownerId) => {
+    obj[ownerId] = { label: ownerObj[ownerId].display_name }
+    return obj;
+  }, {});
+
+  return {
+    isLoading: state.tableMetadata.tableOwners.isLoading,
+    itemProps: items,
+  };
+};
+
+export const mapDispatchToProps = (dispatch: any) => {
+  return bindActionCreators({ onUpdateList: updateTableOwner } , dispatch);
+};
+
+export default connect<StateFromProps, DispatchFromProps, ComponentProps>(mapStateToProps, mapDispatchToProps)(OwnerEditor);

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

 import * as React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
 import * as DocumentTitle from 'react-document-title';
 import * as $ from 'jquery';
 import * as qs from 'simple-query-string';
 
+import { GlobalState } from "../../ducks/rootReducer";
+import { getPreviewData, getTableData } from '../../ducks/tableMetadata/reducer';
 import { GetTableDataRequest } from '../../ducks/tableMetadata/types';
 
-import DataPreviewButton from '../../containers/TableDetail/DataPreviewButton';
-import TableDescEditableText from '../../containers/TableDetail/TableDescEditableText';
-import OwnerEditor from '../../containers/TableDetail/OwnerEditor';
-import TagInput from '../../containers/TagInput';
-
 import AppConfig from '../../../config/config';
 import AvatarLabel from '../common/AvatarLabel';
+import DataPreviewButton from './DataPreviewButton';
 import DetailList from './DetailList';
 import EntityCard from '../common/EntityCard';
 import LoadingSpinner from '../common/LoadingSpinner';
+import OwnerEditor from './OwnerEditor';
+import TableDescEditableText from './TableDescEditableText';
+import TagInput from '../Tags/TagInput';
 import WatermarkLabel from "./WatermarkLabel";
 
 import { Tag } from '../Tags/types';
@@ -47,7 +51,7 @@ interface TableDetailState {
   tableData: TableMetadata;
 }
 
-class TableDetail extends React.Component<TableDetailProps & RouteComponentProps<any>, TableDetailState> {
+export class TableDetail extends React.Component<TableDetailProps & RouteComponentProps<any>, TableDetailState> {
   private cluster: string;
   private database: string;
   private schema: string;
@@ -338,4 +342,16 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
   }
 };
 
-export default TableDetail;
+export const mapStateToProps = (state: GlobalState) => {
+  return {
+    isLoading: state.tableMetadata.isLoading,
+    statusCode: state.tableMetadata.statusCode,
+    tableData: state.tableMetadata.tableData,
+  };
+};
+
+export const mapDispatchToProps = (dispatch: any) => {
+  return bindActionCreators({ getPreviewData, getTableData } , dispatch);
+};
+
+export default connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(TableDetail);

amundsen_application/static/js/components/Tags/TagInput/index.tsx

 import * as React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
 import ReactDOM from 'react-dom';
 import { Modal } from 'react-bootstrap';
-
 import Select, { components } from 'react-select';
 import CreatableSelect from 'react-select/lib/Creatable';
 import makeAnimated from 'react-select/lib/animated';
 
+import { GlobalState } from "../../../ducks/rootReducer";
+import { getAllTags } from '../../../ducks/allTags/reducer';
 import { GetAllTagsRequest } from '../../../ducks/allTags/types';
+import { updateTags } from '../../../ducks/tableMetadata/tags/reducer';
 import { UpdateTagsRequest } from '../../../ducks/tableMetadata/types';
 
 import TagInfo from "../TagInfo";
@@ -289,4 +294,16 @@ class TagInput extends React.Component<TagInputProps, TagInputState> {
   }
 }
 
-export default TagInput;
+export const mapStateToProps = (state: GlobalState) => {
+  return {
+    allTags: state.allTags.allTags,
+    isLoading: state.allTags.isLoading || state.tableMetadata.tableTags.isLoading,
+    tags: state.tableMetadata.tableTags.tags,
+  };
+};
+
+export const mapDispatchToProps = (dispatch: any) => {
+  return bindActionCreators({ getAllTags, updateTags } , dispatch);
+};
+
+export default connect<StateFromProps, DispatchFromProps, ComponentProps>(mapStateToProps, mapDispatchToProps)(TagInput);

amundsen_application/static/js/containers/AnnouncementPage/index.tsx

-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-
-import { GlobalState } from "../../ducks/rootReducer";
-import { announcementsGet } from '../../ducks/announcements/reducer';
-
-import AnnouncementPage, { DispatchFromProps, StateFromProps } from '../../components/AnnouncementPage';
-
-export const mapStateToProps = (state: GlobalState) => {
-  return {
-    posts: state.announcements.posts,
-  };
-};
-
-export const mapDispatchToProps = (dispatch: any) => {
-  return bindActionCreators({ announcementsGet } , dispatch);
-};
-
-export default connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(AnnouncementPage);

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

-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-
-import { getAllTags } from '../../ducks/allTags/reducer';
-
-import BrowsePage, { DispatchFromProps, StateFromProps } from '../../components/BrowsePage';
-import { GlobalState } from "../../ducks/rootReducer";
-
-export const mapStateToProps = (state: GlobalState) => {
-  return {
-    allTags: state.allTags.allTags,
-    isLoading: state.allTags.isLoading,
-  };
-};
-
-export const mapDispatchToProps = (dispatch: any) => {
-  return bindActionCreators({ getAllTags } , dispatch);
-};
-
-export default connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(BrowsePage);

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

-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-
-import { GlobalState } from "../../ducks/rootReducer";
-import { executeSearch } from '../../ducks/search/reducer';
-import { getPopularTables } from '../../ducks/popularTables/reducer';
-
-import SearchPage, { DispatchFromProps, StateFromProps } from '../../components/SearchPage';
-
-export const mapStateToProps = (state: GlobalState) => {
-  return {
-    searchTerm: state.search.searchTerm,
-    popularTables: state.popularTables,
-    tables: state.search.tables,
-    users: state.search.users,
-    dashboards: state.search.dashboards,
-  };
-};
-
-export const mapDispatchToProps = (dispatch: any) => {
-  return bindActionCreators({ executeSearch, getPopularTables } , dispatch);
-};
-
-export default connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(SearchPage);

amundsen_application/static/js/containers/TableDetail/DataPreviewButton/index.tsx

-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-
-import { GlobalState } from "../../../ducks/rootReducer";
-
-import DataPreviewButton, { ComponentProps, StateFromProps, getStatusFromCode } from '../../../components/TableDetail/DataPreviewButton';
-
-export const mapStateToProps = (state: GlobalState) => {
-  return {
-    previewData: state.tableMetadata.preview.data,
-    status: getStatusFromCode(state.tableMetadata.preview.status),
-  };
-};
-
-export default connect<StateFromProps, {}, ComponentProps>(mapStateToProps, null)(DataPreviewButton);

amundsen_application/static/js/containers/TableDetail/OwnerEditor/index.tsx

-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-
-import { GlobalState } from "../../../ducks/rootReducer";
-import { updateTableOwner } from '../../../ducks/tableMetadata/owners/reducer';
-
-import OwnerEditor, { ComponentProps, DispatchFromProps, StateFromProps } from '../../../components/OwnerEditor';
-
-export const mapStateToProps = (state: GlobalState) => {
-  const ownerObj = state.tableMetadata.tableOwners.owners;
-  const items = Object.keys(ownerObj).reduce((obj, ownerId) => {
-    obj[ownerId] = { label: ownerObj[ownerId].display_name }
-    return obj;
-  }, {});
-
-  return {
-    isLoading: state.tableMetadata.tableOwners.isLoading,
-    itemProps: items,
-  };
-};
-
-export const mapDispatchToProps = (dispatch: any) => {
-  return bindActionCreators({ onUpdateList: updateTableOwner } , dispatch);
-};
-
-export default connect<StateFromProps, DispatchFromProps, ComponentProps>(mapStateToProps, mapDispatchToProps)(OwnerEditor);

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

-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-
-import { GlobalState } from "../../ducks/rootReducer";
-import { getPreviewData, getTableData } from '../../ducks/tableMetadata/reducer';
-
-import TableDetail, { DispatchFromProps, StateFromProps } from '../../components/TableDetail';
-
-export const mapStateToProps = (state: GlobalState) => {
-  return {
-    isLoading: state.tableMetadata.isLoading,
-    statusCode: state.tableMetadata.statusCode,
-    tableData: state.tableMetadata.tableData,
-  };
-};
-
-export const mapDispatchToProps = (dispatch: any) => {
-  return bindActionCreators({ getPreviewData, getTableData } , dispatch);
-};
-
-export default connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(TableDetail);

amundsen_application/static/js/containers/TagInput/index.tsx

-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-
-import { GlobalState } from "../../ducks/rootReducer";
-import { getAllTags } from '../../ducks/allTags/reducer';
-import { updateTags } from '../../ducks/tableMetadata/tags/reducer';
-
-import TagInput, { ComponentProps, DispatchFromProps, StateFromProps} from '../../components/Tags/TagInput';
-
-export const mapStateToProps = (state: GlobalState) => {
-  return {
-    allTags: state.allTags.allTags,
-    isLoading: state.allTags.isLoading || state.tableMetadata.tableTags.isLoading,
-    tags: state.tableMetadata.tableTags.tags,
-  };
-};
-
-export const mapDispatchToProps = (dispatch: any) => {
-  return bindActionCreators({ getAllTags, updateTags } , dispatch);
-};
-
-export default connect<StateFromProps, DispatchFromProps, ComponentProps>(mapStateToProps, mapDispatchToProps)(TagInput);

amundsen_application/static/js/containers/common/Feedback/index.tsx

-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-
-import { GlobalState } from "../../../ducks/rootReducer";
-import { submitFeedback, resetFeedback } from '../../../ducks/feedback/reducer';
-
-import {
-  RequestFeedbackForm,
-  BugReportFeedbackForm,
-  RatingFeedbackForm,
-  DispatchFromProps,
-  StateFromProps } from '../../../components/common/Feedback/FeedbackForm';
-
-export const mapStateToProps = (state: GlobalState) => {
-  return {
-    sendState: state.feedback.sendState,
-  };
-};
-
-export const mapDispatchToProps = (dispatch: any) => {
-  return bindActionCreators({ submitFeedback, resetFeedback } , dispatch);
-};
-
-export const RatingFeedbackContainer =
-  connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(RatingFeedbackForm);
-export const BugReportFeedbackContainer =
-  connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(BugReportFeedbackForm);
-export const RequestFeedbackContainer =
-  connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(RequestFeedbackForm);

amundsen_application/static/js/ducks/feedback/reducer.ts

-import { SendingState } from '../../components/common/Feedback/types';
+import { SendingState } from '../../components/Feedback/types';
 
 import {
   ResetFeedback, ResetFeedbackRequest,

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

 import { PreviewData, PreviewQueryParams, TableMetadata, User } from '../../components/TableDetail/types';
 import { UpdateTagData, Tag } from '../../components/Tags/types';
-import { UpdateMethod } from '../../components/OwnerEditor/types';
+import { UpdateMethod } from '../../components/TableDetail/OwnerEditor/types';
 export { PreviewData, PreviewQueryParams, TableMetadata, Tag, User, UpdateMethod, UpdateTagData };
 
 type MessageResponse = { msg: string };
 type TableData = TableMetadata & {
   owners: User[];
-  tags: Tag[]; 
+  tags: Tag[];
 };
 export type DescriptionResponse = { description: string; } & MessageResponse;
 export type LastIndexedResponse = { timestamp: string; } & MessageResponse;

amundsen_application/static/js/index.tsx

@@ -9,16 +9,14 @@ import { createStore, applyMiddleware } from 'redux';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import DocumentTitle from 'react-document-title';
 
-
-import AnnouncementPage from './containers/AnnouncementPage';
-import BrowsePage from "./containers/BrowsePage";
-import SearchPage from './containers/SearchPage';
-import TableDetail from './containers/TableDetail';
-
-import Feedback from './components/common/Feedback';
+import AnnouncementPage from './components/AnnouncementPage';
+import BrowsePage from './components/BrowsePage';
+import Feedback from './components/Feedback';
 import Footer from './components/Footer';
 import NavBar from './components/NavBar';
 import NotFoundPage from './components/NotFoundPage';
+import SearchPage from './components/SearchPage';
+import TableDetail from './components/TableDetail';
 
 import rootReducer from './ducks/rootReducer';
 import rootSaga from './ducks/rootSaga';