Merge pull request #516 from threefoldtech/development_support_network_env

Separate network environments to be on different subdomains

Author: AhmedHanafy725

.github/workflows/ci-cd.yml

@@ -5,14 +5,16 @@ name: CI/CD pipeline
 on:
   push:
     branches:
-      - master
       - development
+  release:
+    types: [published]
+
 concurrency:
   # one instance of runing pipeline allowed per branch.
   # On master, we want all builds to complete even if merging happens faster for better reliability and to make it easier to discover at which point something broke.
   # on developmetn, new workflow trigger will cancel the in progress job, and start a new one..
   group: ${{ format('ci-{0}', github.ref) }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
+  cancel-in-progress: ${{ github.event_name == 'release' && github.event.release.prerelease == false }}
 jobs:
   build-and-deploy:
 
@@ -40,8 +42,25 @@ jobs:
         yarn install
         cd ..
 
-    - name: Build
-      run: yarn build:app
+    - name: Build in case development
+      if: ${{ github.ref == 'refs/heads/development' }}
+      run: |
+        VERSION=$GITHUB_SHA
+        VERSION=${VERSION:0:7} NETWORK=dev yarn build:app
+
+    - name: Build in case test
+      if: github.event.release.prerelease == true
+      run: | 
+        VERSION=$GITHUB_REF 
+        VERSION=${VERSION:10:12} NETWORK=test yarn build:app
+
+    - name: Build in case main
+      if: | 
+        github.event_name == 'release' &&
+        github.event.release.prerelease != true   
+      run: |
+        VERSION=$GITHUB_REF 
+        VERSION=${VERSION:10:12}NETWORK=main yarn build:app
 
     - name: Copying files to staging server
       if: ${{ github.ref == 'refs/heads/development' }}
@@ -55,8 +74,22 @@ jobs:
         source: "docs/"
         target: "${{ secrets.DEV_REMOTE_DIR }}"
 
-    - name: Copying files to production server
-      if: ${{ github.ref == 'refs/heads/master' }}
+    - name: Copying files to testing server - Pre-release
+      if: github.event.release.prerelease == true
+      uses: appleboy/scp-action@master
+      with:
+        host: ${{ secrets.DEV_REMOTE_HOST }}
+        username: ${{ secrets.DEV_REMOTE_USER }}
+        key: ${{ secrets.DEV_SSH_KEY }}
+        passphrase: ${{ secrets.DEV_SSH_KEY_PASSPHRASE }}
+        rm: true
+        source: "docs/"
+        target: "${{ secrets.TEST_REMOTE_DIR }}"
+
+    - name: Copying files to production server - Release
+      if: |
+        github.event_name == 'release' && 
+        github.event.release.prerelease != true
       uses: appleboy/scp-action@master
       with:
         host: ${{ secrets.PROD_REMOTE_HOST }}

easy-docs/src/App.vue

@@ -45,7 +45,10 @@ export default class App extends Vue {
     "taiga",
     "owncloud",
     "contractslist",
+    "disclaimer",
+    "version",
     "mattermost",
+
   ];
   sidenav: ISidenav | null = null;
 

easy-docs/src/views/Editor.vue

@@ -48,11 +48,12 @@
         "
         class="tag is-info is-light"
       >
-        v1.0.0-alpha
+        <tf-version></tf-version>
       </span>
     </aside>
 
     <div class="editor__content" v-if="active >= 0">
+        <tf-disclaimer></tf-disclaimer>
       <nav class="navbar" role="navigation" aria-label="main navigation">
         <div class="navbar-end mt-2 mb-2 mr-2" style="height: 112px">
           <tf-profiles></tf-profiles>

package.json

@@ -14,6 +14,7 @@
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-replace": "^3.0.1",
     "@rollup/plugin-typescript": "^8.0.0",
     "@tsconfig/svelte": "^2.0.0",
     "@types/crypto-js": "^4.0.2",

rollup.config.js

@@ -6,8 +6,10 @@ import sveltePreprocess from 'svelte-preprocess';
 import typescript from '@rollup/plugin-typescript';
 import fs from 'fs';
 import path from 'path';
+import replace from '@rollup/plugin-replace';
 
 const production = !process.env.ROLLUP_WATCH;
+const network = process.env.NETWORK || "dev";
 
 /**
  * 
@@ -50,7 +52,14 @@ function build(options) {
 				sourceMap: !production,
 				inlineSources: !production
 			}),
-			production && terser()
+			production && terser(),
+			replace({
+				preventAssignment: true,
+				values: {
+					'process.env.NETWORK': `"${network}"`,
+					'process.env.VERSION': `"${process.env.VERSION || "No version to show"}"`
+				}
+			})
 		],
 		watch: {
 			clearScreen: false

src/elements/base/Base.wc.svelte

@@ -10,6 +10,7 @@
   import currentDeploymentStore from "../../stores/currentDeployment";
   import LogsInfo from "../../components/LogsInfo.svelte";
   import balanceStore from "../../stores/balance";
+import Disclaimer from "../disclaimer/Disclaimer.wc.svelte";
 
   window.configs = window.configs || ({} as any);
   window.configs.baseConfig = baseConfigStore;
@@ -33,7 +34,6 @@
 </script>
 
 <LogsInfo />
-
 <style lang="scss" scoped>
   @import url("https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css");
 </style>

src/elements/disclaimer/Disclaimer.wc.svelte

@@ -0,0 +1,31 @@
+<svelte:options tag="tf-disclaimer" />
+<script lang="ts">
+    const envs = {
+        dev: { env: "development", url: "https://circles.threefold.me/project/test-tfgrid3/issues" },
+        test: { env: "testing", url: "https://circles.threefold.me/project/test-tfgrid3/issues" },
+    };
+
+    $: env = envs[process.env.NETWORK];
+</script>
+
+{#if env}
+    
+<div style="padding: 15px;">
+<form class="box">
+    <p class="is-size-4 has-text-weight-bold">Disclaimer</p>
+        <p>
+            This is a {env.env} environment. We're still ironing out the kinks. If there are any issues, please let us know 
+            <a
+            href={env.url}
+            target="_blank"
+            >
+            here.
+            </a>
+        </p>
+    </form> 
+</div>
+{/if}
+
+<style lang="scss" scoped>
+@import url("https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css");
+</style>

src/elements/disclaimer/index.ts

@@ -0,0 +1 @@
+import "./Disclaimer.wc.svelte";

src/elements/profiles/Profiles.wc.svelte

@@ -40,12 +40,12 @@
   // prettier-ignore
   const fields: IFormField[] = [
     { label: "Profile Name", symbol: "name", placeholder: "Profile Name", type: "text" },
-    { label: "Network Environment", symbol: "networkEnv", type: "select", options: [
-      { label: "Testnet", value: "test" },
-      { label: "Devnet", value: "dev" }
-    ] },
+    // { label: "Network Environment", symbol: "networkEnv", type: "select", disabled: true, options: [
+    //   { label: "Testnet", value: "test" },
+    //   { label: "Devnet", value: "dev" }
+    // ] },
     { label: "Mnemonics", symbol: "mnemonics", placeholder: "Enter Your Mnemonics", type: "password" },
-    // { label: "TFChain Configurations Secret", symbol: "storeSecret", placeholder: "Secret key used to encrypt your data on TFChain", type: "password" },
+    // { label: "TFChain Configurations Secret", symbol: "storeSecret", placeholder: "  Secret key used to encrypt your data on TFChain", type: "password" },
     { label: "Public SSH Key", symbol: "sshKey", placeholder: "Your public SSH key will be added as default to all deployments.", type: "text" },
   ];
 

src/elements/version/Version.wc.svelte

@@ -0,0 +1,4 @@
+<svelte:options tag="tf-version" />
+
+{process.env.VERSION}
+

src/elements/version/index.ts

@@ -0,0 +1 @@
+import "./Version.wc.svelte"

src/stores/baseConfig.ts

@@ -7,7 +7,7 @@ import type { IProfile } from "../types/Profile";
 import getGrid from "../utils/getGrid";
 
 const PREFIX = "v2.";
-const createProfile = (name = "", m = "", n = "dev", key = "") => ({ id: v4(), name, mnemonics: m, storeSecret: "", networkEnv: n, sshKey: key }); // prettier-ignore
+const createProfile = (name = "", m = "", n = process.env.NETWORK, key = "") => ({ id: v4(), name, mnemonics: m, storeSecret: "", networkEnv: n, sshKey: key }); // prettier-ignore
 
 function createBaseConfig() {
   const store = writable({
@@ -167,6 +167,7 @@ function createBaseConfig() {
       const idx = data.profiles.findIndex((p) => p.id === data.activeProfile);
       const profile = data.profiles[idx] as IProfile;
       profile.storeSecret = data.storeSecret;
+      profile.networkEnv = process.env.NETWORK;
       return profile;
     },
   };

yarn.lock

@@ -599,6 +599,14 @@
     is-module "^1.0.0"
     resolve "^1.19.0"
 
+"@rollup/plugin-replace@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-3.0.1.tgz#f774550f482091719e52e9f14f67ffc0046a883d"
+  integrity sha512-989J5oRzf3mm0pO/0djTijdfEh9U3n63BIXN5X7T4U9BP+fN4oxQ6DvDuBvFaHA6scaHQRclqmKQEkBhB7k7Hg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    magic-string "^0.25.7"
+
 "@rollup/plugin-typescript@^8.0.0":
   version "8.3.0"
   resolved "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.3.0.tgz"