Add proxy app and app link creation in appstore view

dashboard/src/components/AppInstallDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog ref="dialogHandle" :show-x="true" @close="step = 0">
+  <Dialog ref="dialogHandle" :show-x="true" @close="step = STEP.DETAILS">
     <div class="content">
       <div class="header">
         <div class="summary">
@@ -27,11 +27,11 @@
                 <label for="location">{{ $t('appstore.installDialog.location') }}</label>
                 <div>
                   <TextInput id="location" v-model="location" />
-                  <Dropdown v-model="domain" :options="domains" option-label="domain" option-key="domain" />
+                  <Dropdown v-model="domain" :options="domains" option-label="domain" />
                 </div>
               </FormGroup>
 
-              <!-- TODO: <p class="text-small text-warning" ng-show="appInstall.domain.provider === 'noop' || appInstall.domain.provider === 'manual'" ng-bind-html="'appstore.installDialog.manualWarning' | tr:{ location: ((appInstall.subdomain ? appInstall.subdomain + '.' : '') + appInstall.domain.domain) }"></p> -->
+              <p class="text-small text-warning" v-show="domain.provider === 'noop' || domain.provider === 'manual'" v-html="$t('appstore.installDialog.manualWarning', { location: ((location ? location + '.' : '') + domain.domain) })"></p>
 
               <FormGroup v-for="(port, key) in secondaryDomains" :key="key">
                 <label :for="'secondaryDomainInput' + key">{{ port.title }}</label>
@@ -42,7 +42,10 @@
                 </div>
               </FormGroup>
 
-              <!-- TODO upstreamUri for proxyapp -->
+              <FormGroup :class="{ 'has-error': formError.upstreamUri }" v-show="manifest.id === PROXY_APP_ID">
+                <label for="upstreamUri">Upstream URI</label>
+                <TextInput id="upstreamUri" v-model="upstreamUri" />
+              </FormGroup>
 
               <PortBindings v-model:tcp-ports="tcpPorts" v-model:udp-ports="udpPorts" :error="formError"/>
               <AccessControl v-model="accessRestriction"/>
@@ -67,6 +70,7 @@ import PortBindings from './PortBindings.vue';
 import DomainsModel from '../models/DomainsModel.js';
 import AppsModel from '../models/AppsModel.js';
 import DashboardModel from '../models/DashboardModel.js';
+import { PROXY_APP_ID } from '../constants.js';
 
 const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
 
@@ -90,21 +94,31 @@ const description = computed(() => marked.parse(manifest.value.description || ''
 const domains = ref([]);
 const formValid = computed(() => {
   if (!domain.value) return false;
+  if (manifest.value.id === PROXY_APP_ID) {
+    try {
+      new URL(upstreamUri.value);
+      // eslint-disable-next-line no-unused-vars
+    } catch (e) {
+      return false;
+    }
+  }
+
   return true;
 });
 
 // form data
 const location = ref('');
 const accessRestriction = ref(null);
-const domain = ref('');
+const domain = ref({});
 const tcpPorts = ref({});
 const udpPorts = ref({});
 const secondaryDomains = ref({});
+const upstreamUri = ref('');
 
 async function submit() {
   const config = {
     subdomain: location.value,
-    domain: domain.value,
+    domain: domain.value.domain,
     accessRestriction: accessRestriction.value,
   };
 
@@ -130,6 +144,10 @@ async function submit() {
   }
   config.secondaryDomains = finalSecondaryDomains;
 
+  if (manifest.value.id === PROXY_APP_ID) {
+    config.upstreamUri = upstreamUri.value;
+  }
+
   busy.value = true;
   const error = await appsModel.install(manifest.value, config);
   busy.value = false;
@@ -155,7 +173,7 @@ onMounted(async () => {
   const config = await dashboardModel.getConfig();
 
   // preselect with dashboard domain
-  domain.value = config.adminDomain || domains.value[0].domain;
+  domain.value = domains.value.find(d => d.domain === config.adminDomain) || domains.value[0];
 });
 
 defineExpose({