Web-console: Add continue to spec view (#8144)

* Add continue to spec view

* update spec when type selected

* remove redundancy

* fix mistakes

web-console/src/views/load-data-view/load-data-view.scss

@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+@import '../../variables';
+
 .load-data-view {
   height: 100%;
   display: grid;
@@ -27,6 +29,29 @@
     'main ctrl'
     'main next';
 
+  &.load-data-continue-view {
+    display: grid;
+    justify-content: center;
+    grid-gap: $standard-padding;
+    grid-template-columns: 500px 500px;
+
+    .spec-card {
+      height: 100px;
+      display: grid;
+      grid-gap: $standard-padding;
+      grid-template-columns: 30px 1fr;
+
+      .spec-card-header {
+        font-size: 25px;
+        line-height: 30px;
+        .spec-card-caption {
+          font-size: 15px;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+
   &.welcome {
     .main {
       height: 100%;

web-console/src/views/load-data-view/load-data-view.tsx

@@ -283,6 +283,8 @@ export interface LoadDataViewState {
   selectedDimensionSpec: DimensionSpec | null;
   selectedMetricSpecIndex: number;
   selectedMetricSpec: MetricSpec | null;
+
+  continueToSpec: boolean;
 }
 
 export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDataViewState> {
@@ -343,6 +345,8 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       selectedDimensionSpec: null,
       selectedMetricSpecIndex: -1,
       selectedMetricSpec: null,
+
+      continueToSpec: false,
     };
   }
 
@@ -361,6 +365,10 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     } else {
       this.updateStep('connect');
     }
+
+    if (isEmptyIngestionSpec(spec)) {
+      this.setState({ continueToSpec: true });
+    }
   }
 
   async getOverlordModules() {
@@ -408,11 +416,37 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
   };
 
   render() {
-    const { step } = this.state;
+    const { step, continueToSpec } = this.state;
+    if (!continueToSpec) {
+      return (
+        <div className={classNames('load-data-continue-view load-data-view')}>
+          <Card className={'spec-card'} interactive onClick={this.handleResetConfirm}>
+            <Icon iconSize={30} icon={IconNames.ASTERISK} />
+            <div className={'spec-card-header'}>
+              Start a new spec
+              <div className={'spec-card-caption'}>start a new spec something something</div>
+            </div>
+          </Card>
+          <Card
+            className={'spec-card'}
+            interactive
+            onClick={() => this.setState({ continueToSpec: true })}
+          >
+            <Icon icon={IconNames.REPEAT} iconSize={30} />
+            <div className={'spec-card-header'}>
+              Continue from previous spec
+              <div className={'spec-card-caption'}>
+                Continue from most recent spec you were working on
+              </div>
+            </div>
+          </Card>
+          {this.renderResetConfirm()}
+        </div>
+      );
+    }
     return (
       <div className={classNames('load-data-view', 'app-view', step)}>
         {this.renderStepNav()}
-
         {step === 'welcome' && this.renderWelcomeStep()}
         {step === 'connect' && this.renderConnectStep()}
         {step === 'parser' && this.renderParserStep()}
@@ -659,9 +693,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               text="Connect data"
               rightIcon={IconNames.ARROW_RIGHT}
               onClick={() => {
-                this.setState({
-                  spec: updateIngestionType(spec, selectedComboType as any),
-                });
+                this.updateSpec(updateIngestionType(spec, selectedComboType as any));
                 setTimeout(() => {
                   this.updateStep('connect');
                 }, 10);
@@ -746,7 +778,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         isOpen
         onCancel={() => this.setState({ showResetConfirm: false })}
         onConfirm={() => {
-          this.setState({ showResetConfirm: false });
+          this.setState({ showResetConfirm: false, step: 'welcome', continueToSpec: true });
           this.updateSpec({} as any);
         }}
       >