JSON UI

packages/api/src/controllers/cloud.js

@@ -9,6 +9,8 @@ const {
   putCloudContent,
   removeCloudCachedConnection,
   getPromoWidgetData,
+  getPromoWidgetList,
+  getPromoWidgetPreview,
 } = require('../utility/cloudIntf');
 const connections = require('./connections');
 const socket = require('../utility/socket');
@@ -296,6 +298,16 @@ module.exports = {
     return data;
   },
 
+  promoWidgetList_meta: true,
+  async promoWidgetList() {
+    return getPromoWidgetList();
+  },
+
+  promoWidgetPreview_meta: true,
+  async promoWidgetPreview({ campaign, variant }) {
+    return getPromoWidgetPreview(campaign, variant);
+  },
+
   // chatStream_meta: {
   //   raw: true,
   //   method: 'post',

packages/api/src/utility/cloudIntf.js

@@ -480,6 +480,16 @@ async function getPromoWidgetData() {
   return promoWidgetData;
 }
 
+async function getPromoWidgetPreview(campaign, variant) {
+  const resp = await axios.default.get(`${DBGATE_CLOUD_URL}/premium-promo-widget-preview/${campaign}/${variant}`);
+  return resp.data;
+}
+
+async function getPromoWidgetList() {
+  const resp = await axios.default.get(`${DBGATE_CLOUD_URL}/promo-widget-list`);
+  return resp.data;
+}
+
 module.exports = {
   createDbGateIdentitySession,
   startCloudTokenChecking,
@@ -498,4 +508,6 @@ module.exports = {
   readCloudTestTokenHolder,
   getPublicIpInfo,
   getPromoWidgetData,
+  getPromoWidgetPreview,
+  getPromoWidgetList,
 };

packages/datalib/src/TableGridDisplay.ts

@@ -39,8 +39,7 @@ export class TableGridDisplay extends GridDisplay {
     public getDictionaryDescription: DictionaryDescriptionFunc = null,
     isReadOnly = false,
     public isRawMode = false,
-    public currentSettings = null,
-    public areReferencesAllowed = true
+    public currentSettings = null
   ) {
     super(config, setConfig, cache, setCache, driver, dbinfo, serverVersion, currentSettings);
 
@@ -249,7 +248,6 @@ export class TableGridDisplay extends GridDisplay {
   }
 
   processReferences(select: Select, displayedColumnInfo: DisplayedColumnInfo, options) {
-    if (!this.areReferencesAllowed) return;
     this.addJoinsFromExpandedColumns(select, this.columns, 'basetbl', displayedColumnInfo);
     if (!options.isExport && this.displayOptions.showHintColumns) {
       this.addHintsToSelect(select);

packages/web/public/icon-colors.css

@@ -35,6 +35,11 @@
   background: linear-gradient(135deg, #1686c8, #8a25b1);
 }
 
+.premium-gradient {
+  background: linear-gradient(135deg, #1686c8, #8a25b1);
+  color: white;
+}
+
 .web-color-primary {
   background:  #1686c8;
 }

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -468,14 +468,12 @@ await dbgateApi.executeQuery(${JSON.stringify(
 
       { divider: true },
       isSqlOrDoc &&
-        isProApp() &&
         !connection.isReadOnly &&
         hasPermission(`dbops/import`) && {
           onClick: handleImport,
           text: _t('database.import', { defaultMessage: 'Import' }),
         },
       isSqlOrDoc &&
-        isProApp() &&
         hasPermission(`dbops/export`) && {
           onClick: handleExport,
           text: _t('database.export', { defaultMessage: 'Export' }),

packages/web/src/commands/stdCommands.ts

@@ -8,6 +8,7 @@ import {
   getCloudSigninTokenHolder,
   getExtensions,
   getVisibleToolbar,
+  promoWidgetPreview,
   visibleToolbar,
   visibleWidgetSideBar,
 } from '../stores';
@@ -50,6 +51,7 @@ import { isProApp } from '../utility/proTools';
 import { openWebLink } from '../utility/simpleTools';
 import { _t } from '../translations';
 import ExportImportConnectionsModal from '../modals/ExportImportConnectionsModal.svelte';
+import { getBoolSettingsValue } from '../settings/settingsTools';
 
 // function themeCommand(theme: ThemeDefinition) {
 //   return {
@@ -689,7 +691,7 @@ registerCommand({
   name: 'Export database',
   toolbar: true,
   icon: 'icon export',
-  testEnabled: () => getCurrentDatabase() != null && hasPermission(`dbops/export`) && isProApp(),
+  testEnabled: () => getCurrentDatabase() != null && hasPermission(`dbops/export`),
   onClick: () => {
     openImportExportTab({
       targetStorageType: getDefaultFileFormat(getExtensions()).storageType,
@@ -1164,6 +1166,41 @@ registerCommand({
   onClick: () => currentDatabase.set(null),
 });
 
+let loadedCampaignList = [];
+
+registerCommand({
+  id: 'internal.loadCampaigns',
+  category: 'Internal',
+  name: 'Load campaign list',
+  testEnabled: () => getBoolSettingsValue('internal.showCampaigns', false),
+  onClick: async () => {
+    const resp = await apiCall('cloud/promo-widget-list', {});
+    loadedCampaignList = resp;
+  },
+});
+
+registerCommand({
+  id: 'internal.showCampaigns',
+  category: 'Internal',
+  name: 'Show campaigns',
+  testEnabled: () => getBoolSettingsValue('internal.showCampaigns', false) && loadedCampaignList?.length > 0,
+  getSubCommands: () => {
+    return loadedCampaignList.map(campaign => ({
+      text: `${campaign.campaignName} (${campaign.countries || 'Global'}) - #${campaign.quantileRank ?? '*'}/${
+        campaign.quantileGroupCount ?? '*'
+      } - ${campaign.variantIdentifier}`,
+      onClick: async () => {
+        promoWidgetPreview.set(
+          await apiCall('cloud/promo-widget-preview', {
+            campaign: campaign.campaignIdentifier,
+            variant: campaign.variantIdentifier,
+          })
+        );
+      },
+    }));
+  },
+});
+
 const electron = getElectron();
 if (electron) {
   electron.addEventListener('run-command', (e, commandId) => runCommand(commandId));

packages/web/src/datagrid/ColumnHeaderControl.svelte

@@ -12,7 +12,6 @@
   import { showModal } from '../modals/modalTools';
   import DefineDictionaryDescriptionModal from '../modals/DefineDictionaryDescriptionModal.svelte';
   import { sleep } from '../utility/common';
-  import { isProApp } from '../utility/proTools';
 
   export let column;
   export let conid = undefined;
@@ -73,35 +72,29 @@
 
       column.foreignKey && [{ divider: true }, { onClick: openReferencedTable, text: column.foreignKey.refTableName }],
 
-      isProApp() &&
-        setGrouping && [
-          { divider: true },
-          { onClick: () => setGrouping('GROUP'), text: 'Group by' },
-          { onClick: () => setGrouping('MAX'), text: 'MAX' },
-          { onClick: () => setGrouping('MIN'), text: 'MIN' },
-          { onClick: () => setGrouping('SUM'), text: 'SUM' },
-          { onClick: () => setGrouping('AVG'), text: 'AVG' },
-          { onClick: () => setGrouping('COUNT'), text: 'COUNT' },
-          { onClick: () => setGrouping('COUNT DISTINCT'), text: 'COUNT DISTINCT' },
-        ],
+      setGrouping && { divider: true },
+      setGrouping && { onClick: () => setGrouping('GROUP'), text: 'Group by' },
+      setGrouping && { onClick: () => setGrouping('MAX'), text: 'MAX' },
+      setGrouping && { onClick: () => setGrouping('MIN'), text: 'MIN' },
+      setGrouping && { onClick: () => setGrouping('SUM'), text: 'SUM' },
+      setGrouping && { onClick: () => setGrouping('AVG'), text: 'AVG' },
+      setGrouping && { onClick: () => setGrouping('COUNT'), text: 'COUNT' },
+      setGrouping && { onClick: () => setGrouping('COUNT DISTINCT'), text: 'COUNT DISTINCT' },
 
-      isProApp() &&
-        isTypeDateTime(column.dataType) && [
-          { divider: true },
-          { onClick: () => setGrouping('GROUP:YEAR'), text: 'Group by YEAR' },
-          { onClick: () => setGrouping('GROUP:MONTH'), text: 'Group by MONTH' },
-          { onClick: () => setGrouping('GROUP:DAY'), text: 'Group by DAY' },
-        ],
+      isTypeDateTime(column.dataType) && [
+        { divider: true },
+        { onClick: () => setGrouping('GROUP:YEAR'), text: 'Group by YEAR' },
+        { onClick: () => setGrouping('GROUP:MONTH'), text: 'Group by MONTH' },
+        { onClick: () => setGrouping('GROUP:DAY'), text: 'Group by DAY' },
+      ],
 
       { divider: true },
 
-      isProApp() &&
-        allowDefineVirtualReferences && { onClick: handleDefineVirtualForeignKey, text: 'Define virtual foreign key' },
-      column.foreignKey &&
-        isProApp() && {
-          onClick: handleCustomizeDescriptions,
-          text: 'Customize description',
-        },
+      allowDefineVirtualReferences && { onClick: handleDefineVirtualForeignKey, text: 'Define virtual foreign key' },
+      column.foreignKey && {
+        onClick: handleCustomizeDescriptions,
+        text: 'Customize description',
+      },
     ];
   }
 </script>

packages/web/src/datagrid/ColumnManagerRow.svelte

@@ -7,7 +7,6 @@
   import { showModal } from '../modals/modalTools';
   import ColumnEditorModal from '../tableeditor/ColumnEditorModal.svelte';
   import { editorDeleteColumn } from 'dbgate-tools';
-  import { isProApp } from '../utility/proTools';
 
   export let column;
   export let display;
@@ -60,17 +59,13 @@
   on:mouseup
 >
   <div>
-    {#if isProApp()}
-      <span class="expandColumnIcon" style={`margin-right: ${5 + (column.uniquePath.length - 1) * 10}px`}>
-        <FontIcon
-          icon={column.isExpandable
-            ? plusExpandIcon(display.isExpandedColumn(column.uniqueName))
-            : 'icon invisible-box'}
-          on:click={() => display.toggleExpandedColumn(column.uniqueName)}
-          data-testid="ColumnManagerRow_expand_{column.uniqueName}"
-        />
-      </span>
-    {/if}
+    <span class="expandColumnIcon" style={`margin-right: ${5 + (column.uniquePath.length - 1) * 10}px`}>
+      <FontIcon
+        icon={column.isExpandable ? plusExpandIcon(display.isExpandedColumn(column.uniqueName)) : 'icon invisible-box'}
+        on:click={() => display.toggleExpandedColumn(column.uniqueName)}
+        data-testid="ColumnManagerRow_expand_{column.uniqueName}"
+      />
+    </span>
     {#if isJsonView}
       <FontIcon icon="img column" />
     {:else}

packages/web/src/datagrid/DataGrid.svelte

@@ -68,7 +68,6 @@
   import registerCommand from '../commands/registerCommand';
   import { registerMenu } from '../utility/contextMenu';
   import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
-  import { isProApp } from '../utility/proTools';
 
   export let config;
   export let setConfig;
@@ -206,7 +205,7 @@
         name="references"
         height="30%"
         collapsed={isDetailView}
-        skip={!(showReferences && display?.hasReferences && isProApp())}
+        skip={!(showReferences && display?.hasReferences)}
         data-testid="DataGrid_itemReferences"
       >
         <ReferenceManager {...$$props} {managerSize} />
@@ -215,7 +214,7 @@
       <WidgetColumnBarItem
         title="Macros"
         name="macros"
-        skip={!(showMacros && isProApp())}
+        skip={!showMacros}
         collapsed={!expandMacros}
         data-testid="DataGrid_itemMacros"
       >

packages/web/src/datagrid/TableDataGrid.svelte

@@ -30,7 +30,6 @@
   import SqlFormView from '../formview/SqlFormView.svelte';
   import { getBoolSettingsValue } from '../settings/settingsTools';
   import { getDictionaryDescription } from '../utility/dictionaryDescriptionTools';
-  import { isProApp } from '../utility/proTools';
 
   export let conid;
   export let database;
@@ -83,8 +82,7 @@
             extendedDbInfo?.tables?.find(x => x.pureName == pureName && x.schemaName == schemaName)
               ?.tablePermissionRole == 'read',
           isRawMode,
-          $settingsValue,
-          isProApp()
+          $settingsValue
         )
       : null;
 

packages/web/src/jsonui/JsonUiContentRenderer.svelte

@@ -1,22 +1,29 @@
 <script lang="ts">
+  import JsonUiCountdown from './JsonUiCountdown.svelte';
   import JsonUiHeading from './JsonUiHeading.svelte';
+  import JsonUiHighlight from './JsonUiHighlight.svelte';
   import JsonUiLinkButton from './JsonUiLinkButton.svelte';
+  import JsonUiMarkdown from './JsonUiMarkdown.svelte';
   import JsonUiTextBlock from './JsonUiTextBlock.svelte';
   import JsonUiTickList from './JsonUiTickList.svelte';
   import { JsonUiBlock } from './jsonuitypes';
 
   export let blocks: JsonUiBlock[] = [];
+  export let passProps = {};
 
   const componentMap = {
     text: JsonUiTextBlock,
     heading: JsonUiHeading,
     ticklist: JsonUiTickList,
     button: JsonUiLinkButton,
+    markdown: JsonUiMarkdown,
+    highlight: JsonUiHighlight,
+    countdown: JsonUiCountdown,
   } as const;
 </script>
 
 {#each blocks as block, i}
   {#if block.type in componentMap}
-    <svelte:component this={componentMap[block.type]} {...block} />
+    <svelte:component this={componentMap[block.type]} {...block} {...passProps} />
   {/if}
 {/each}

packages/web/src/jsonui/JsonUiCountdown.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  export let colorClass: string = 'premium-gradient';
+  export let validTo;
+
+  function formatRemaining(validTo, now) {
+    let diffMs = validTo.getTime() - now.getTime();
+    if (diffMs <= 0) return '0 minutes';
+
+    const totalMinutes = Math.floor(diffMs / 60000);
+    const days = Math.floor(totalMinutes / (24 * 60));
+    const hours = Math.floor((totalMinutes % (24 * 60)) / 60);
+    const minutes = totalMinutes % 60;
+
+    const parts = [];
+    const en = (n, unit) => ({
+      num: n,
+      unit: n == 1 ? unit : unit + 's',
+    });
+
+    if (days) parts.push(en(days, 'day'));
+    if (hours) parts.push(en(hours, 'hour'));
+    // Always include minutes to report down to minutes
+    parts.push(en(minutes, 'minute'));
+
+    return parts;
+  }
+
+  let currentDate = new Date();
+
+  onMount(() => {
+    const interval = setInterval(() => {
+      currentDate = new Date();
+    }, 5000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  });
+
+  $: parts = formatRemaining(new Date(validTo), currentDate);
+</script>
+
+{#if validTo}
+  <div class="countdown {colorClass}">
+    <span class="big">Offer ends in:</span><br />
+    {#each parts as part}
+      <span class="part">
+        <span class="big">{part.num}</span>
+        {part.unit}
+      </span>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .countdown {
+    text-align: center;
+    margin: 10px;
+    border: 1px solid;
+    padding: 5px;
+  }
+
+  .big {
+    font-size: large;
+    font-weight: bold;
+  }
+
+  .part {
+    margin: 0 5px;
+  }
+</style>

packages/web/src/jsonui/JsonUiHighlight.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let text: string;
+  export let colorClass: string = 'premium-gradient';
+</script>
+
+<div class="highlight {colorClass}">
+  {text}
+</div>
+
+<style>
+  .highlight {
+    text-align: center;
+    margin: 10px;
+    font-size: large;
+    font-weight: bold;
+    border: 1px solid;
+    padding: 5px;
+  }
+</style>

packages/web/src/jsonui/JsonUiMarkdown.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Markdown from '../elements/Markdown.svelte';
+
+  export let text: string;
+</script>
+
+<div>
+  <Markdown source={text} />
+</div>
+
+<style>
+  div {
+    margin: 10px;
+  }
+</style>

packages/web/src/modals/NewObjectModal.svelte

@@ -94,7 +94,6 @@
       title: 'Export database',
       description: 'Export to file like CSV, JSON, Excel, or other DB',
       command: 'database.export',
-      isProFeature: true,
       testid: 'NewObjectModal_databaseExport',
       disabledMessage: 'Export is not available for current database',
     },

packages/web/src/stores.ts

@@ -187,6 +187,9 @@ export const seenPremiumPromoWidget = writableWithStorage(null, 'seenPremiumProm
 
 export const cloudConnectionsStore = writable({});
 
+export const promoWidgetPreview = writable(null);
+
+
 export const DEFAULT_OBJECT_SEARCH_SETTINGS = {
   pureName: true,
   schemaName: false,

packages/web/src/utility/createQuickExportMenu.ts

@@ -1,12 +1,11 @@
 import type { QuickExportDefinition } from 'dbgate-types';
 import { currentArchive, getCurrentArchive, getExtensions } from '../stores';
 import hasPermission from './hasPermission';
-import { isProApp } from './proTools';
 
 export function createQuickExportMenuItems(handler: (fmt: QuickExportDefinition) => Function, advancedExportMenuItem) {
   const extensions = getExtensions();
   return [
-    isProApp() && {
+    {
       text: 'Export advanced...',
       ...advancedExportMenuItem,
     },
@@ -16,7 +15,7 @@ export function createQuickExportMenuItems(handler: (fmt: QuickExportDefinition)
       onClick: handler(fmt),
     })),
     { divider: true },
-    isProApp() && {
+    {
       text: 'Current archive',
       onClick: handler({
         extension: 'jsonl',

packages/web/src/widgets/AdminPremiumPromoWidget.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
   import JsonUiContentRenderer from '../jsonui/JsonUiContentRenderer.svelte';
+  import { promoWidgetPreview } from '../stores';
   import { usePromoWidget } from '../utility/metadataLoaders';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
 
   const promoWidget = usePromoWidget({});
+
+  $: promoWidgetData = $promoWidgetPreview || $promoWidget;
 </script>
 
 <WidgetsInnerContainer>
-  {#if $promoWidget?.state == 'data'}
-    <JsonUiContentRenderer blocks={$promoWidget?.blocks} />
+  {#if promoWidgetData?.state == 'data'}
+    <JsonUiContentRenderer blocks={promoWidgetData?.blocks} passProps={{ validTo: promoWidgetData?.validTo }} />
   {/if}
 </WidgetsInnerContainer>
 

packages/web/src/widgets/StatusBar.svelte

@@ -27,7 +27,6 @@
   import { useConnectionColor } from '../utility/useConnectionColor';
   import { apiCall } from '../utility/api';
   import { statusBarTabInfo } from '../utility/statusBarStore';
-  import { isProApp } from '../utility/proTools';
 
   $: databaseName = $currentDatabase && $currentDatabase.name;
   $: connection = $currentDatabase && $currentDatabase.connection;
@@ -156,7 +155,7 @@
         </div>
       </div>
     {/if}
-    {#if isProApp() && $currentArchive && $currentArchive != 'default'}
+    {#if $currentArchive && $currentArchive != 'default'}
       <div
         class="item flex clickable"
         title="Current archive"

packages/web/src/widgets/WidgetContainer.svelte

@@ -11,7 +11,6 @@
   import PublicCloudWidget from './PublicCloudWidget.svelte';
   import PrivateCloudWidget from './PrivateCloudWidget.svelte';
   import hasPermission from '../utility/hasPermission';
-  import { isProApp } from '../utility/proTools';
 </script>
 
 {#if hasPermission('widgets/database')}
@@ -23,7 +22,7 @@
 {#if $visibleSelectedWidget == 'history' && hasPermission('widgets/history')}
   <HistoryWidget />
 {/if}
-{#if $visibleSelectedWidget == 'archive' && hasPermission('widgets/archive') && isProApp()}
+{#if $visibleSelectedWidget == 'archive' && hasPermission('widgets/archive')}
   <ArchiveWidget />
 {/if}
 {#if $visibleSelectedWidget == 'plugins' && hasPermission('widgets/plugins')}

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -11,6 +11,7 @@
     getCurrentConfig,
     cloudSigninTokenHolder,
     seenPremiumPromoWidget,
+    promoWidgetPreview,
   } from '../stores';
   import mainMenuDefinition from '../../../../app/src/mainMenuDefinition';
   import hasPermission from '../utility/hasPermission';
@@ -60,7 +61,7 @@
       name: 'history',
       title: 'Query history & Closed tabs',
     },
-    isProApp() && {
+    {
       icon: 'icon archive',
       name: 'archive',
       title: 'Archive (saved tabular data)',
@@ -167,6 +168,8 @@
       openWebLink(url, true);
     }
   }
+
+  $: promoWidgetData = $promoWidgetPreview || $promoWidget;
 </script>
 
 <div class="main">
@@ -177,7 +180,7 @@
   {/if}
   {#each widgets
     .filter(x => x && hasPermission(`widgets/${x.name}`))
-    .filter(x => !x.isPremiumPromo || (!isProApp() && $promoWidget?.state == 'data'))
+    .filter(x => !x.isPremiumPromo || (!isProApp() && promoWidgetData?.state == 'data'))
     // .filter(x => !x.isPremiumOnly || isProApp())
     .filter(x => x.name != 'cloud-private' || $cloudSigninTokenHolder) as item}
     <div
@@ -186,7 +189,7 @@
       data-testid={`WidgetIconPanel_${item.name}`}
       on:click={() => handleChangeWidget(item.name)}
     >
-      {#if item.isPremiumPromo && $promoWidget?.isColoredIcon}
+      {#if item.isPremiumPromo && promoWidgetData?.isColoredIcon}
         <FontIcon
           icon={item.icon}
           title={item.title}
@@ -197,7 +200,7 @@
       {/if}
       {#if item.isPremiumPromo}
         <div class="premium-promo">Premium</div>
-        {#if $promoWidget?.identifier != $seenPremiumPromoWidget}
+        {#if promoWidgetData?.identifier != $seenPremiumPromoWidget}
           <div class="premium-promo-not-seen">•</div>
         {/if}
       {/if}