@budibase/frontend-core 3.12.14 → 3.12.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.12.14",
+  "version": "3.12.16",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -17,5 +17,5 @@
     "shortid": "2.2.15",
     "socket.io-client": "^4.7.5"
   },
-  "gitHead": "dbe8dd62a6714a1bf0768542434fdeca2f81052b"
+  "gitHead": "5d84b70e4dbedbe6dd5d323d752e5cc962e592e9"
 }

package/src/api/app.ts

@@ -12,6 +12,7 @@ import {
   FetchAppPackageResponse,
   FetchAppsResponse,
   FetchDeploymentResponse,
+  FetchPublishedAppsResponse,
   GetDiagnosticsResponse,
   ImportToUpdateAppRequest,
   ImportToUpdateAppResponse,
@@ -59,6 +60,7 @@ export interface AppEndpoints {
     appId: string
   ) => Promise<FetchAppDefinitionResponse>
   addSampleData: (appId: string) => Promise<AddAppSampleDataResponse>
+  getPublishedApps: () => Promise<FetchPublishedAppsResponse["apps"]>
 
   // Missing request or response types
   importApps: (apps: any) => Promise<any>
@@ -272,4 +274,11 @@ export const buildAppEndpoints = (API: BaseAPIClient): AppEndpoints => ({
       url: `/api/applications/${appId}/sample`,
     })
   },
+
+  getPublishedApps: async () => {
+    const response = await API.get<FetchPublishedAppsResponse>({
+      url: `/api/client/applications`,
+    })
+    return response.apps
+  },
 })

package/src/components/ConditionField.svelte

@@ -100,7 +100,7 @@
             bindingDrawer.show()
           }}
         >
-          <Icon size="S" name="FlashOn" />
+          <Icon size="S" weight="fill" name="lightning" />
         </div>
       {/if}
     </div>
@@ -161,9 +161,6 @@
       border-color var(--spectrum-global-animation-duration-100, 130ms);
     height: calc(var(--spectrum-alias-item-height-m));
   }
-  .binding-control .icon.binding {
-    color: var(--yellow);
-  }
 
   .binding-control .icon:hover {
     cursor: pointer;

package/src/components/CoreFilterBuilder.svelte

@@ -339,7 +339,7 @@
                 </div>
                 <div class="group-actions">
                   <Icon
-                    name="Add"
+                    name="plus"
                     hoverable
                     hoverColor="var(--ink)"
                     on:click={() => {
@@ -350,7 +350,7 @@
                     }}
                   />
                   <Icon
-                    name="Delete"
+                    name="trash"
                     hoverable
                     hoverColor="var(--ink)"
                     on:click={() => {
@@ -437,7 +437,7 @@
 
                     <ActionButton
                       size="M"
-                      icon="Delete"
+                      icon="trash"
                       on:click={() => {
                         handleFilterChange({
                           groupIdx,
@@ -478,7 +478,7 @@
           {/if}
           <div class="add-group">
             <Button
-              icon="AddCircle"
+              icon="plus-circle"
               size="M"
               secondary
               on:click={() => {
@@ -492,7 +492,7 @@
             {#if docsURL}
               <a href={docsURL} target="_blank">
                 <Icon
-                  name="HelpOutline"
+                  name="question"
                   color="var(--spectrum-global-color-gray-600)"
                 />
               </a>

package/src/components/FilterField.svelte

@@ -243,7 +243,7 @@
             bindingDrawer.show()
           }}
         >
-          <Icon size="S" name="FlashOn" />
+          <Icon size="S" weight="fill" name="lightning" />
         </div>
       {/if}
     </div>
@@ -304,9 +304,6 @@
       border-color var(--spectrum-global-animation-duration-100, 130ms);
     height: calc(var(--spectrum-alias-item-height-m));
   }
-  .binding-control .icon.binding {
-    color: var(--yellow);
-  }
 
   .binding-control .icon:hover {
     cursor: pointer;
@@ -314,8 +311,4 @@
     border-color: var(--spectrum-alias-border-color-hover);
     color: var(--spectrum-alias-text-color-hover);
   }
-
-  .binding-control .icon.binding:hover {
-    color: var(--yellow);
-  }
 </style>

package/src/components/grid/cells/DateCell.svelte

@@ -105,7 +105,7 @@
     {displayValue}
   </div>
   {#if editable}
-    <Icon name="Calendar" />
+    <Icon name="calendar" />
   {/if}
 </div>
 

package/src/components/grid/cells/GutterCell.svelte

@@ -79,14 +79,14 @@
     {#if rowSelected && $config.canDeleteRows}
       <div class="delete" on:click={bulkDelete}>
         <Icon
-          name="Delete"
+          name="trash"
           size="S"
           color="var(--spectrum-global-color-red-400)"
         />
       </div>
     {:else}
       <div class="expand" class:visible={$config.canExpandRows && expandable}>
-        <Icon size="S" name="Maximize" hoverable on:click={expand} />
+        <Icon size="S" name="arrows-out-simple" hoverable on:click={expand} />
       </div>
     {/if}
   </div>
@@ -131,7 +131,7 @@
   .delete:hover {
     cursor: pointer;
   }
-  .delete:hover :global(.spectrum-Icon) {
+  .delete:hover :global(.icon) {
     color: var(--spectrum-global-color-red-600) !important;
   }
 

package/src/components/grid/cells/HeaderCell.svelte

@@ -305,11 +305,17 @@
 
     {#if !$config.quiet}
       <div class="column-icon">
-        <Icon size="S" name={getColumnIcon(column)} />
+        <Icon
+          name={getColumnIcon(column)}
+          size="M"
+          color="var(--spectrum-global-color-gray-600)"
+          hoverable
+          hoverColor="var(--spectrum-global-color-gray-800)"
+        />
       </div>
     {/if}
     <div class="search-icon" on:click={startSearching}>
-      <Icon hoverable size="S" name="Search" />
+      <Icon hoverable size="S" name="magnifying-glass" />
     </div>
 
     <div class="name">
@@ -318,7 +324,7 @@
 
     {#if searching}
       <div class="clear-icon" on:click={stopSearching}>
-        <Icon hoverable size="S" name="Close" />
+        <Icon hoverable size="S" name="x" />
       </div>
     {:else}
       {#if sortedBy}
@@ -327,13 +333,13 @@
             hoverable
             size="S"
             name={$sort.order === SortOrder.DESCENDING
-              ? "SortOrderDown"
-              : "SortOrderUp"}
+              ? "sort-descending"
+              : "sort-ascending"}
           />
         </div>
       {/if}
       <div class="more-icon" on:click={() => (open = true)}>
-        <Icon hoverable size="S" name="MoreVertical" />
+        <Icon hoverable size="S" name="dots-three-vertical" />
       </div>
     {/if}
   </GridCell>
@@ -353,25 +359,25 @@
       </div>
     {:else}
       <Menu>
-        <MenuItem icon="Edit" on:click={editColumn} disabled={!editable}>
+        <MenuItem icon="pencil" on:click={editColumn} disabled={!editable}>
           Edit column
         </MenuItem>
         <MenuItem
-          icon="Duplicate"
+          icon="copy"
           on:click={duplicateColumn}
           disabled={!$config.canEditColumns}
         >
           Duplicate column
         </MenuItem>
         <MenuItem
-          icon="Label"
+          icon="tag"
           on:click={makeDisplayColumn}
           disabled={column.primaryDisplay || !canBeDisplayColumn(column.schema)}
         >
           Use as display column
         </MenuItem>
         <MenuItem
-          icon="SortOrderUp"
+          icon="sort-ascending"
           on:click={sortAscending}
           disabled={!canBeSortColumn(column.schema) ||
             (column.name === $sort.column &&
@@ -380,7 +386,7 @@
           Sort {sortingLabels.ascending}
         </MenuItem>
         <MenuItem
-          icon="SortOrderDown"
+          icon="sort-descending"
           on:click={sortDescending}
           disabled={!canBeSortColumn(column.schema) ||
             (column.name === $sort.column &&
@@ -388,29 +394,25 @@
         >
           Sort {sortingLabels.descending}
         </MenuItem>
-        <MenuItem
-          disabled={!canMoveLeft}
-          icon="ChevronLeft"
-          on:click={moveLeft}
-        >
+        <MenuItem disabled={!canMoveLeft} icon="caret-left" on:click={moveLeft}>
           Move left
         </MenuItem>
         <MenuItem
           disabled={!canMoveRight}
-          icon="ChevronRight"
+          icon="caret-right"
           on:click={moveRight}
         >
           Move right
         </MenuItem>
         <MenuItem
           disabled={column.primaryDisplay}
-          icon="VisibilityOff"
+          icon="eye-slash"
           on:click={hideColumn}
         >
           Hide column
         </MenuItem>
         {#if $config.canEditColumns && column.schema.type === "link" && column.schema.tableId === TableNames.USERS && !column.schema.autocolumn}
-          <MenuItem icon="User" on:click={openMigrationModal}>
+          <MenuItem icon="user" on:click={openMigrationModal}>
             Migrate to user column
           </MenuItem>
         {/if}
@@ -432,15 +434,15 @@
   }
   .header-cell :global(.cell) {
     padding: 0 var(--cell-padding);
-    gap: calc(2 * var(--cell-spacing));
+    gap: calc(1.5 * var(--cell-spacing));
     background: var(--header-cell-background);
   }
 
   /* Icon colors */
-  .header-cell :global(.spectrum-Icon) {
+  .header-cell :global(.icon) {
     color: var(--spectrum-global-color-gray-600);
   }
-  .header-cell :global(.spectrum-Icon.hoverable:hover) {
+  .header-cell :global(.icon.hoverable:hover) {
     color: var(--spectrum-global-color-gray-800) !important;
     cursor: pointer;
   }
@@ -465,7 +467,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    font-weight: 600;
+    font-weight: 500;
   }
   .header-cell.searching .name {
     opacity: 0;

package/src/components/grid/cells/OptionsCell.svelte

@@ -118,7 +118,7 @@
   </div>
   {#if editable}
     <div class="arrow" on:click={open}>
-      <Icon name="ChevronDown" />
+      <Icon name="caret-down" />
     </div>
   {/if}
 </div>
@@ -142,7 +142,7 @@
             </span>
           </div>
           {#if values.includes(option)}
-            <Icon name="Checkmark" color="var(--accent-color)" />
+            <Icon name="check" color="var(--accent-color)" />
           {/if}
         </div>
       {/each}

package/src/components/grid/cells/RelationshipCell.svelte

@@ -273,10 +273,12 @@
             </span>
             {#if editable}
               <Icon
-                name="Close"
+                name="x"
                 size="XS"
                 hoverable
                 on:click={() => toggleRow(relationship)}
+                color="var(--spectrum-global-color-gray-800)"
+                weight="bold"
               />
             {/if}
           </div>
@@ -284,7 +286,12 @@
       {/each}
       {#if editable}
         <div class="add" on:click={open}>
-          <Icon name="Add" size="S" />
+          <Icon
+            name="plus"
+            size="S"
+            color="var(--spectrum-global-color-gray-800)"
+            weight="bold"
+          />
         </div>
       {/if}
     </div>
@@ -329,7 +336,7 @@
                 </span>
               </div>
               {#if isRowSelected(row)}
-                <Icon size="S" name="Checkmark" color="var(--accent-color)" />
+                <Icon size="S" name="check" color="var(--accent-color)" />
               {/if}
             </div>
           {/each}
@@ -440,13 +447,10 @@
 
   .add {
     background: var(--spectrum-global-color-gray-200);
-    padding: 4px;
+    padding: 3px;
     border-radius: 4px;
   }
-  .add :global(.spectrum-Icon) {
-    width: 12px;
-    height: 12px;
-  }
+
   .add:hover {
     background: var(--spectrum-global-color-gray-300);
     cursor: pointer;

package/src/components/grid/layout/NewColumnButton.svelte

@@ -44,7 +44,7 @@
   style="left:{left}px"
   on:click={open}
 >
-  <Icon name="Add" />
+  <Icon name="plus" />
 </div>
 {#if isOpen}
   <GridPopover

package/src/components/grid/layout/NewRow.svelte

@@ -176,7 +176,7 @@
       transition:fade|local={{ duration: 130 }}
       class:offset={!$displayColumn}
     >
-      <Icon name="Add" size="S" />
+      <Icon name="plus" size="S" />
     </div>
   {/if}
 </TempTooltip>
@@ -193,7 +193,7 @@
     <div class="sticky-column" transition:fade|local={{ duration: 130 }}>
       <div class="row">
         <GutterCell expandable on:expand={addViaModal} rowHovered>
-          <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
+          <Icon name="plus" color="var(--spectrum-global-color-gray-500)" />
           {#if isAdding}
             <div in:fade={{ duration: 130 }} class="loading-overlay" />
           {/if}

package/src/components/grid/layout/StickyColumn.svelte

@@ -112,7 +112,7 @@
         on:click={() => dispatch("add-row-inline")}
       >
         <GutterCell rowHovered={$hoveredRowId === BlankRowID}>
-          <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
+          <Icon name="plus" color="var(--spectrum-global-color-gray-500)" />
         </GutterCell>
         {#if $displayColumn}
           <GridCell

package/src/components/grid/overlays/MenuOverlay.svelte

@@ -73,7 +73,7 @@
       <Menu>
         {#if $menu.multiRowMode}
           <MenuItem
-            icon="Duplicate"
+            icon="copy"
             disabled={!$config.canAddRows || $selectedRowCount > 50}
             on:click={() => dispatch("request-bulk-duplicate")}
             on:click={menu.actions.close}
@@ -81,7 +81,7 @@
             Duplicate {$selectedRowCount} rows
           </MenuItem>
           <MenuItem
-            icon="Delete"
+            icon="trash"
             disabled={!$config.canDeleteRows}
             on:click={() => dispatch("request-bulk-delete")}
             on:click={menu.actions.close}
@@ -90,7 +90,7 @@
           </MenuItem>
         {:else if $menu.multiCellMode}
           <MenuItem
-            icon="Copy"
+            icon="copy"
             disabled={!$copyAllowed}
             on:click={() => dispatch("copy")}
             on:click={menu.actions.close}
@@ -98,7 +98,7 @@
             Copy
           </MenuItem>
           <MenuItem
-            icon="Paste"
+            icon="clipboard-text"
             disabled={!$pasteAllowed}
             on:click={() => dispatch("paste")}
             on:click={menu.actions.close}
@@ -106,7 +106,7 @@
             Paste
           </MenuItem>
           <MenuItem
-            icon="Delete"
+            icon="trash"
             disabled={!$config.canEditRows}
             on:click={() => dispatch("request-bulk-delete")}
           >
@@ -114,7 +114,7 @@
           </MenuItem>
         {:else}
           <MenuItem
-            icon="Copy"
+            icon="copy"
             disabled={!$copyAllowed}
             on:click={() => dispatch("copy")}
             on:click={menu.actions.close}
@@ -122,7 +122,7 @@
             Copy
           </MenuItem>
           <MenuItem
-            icon="Paste"
+            icon="clipboard-text"
             disabled={!$pasteAllowed}
             on:click={() => dispatch("paste")}
             on:click={menu.actions.close}
@@ -130,7 +130,7 @@
             Paste
           </MenuItem>
           <MenuItem
-            icon="Maximize"
+            icon="arrows-out-simple"
             disabled={isNewRow ||
               !$config.canEditRows ||
               !$config.canExpandRows}
@@ -140,7 +140,7 @@
             Edit row in modal
           </MenuItem>
           <MenuItem
-            icon="Copy"
+            icon="copy"
             disabled={isNewRow || !$focusedRow?._id || !$hasBudibaseIdentifiers}
             on:click={() => copyToClipboard($focusedRow?._id)}
             on:click={menu.actions.close}
@@ -148,7 +148,7 @@
             Copy row _id
           </MenuItem>
           <MenuItem
-            icon="Copy"
+            icon="copy"
             disabled={isNewRow ||
               !$focusedRow?._rev ||
               !$hasBudibaseIdentifiers}
@@ -158,14 +158,14 @@
             Copy row _rev
           </MenuItem>
           <MenuItem
-            icon="Duplicate"
+            icon="copy"
             disabled={isNewRow || !$config.canAddRows}
             on:click={duplicateRow}
           >
             Duplicate row
           </MenuItem>
           <MenuItem
-            icon="Delete"
+            icon="trash"
             disabled={isNewRow || !$config.canDeleteRows}
             on:click={deleteRow}
           >
@@ -173,7 +173,7 @@
           </MenuItem>
           {#if $config.aiEnabled}
             <MenuItem
-              icon="MagicWand"
+              icon="magic-wand"
               disabled={isNewRow || !hasAIColumns}
               on:click={generateAIColumns}
             >

package/src/constants.ts

@@ -118,29 +118,29 @@ export const EventPublishType = {
 export { ComponentContextScopes as ContextScopes } from "@budibase/types"
 
 export const TypeIconMap = {
-  [FieldType.STRING]: "Text",
-  [FieldType.OPTIONS]: "Dropdown",
-  [FieldType.DATETIME]: "Calendar",
-  [FieldType.BARCODEQR]: "Camera",
-  [FieldType.SIGNATURE_SINGLE]: "AnnotatePen",
-  [FieldType.LONGFORM]: "TextAlignLeft",
-  [FieldType.ARRAY]: "Duplicate",
-  [FieldType.NUMBER]: "123",
-  [FieldType.BOOLEAN]: "Boolean",
-  [FieldType.ATTACHMENTS]: "DocumentFragmentGroup",
-  [FieldType.ATTACHMENT_SINGLE]: "DocumentFragment",
-  [FieldType.LINK]: "DataCorrelated",
-  [FieldType.FORMULA]: "Calculator",
-  [FieldType.AI]: "MagicWand",
-  [FieldType.JSON]: "Brackets",
-  [FieldType.BIGINT]: "TagBold",
-  [FieldType.AUTO]: "Shapes",
+  [FieldType.STRING]: "text-align-left",
+  [FieldType.OPTIONS]: "caret-circle-down",
+  [FieldType.DATETIME]: "calendar",
+  [FieldType.BARCODEQR]: "barcode",
+  [FieldType.SIGNATURE_SINGLE]: "pen-nib",
+  [FieldType.LONGFORM]: "text-align-left",
+  [FieldType.ARRAY]: "list-checks",
+  [FieldType.NUMBER]: "hash",
+  [FieldType.BOOLEAN]: "toggle-right",
+  [FieldType.ATTACHMENTS]: "files",
+  [FieldType.ATTACHMENT_SINGLE]: "file",
+  [FieldType.LINK]: "arrow-circle-up-right",
+  [FieldType.FORMULA]: "calculator",
+  [FieldType.AI]: "sparkle",
+  [FieldType.JSON]: "brackets-angle",
+  [FieldType.BIGINT]: "text-bolder",
+  [FieldType.AUTO]: "shapes",
   [FieldType.BB_REFERENCE]: {
-    [BBReferenceFieldSubType.USER]: "UserGroup",
-    [BBReferenceFieldSubType.USERS]: "UserGroup",
+    [BBReferenceFieldSubType.USER]: "users-three",
+    [BBReferenceFieldSubType.USERS]: "users-three",
   },
   [FieldType.BB_REFERENCE_SINGLE]: {
-    [BBReferenceFieldSubType.USER]: "User",
+    [BBReferenceFieldSubType.USER]: "user",
   },
 }
 

package/src/utils/schema.js

@@ -9,13 +9,13 @@ export const getColumnIcon = column => {
     return column.schema.icon
   }
   if (column.calculationType) {
-    return "Calculator"
+    return "calculator"
   }
   if (column.schema.autocolumn) {
-    return "Shapes"
+    return "shapes"
   }
   if (helpers.schema.isDeprecatedSingleUserColumn(column.schema)) {
-    return "User"
+    return "user"
   }
   const { type, subtype } = column.schema
   const result =
@@ -23,7 +23,7 @@ export const getColumnIcon = column => {
       ? TypeIconMap[type][subtype]
       : TypeIconMap[type]
 
-  return result || "Text"
+  return result || "article"
 }
 
 export const addNestedJSONSchemaFields = schema => {