From a0a265f2ab92da721b4c9a9dce2417d171e5c4d9 Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Thu, 13 Feb 2020 10:07:23 +0200
Subject: [PATCH] [UD] Add Temporary Storage toggle to Get Started page

Signed-off-by: Oleksii Kurinnyi <okurinny@redhat.com>
---
 .../template-list/template-list.controller.ts      |  9 +++++++++
 .../get-started/template-list/template-list.html   | 14 ++++++++++++++
 .../get-started/template-list/template-list.styl   | 10 ++++++++++
 3 files changed, 33 insertions(+)

diff --git a/dashboard/src/app/get-started/template-list/template-list.controller.ts b/dashboard/src/app/get-started/template-list/template-list.controller.ts
index cf7e1249ea3..960934fab6d 100644
--- a/dashboard/src/app/get-started/template-list/template-list.controller.ts
+++ b/dashboard/src/app/get-started/template-list/template-list.controller.ts
@@ -37,6 +37,8 @@ export class TemplateListController {
     '$log',
     'cheNotification'];
 
+  ephemeralMode: boolean;
+
   private $q: ng.IQService;
   private $log: ng.ILogService;
   private $filter: ng.IFilterService;
@@ -104,6 +106,7 @@ export class TemplateListController {
     cheWorkspace.fetchWorkspaceSettings().then(() => {
       const workspaceSettings = cheWorkspace.getWorkspaceSettings();
       this.devfileRegistryUrl = workspaceSettings && workspaceSettings.cheWorkspaceDevfileRegistryUrl;
+      this.ephemeralMode = workspaceSettings['che.workspace.persist_volumes.default'] === 'false';
       this.init();
     });
   }
@@ -140,6 +143,12 @@ export class TemplateListController {
     const selfLink = this.selectedDevfile.links.self;
     return this.devfileRegistry.fetchDevfile(this.devfileRegistryUrl, selfLink).then(() => {
       const devfile = this.devfileRegistry.getDevfile(this.devfileRegistryUrl, selfLink);
+      if (this.ephemeralMode) {
+        if (!devfile.attributes) {
+          devfile.attributes = {};
+        }
+        devfile.attributes.persistVolumes = 'false';
+      }
       const attributes = {stackName: this.selectedDevfile.displayName};
       return this.createWorkspaceSvc.createWorkspaceFromDevfile(undefined, devfile, attributes, true);
     });
diff --git a/dashboard/src/app/get-started/template-list/template-list.html b/dashboard/src/app/get-started/template-list/template-list.html
index a150274a706..e672e743b76 100644
--- a/dashboard/src/app/get-started/template-list/template-list.html
+++ b/dashboard/src/app/get-started/template-list/template-list.html
@@ -30,6 +30,20 @@
         <div class="header-title">Select a Sample</div>
         <div class="header-description">Use a sample to create your first workspace.</div>
       </div>
+      <div class="temporary-storage" layout="row" layout-align="start center">
+        <div class="temporary-storage-label">Temporary Storage</div>
+        <span class="temporary-storage-tooltip"
+          uib-tooltip-html="'Temporary Storage allows for faster I/O but may have limited storage and is not persistent.'"
+          tooltip-trigger="mouseenter"
+          tabindex="-1"
+          tooltip-append-to-body="true">
+          <i class="fa fa-question-circle" aria-hidden="true"></i>
+        </span>
+        <md-switch ng-model="templateListController.ephemeralMode"
+          ng-change="templateListController.onEphemeralModeChange()"
+          aria-label="Enables Temporary Storage.">
+        </md-switch>
+      </div>
       <div flex class="template-search">
         <div flex="100" layout="row">
           <div flex="15" class="search-icon" ng-hide="templateListController.searchValue"><i class="fa fa-search"></i>
diff --git a/dashboard/src/app/get-started/template-list/template-list.styl b/dashboard/src/app/get-started/template-list/template-list.styl
index 5b85d983a8f..8ac271b897f 100644
--- a/dashboard/src/app/get-started/template-list/template-list.styl
+++ b/dashboard/src/app/get-started/template-list/template-list.styl
@@ -88,6 +88,16 @@ md-content.getting-started
           line-height 34px
           font-size 16px
 
+      .temporary-storage
+        margin 0 20px 0 0
+
+        & > *
+          margin 0 6px
+        & > .temporary-storage-label
+          margin-right 3px
+        & > .temporary-storage-tooltip
+          margin-left 3px
+
       .template-info
         text-align end
         font-weight bold