Update view calculation button to be a detail popover

packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte

@@ -1,15 +1,15 @@
 <script>
   import {
     ActionButton,
-    Modal,
-    ModalContent,
     Select,
     Icon,
     Multiselect,
+    Button,
   } from "@budibase/bbui"
   import { CalculationType, canGroupBy, FieldType } from "@budibase/types"
   import InfoDisplay from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
   import { getContext } from "svelte"
+  import DetailPopover from "components/common/DetailPopover.svelte"
 
   const { definition, datasource, rows } = getContext("grid")
   const calculationTypeOptions = [
@@ -35,19 +35,20 @@
     },
   ]
 
-  let modal
+  let popover
   let calculations = []
   let groupBy = []
   let schema = {}
+  let loading = false
 
   $: schema = $definition?.schema || {}
   $: count = extractCalculations($definition?.schema || {}).length
   $: groupByOptions = getGroupByOptions(schema)
 
-  const open = () => {
+  const openPopover = () => {
     calculations = extractCalculations(schema)
     groupBy = calculations.length ? extractGroupBy(schema) : []
-    modal?.show()
+    popover?.show()
   }
 
   const extractCalculations = schema => {
@@ -135,6 +136,7 @@
 
   const save = async () => {
     let newSchema = {}
+    loading = true
 
     // Add calculations
     for (let calc of calculations) {
@@ -168,76 +170,80 @@
     }
 
     // Save changes
-    await datasource.actions.saveDefinition({
+    try {
-      ...$definition,
+      await datasource.actions.saveDefinition({
-      primaryDisplay,
+        ...$definition,
-      schema: newSchema,
+        primaryDisplay,
-    })
+        schema: newSchema,
-    await rows.actions.refreshData()
+      })
+      await rows.actions.refreshData()
+    } finally {
+      loading = false
+      popover.hide()
+    }
   }
 </script>
 
-<ActionButton icon="WebPage" quiet on:click={open}>
+<DetailPopover bind:this={popover} title="Calculations" width={480}>
-  Configure calculations{count ? `: ${count}` : ""}
+  <svelte:fragment slot="anchor" let:open>
-</ActionButton>
+    <ActionButton icon="WebPage" quiet on:click={openPopover} selected={open}>
+      Configure calculations{count ? `: ${count}` : ""}
+    </ActionButton>
+  </svelte:fragment>
 
-<Modal bind:this={modal}>
+  {#if calculations.length}
-  <ModalContent
+    <div class="calculations">
-    title="Calculations"
+      {#each calculations as calc, idx}
-    confirmText="Save"
+        <span>{idx === 0 ? "Calculate" : "and"} the</span>
-    size="M"
+        <Select
-    onConfirm={save}
+          options={getTypeOptions(calc, calculations)}
-  >
+          bind:value={calc.type}
-    {#if calculations.length}
+          placeholder={false}
-      <div class="calculations">
+        />
-        {#each calculations as calc, idx}
+        <span>of</span>
-          <span>{idx === 0 ? "Calculate" : "and"} the</span>
+        <Select
-          <Select
+          options={getFieldOptions(calc, calculations, schema)}
-            options={getTypeOptions(calc, calculations)}
+          bind:value={calc.field}
-            bind:value={calc.type}
+          placeholder="Column"
-            placeholder={false}
+        />
-          />
+        <Icon
-          <span>of</span>
+          hoverable
-          <Select
+          name="Delete"
-            options={getFieldOptions(calc, calculations, schema)}
+          size="S"
-            bind:value={calc.field}
+          on:click={() => deleteCalc(idx)}
-            placeholder="Column"
+          color="var(--spectrum-global-color-gray-700)"
-          />
+        />
-          <Icon
+      {/each}
-            hoverable
+      <span>Group by</span>
-            name="Delete"
+      <div class="group-by">
-            size="S"
+        <Multiselect
-            on:click={() => deleteCalc(idx)}
+          options={groupByOptions}
-            color="var(--spectrum-global-color-gray-700)"
+          bind:value={groupBy}
-          />
+          placeholder="None"
-        {/each}
+        />
-        <span>Group by</span>
-        <div class="group-by">
-          <Multiselect
-            options={groupByOptions}
-            bind:value={groupBy}
-            placeholder="None"
-          />
-        </div>
       </div>
-    {/if}
-    <div class="buttons">
-      <ActionButton
-        quiet
-        icon="Add"
-        on:click={addCalc}
-        disabled={calculations.length >= 5}
-      >
-        Add calculation
-      </ActionButton>
     </div>
-    <InfoDisplay
+  {/if}
-      icon="Help"
+  <div class="buttons">
+    <ActionButton
       quiet
-      body="Calculations only work with numeric columns and a maximum of 5 calculations can be added at once."
+      icon="Add"
-    />
+      on:click={addCalc}
-  </ModalContent>
+      disabled={calculations.length >= 5}
-</Modal>
+    >
+      Add calculation
+    </ActionButton>
+  </div>
+  <InfoDisplay
+    icon="Help"
+    quiet
+    body="Calculations only work with numeric columns and a maximum of 5 calculations can be added at once."
+  />
+
+  <div>
+    <Button cta on:click={save} disabled={loading}>Save</Button>
+  </div>
+</DetailPopover>
 
 <style>
   .calculations {