Merge pull request #3931 from Budibase/fix/3915

Fixing some issues with short hand URL for prod apps - using it by default in self host
4 years ago · 342a4b1f95
4 changed files with 32 additions and 137 deletions
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@ -1,126 +0,0 @@
-<script>
-  import {
-    Heading,
-    Icon,
-    Body,
-    Layout,
-    ActionMenu,
-    MenuItem,
-    StatusLight,
-  } from "@budibase/bbui"
-  import { gradient } from "actions"
-  import { processStringSync } from "@budibase/string-templates"
-
-  export let app
-  export let exportApp
-  export let viewApp
-  export let editApp
-  export let updateApp
-  export let deleteApp
-  export let unpublishApp
-  export let releaseLock
-</script>
-
-<div class="wrapper">
-  <Layout noPadding gap="XS" alignContent="start">
-    <div class="preview" use:gradient={{ seed: app.name }} />
-    <div class="title">
-      {#if app.lockedBy}
-        <Icon name="LockClosed" />
-      {/if}
-      <div class="name" on:click={() => editApp(app)}>
-        <Heading size="XS">
-          {app.name}
-        </Heading>
-      </div>
-      <ActionMenu align="right">
-        <Icon slot="control" name="More" hoverable />
-        {#if app.deployed}
-          <MenuItem on:click={() => viewApp(app)} icon="GlobeOutline">
-            View published app
-          </MenuItem>
-        {/if}
-        {#if app.lockedYou}
-          <MenuItem on:click={() => releaseLock(app)} icon="LockOpen">
-            Release lock
-          </MenuItem>
-        {/if}
-        <MenuItem on:click={() => exportApp(app)} icon="Download">
-          Export
-        </MenuItem>
-        {#if app.deployed}
-          <MenuItem on:click={() => unpublishApp(app)} icon="GlobeRemove">
-            Unpublish
-          </MenuItem>
-        {/if}
-        {#if !app.deployed}
-          <MenuItem on:click={() => updateApp(app)} icon="Edit">Edit</MenuItem>
-          <MenuItem on:click={() => deleteApp(app)} icon="Delete">
-            Delete
-          </MenuItem>
-        {/if}
-      </ActionMenu>
-    </div>
-    <div class="status">
-      <Body size="S">
-        {#if app.updatedAt}
-          {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
-            time: new Date().getTime() - new Date(app.updatedAt).getTime(),
-          })}
-        {:else}
-          Never updated
-        {/if}
-      </Body>
-      <StatusLight active={app.deployed} neutral={!app.deployed}>
-        {#if app.deployed}Published{:else}Unpublished{/if}
-      </StatusLight>
-    </div>
-  </Layout>
-</div>
-
-<style>
-  .wrapper {
-    overflow: hidden;
-  }
-  .wrapper :global(.spectrum-StatusLight) {
-    padding: 0;
-    min-height: 0;
-  }
-
-  .preview {
-    height: 135px;
-    border-radius: var(--border-radius-s);
-    margin-bottom: var(--spacing-m);
-  }
-
-  .status {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .name {
-    flex: 1 1 auto;
-  }
-
-  .title {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: var(--spacing-m);
-  }
-  .title :global(.spectrum-Icon) {
-    flex: 0 0 auto;
-  }
-  .title :global(h1) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .title :global(h1:hover) {
-    color: var(--spectrum-global-color-blue-600);
-    cursor: pointer;
-    transition: color 130ms ease;
-  }
-</style>
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@ -12,7 +12,7 @@
    Modal,
  } from "@budibase/bbui"
  import { onMount } from "svelte"
-  import { apps, organisation, auth } from "stores/portal"
+  import { apps, organisation, auth, admin } from "stores/portal"
  import { goto } from "@roxi/routify"
  import { AppStatus } from "constants"
  import { gradient } from "actions"
@ -34,12 +34,16 @@
  const publishedAppsOnly = app => app.status === AppStatus.DEPLOYED

  $: publishedApps = $apps.filter(publishedAppsOnly)
-
+  $: isCloud = $admin.cloud
  $: userApps = $auth.user?.builder?.global
    ? publishedApps
    : publishedApps.filter(app =>
        Object.keys($auth.user?.roles).includes(app.prodId)
      )
+
+  function getUrl(app) {
+    return !isCloud ? `/app/${encodeURIComponent(app.name)}` : `/${app.prodId}`
+  }
 </script>

 {#if $auth.user && loaded}
@ -93,7 +97,7 @@
            <div class="group">
              <Layout gap="S" noPadding>
                {#each userApps as app, idx (app.appId)}
-                  <a class="app" target="_blank" href={`/${app.prodId}`}>
+                  <a class="app" target="_blank" href={getUrl(app)}>
                    <div class="preview" use:gradient={{ seed: app.name }} />
                    <div class="app-info">
                      <Heading size="XS">{app.name}</Heading>
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -47,6 +47,7 @@
  $: filteredApps = enrichedApps.filter(app =>
    app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
  )
+  $: isCloud = $admin.cloud

  const enrichApps = (apps, user, sortBy) => {
    const enrichedApps = apps.map(app => ({
@ -158,8 +159,13 @@
  }

  const viewApp = app => {
-    const id = app.deployed ? app.prodId : app.devId
-    window.open(`/${id}`, "_blank")
+    if (!isCloud && app.deployed) {
+      // special case to use the short form name if self hosted
+      window.open(`/app/${encodeURIComponent(app.name)}`)
+    } else {
+      const id = app.deployed ? app.prodId : app.devId
+      window.open(`/${id}`, "_blank")
+    }
  }

  const editApp = app => {
--- a/packages/worker/src/api/controllers/app.js
+++ b/packages/worker/src/api/controllers/app.js
@ -1,18 +1,29 @@
-const { getAllApps } = require("@budibase/auth/db")
+const {
+  getAllApps,
+  getDeployedAppID,
+  isProdAppID,
+} = require("@budibase/auth/db")
 const CouchDB = require("../../db")

 const URL_REGEX_SLASH = /\/|\\/g

 exports.getApps = async ctx => {
-  const apps = await getAllApps(CouchDB, { dev: true })
+  const apps = await getAllApps(CouchDB, { all: true })
  const body = {}
  for (let app of apps) {
    let url = app.url || encodeURI(`${app.name}`)
    url = `/${url.replace(URL_REGEX_SLASH, "")}`
-    body[url] = {
-      appId: app.appId,
-      name: app.name,
-      url,
+    const appId = app.appId,
+      isProd = isProdAppID(app.appId)
+    if (!body[url]) {
+      body[url] = {
+        appId: getDeployedAppID(appId),
+        name: app.name,
+        url,
+        deployed: isProd,
+      }
+    } else {
+      body[url].deployed = isProd || body[url].deployed
    }
  }
  ctx.body = body