first flow

Author: vogievetsky

src/client/components/dimension-tile/dimension-tile.tsx

@@ -324,7 +324,7 @@ export class DimensionTile extends React.Component<DimensionTileProps, Dimension
       return {
         selected: filterMode === value,
         onSelect: this.changeFilterMode.bind(this, value),
-        displayValue: STRINGS[value],
+        displayValue: (STRINGS as any)[value],
         keyString: value
       };
     });

src/client/config/constants.ts

@@ -39,7 +39,8 @@ export const SPLIT = 'SPLIT';
 export const MAX_SEARCH_LENGTH = 300;
 export const SEARCH_WAIT = 900;
 
-export const STRINGS: any = {
+// Do not set an explicit type for STRINGS, let typescript figure it out and type check that we are using string correctly
+export const STRINGS = {
   add: 'Add',
   addFromCube: 'Add from Cube',
   addNewCollection: 'Add new collection',
@@ -68,7 +69,7 @@ export const STRINGS: any = {
   create: 'Create',
   cubes: 'cubes',
   dataCubes: 'Data Cubes',
-  delete: 'Delete',
+  'delete': 'Delete',
   deleteCollection: 'Delete this collection',
   deleteCollectionTile: 'Delete this tile',
   dimensions: 'Dimensions',
@@ -107,10 +108,10 @@ export const STRINGS: any = {
   next: 'Next',
   no: 'No',
   noIllCreateThem: 'No, I\'ll create them myself',
-  noClusters: 'No clusters',
+  noClusters: 'There are no clusters configured',
+  noDataCubes: 'There are no data cubes configured',
   noDescription: 'No description',
   noFilter: 'No filter',
-  noQueryableDataCubes: 'There are no queryable data cubes configured',
   noTilesInThisCollection: 'There are no tiles in this collection',
   ok: 'OK',
   openIn: 'Open in',

src/client/modals/cluster-seed-modal/cluster-seed-modal.tsx

@@ -30,7 +30,7 @@ import { indexByAttribute } from '../../../common/utils/array/array';
 import { ImmutableFormDelegate, ImmutableFormState } from '../../utils/immutable-form-delegate/immutable-form-delegate';
 
 export interface ClusterSeedModalProps extends React.Props<any> {
-  onNext: (newCluster: Cluster) => void;
+  onNext: (newCluster: Cluster, sources: string[]) => void;
   onCancel: () => void;
   clusters: Cluster[];
 }
@@ -76,7 +76,7 @@ export class ClusterSeedModal extends React.Component<ClusterSeedModalProps, Imm
       .then(
         (resp) => {
           var cluster = Cluster.fromJS(resp.cluster);
-          this.props.onNext(cluster);
+          this.props.onNext(cluster, resp.sources);
         },
         (xhr: XMLHttpRequest) => Notifier.failure('Woops', 'Something bad happened')
       )

src/client/modals/data-cube-seed-modal/data-cube-seed-modal.tsx

@@ -83,9 +83,9 @@ export class DataCubeSeedModal extends React.Component<DataCubeSeedModalProps, D
           if (!this.mounted) return;
           const { clusters } = this.props;
 
-          var clusterSources = resp.clusterSources.map((cs: { cluster: string, source: string }): ClusterSource => {
+          var clusterSources = resp.clusterSources.map((cs: { clusterName: string, source: string }): ClusterSource => {
             return {
-              cluster: findByName(clusters, cs.cluster),
+              cluster: findByName(clusters, cs.clusterName),
               source: cs.source
             };
           });

src/client/modals/suggestion-modal/suggestion-modal.tsx

@@ -15,11 +15,10 @@
  */
 
 require('./suggestion-modal.css');
+
 import * as React from 'react';
 import { Button, Modal } from '../../components/index';
-import { List } from 'immutable';
 import { STRINGS } from "../../config/constants";
-import { Dimension, Measure, DataCube } from "../../../common/models/index";
 import { pluralIfNeeded } from "../../../common/utils/general/general";
 
 import { Checkbox } from "../../components/checkbox/checkbox";
@@ -39,13 +38,14 @@ export interface Suggestion<T> {
 
 export interface SuggestionModalProps<T> extends React.Props<any> {
   onAdd: (suggestions: T[]) => void;
+  onNothing?: () => void;
   onClose: () => void;
   getLabel: (o: T) => string;
   getKey?: (o: T) => string;
   options: T[];
   title: string;
   okLabel?: (c: number) => string;
-  cancelLabel?: string;
+  nothingLabel?: string;
 }
 
 export interface SuggestionModalState<T> {
@@ -152,8 +152,18 @@ export class SuggestionModal<T> extends React.Component<SuggestionModalProps<T>,
     }));
   }
 
+  renderSecondaryButton() {
+    const { onClose, onNothing, nothingLabel } = this.props;
+
+    if (onNothing && nothingLabel) {
+      return <Button className="cancel" title={nothingLabel} type="secondary" onClick={onNothing}/>;
+    } else {
+      return <Button className="cancel" title={STRINGS.cancel} type="secondary" onClick={onClose}/>;
+    }
+  }
+
   renderEmpty() {
-    const { onClose, title, cancelLabel } = this.props;
+    const { onClose, title } = this.props;
 
     return <Modal
       className="suggestion-modal"
@@ -164,17 +174,17 @@ export class SuggestionModal<T> extends React.Component<SuggestionModalProps<T>,
         <div className="message">{STRINGS.thereAreNoSuggestionsAtTheMoment}</div>
       </div>
       <div className="button-bar">
-        <Button className="cancel" title={cancelLabel || STRINGS.close} type="primary" onClick={onClose}/>
+        {this.renderSecondaryButton()}
       </div>
     </Modal>;
   }
 
   render() {
-    const { onClose, title, okLabel, cancelLabel } = this.props;
+    const { onClose, title, okLabel } = this.props;
     const { suggestions } = this.state;
     if (!suggestions || suggestions.length === 0) return this.renderEmpty();
 
-    const length = List(suggestions).filter((s) => s.selected).size;
+    const length = suggestions.filter((s) => s.selected).length;
     return <Modal
       className="suggestion-modal"
       title={`${title}`}
@@ -189,7 +199,7 @@ export class SuggestionModal<T> extends React.Component<SuggestionModalProps<T>,
       </div>
       <div className="button-bar">
         <Button type="primary" title={okLabel ? okLabel(length) : `${STRINGS.add} ${pluralIfNeeded(length, title)}`} disabled={length === 0} onClick={this.onAdd.bind(this)}/>
-        <Button className="cancel" title={cancelLabel || STRINGS.cancel} type="secondary" onClick={onClose}/>
+        {this.renderSecondaryButton()}
       </div>
     </Modal>;
   }

src/client/views/no-data-view/no-data-view.tsx

@@ -77,16 +77,22 @@ export class NoDataView extends React.Component <NoDataViewProps, NoDataViewStat
     </div>;
   }
 
-  renderTitle(mode: Mode): JSX.Element {
+  renderTitle(): JSX.Element {
+    const { mode } = this.state;
+
     return <div className="title">
       <div className="icon">
         <SvgIcon svg={require('../../icons/data-cubes.svg')}/>
       </div>
-      <div className="label">{mode === NoDataView.NO_CUBE ? STRINGS.noQueryableDataCubes : STRINGS.noConnectedData}</div>
+      <div className="label">{mode === NoDataView.NO_CUBE ? STRINGS.noDataCubes : STRINGS.noClusters}</div>
     </div>;
   }
 
-  renderLink(mode: Mode): JSX.Element {
+  renderLink(): JSX.Element {
+    const { stateful} = this.props;
+    if (!stateful) return null;
+    const { mode } = this.state;
+
     const link = mode === NoDataView.NO_CUBE
       ? <a href="#settings/data-cubes">cubes settings</a>
       : <a href="#settings/clusters">clusters settings</a>
@@ -96,8 +102,7 @@ export class NoDataView extends React.Component <NoDataViewProps, NoDataViewStat
   }
 
   render() {
-    const { user, onNavClick, onOpenAbout, customization, stateful } = this.props;
-    const { mode } = this.state;
+    const { user, onNavClick, onOpenAbout, customization } = this.props;
 
     return <div className="no-data-view">
       <NoDataHeaderBar
@@ -112,8 +117,8 @@ export class NoDataView extends React.Component <NoDataViewProps, NoDataViewStat
         {this.renderSettingsIcon()}
       </NoDataHeaderBar>
       <div className="container">
-        { this.renderTitle(mode) }
-        { stateful ? this.renderLink(mode) : null }
+        { this.renderTitle() }
+        { this.renderLink() }
       </div>
     </div>;
   }

src/client/views/settings-view/cluster-edit/cluster-edit.tsx

@@ -18,7 +18,7 @@ require('./cluster-edit.css');
 
 import * as React from 'react';
 import { List } from 'immutable';
-import { Fn, pluralIfNeeded } from '../../../../common/utils/general/general';
+import { Fn, pluralIfNeeded, makeTitle } from '../../../../common/utils/general/general';
 import { classNames } from '../../../utils/dom/dom';
 import { firstUp, IP_REGEX, NUM_REGEX } from '../../../../common/utils/string/string';
 import { STRINGS } from '../../../config/constants';
@@ -37,11 +37,11 @@ import { CLUSTER as LABELS } from '../../../../common/models/labels';
 
 export interface ClusterEditProps extends React.Props<any> {
   cluster?: Cluster;
-  onSave: (newCluster: Cluster) => void;
+  sources?: string[];
+  onSave: (newCluster: Cluster, dataCubes: DataCube[]) => void;
   isNewCluster?: boolean;
   onCancel?: () => void;
   getSuggestedCubes?: () => DataCube[];
-  addCubes?: (cubes: DataCube[]) => void;
 }
 
 export interface ClusterEditState extends ImmutableFormState<Cluster> {
@@ -87,14 +87,11 @@ export class ClusterEdit extends React.Component<ClusterEditProps, ClusterEditSt
   }
 
   save() {
-    if (this.props.onSave) this.props.onSave(this.state.newInstance);
+    if (this.props.onSave) this.props.onSave(this.state.newInstance, null);
   }
 
   saveAndAddCubes(dataCubes: DataCube[]) {
-    const { addCubes } = this.props;
-
-    this.save();
-    if (addCubes) addCubes(dataCubes);
+    if (this.props.onSave) this.props.onSave(this.state.newInstance, dataCubes);
   }
 
   goBack() {
@@ -104,24 +101,39 @@ export class ClusterEdit extends React.Component<ClusterEditProps, ClusterEditSt
   }
 
   openCreateCubesModal() {
-    const { showCreateCubesModal } = this.state;
+    this.setState({
+      showCreateCubesModal: true
+    });
+  }
+
+  closeCreateCubesModal() {
     this.setState({
       showCreateCubesModal: true
     });
   }
 
   renderCreateCubesModal(): JSX.Element {
-    const { getSuggestedCubes, addCubes } = this.props;
+    const { sources } = this.props;
+    const { newInstance } = this.state;
+
+    var sugestedDataCubes: DataCube[] = [];
+    if (sources) {
+      sugestedDataCubes = sources.map((source, i) => {
+        // ToDo: make the name generation here better;
+        return DataCube.fromClusterAndSource(`${newInstance.name}_${i}`, makeTitle(source), newInstance, source);
+      });
+    }
 
     const CubesSuggestionModal = SuggestionModal.specialize<DataCube>();
 
     return <CubesSuggestionModal
       onAdd={this.saveAndAddCubes.bind(this)}
-      onClose={this.save.bind(this)}
+      onNothing={this.save.bind(this)}
+      nothingLabel={STRINGS.noIllCreateThem}
+      onClose={this.closeCreateCubesModal.bind(this)}
       getLabel={(m) => `${m.title}`}
-      options={getSuggestedCubes()}
+      options={sugestedDataCubes}
       title={STRINGS.createCubesFromCluster}
-      cancelLabel={STRINGS.noIllCreateThem}
       okLabel={(n: number) => `${STRINGS.create} ${pluralIfNeeded(n, 'cube')}`}
     />;
   }

src/client/views/settings-view/settings-view.tsx

@@ -57,6 +57,7 @@ export interface SettingsViewState {
   breadCrumbs?: string[];
 
   tempCluster?: Cluster;
+  tempClusterSources?: string[];
   tempDataCube?: DataCube;
 }
 
@@ -121,6 +122,7 @@ export class SettingsView extends React.Component<SettingsViewProps, SettingsVie
     window.location.hash = `settings/${value}`;
     this.setState({
       tempCluster: null,
+      tempClusterSources: null,
       tempDataCube: null
     });
   }
@@ -147,37 +149,31 @@ export class SettingsView extends React.Component<SettingsViewProps, SettingsVie
 
   // -- Cluster creation flow
 
-  createCluster(newCluster: Cluster) {
+  createCluster(newCluster: Cluster, sources: string[]) {
     this.setState({
-      tempCluster: newCluster
+      tempCluster: newCluster,
+      tempClusterSources: sources
     });
   }
 
-  addCluster(newCluster: Cluster) {
-    this.onSave(
-      ImmutableUtils.addInArray(this.state.settings, 'clusters', newCluster),
-      'Cluster created'
-    ).then(this.backToClustersView.bind(this));
-  }
-
-  askForCubes() {
-    const { settings } = this.state;
-    return settings.getSuggestedCubes();
-  }
+  addClusterAndDataCubes(newCluster: Cluster, newDataCubes: DataCube[]) {
+    console.log('before:', this.state.settings, newCluster);
+    var settings = ImmutableUtils.addInArray(this.state.settings, 'clusters', newCluster);
+    var message = 'Cluster created';
+    if (newDataCubes && newDataCubes.length) {
+      settings = settings.appendDataCubes(newDataCubes);
+      message = 'Cluster and data cubes created';
+    }
 
-  addCubes(newCubes: DataCube[]) {
-    const { settings } = this.state;
-    this.onSave(
-      settings.changeDataCubes(newCubes),
-      'Cubes added'
-    ).then(this.backToDataCubesView.bind(this));
+    this.onSave(settings, message).then(this.backToClustersView.bind(this));
   }
 
   backToClustersView() {
     window.location.hash = '#settings/clusters';
 
     this.setState({
-      tempCluster: null
+      tempCluster: null,
+      tempClusterSources: null
     });
   }
 
@@ -228,7 +224,7 @@ export class SettingsView extends React.Component<SettingsViewProps, SettingsVie
 
   render() {
     const { user, onNavClick, customization } = this.props;
-    const { settings, breadCrumbs, tempCluster, tempDataCube } = this.state;
+    const { settings, breadCrumbs, tempCluster, tempClusterSources, tempDataCube } = this.state;
 
     if (!settings) return null;
 
@@ -282,9 +278,8 @@ export class SettingsView extends React.Component<SettingsViewProps, SettingsVie
                 ? <ClusterEdit
                     isNewCluster={true}
                     cluster={tempCluster}
-                    getSuggestedCubes={this.askForCubes.bind(this)}
-                    addCubes={this.addCubes.bind(this)}
-                    onSave={this.addCluster.bind(this)}
+                    sources={tempClusterSources}
+                    onSave={this.addClusterAndDataCubes.bind(this)}
                     onCancel={this.backToClustersView.bind(this)}
                   />
                 : <ClusterSeedModal