fix(Dataset, CommitDetails): make sure we have a component before attempting to show it

Author: ramfox

app/components/CommitDetails.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import moment from 'moment'
-import { Resizable } from '../components/resizable'
+import { Resizable } from '../components/Resizable'
 import { Action } from 'redux'
 import ComponentList from '../components/ComponentList'
 import DatasetComponent from './DatasetComponent'
@@ -17,7 +17,7 @@ export interface CommitDetailsProps {
   name: string
   selectedCommitPath: string
   commit: Commit
-  selectedComponent: string
+  selectedComponent: 'meta' | 'body' | 'schema' | ''
   sidebarWidth: number
   setSelectedListItem: (type: string, activeTab: string) => Action
   setSidebarWidth: (type: string, sidebarWidth: number) => Action
@@ -80,6 +80,21 @@ const CommitDetails: React.FunctionComponent<CommitDetailsProps> = ({
     if (isLoadingRef.current !== commitDetails.isLoading) {
       isLoadingRef.current = commitDetails.isLoading
     }
+    // make sure that the component we are trying to show actually exists in this version of the dataset
+    if (!commitDetails.isLoading) {
+      const { components } = commitDetails
+      if (selectedComponent === '' || (!components[selectedComponent].value || components[selectedComponent].value.length === 0)) {
+        if (status['meta']) {
+          setSelectedListItem('commitComponent', 'meta')
+          return
+        }
+        if (status['body']) {
+          setSelectedListItem('commitComponent', 'body')
+          return
+        }
+        setSelectedListItem('commitComponent', 'schema')
+      }
+    }
   }, [commitDetails.isLoading])
 
   const { status } = commitDetails

app/components/Dataset.tsx

@@ -11,6 +11,8 @@ import DatasetComponent from './DatasetComponent'
 import DatasetListContainer from '../containers/DatasetListContainer'
 import CommitDetailsContainer from '../containers/CommitDetailsContainer'
 
+import { CSSTransition } from 'react-transition-group'
+
 import { defaultSidebarWidth } from '../reducers/ui'
 
 import {
@@ -21,8 +23,6 @@ import {
   Mutations
 } from '../models/store'
 
-import { CSSTransition } from 'react-transition-group'
-
 export interface DatasetProps {
   // redux state
   ui: UI
@@ -46,6 +46,8 @@ interface DatasetState {
   peername: string
   name: string
   saveIsLoading: boolean
+  workingDatasetIsLoading: boolean
+  activeTab: string
 }
 
 const logo = require('../assets/qri-blob-logo-tiny.png') //eslint-disable-line
@@ -56,7 +58,9 @@ export default class Dataset extends React.Component<DatasetProps> {
   state = {
     peername: null,
     name: null,
-    saveIsLoading: false
+    saveIsLoading: false,
+    workingDatasetIsLoading: true,
+    activeTab: this.props.selections.activeTab
   }
 
   componentDidMount () {
@@ -74,7 +78,7 @@ export default class Dataset extends React.Component<DatasetProps> {
   // working dataset is selected and trigger api call(s)
   static getDerivedStateFromProps (nextProps: DatasetProps, prevState: DatasetState) {
     const { peername: newPeername, name: newName } = nextProps.selections
-    const { peername, name } = prevState
+    const { peername, name, workingDatasetIsLoading, activeTab } = prevState
     // when new props arrive, compare selections.peername and selections.name to
     // previous.  If either is different, fetch data
     if ((newPeername !== peername) || (newName !== name)) {
@@ -87,6 +91,23 @@ export default class Dataset extends React.Component<DatasetProps> {
       }
     }
 
+    // make sure that the component we are trying to show actually exists in this version of the dataset
+    if ((workingDatasetIsLoading && !nextProps.workingDataset.isLoading && nextProps.selections.activeTab === 'status') ||
+        (activeTab === 'history' && nextProps.selections.activeTab === 'status')) {
+      const { workingDataset, selections, setSelectedListItem } = nextProps
+      const { component } = selections
+      const { status } = workingDataset
+      if (component === '' || !status[component]) {
+        if (status['meta']) {
+          setSelectedListItem('component', 'meta')
+        }
+        if (status['body']) {
+          setSelectedListItem('component', 'body')
+        }
+        setSelectedListItem('component', 'schema')
+      }
+    }
+
     // check state to see if there was a successful save
     // successful save means mutations.save.isLoading was true and is now false,
     // and mutations.save.error is falsy
@@ -101,7 +122,9 @@ export default class Dataset extends React.Component<DatasetProps> {
     }
 
     return {
-      saveIsLoading: newSaveIsLoading
+      saveIsLoading: newSaveIsLoading,
+      activeTab: nextProps.selections.activeTab,
+      workingDatasetIsLoading: nextProps.workingDataset.isLoading
     }
   }
 
@@ -110,6 +133,7 @@ export default class Dataset extends React.Component<DatasetProps> {
     const { ui, selections, workingDataset } = this.props
     const { showDatasetList, datasetSidebarWidth } = ui
     const {
+      name,
       activeTab,
       component: selectedComponent,
       commit: selectedCommit
@@ -197,7 +221,7 @@ export default class Dataset extends React.Component<DatasetProps> {
             />
           </Resizable>
           <div className='content-wrapper'>
-            {showDatasetList && <div className='overlay'></div>}
+            {showDatasetList && <div className='overlay' onClick={toggleDatasetList}></div>}
             <div className='transition-group' >
               <CSSTransition
                 in={activeTab === 'status'}
@@ -219,7 +243,6 @@ export default class Dataset extends React.Component<DatasetProps> {
               </CSSTransition>
             </div>
           </div>
-
         </div>
         {
           showDatasetList && (

yarn.lock

@@ -472,7 +472,7 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react-tooltip@^3.9.3":
+"@types/react-tooltip@3.9.3":
   version "3.9.3"
   resolved "https://registry.yarnpkg.com/@types/react-tooltip/-/react-tooltip-3.9.3.tgz#2eb1e08e128bb691197c5c7f9063fda9ffd5ea42"
   integrity sha512-X9xuVWlZTLUQadIIrf5MnMPo/FE8izJPRo6c6f+XUs8eIaQ2vj+5Qw4Ttw9bMUPrqImmsJp7o7FY4t1qHLFf4g==
@@ -506,7 +506,7 @@
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
 
-"@types/underscore@^1.9.2":
+"@types/underscore@1.9.2":
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/@types/underscore/-/underscore-1.9.2.tgz#2c4f7743287218f5c2d9a83db3806672aa48530d"
   integrity sha512-KgOKTAD+9X+qvZnB5S1+onqKc4E+PZ+T6CM/NA5ohRPLHJXb+yCJMVf8pWOnvuBuKFNUAJW8N97IA6lba6mZGg==
@@ -6242,7 +6242,7 @@ react-test-renderer@16.8.6, react-test-renderer@^16.0.0-0:
     react-is "^16.8.6"
     scheduler "^0.13.6"
 
-react-tooltip@^3.10.0:
+react-tooltip@3.10.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.10.0.tgz#268b5ef519fd8a1369288d1f086f42c90d5da7ef"
   integrity sha512-GGdxJvM1zSFztkTP7gCQbLTstWr1OOoMpJ5WZUGhimj0nhRY+MPz+92MpEnKmj0cftJ9Pd/M6FfSl0sfzmZWkg==
@@ -7629,7 +7629,7 @@ uglify-js@^3.1.4:
     commander "~2.20.0"
     source-map "~0.6.1"
 
-underscore@^1.9.1:
+underscore@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.9.1.tgz#06dce34a0e68a7babc29b365b8e74b8925203961"
   integrity sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg==