Implement loading from a bootstrap instance

default.nix

@@ -1,11 +1,11 @@
 {
-  buildFHSUserEnv,
+  buildFHSEnv,
   nodejs_18,
   writers,
 }: let
   nodejs = nodejs_18;
 in
-  buildFHSUserEnv {
+  buildFHSEnv {
     name = "ozma";
     targetPkgs = pkgs:
       with pkgs;

render.yaml

@@ -65,13 +65,13 @@ services:
       - key: KC_PROXY_HEADERS
         value: xforwarded
       - key: KC_HOSTNAME_BACKCHANNEL_DYNAMIC
-        value: "true"
+        value: 'true'
       - key: KC_LOG_LEVEL
         value: info
       - key: KC_METRICS_ENABLED
-        value: "true"
+        value: 'true'
       - key: KC_HEALTH_ENABLED
-        value: "true"
+        value: 'true'
       - key: KEYCLOAK_ADMIN
         value: admin
       - key: KEYCLOAK_ADMIN_PASSWORD

src/components/ImportInitialInstance.vue

@@ -0,0 +1,85 @@
+<i18n>
+    {
+        "en": {
+            "import_message": "Hi, this database doesn't have a main view yet. Do you want to import our admin panel?",
+            "import_button": "Import"
+        },
+        "ru": {
+            "import_message": "Привет, у этой базы ещё нет главного отображения. Хотите импортировать нашу панель администрирования?",
+            "import_button": "Импортировать"
+        }
+    }
+</i18n>
+
+<template>
+  <b-container v-if="!inProgress">
+    <b-row class="mt-3 mb-3">
+      <b-col>
+        <h5>{{ $t('import_message') }}</h5>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-button @click="importInitialInstance">{{
+          $t('import_button')
+        }}</b-button>
+      </b-col>
+    </b-row>
+  </b-container>
+
+  <LoadingIndicator v-else wide />
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
+import { Action, namespace } from 'vuex-class'
+
+import type { ICallApi } from '@/state/auth'
+import LoadingIndicator from '@/components/LoadingIndicator.vue'
+import { ErrorKey } from '@/state/errors'
+
+const errors = namespace('errors')
+
+const initialInstance = 'https://x-admin.api.ozma.org'
+
+@Component({ components: { LoadingIndicator } })
+export default class ImportInitialInstance extends Vue {
+  @Action('callApi') callApi!: ICallApi
+  @Action('reload') reload!: () => Promise<void>
+  @errors.Mutation('pushError') pushError!: ({
+    key,
+    error,
+  }: {
+    key: ErrorKey
+    error: string
+  }) => void
+
+  inProgress = false
+
+  async importInitialInstance() {
+    this.inProgress = true
+    try {
+      // First, fetch a dump of the initial instance.
+      const dumpResponse = await fetch(
+        `${initialInstance}/layouts?skip_preloaded=true`,
+      )
+      if (dumpResponse.status !== 200) {
+        throw new Error(
+          `Failed to fetch initial instance dump: ${dumpResponse.statusText}`,
+        )
+      }
+      const dump = await dumpResponse.blob()
+
+      await this.callApi({
+        func: (api) => api.restoreSchemas(dump),
+      })
+      await this.reload()
+      // Now, upload it to our instance.
+    } catch (e) {
+      this.pushError({ key: 'import_initial_instance', error: String(e) })
+    } finally {
+      this.inProgress = false
+    }
+  }
+}
+</script>

src/components/LoadingIndicator.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    :class="[
+      'loading-container',
+      {
+        nested,
+      },
+    ]"
+  >
+    <div class="loading-background">
+      <div
+        v-for="index in !$isMobile && wide ? 9 : 3"
+        :key="index"
+        class="loading-box"
+      >
+        <div class="loading-line" style="width: 30%" />
+        <div class="loading-line" />
+        <div class="loading-line" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component
+export default class LoadingIndicator extends Vue {
+  @Prop({ type: Boolean, default: false }) nested!: boolean
+  @Prop({ type: Boolean, default: false }) wide!: boolean
+}
+</script>
+
+<style lang="scss" scoped>
+.loading-container {
+  width: 100%;
+  height: 100%;
+  min-height: 100px;
+
+  .loading-background {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.625rem;
+    cursor: wait;
+    background-color: var(--userview-background-color);
+    padding: 2.5rem 1.7rem;
+    width: 100%;
+    height: 100%;
+
+    @include mobile {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+      padding: 1rem;
+    }
+  }
+  &.nested .loading-background {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    padding: 0;
+  }
+
+  .loading-box {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+    border-radius: 0.625rem;
+    background: #fff;
+    padding: 2.5rem 1.7rem;
+
+    @include mobile {
+      // height: 30%;
+    }
+  }
+
+  .loading-line {
+    border-radius: 1.8125rem;
+    background: #efefef;
+    width: 100%;
+    height: 0.6875rem;
+  }
+
+  &.fade-2-leave-active {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    width: 100%;
+    min-height: 0;
+
+    &.nested {
+      padding: 0 15px !important; /* Mimic `.col` paddings */
+    }
+
+    .spinner-border {
+      opacity: 0;
+      transition: opacity 0.05s;
+    }
+  }
+}
+</style>