Merge pull request Budibase#14457 from Budibase/feat/pick-relationshi…

…p-fields Pick relationship fields
jrgochan · Sep 3, 2024 · daf8909 · daf8909
2 parents 8ec5f49 + 215ad68
commit daf8909
Show file tree

Hide file tree

Showing 40 changed files with 1,440 additions and 178 deletions.
diff --git a/packages/backend-core/src/features/index.ts b/packages/backend-core/src/features/index.ts
@@ -1,7 +1,7 @@
 import env from "../environment"
 import * as context from "../context"
 import { PostHog, PostHogOptions } from "posthog-node"
-import { IdentityType, UserCtx } from "@budibase/types"
+import { FeatureFlag, IdentityType, UserCtx } from "@budibase/types"
 import tracer from "dd-trace"
 
 let posthog: PostHog | undefined
@@ -268,4 +268,5 @@ export class FlagSet<V extends Flag<any>, T extends { [key: string]: V }> {
 export const flags = new FlagSet({
   DEFAULT_VALUES: Flag.boolean(env.isDev()),
   SQS: Flag.boolean(env.isDev()),
+  [FeatureFlag.ENRICHED_RELATIONSHIPS]: Flag.boolean(false),
 })
diff --git a/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte
@@ -6,6 +6,8 @@
   import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
   import GridFilterButton from "components/backend/DataTable/buttons/grid/GridFilterButton.svelte"
   import GridManageAccessButton from "components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte"
+  import { isEnabled } from "helpers/featureFlags"
+  import { FeatureFlag } from "@budibase/types"
 
   $: id = $viewsV2.selected?.id
   $: datasource = {
@@ -29,6 +31,7 @@
     on:updatedatasource={handleGridViewUpdate}
     isCloud={$admin.cloud}
     allowViewReadonlyColumns={$licensing.isViewReadonlyColumnsEnabled}
+    canSetRelationshipSchemas={isEnabled(FeatureFlag.ENRICHED_RELATIONSHIPS)}
   >
     <svelte:fragment slot="filter">
       <GridFilterButton />

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -84,7 +84,7 @@
   }
   let relationshipOpts1 = Object.values(PrettyRelationshipDefinitions)
   let relationshipOpts2 = Object.values(PrettyRelationshipDefinitions)
-  let relationshipMap = {
+  const relationshipMap = {
     [RelationshipType.ONE_TO_MANY]: {
       part1: PrettyRelationshipDefinitions.MANY,
       part2: PrettyRelationshipDefinitions.ONE,
@@ -98,7 +98,7 @@
       part2: PrettyRelationshipDefinitions.MANY,
     },
   }
-  let autoColumnInfo = getAutoColumnInformation()
+  const autoColumnInfo = getAutoColumnInformation()
   let optionsValid = true
 
   $: rowGoldenSample = RowUtils.generateGoldenSample($rows)

diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
@@ -29,6 +29,7 @@
   let searching = false
   let container
   let anchor
+  let relationshipFields
 
   $: fieldValue = parseValue(value)
   $: oneRowOnly = schema?.relationshipType === "one-to-many"
@@ -41,6 +42,26 @@
     }
   }
 
+  $: relationFields = fieldValue?.reduce((acc, f) => {
+    const fields = {}
+    for (const [column] of Object.entries(schema?.columns || {}).filter(
+      ([key, column]) =>
+        column.visible !== false && f[key] !== null && f[key] !== undefined
+    )) {
+      fields[column] = f[column]
+    }
+    if (Object.keys(fields).length) {
+      acc[f._id] = fields
+    }
+    return acc
+  }, {})
+
+  $: showRelationshipFields =
+    relationshipFields &&
+    Object.keys(relationshipFields).length &&
+    focused &&
+    !isOpen
+
   const parseValue = value => {
     if (Array.isArray(value) && value.every(x => x?._id)) {
       return value
@@ -221,6 +242,14 @@
     return value
   }
 
+  const displayRelationshipFields = relationship => {
+    relationshipFields = relationFields[relationship._id]
+  }
+
+  const hideRelationshipFields = () => {
+    relationshipFields = undefined
+  }
+
   onMount(() => {
     api = {
       focus: open,
@@ -244,11 +273,18 @@
     <div
       class="values"
       class:wrap={editable || contentLines > 1}
+      class:disabled={!focused}
       on:wheel={e => (focused ? e.stopPropagation() : null)}
     >
       {#each fieldValue || [] as relationship}
         {#if relationship[primaryDisplay] || relationship.primaryDisplay}
-          <div class="badge">
+          <div
+            class="badge"
+            class:extra-info={!!relationFields[relationship._id]}
+            on:mouseover={() => displayRelationshipFields(relationship)}
+            on:focus={() => {}}
+            on:mouseleave={() => hideRelationshipFields()}
+          >
             <span>
               {readable(
                 relationship[primaryDisplay] || relationship.primaryDisplay
@@ -322,6 +358,21 @@
   </GridPopover>
 {/if}
 
+{#if showRelationshipFields}
+  <GridPopover {anchor} minWidth={300} maxWidth={400}>
+    <div class="relationship-fields">
+      {#each Object.entries(relationshipFields) as [fieldName, fieldValue]}
+        <div class="relationship-field-name">
+          {fieldName}
+        </div>
+        <div class="relationship-field-value">
+          {fieldValue}
+        </div>
+      {/each}
+    </div>
+  </GridPopover>
+{/if}
+
 <style>
   .wrapper {
     flex: 1 1 auto;
@@ -376,6 +427,9 @@
     padding: var(--cell-padding);
     flex-wrap: nowrap;
   }
+  .values.disabled {
+    pointer-events: none;
+  }
   .values.wrap {
     flex-wrap: wrap;
   }
@@ -407,6 +461,13 @@
     height: 20px;
     max-width: 100%;
   }
+  .values.wrap .badge:hover {
+    filter: brightness(1.25);
+  }
+  .values.wrap .badge.extra-info {
+    cursor: pointer;
+  }
+
   .badge span {
     overflow: hidden;
     white-space: nowrap;
@@ -478,4 +539,25 @@
   .search :global(.spectrum-Form-item) {
     flex: 1 1 auto;
   }
+
+  .relationship-fields {
+    margin: var(--spacing-m) var(--spacing-l);
+    display: grid;
+    grid-template-columns: minmax(auto, 50%) auto;
+    grid-row-gap: var(--spacing-m);
+    grid-column-gap: var(--spacing-m);
+  }
+
+  .relationship-field-name {
+    text-transform: uppercase;
+    color: var(--spectrum-global-color-gray-600);
+    font-size: var(--font-size-xs);
+  }
+  .relationship-field-value {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+  }
 </style>
diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -2,16 +2,29 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover } from "@budibase/bbui"
   import ColumnsSettingContent from "./ColumnsSettingContent.svelte"
+  import { FieldPermissions } from "../../../constants"
 
   export let allowViewReadonlyColumns = false
 
-  const { columns } = getContext("grid")
+  const { columns, datasource } = getContext("grid")
 
   let open = false
   let anchor
 
   $: anyRestricted = $columns.filter(col => !col.visible || col.readonly).length
   $: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns"
+
+  $: permissions =
+    $datasource.type === "viewV2"
+      ? [
+          FieldPermissions.WRITABLE,
+          FieldPermissions.READONLY,
+          FieldPermissions.HIDDEN,
+        ]
+      : [FieldPermissions.WRITABLE, FieldPermissions.HIDDEN]
+  $: disabledPermissions = allowViewReadonlyColumns
+    ? []
+    : [FieldPermissions.READONLY]
 </script>
 
 <div bind:this={anchor}>
@@ -28,5 +41,9 @@
 </div>
 
 <Popover bind:open {anchor} align="left">
-  <ColumnsSettingContent columns={$columns} {allowViewReadonlyColumns} />
+  <ColumnsSettingContent
+    columns={$columns}
+    {permissions}
+    {disabledPermissions}
+  />
 </Popover>