Reorganize table owners & table tags state (#30)

* Un-nest owners and tags state: Move from state.tableMetadata.tableData to state.tableMetadata

* Create a nested reducer for owners

* Rename ducks/tags -> ducks/allTags to reduce confusion with table tags

* Create a nested reducer for table tags

* Some code cleanup

* Added table data defaults + utilMethods

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

@@ -7,7 +7,7 @@ import AppConfig from '../../../config/config';
 import LoadingSpinner from '../common/LoadingSpinner';
 import TagInfo from "../Tags/TagInfo";
 import { Tag } from "../Tags/types";
-import { GetAllTagsRequest } from "../../ducks/tags/reducer";
+import { GetAllTagsRequest } from "../../ducks/allTags/reducer";
 
 export interface StateFromProps {
   allTags: Tag[];

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

@@ -23,7 +23,7 @@ import Avatar from 'react-avatar';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 import { RouteComponentProps } from 'react-router';
 
-import { PreviewQueryParams, TableMetadata } from './types';
+import { PreviewQueryParams, TableMetadata, TableOwners } from './types';
 
 // TODO: Use css-modules instead of 'import'
 import './styles.scss';
@@ -32,6 +32,7 @@ export interface StateFromProps {
   isLoading: boolean;
   statusCode?: number;
   tableData: TableMetadata;
+  tableOwners: TableOwners;
 }
 
 export interface DispatchFromProps {
@@ -45,6 +46,7 @@ interface TableDetailState {
   isLoading: boolean;
   statusCode: number;
   tableData: TableMetadata;
+  tableOwners: TableOwners;
 }
 
 class TableDetail extends React.Component<TableDetailProps & RouteComponentProps<any>, TableDetailState> {
@@ -57,12 +59,27 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
     getPreviewData: () => undefined,
     isLoading: true,
     statusCode: null,
-    tableData: {} as TableMetadata,
+    tableData: {
+      columns: [],
+      is_editable: false,
+      schema: '',
+      table_name: '',
+      table_description: '',
+      table_writer: { application_url: '', description: '', id: '', name: '' },
+      partition: { is_partitioned: false },
+      table_readers: [],
+      source: { source: '', source_type: '' },
+      watermarks: [],
+    },
+    tableOwners: {
+      isLoading: true,
+      owners: [],
+    },
   };
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { isLoading, statusCode, tableData} = nextProps;
-    return { isLoading, statusCode, tableData };
+    const { isLoading, statusCode, tableData, tableOwners } = nextProps;
+    return { isLoading, statusCode, tableData, tableOwners };
   }
 
   constructor(props) {
@@ -79,6 +96,7 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
       isLoading: props.isLoading,
       statusCode: props.statusCode,
       tableData: props.tableData,
+      tableOwners: props.tableOwners,
     }
   }
 
@@ -173,14 +191,17 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
     return AppConfig.tableProfile.exploreUrlGenerator(this.database, this.cluster, this.schema, this.tableName);
   };
 
-  createEntityCardSections(data) {
+  createEntityCardSections = () => {
+    const data = this.state.tableData;
+    const tableOwners = this.state.tableOwners;
+
     const entityCardSections = [];
 
     // "Owned By" section
     const listItemRenderer = (props) => {
       return React.createElement(AvatarLabel, {label: props.label});
     };
-    const listItemProps = data.owners.map((entry) => {
+    const listItemProps = tableOwners.owners.map((entry) => {
       return { label: entry.display_name };
     });
     const listItemPropTypes = [{name:'email', property: 'label', type: 'text'}];
@@ -307,7 +328,7 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
                   />
               </div>
               <div className="col-xs-12 col-md-5 float-md-right col-lg-4">
-                <EntityCard sections={ this.createEntityCardSections(data) }/>
+                <EntityCard sections={ this.createEntityCardSections() }/>
               </div>
               <div className="detail-list-header col-xs-12 col-md-7 col-lg-8">
                 <label>Columns</label>

amundsen_application/static/js/components/TableDetail/types.ts

@@ -26,7 +26,12 @@ interface TableColumnStats {
 
 interface TableReader {
   read_count: number;
-  reader: User[];
+  reader: User;
+}
+
+interface TableSource {
+  source: string | null;
+  source_type: string;
 }
 
 interface TableWriter {
@@ -36,8 +41,9 @@ interface TableWriter {
   name: string;
 }
 
-interface User {
+export interface User {
   display_name: string;
+  profile_url: string;
 }
 
 export interface PreviewQueryParams {
@@ -59,6 +65,11 @@ export interface TableColumn {
   stats: TableColumnStats[];
 }
 
+export interface TableOwners {
+  isLoading: boolean;
+  owners: User[];
+}
+
 export interface TableMetadata {
   columns: TableColumn[];
   is_editable: boolean;
@@ -66,10 +77,9 @@ export interface TableMetadata {
   table_name: string;
   table_description: string;
   table_writer: TableWriter;
-  owners: User[];
   partition: PartitionData;
   table_readers: TableReader[];
-  tags: Tag[];
+  source: TableSource;
   watermarks: Watermark[];
 }
 

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

@@ -6,8 +6,8 @@ import Select, { components } from 'react-select';
 import CreatableSelect from 'react-select/lib/Creatable';
 import makeAnimated from 'react-select/lib/animated';
 
-import { GetAllTagsRequest } from '../../../ducks/tags/reducer';
-import { UpdateTagsRequest } from '../../../ducks/tableMetadata/reducer';
+import { GetAllTagsRequest } from '../../../ducks/allTags/reducer';
+import { UpdateTagsRequest } from '../../../ducks/tableMetadata/tags/reducer';
 
 import TagInfo from "../TagInfo";
 import { Tag, UpdateTagMethod, UpdateTagData } from '../types';

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

 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import { getAllTags } from '../../ducks/tags/reducer';
+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.tags.allTags,
-    isLoading: state.tags.isLoading,
+    allTags: state.allTags.allTags,
+    isLoading: state.allTags.isLoading,
   };
 };
 

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

 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import { updateTableOwner, UpdateMethod } from '../../../ducks/tableMetadata/reducer';
+import { updateTableOwner, UpdateMethod } from '../../../ducks/tableMetadata/owners/reducer';
 
 import EditableList, { ComponentProps, DispatchFromProps } from '../../../components/common/EditableList';
 

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

@@ -11,6 +11,7 @@ export const mapStateToProps = (state: GlobalState) => {
     isLoading: state.tableMetadata.isLoading,
     statusCode: state.tableMetadata.statusCode,
     tableData: state.tableMetadata.tableData,
+    tableOwners: state.tableMetadata.tableOwners,
   };
 };
 

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

@@ -2,16 +2,16 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { GlobalState } from "../../ducks/rootReducer";
-import { getAllTags } from '../../ducks/tags/reducer';
-import { updateTags } from '../../ducks/tableMetadata/reducer';
+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.tags.allTags,
-    isLoading: state.tags.isLoading || state.tableMetadata.isLoadingTags,
-    tags: state.tableMetadata.tableData.tags,
+    allTags: state.allTags.allTags,
+    isLoading: state.allTags.isLoading || state.tableMetadata.tableTags.isLoading,
+    tags: state.tableMetadata.tableTags.tags,
   };
 };
 

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

+import axios from 'axios';
+
+import { sortTagsAlphabetical } from '../../utilMethods';
+
+export function metadataAllTags() {
+  return axios.get('/api/metadata/v0/tags').then((response) => {
+    return response.data.tags.sort(sortTagsAlphabetical);
+  })
+  .catch((error) => {
+    return error.response.data.tags.sort(sortTagsAlphabetical);
+  });
+}

amundsen_application/static/js/ducks/tags/reducer.ts → amundsen_application/static/js/ducks/allTags/reducer.ts

@@ -2,9 +2,9 @@ import { Tag } from '../../components/Tags/types';
 
 /* getAllTags */
 export enum GetAllTags {
-  ACTION = 'amundsen/tags/GET_ALL_TAGS',
-  SUCCESS = 'amundsen/tags/GET_ALL_TAGS_SUCCESS',
-  FAILURE = 'amundsen/tags/GET_ALL_TAGS_FAILURE',
+  ACTION = 'amundsen/allTags/GET_ALL_TAGS',
+  SUCCESS = 'amundsen/allTags/GET_ALL_TAGS_SUCCESS',
+  FAILURE = 'amundsen/allTags/GET_ALL_TAGS_FAILURE',
 }
 
 export interface GetAllTagsRequest {

amundsen_application/static/js/ducks/tags/sagas.ts → amundsen_application/static/js/ducks/allTags/sagas.ts

@@ -7,7 +7,7 @@ import {
 
 import {
   metadataAllTags,
-} from '../api/metadata/v0';
+} from './api/v0';
 
 export function* getAllTagsWorker(): SagaIterator {
   try {

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

+import axios from 'axios';
+
+export function metadataPopularTables() {
+  return axios.get('/api/metadata/v0/popular_tables').then((response) => {
+    return response.data.results;
+  })
+  .catch((error) => {
+    return error.response.data.results;
+  });
+}

amundsen_application/static/js/ducks/popularTables/sagas.ts

@@ -8,7 +8,7 @@ import {
 
 import {
   metadataPopularTables,
-} from '../api/metadata/v0';
+} from './api/v0';
 
 
 export function* getPopularTablesWorker(): SagaIterator {

amundsen_application/static/js/ducks/rootReducer.ts

@@ -5,7 +5,7 @@ import feedback, { FeedbackReducerState } from './feedback/reducer';
 import popularTables, { PopularTablesReducerState } from './popularTables/reducer';
 import search, { SearchReducerState } from './search/reducer';
 import tableMetadata, { TableMetadataReducerState } from './tableMetadata/reducer';
-import tags, { TagReducerState } from './tags/reducer';
+import allTags, { TagReducerState } from './allTags/reducer';
 import user, { UserReducerState } from './user/reducer';
 
 export interface GlobalState {
@@ -14,7 +14,7 @@ export interface GlobalState {
   popularTables: PopularTablesReducerState;
   search: SearchReducerState;
   tableMetadata: TableMetadataReducerState;
-  tags: TagReducerState;
+  allTags: TagReducerState;
   user: UserReducerState;
 }
 
@@ -24,6 +24,6 @@ export default combineReducers<GlobalState>({
   popularTables,
   search,
   tableMetadata,
-  tags,
+  allTags,
   user,
 });

amundsen_application/static/js/ducks/rootSaga.ts

@@ -11,6 +11,8 @@ import { getPopularTablesWatcher } from './popularTables/sagas';
 import { executeSearchWatcher } from './search/sagas';
 
 // TableDetail
+import { updateTableOwnerWatcher } from './tableMetadata/owners/sagas';
+import { updateTableTagsWatcher } from './tableMetadata/tags/sagas';
 import {
   getTableDataWatcher,
   getColumnDescriptionWatcher,
@@ -19,12 +21,10 @@ import {
   getTableDescriptionWatcher,
   updateColumnDescriptionWatcher,
   updateTableDescriptionWatcher,
-  updateTableOwnerWatcher,
-  updateTagsWatcher,
 } from './tableMetadata/sagas';
 
 // Tags
-import { getAllTagsWatcher } from './tags/sagas';
+import { getAllTagsWatcher } from './allTags/sagas';
 
 // User
 import { getCurrentUserWatcher } from "./user/sagas";
@@ -40,7 +40,6 @@ export default function* rootSaga() {
     getPopularTablesWatcher(),
     // Tags
     getAllTagsWatcher(),
-    updateTagsWatcher(),
     // TableDetail
     getTableDataWatcher(),
     getColumnDescriptionWatcher(),
@@ -50,6 +49,7 @@ export default function* rootSaga() {
     updateColumnDescriptionWatcher(),
     updateTableDescriptionWatcher(),
     updateTableOwnerWatcher(),
+    updateTableTagsWatcher(),
     // User
     getCurrentUserWatcher(),
   ]);

amundsen_application/static/js/ducks/tableMetadata/api/helpers.ts

+/** TODO: We will introduce better typing for function parameters return types */
+
+import { filterFromObj, sortTagsAlphabetical } from '../../utilMethods';
+
+/**
+ * Generates the query string parameters needed for requests that act on a particular table resource.
+ */
+export function getTableParams(tableDataObject) {
+  const { cluster, database, schema, table_name } = tableDataObject;
+  return `db=${database}&cluster=${cluster}&schema=${schema}&table=${table_name}`;
+}
+
+/**
+ * Parses the response for table metadata to create a TableMetadata object
+ */
+export function getTableDataFromResponseData(responseData) {
+  return filterFromObj(responseData, ['owners', 'tags']);
+}
+
+/**
+ * Parses the response for table metadata to return the array of table owners
+ */
+export function getTableOwnersFromResponseData(responseData) {
+  return responseData.owners;
+}
+
+/**
+ * Parses the response for table metadata to return an array of sorted table tags
+ */
+export function getTableTagsFromResponseData(responseData) {
+  return responseData.tags.sort(sortTagsAlphabetical);
+}

amundsen_application/static/js/ducks/api/metadata/v0.ts → amundsen_application/static/js/ducks/tableMetadata/api/v0.ts

+/** TODO: We will introduce better typing for requests and responses */
 import axios from 'axios';
 
 import { GetPreviewDataRequest } from '../../tableMetadata/reducer';
 
 const API_PATH = '/api/metadata/v0';
-const sortTagsAlphabetical = (a, b) => a.tag_name.localeCompare(b.tag_name);
 
-function getTableParams(tableDataObject) {
-  const { cluster, database, schema, table_name } = tableDataObject;
-  return `db=${database}&cluster=${cluster}&schema=${schema}&table=${table_name}`;
-}
-
-export function metadataPopularTables() {
-  return axios.get(`${API_PATH}/popular_tables`).then((response) => {
-    return response.data.results;
-  })
-  .catch((error) => {
-    return error.response.data.results;
-  });
-}
-
-export function metadataAllTags() {
-  return axios.get(`${API_PATH}/tags`).then((response) => {
-    return response.data.tags.sort(sortTagsAlphabetical);
-  })
-  .catch((error) => {
-    return error.response.data.tags.sort(sortTagsAlphabetical);
-  });
-}
+/** HELPERS **/
+import {
+  getTableParams,
+  getTableDataFromResponseData,
+  getTableOwnersFromResponseData,
+  getTableTagsFromResponseData
+} from './helpers';
 
 export function metadataTableTags(tableData) {
   const tableParams = getTableParams(tableData);
 
   return axios.get(`${API_PATH}/table?${tableParams}&index=&source=`).then((response) => {
-    const newTableData = response.data.tableData;
-    newTableData.tags = newTableData.tags.sort(sortTagsAlphabetical);
-    return newTableData;
+    return getTableTagsFromResponseData(response.data.tableData);
   })
   .catch((error) => {
-    return tableData;
+    return [];
   });
 }
 
@@ -62,12 +45,16 @@ export function metadataGetTableData(action) {
   const tableParams = getTableParams(action);
 
   return axios.get(`${API_PATH}/table?${tableParams}&index=${searchIndex}&source=${source}`).then((response) => {
-    const tableData = response.data.tableData;
-    tableData.tags = tableData.tags.sort(sortTagsAlphabetical);
-    return { tableData, statusCode: response.status };
+    const responseData = response.data.tableData;
+    return {
+      data: getTableDataFromResponseData(responseData),
+      owners: getTableOwnersFromResponseData(responseData),
+      tags: getTableTagsFromResponseData(responseData),
+      statusCode: response.status,
+    };
   })
   .catch((error) => {
-    return { tableData: {}, statusCode: error.response.status };
+    return { data: {}, owners: [], tags: [], statusCode: error.response.status };
   });
 }
 

amundsen_application/static/js/ducks/tableMetadata/owners/reducer.ts

+import { GetTableData, GetTableDataRequest, GetTableDataResponse } from '../reducer';
+import { User } from '../../../components/TableDetail/types';
+
+/* updateTableOwner */
+export enum UpdateTableOwner {
+  ACTION = 'amundsen/tableMetadata/UPDATE_TABLE_OWNER',
+  SUCCESS = 'amundsen/tableMetadata/UPDATE_TABLE_OWNER_SUCCESS',
+  FAILURE = 'amundsen/tableMetadata/UPDATE_TABLE_OWNER_FAILURE',
+}
+
+export enum UpdateMethod {
+  PUT = 'PUT',
+  DELETE = 'DELETE',
+}
+
+export interface UpdateTableOwnerRequest {
+  type: UpdateTableOwner.ACTION;
+  method: UpdateMethod;
+  value: string;
+  onSuccess?: () => any;
+  onFailure?: () => any;
+}
+
+interface UpdateTableOwnerResponse {
+  type: UpdateTableOwner.SUCCESS | UpdateTableOwner.FAILURE;
+}
+
+export function updateTableOwner(value: string, method: UpdateMethod, onSuccess?: () => any, onFailure?: () => any): UpdateTableOwnerRequest {
+  return {
+    value,
+    method,
+    onSuccess,
+    onFailure,
+    type: UpdateTableOwner.ACTION,
+  };
+}
+/* end updateTableOwner */
+
+export type TableOwnerReducerAction =
+  GetTableDataRequest | GetTableDataResponse |
+  UpdateTableOwnerRequest | UpdateTableOwnerResponse;
+
+export interface TableOwnerReducerState {
+  isLoading: boolean;
+  owners: User[];
+}
+
+export const initialOwnersState: TableOwnerReducerState = {
+  isLoading: true,
+  owners: [],
+};
+
+export default function reducer(state: TableOwnerReducerState = initialOwnersState, action: TableOwnerReducerAction): TableOwnerReducerState {
+  switch (action.type) {
+    case GetTableData.ACTION:
+      return { isLoading: true, owners: [] };
+    case GetTableData.FAILURE:
+    case GetTableData.SUCCESS:
+      return { isLoading: false, owners: action.payload.owners };
+    default:
+      return state;
+  }
+}

amundsen_application/static/js/ducks/tableMetadata/owners/sagas.ts

+import { call, select, takeEvery } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
+
+import { UpdateTableOwner, UpdateTableOwnerRequest } from './reducer';
+
+import { metadataUpdateTableOwner } from '../api/v0';
+
+// updateTableOwner
+export function* updateTableOwnerWorker(action: UpdateTableOwnerRequest): SagaIterator {
+  const state = yield select();
+  try {
+    yield call(metadataUpdateTableOwner, action.value, action.method, state.tableMetadata.tableData);
+    if (action.onSuccess) {
+      yield call(action.onSuccess);
+    }
+  } catch (e) {
+    if (action.onFailure) {
+      yield call(action.onFailure);
+    }
+  }
+}
+
+export function* updateTableOwnerWatcher(): SagaIterator {
+  yield takeEvery(UpdateTableOwner.ACTION, updateTableOwnerWorker);
+}

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

-import { PreviewData, PreviewQueryParams, TableMetadata } from '../../components/TableDetail/types';
-import { UpdateTagData } from '../../components/Tags/types';
+import { PreviewData, PreviewQueryParams, TableMetadata, User } from '../../components/TableDetail/types';
+import { Tag } from '../../components/Tags/types';
+
+import tableOwnersReducer, { initialOwnersState, TableOwnerReducerState } from './owners/reducer';
+import tableTagsReducer, {
+  initialTagsState,
+  TableTagsReducerState,
+  UpdateTags,
+  UpdateTagsRequest,
+  UpdateTagsResponse,
+} from './tags/reducer';
 
 /* getTableData */
 export enum GetTableData {
@@ -18,11 +27,13 @@ export interface GetTableDataRequest {
   table_name: string;
 }
 
-interface GetTableDataResponse {
+export interface GetTableDataResponse {
   type: GetTableData.SUCCESS | GetTableData.FAILURE;
   payload: {
     statusCode: number;
-    tableData: TableMetadata;
+    data: TableMetadata;
+    owners: User[];
+    tags: Tag[];
   }
 }
 
@@ -94,41 +105,6 @@ export function updateTableDescription(newValue: string, onSuccess?: () => any,
 }
 /* end updateTableDescription */
 
-/* updateTableOwner */
-export enum UpdateTableOwner {
-  ACTION = 'amundsen/tableMetadata/UPDATE_TABLE_OWNER',
-  SUCCESS = 'amundsen/tableMetadata/UPDATE_TABLE_OWNER_SUCCESS',
-  FAILURE = 'amundsen/tableMetadata/UPDATE_TABLE_OWNER_FAILURE',
-}
-
-export enum UpdateMethod {
-  PUT = 'PUT',
-  DELETE = 'DELETE',
-}
-
-export interface UpdateTableOwnerRequest {
-  type: UpdateTableOwner.ACTION;
-  method: UpdateMethod;
-  value: string;
-  onSuccess?: () => any;
-  onFailure?: () => any;
-}
-
-interface UpdateTableOwnerResponse {
-  type: UpdateTableOwner.SUCCESS | UpdateTableOwner.FAILURE;
-}
-
-export function updateTableOwner(value: string, method: UpdateMethod, onSuccess?: () => any, onFailure?: () => any): UpdateTableOwnerRequest {
-  return {
-    value,
-    method,
-    onSuccess,
-    onFailure,
-    type: UpdateTableOwner.ACTION,
-  };
-}
-/* end updateTableOwner */
-
 /* getColumnDescription */
 export enum GetColumnDescription {
   ACTION = 'amundsen/tableMetadata/GET_COLUMN_DESCRIPTION',
@@ -187,30 +163,6 @@ export function updateColumnDescription(newValue: string, columnIndex: number, o
 }
 /* end updateColumnDescription */
 
-/* updateTags */
-export enum UpdateTags {
-  ACTION = 'amundsen/tags/UPDATE_TAGS',
-  SUCCESS = 'amundsen/tags/UPDATE_TAGS_SUCCESS',
-  FAILURE = 'amundsen/tags/UPDATE_TAGS_FAILURE',
-}
-
-export interface UpdateTagsRequest {
-  type: UpdateTags.ACTION,
-  tagArray: UpdateTagData[];
-}
-interface UpdateTagsResponse {
-  type: UpdateTags.SUCCESS | UpdateTags.FAILURE,
-  payload: TableMetadata;
-}
-
-export function updateTags(tagArray: UpdateTagData[]): UpdateTagsRequest  {
-  return {
-    tagArray,
-    type: UpdateTags.ACTION,
-  };
-}
-/* end updateTags */
-
 /* getLastIndexed */
 export enum GetLastIndexed {
   ACTION = 'amundsen/tableMetadata/GET_LAST_UPDATED',
@@ -260,42 +212,68 @@ export type TableMetadataReducerAction =
   GetTableDataRequest | GetTableDataResponse |
   GetTableDescriptionRequest | GetTableDescriptionResponse |
   UpdateTableDescriptionRequest | UpdateTableDescriptionResponse |
-  UpdateTableOwnerRequest | UpdateTableOwnerResponse |
   GetColumnDescriptionRequest | GetColumnDescriptionResponse |
   UpdateColumnDescriptionRequest | UpdateColumnDescriptionResponse |
-  UpdateTagsRequest | UpdateTagsResponse |
   GetLastIndexedRequest | GetLastIndexedResponse |
-  GetPreviewDataRequest | GetPreviewDataResponse;
+  GetPreviewDataRequest | GetPreviewDataResponse |
+  UpdateTagsRequest | UpdateTagsResponse ;
 
 export interface TableMetadataReducerState {
   isLoading: boolean;
-  isLoadingTags: boolean;
   lastIndexed: number;
   preview: PreviewDataState;
   statusCode: number;
   tableData: TableMetadata;
+  tableOwners: TableOwnerReducerState;
+  tableTags: TableTagsReducerState;
 }
 
 const initialPreviewState = {
   data: {},
   status: null,
 };
+const initialTableDataState: TableMetadata = {
+  columns: [],
+  is_editable: false,
+  schema: '',
+  table_name: '',
+  table_description: '',
+  table_writer: { application_url: '', description: '', id: '', name: '' },
+  partition: { is_partitioned: false },
+  table_readers: [],
+  source: { source: '', source_type: '' },
+  watermarks: [],
+};
 const initialState: TableMetadataReducerState = {
   isLoading: true,
-  isLoadingTags: true,
   lastIndexed: null,
   preview: initialPreviewState,
   statusCode: null,
-  tableData: {} as TableMetadata,
+  tableData: initialTableDataState,
+  tableOwners: initialOwnersState,
+  tableTags: initialTagsState,
 };
 
 export default function reducer(state: TableMetadataReducerState = initialState, action: TableMetadataReducerAction): TableMetadataReducerState {
   switch (action.type) {
     case GetTableData.ACTION:
-      return { ...state, isLoading: true, isLoadingTags: true, preview: initialPreviewState };
+      return {
+        ...state,
+        isLoading: true,
+        preview: initialPreviewState,
+        tableOwners: tableOwnersReducer(state.tableOwners, action),
+        tableTags: tableTagsReducer(state.tableTags, action),
+      };
     case GetTableData.FAILURE:
     case GetTableData.SUCCESS:
-      return { ...state, isLoading: false, isLoadingTags: false, statusCode: action.payload.statusCode, tableData: action.payload.tableData };
+      return {
+        ...state,
+        isLoading: false,
+        statusCode: action.payload.statusCode,
+        tableData: action.payload.data,
+        tableOwners: tableOwnersReducer(state.tableOwners, action),
+        tableTags: tableTagsReducer(state.tableTags, action),
+      };
     case GetTableDescription.FAILURE:
     case GetTableDescription.SUCCESS:
       return { ...state, tableData: action.payload };
@@ -309,12 +287,10 @@ export default function reducer(state: TableMetadataReducerState = initialState,
     case GetPreviewData.SUCCESS:
     case GetPreviewData.FAILURE:
       return { ...state, preview: action.payload };
+    case UpdateTags.ACTION:
     case UpdateTags.FAILURE:
-      return { ...state, isLoadingTags: false };
     case UpdateTags.SUCCESS:
-      return { ...state, isLoadingTags: false, tableData: action.payload };
-    case UpdateTags.ACTION:
-      return { ...state, isLoadingTags: true };
+      return { ...state, tableTags: tableTagsReducer(state.tableTags, action) };
     default:
       return state;
   }

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

@@ -9,8 +9,6 @@ import {
   GetTableDescription, GetTableDescriptionRequest,
   UpdateColumnDescription, UpdateColumnDescriptionRequest,
   UpdateTableDescription, UpdateTableDescriptionRequest,
-  UpdateTableOwner, UpdateTableOwnerRequest,
-  UpdateTags, UpdateTagsRequest,
 } from './reducer';
 
 import {
@@ -21,19 +19,16 @@ import {
   metadataGetTableDescription,
   metadataUpdateColumnDescription,
   metadataUpdateTableDescription,
-  metadataUpdateTableOwner,
-  metadataUpdateTableTags,
-  metadataTableTags,
-} from '../api/metadata/v0';
+} from './api/v0';
 
 // getTableData
 export function* getTableDataWorker(action: GetTableDataRequest): SagaIterator {
   let tableData;
   try {
-    tableData = yield call(metadataGetTableData, action);
-    yield put({ type: GetTableData.SUCCESS, payload: tableData });
+    const { data, owners, tags } = yield call(metadataGetTableData, action);
+    yield put({ type: GetTableData.SUCCESS, payload: { data, owners, tags } });
   } catch (e) {
-    yield put({ type: GetTableData.FAILURE, payload: tableData });
+    yield put({ type: GetTableData.FAILURE, payload: { data: {}, owners: [], tags: [] } });
   }
 }
 
@@ -82,25 +77,6 @@ export function* updateTableDescriptionWatcher(): SagaIterator {
   yield takeEvery(UpdateTableDescription.ACTION, updateTableDescriptionWorker);
 }
 
-// updateTableOwner
-export function* updateTableOwnerWorker(action: UpdateTableOwnerRequest): SagaIterator {
-  const state = yield select();
-  try {
-    yield call(metadataUpdateTableOwner, action.value, action.method, state.tableMetadata.tableData);
-    if (action.onSuccess) {
-      yield call(action.onSuccess);
-    }
-  } catch (e) {
-    if (action.onFailure) {
-      yield call(action.onFailure);
-    }
-  }
-}
-
-export function* updateTableOwnerWatcher(): SagaIterator {
-  yield takeEvery(UpdateTableOwner.ACTION, updateTableOwnerWorker);
-}
-
 // getColumnDescription
 export function* getColumnDescriptionWorker(action: GetColumnDescriptionRequest): SagaIterator {
   const state = yield select();
@@ -142,24 +118,6 @@ export function* updateColumnDescriptionWatcher(): SagaIterator {
   yield takeEvery(UpdateColumnDescription.ACTION, updateColumnDescriptionWorker);
 }
 
-// updateTags
-export function* updateTagsWorker(action: UpdateTagsRequest): SagaIterator {
-  const state = yield select();
-  const tableData = state.tableMetadata.tableData;
-  try {
-    yield all(metadataUpdateTableTags(action, tableData));
-    const newTableData = yield call(metadataTableTags, tableData);
-    console.log(newTableData);
-    yield put({ type: UpdateTags.SUCCESS, payload: newTableData });
-  } catch (e) {
-    yield put({ type: UpdateTags.FAILURE, payload: tableData });
-  }
-}
-
-export function* updateTagsWatcher(): SagaIterator {
-  yield takeEvery(UpdateTags.ACTION, updateTagsWorker);
-}
-
 // getLastIndexed
 export function* getLastIndexedWorker(action: GetLastIndexedRequest): SagaIterator {
   try {

amundsen_application/static/js/ducks/tableMetadata/tags/reducer.ts

+import { GetTableData, GetTableDataRequest, GetTableDataResponse } from '../reducer';
+import { UpdateTagData, Tag } from '../../../components/Tags/types';
+
+/* updateTags */
+export enum UpdateTags {
+  ACTION = 'amundsen/tags/UPDATE_TAGS',
+  SUCCESS = 'amundsen/tags/UPDATE_TAGS_SUCCESS',
+  FAILURE = 'amundsen/tags/UPDATE_TAGS_FAILURE',
+}
+
+export interface UpdateTagsRequest {
+  type: UpdateTags.ACTION,
+  tagArray: UpdateTagData[];
+}
+
+export interface UpdateTagsResponse {
+  type: UpdateTags.SUCCESS | UpdateTags.FAILURE,
+  payload: Tag[];
+}
+
+export function updateTags(tagArray: UpdateTagData[]): UpdateTagsRequest  {
+  return {
+    tagArray,
+    type: UpdateTags.ACTION,
+  };
+}
+/* end updateTags */
+
+export type TableTagsReducerAction =
+  GetTableDataRequest | GetTableDataResponse |
+  UpdateTagsRequest | UpdateTagsResponse;
+
+export interface TableTagsReducerState {
+  isLoading: boolean;
+  tags: Tag[];
+}
+
+export const initialTagsState: TableTagsReducerState = {
+  isLoading: true,
+  tags: [],
+};
+
+export default function reducer(state: TableTagsReducerState = initialTagsState, action: TableTagsReducerAction): TableTagsReducerState {
+  switch (action.type) {
+    case GetTableData.ACTION:
+      return { isLoading: true, tags: [] };
+    case GetTableData.FAILURE:
+    case GetTableData.SUCCESS:
+      return { isLoading: false, tags: action.payload.tags };
+    case UpdateTags.FAILURE:
+      return { ...state, isLoading: false };
+    case UpdateTags.SUCCESS:
+      return { isLoading: false, tags: action.payload };
+    case UpdateTags.ACTION:
+      return { ...state, isLoading: true };
+    default:
+      return state;
+  }
+}

amundsen_application/static/js/ducks/tableMetadata/tags/sagas.ts

+import { all, call, put, select, takeEvery } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
+
+import { UpdateTags, UpdateTagsRequest } from './reducer';
+
+import { metadataUpdateTableTags, metadataTableTags } from '../api/v0';
+
+// updateTags
+export function* updateTableTagsWorker(action: UpdateTagsRequest): SagaIterator {
+  const state = yield select();
+  const tableData = state.tableMetadata.tableData;
+  try {
+    yield all(metadataUpdateTableTags(action, tableData));
+    const newTags = yield call(metadataTableTags, tableData);
+    yield put({ type: UpdateTags.SUCCESS, payload: newTags });
+  } catch (e) {
+    yield put({ type: UpdateTags.FAILURE, payload: [] });
+  }
+}
+
+export function* updateTableTagsWatcher(): SagaIterator {
+  yield takeEvery(UpdateTags.ACTION, updateTableTagsWorker);
+}

amundsen_application/static/js/ducks/utilMethods.ts

+import { Tag } from '../components/Tags/types';
+
+export function sortTagsAlphabetical(a: Tag, b: Tag): number {
+  return a.tag_name.localeCompare(b.tag_name);
+}
+
+export function extractFromObj(initialObj: object, desiredKeys: string[]): object {
+  return Object.keys(initialObj)
+  .filter((key) => {
+    return desiredKeys.indexOf(key) > -1;
+  })
+  .reduce((obj, key) => {
+    obj[key] = initialObj[key];
+    return obj;
+  }, {});
+}
+
+export function filterFromObj(initialObj: object, rejectedKeys: string[]): object {
+  return Object.keys(initialObj)
+  .filter((key) => {
+    return rejectedKeys.indexOf(key) === -1;
+  })
+  .reduce((obj, key) => {
+    obj[key] = initialObj[key];
+    return obj;
+  }, {});
+}