Download code view content (#188)

* Allow saving install script from WLS Operator page

* Allow saving scripts and resource files for VZ install, component, and application pages

* Allow saving scripts and resource files for operator domain, image, and ingress pages

Author: rakillen

electron/app/js/ipcRendererPreload.js

@@ -31,6 +31,7 @@ contextBridge.exposeInMainWorld(
       send: (channel, ...args) => {
         const validChannels = [
           'close-window',
+          'download-file',
           'new-project',
           'open-project',
           'window-app-quit',

electron/app/js/project.js

@@ -8,6 +8,7 @@ const {getCredentialPassphrase} = require('./promptUtils');
 const {copyFile, mkdir, readFile, writeFile} = require('fs/promises');
 const path = require('path');
 const uuid = require('uuid');
+const { EOL } = require('os');
 
 const model = require('./model');
 const modelProperties = require('./modelProperties');
@@ -972,6 +973,32 @@ function getProjectFileName(dialogReturnedFileName) {
   return result;
 }
 
+function downloadFile(targetWindow, lines, fileType, format, formatName) {
+  const title = i18n.t('dialog-saveTitle', {type: fileType});
+  const filterName = i18n.t('dialog-saveFilterLabel', {type: formatName});
+
+  dialog.showSaveDialog(targetWindow, {
+    title: title,
+    message: title,
+    filters: [
+      {name: filterName, extensions: [format]}
+    ],
+    properties: [
+      'createDirectory',
+      'showOverwriteConfirmation'
+    ]
+  }).then(saveResponse =>  {
+    if (saveResponse.filePath) {
+      const contents = lines.join(EOL);
+      writeFile(saveResponse.filePath, contents, { encoding: 'utf8' })
+        .catch(err => {
+          dialog.showErrorBox(title,
+            i18n.t('dialog-saveFileErrorMessage', { file: saveResponse.filePath, error: err }));
+        });
+    }
+  });
+}
+
 module.exports = {
   chooseArchiveFile,
   chooseModelFile,
@@ -980,6 +1007,7 @@ module.exports = {
   closeProject,
   confirmProjectFile,
   createNewProject,
+  downloadFile,
   getModelFileContent,
   getWindowForProject,
   exportArchiveFile,

electron/app/locales/en/electron.json

@@ -159,6 +159,9 @@
   "dialog-createNewProjectTitle": "Create WebLogic Kubernetes Toolkit Project",
   "dialog-projectSaveFileLocationNotWritableTitle": "Project Directory Not Writable",
   "dialog-projectSaveFileLocationNotWritableError": "The {{projectFileDirectory}} directory chosen to write the new project file is not writable by the current process.",
+  "dialog-saveTitle": "Save {{type}}",
+  "dialog-saveFilterLabel": "{{type}} Files",
+  "dialog-saveFileErrorMessage": "Unable to save {{file}}: {{error}}",
 
   "dialog-openProjectWindowPrompt": "Choose the window where the project should be opened.",
   "dialog-chooseDomainHome": "Select the Domain Home directory to use",

electron/app/locales/en/webui.json

@@ -33,6 +33,9 @@
   "script-sh-label": "sh Script",
   "script-ps1-label": "Powershell Script",
   "script-cmd-label": "Windows CMD Script",
+  "script-button-download": "Download",
+  "script-file-type-label": "{{type}} {{subType}}",
+  "script-resource-file-format": "Resource",
 
   "kubectl-form-name": "Kubernetes Client Configuration",
   "kubectl-title": "Configure the Kubernetes Client",
@@ -229,6 +232,7 @@
   "image-code-primary-image-script-no-content": "Create New Primary Image is turned off so no content to show.",
   "image-code-auxiliary-image-script-no-content": "Create New Auxiliary Image is turned off so no content to show.",
   "image-code-not-creating-images-no-content": "This project is not configured to create any images so no content to show.",
+  "image-code-script-title": "{{type}} Script",
 
   "image-design-form-name": "Image",
   "image-design-form-primary-tab-name": "Primary Image",

electron/app/main.js

@@ -287,6 +287,11 @@ class Main {
       await currentWindow.close();
     });
 
+    ipcMain.on('download-file', (event, lines, fileType, fileFormat, fileFormatName) => {
+      const window = event.sender.getOwnerBrowserWindow();
+      return project.downloadFile(window, lines, fileType, fileFormat, fileFormatName);
+    });
+
     // eslint-disable-next-line no-unused-vars
     ipcMain.on('skip-quickstart-at-startup', async (event) => {
       userSettings.setSkipQuickstartAtStartup(true);

webui/src/js/viewModels/domain-code-view.js

@@ -115,6 +115,37 @@ function (accUtils, ko, project, K8sDomainScriptGenerator, K8sDomainConfigMapGen
     };
 
     this.renderScript(this.selectedSubview());
+
+    this.downloadInstaller = () => {
+      const format = this.shellScriptType();
+      const generator = new K8sDomainScriptGenerator(format);
+      const lines = generator.generate();
+      const fileType = i18n.t('script-file-type-label', {
+        type: i18n.t('nav-domain'),
+        subType: i18n.t('domain-code-script-title')
+      });
+      const formatLabel = this.shellLabelMapper(format + '-label');
+
+      window.api.ipc.send('download-file', lines, fileType, format, formatLabel);
+    };
+
+    this.downloadComponentResource = () => {
+      const generator = this.getDomainResourceGenerator();
+      const lines = generator.generate();
+      const fileType = i18n.t('domain-code-domain-resource-title');
+      const formatLabel = this.shellLabelMapper('resource-file-format');
+
+      window.api.ipc.send('download-file', lines, fileType, 'yaml', formatLabel);
+    };
+
+    this.downloadConfigMap = () => {
+      const generator = this.k8sConfigMapGenerator;
+      const lines = generator.generate();
+      const fileType = i18n.t('domain-code-configmap-resource-title');
+      const formatLabel = this.shellLabelMapper('resource-file-format');
+
+      window.api.ipc.send('download-file', lines, fileType, 'yaml', formatLabel);
+    };
   }
 
   return DomainCodeViewModel;

webui/src/js/viewModels/image-code-view.js

@@ -116,6 +116,18 @@ function(accUtils, ko, i18n, project, ImageScriptGenerator, ArrayDataProvider) {
     };
 
     this.codeText = ko.observable();
+
+    this.downloadScript = () => {
+      const format = this.codeViewScriptLanguage();
+      const generator = new ImageScriptGenerator(format);
+      const auxiliary = this.selectedSubview() === 'auxiliaryImageScript';
+      const lines = auxiliary ? generator.generateAuxiliary() : generator.generatePrimary();
+      const typeName = this.labelMapper(auxiliary ? 'auxiliary-image-script-tab' : 'primary-image-script-tab');
+      const fileType = i18n.t('image-code-script-title', {type: typeName});
+      const formatLabel = this.shellLabelMapper(format + '-label');
+
+      window.api.ipc.send('download-file', lines, fileType, format, formatLabel);
+    };
   }
 
   /*

webui/src/js/viewModels/ingress-code-view.js

@@ -111,6 +111,38 @@ function(accUtils, ko, i18n, project, IngressInstallScriptGenerator, IngressRout
       const lines = generator.generate();
       this.ingressRoutesYamlText(lines.join('\n'));
     };
+
+    this.downloadInstaller = () => {
+      const format = this.shellScriptType();
+      const generator = new IngressInstallScriptGenerator(format);
+      const lines = generator.generate();
+      const fileType = i18n.t('script-file-type-label', {
+        type: i18n.t('nav-ingress'),
+        subType: i18n.t('ingress-code-install-script-title')
+      });
+      const formatLabel = this.shellLabelMapper(format + '-label');
+
+      window.api.ipc.send('download-file', lines, fileType, format, formatLabel);
+    };
+
+    this.downloadAddRoutesScript = () => {
+      const format = this.shellScriptType();
+      const generator = new IngressRoutesScriptGenerator(format);
+      const lines = generator.generate();
+      const fileType = i18n.t('ingress-code-add-routes-script-title');
+      const formatLabel = this.shellLabelMapper(format + '-label');
+
+      window.api.ipc.send('download-file', lines, fileType, format, formatLabel);
+    };
+
+    this.downloadRoutesResource = () => {
+      const generator = new IngressResourceGenerator();
+      const lines = generator.generate();
+      const fileType = i18n.t('ingress-code-ingress-yaml-title');
+      const formatLabel = this.shellLabelMapper('resource-file-format');
+
+      window.api.ipc.send('download-file', lines, fileType, 'yaml', formatLabel);
+    };
   }
 
   /*

webui/src/js/viewModels/operator-code-view.js

@@ -50,6 +50,19 @@ function(i18n, accUtils, ko, project, OperatorScriptGenerator, ArrayDataProvider
       this.shellScriptType(event.detail.value);
       this.updateCodeText(event.detail.value);
     };
+
+    this.download = () => {
+      const format = this.shellScriptType();
+      const generator = new OperatorScriptGenerator(format);
+      const lines = generator.generate();
+      const fileType = i18n.t('script-file-type-label', {
+        type: i18n.t('nav-operator'),
+        subType: i18n.t('domain-code-script-title')
+      });
+      const formatLabel = this.shellLabelMapper(format + '-label');
+
+      window.api.ipc.send('download-file', lines, fileType, format, formatLabel);
+    };
   }
 
   /*

webui/src/js/viewModels/vz-application-code-view.js

@@ -107,6 +107,37 @@ function (accUtils, ko, project, VerrazzanoApplicationScriptGenerator, Verrazzan
     };
 
     this.renderScript(this.selectedSubview());
+
+    this.downloadDeployer = () => {
+      const format = this.shellScriptType();
+      const generator = new VerrazzanoApplicationScriptGenerator(format);
+      const lines = generator.generate();
+      const fileType = i18n.t('script-file-type-label', {
+        type: i18n.t('nav-vz-component'),
+        subType: i18n.t('vz-install-code-script-title')
+      });
+      const formatLabel = this.shellLabelMapper(format + '-label');
+
+      window.api.ipc.send('download-file', lines, fileType, format, formatLabel);
+    };
+
+    this.downloadApplicationResource = () => {
+      const generator = this.vzApplicationResourceGenerator;
+      const lines = generator.generate();
+      const fileType = i18n.t('vz-application-code-application-resource-title');
+      const formatLabel = this.shellLabelMapper('resource-file-format');
+
+      window.api.ipc.send('download-file', lines, fileType, 'yaml', formatLabel);
+    };
+
+    this.downloadProjectResource = () => {
+      const generator = this.vzProjectResourceGenerator;
+      const lines = generator.generate();
+      const fileType = i18n.t('vz-application-code-project-resource-title');
+      const formatLabel = this.shellLabelMapper('resource-file-format');
+
+      window.api.ipc.send('download-file', lines, fileType, 'yaml', formatLabel);
+    };
   }
 
   return VerrazzanoApplicationCodeViewModel;