From 0db08498d9c1a38b02485ec987561dfdd53ea3dc Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 23 May 2024 17:44:23 +0100
Subject: [PATCH 1/3] Fix for grid arrow event handling when creating a column

---
 .../DataTable/modals/CreateEditColumn.svelte  | 479 +++++++++---------
 .../grid/overlays/KeyboardManager.svelte      |   1 +
 2 files changed, 242 insertions(+), 238 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 8583dbcab7..477ca1caa9 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -517,258 +517,261 @@
   })
 </script>
 
-<Layout noPadding gap="S">
-  {#if mounted}
-    <Input
-      value={editableColumn.name}
-      autofocus
-      on:input={e => {
-        if (
-          !uneditable &&
-          !(linkEditDisabled && editableColumn.type === LINK_TYPE)
-        ) {
-          editableColumn.name = e.target.value
-        }
-      }}
-      disabled={uneditable ||
-        (linkEditDisabled && editableColumn.type === LINK_TYPE)}
-      error={errors?.name}
-    />
-  {/if}
-  <Select
-    placeholder={null}
-    disabled={!typeEnabled}
-    bind:value={editableColumn.fieldId}
-    on:change={onHandleTypeChange}
-    options={allowedTypes}
-    getOptionLabel={field => field.name}
-    getOptionValue={field => field.fieldId}
-    getOptionIcon={field => field.icon}
-    isOptionEnabled={option => {
-      if (option.type === AUTO_TYPE) {
-        return availableAutoColumnKeys?.length > 0
-      }
-      return true
-    }}
-  />
-
-  {#if editableColumn.type === FieldType.STRING}
-    <Input
-      type="number"
-      label="Max Length"
-      bind:value={editableColumn.constraints.length.maximum}
-    />
-  {:else if editableColumn.type === FieldType.OPTIONS}
-    <OptionSelectDnD
-      bind:constraints={editableColumn.constraints}
-      bind:optionColors={editableColumn.optionColors}
-    />
-  {:else if editableColumn.type === FieldType.LONGFORM}
-    <div>
-      <div class="tooltip-alignment">
-        <Label size="M">Formatting</Label>
-        <AbsTooltip
-          position="top"
-          type="info"
-          text={"Rich text includes support for images, link"}
-        >
-          <Icon size="XS" name="InfoOutline" />
-        </AbsTooltip>
-      </div>
-
-      <Toggle
-        bind:value={editableColumn.useRichText}
-        text="Enable rich text support (markdown)"
+<span class="create-edit-column">
+  <Layout noPadding gap="S">
+    {#if mounted}
+      <Input
+        value={editableColumn.name}
+        autofocus
+        on:input={e => {
+          if (
+            !uneditable &&
+            !(linkEditDisabled && editableColumn.type === LINK_TYPE)
+          ) {
+            editableColumn.name = e.target.value
+          }
+        }}
+        disabled={uneditable ||
+          (linkEditDisabled && editableColumn.type === LINK_TYPE)}
+        error={errors?.name}
       />
-    </div>
-  {:else if editableColumn.type === FieldType.ARRAY}
-    <OptionSelectDnD
-      bind:constraints={editableColumn.constraints}
-      bind:optionColors={editableColumn.optionColors}
-    />
-  {:else if editableColumn.type === DATE_TYPE && !editableColumn.autocolumn}
-    <div class="split-label">
-      <div class="label-length">
-        <Label size="M">Earliest</Label>
-      </div>
-      <div class="input-length">
-        <DatePicker
-          bind:value={editableColumn.constraints.datetime.earliest}
-          enableTime={!editableColumn.dateOnly}
-          timeOnly={editableColumn.timeOnly}
-        />
-      </div>
-    </div>
-
-    <div class="split-label">
-      <div class="label-length">
-        <Label size="M">Latest</Label>
-      </div>
-      <div class="input-length">
-        <DatePicker
-          bind:value={editableColumn.constraints.datetime.latest}
-          enableTime={!editableColumn.dateOnly}
-          timeOnly={editableColumn.timeOnly}
-        />
-      </div>
-    </div>
-    {#if !editableColumn.timeOnly}
-      {#if datasource?.source !== SourceName.ORACLE && datasource?.source !== SourceName.SQL_SERVER && !editableColumn.dateOnly}
-        <div>
-          <div class="row">
-            <Label>Time zones</Label>
-            <AbsTooltip
-              position="top"
-              type="info"
-              text={isCreating
-                ? null
-                : "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
-            >
-              <Icon size="XS" name="InfoOutline" />
-            </AbsTooltip>
-          </div>
-          <Toggle
-            bind:value={editableColumn.ignoreTimezones}
-            text="Ignore time zones"
-          />
-        </div>
-      {/if}
-      <Toggle bind:value={editableColumn.dateOnly} text="Date only" />
     {/if}
-  {:else if editableColumn.type === FieldType.NUMBER && !editableColumn.autocolumn}
-    <div class="split-label">
-      <div class="label-length">
-        <Label size="M">Min Value</Label>
-      </div>
-      <div class="input-length">
-        <Input
-          type="number"
-          bind:value={editableColumn.constraints.numericality
-            .greaterThanOrEqualTo}
-        />
-      </div>
-    </div>
-
-    <div class="split-label">
-      <div class="label-length">
-        <Label size="M">Max Value</Label>
-      </div>
-      <div class="input-length">
-        <Input
-          type="number"
-          bind:value={editableColumn.constraints.numericality.lessThanOrEqualTo}
-        />
-      </div>
-    </div>
-  {:else if editableColumn.type === FieldType.LINK && !editableColumn.autocolumn}
-    <RelationshipSelector
-      bind:relationshipPart1
-      bind:relationshipPart2
-      bind:relationshipTableIdPrimary
-      bind:relationshipTableIdSecondary
-      bind:editableColumn
-      {relationshipOpts1}
-      {relationshipOpts2}
-      {linkEditDisabled}
-      {tableOptions}
-      {errors}
+    <Select
+      placeholder={null}
+      disabled={!typeEnabled}
+      bind:value={editableColumn.fieldId}
+      on:change={onHandleTypeChange}
+      options={allowedTypes}
+      getOptionLabel={field => field.name}
+      getOptionValue={field => field.fieldId}
+      getOptionIcon={field => field.icon}
+      isOptionEnabled={option => {
+        if (option.type === AUTO_TYPE) {
+          return availableAutoColumnKeys?.length > 0
+        }
+        return true
+      }}
     />
-  {:else if editableColumn.type === FORMULA_TYPE}
-    {#if !table.sql}
+
+    {#if editableColumn.type === FieldType.STRING}
+      <Input
+        type="number"
+        label="Max Length"
+        bind:value={editableColumn.constraints.length.maximum}
+      />
+    {:else if editableColumn.type === FieldType.OPTIONS}
+      <OptionSelectDnD
+        bind:constraints={editableColumn.constraints}
+        bind:optionColors={editableColumn.optionColors}
+      />
+    {:else if editableColumn.type === FieldType.LONGFORM}
+      <div>
+        <div class="tooltip-alignment">
+          <Label size="M">Formatting</Label>
+          <AbsTooltip
+            position="top"
+            type="info"
+            text={"Rich text includes support for images, link"}
+          >
+            <Icon size="XS" name="InfoOutline" />
+          </AbsTooltip>
+        </div>
+
+        <Toggle
+          bind:value={editableColumn.useRichText}
+          text="Enable rich text support (markdown)"
+        />
+      </div>
+    {:else if editableColumn.type === FieldType.ARRAY}
+      <OptionSelectDnD
+        bind:constraints={editableColumn.constraints}
+        bind:optionColors={editableColumn.optionColors}
+      />
+    {:else if editableColumn.type === DATE_TYPE && !editableColumn.autocolumn}
       <div class="split-label">
         <div class="label-length">
-          <Label size="M">Formula Type</Label>
+          <Label size="M">Earliest</Label>
         </div>
         <div class="input-length">
-          <Select
-            bind:value={editableColumn.formulaType}
-            options={[
-              { label: "Dynamic", value: "dynamic" },
-              { label: "Static", value: "static" },
-            ]}
-            disabled={!isCreating}
-            getOptionLabel={option => option.label}
-            getOptionValue={option => option.value}
-            tooltip="Dynamic formula are calculated when retrieved, but cannot be filtered or sorted by,
-         while static formula are calculated when the row is saved."
+          <DatePicker
+            bind:value={editableColumn.constraints.datetime.earliest}
+            enableTime={!editableColumn.dateOnly}
+            timeOnly={editableColumn.timeOnly}
           />
         </div>
       </div>
-    {/if}
-    <div class="split-label">
-      <div class="label-length">
-        <Label size="M">Formula</Label>
-      </div>
-      <div class="input-length">
-        <ModalBindableInput
-          panel={ServerBindingPanel}
-          title="Formula"
-          value={editableColumn.formula}
-          on:change={e => {
-            editableColumn = {
-              ...editableColumn,
-              formula: e.detail,
-            }
-          }}
-          bindings={getBindings({ table })}
-          allowJS
-          context={rowGoldenSample}
-        />
-      </div>
-    </div>
-  {:else if editableColumn.type === JSON_TYPE}
-    <Button primary text on:click={openJsonSchemaEditor}
-      >Open schema editor</Button
-    >
-  {/if}
-  {#if editableColumn.type === AUTO_TYPE || editableColumn.autocolumn}
-    <Select
-      label="Auto column type"
-      value={editableColumn.subtype}
-      on:change={e => (editableColumn.subtype = e.detail)}
-      options={Object.entries(autoColumnOptions)}
-      getOptionLabel={option => option[1].name}
-      getOptionValue={option => option[0]}
-      disabled={!availableAutoColumnKeys?.length || editableColumn.autocolumn}
-      error={errors?.subtype}
-    />
-  {/if}
 
-  {#if canBeRequired || canBeDisplay}
-    <div>
-      {#if canBeRequired}
-        <Toggle
-          value={required}
-          on:change={onChangeRequired}
-          disabled={primaryDisplay}
-          thin
-          text="Required"
-        />
+      <div class="split-label">
+        <div class="label-length">
+          <Label size="M">Latest</Label>
+        </div>
+        <div class="input-length">
+          <DatePicker
+            bind:value={editableColumn.constraints.datetime.latest}
+            enableTime={!editableColumn.dateOnly}
+            timeOnly={editableColumn.timeOnly}
+          />
+        </div>
+      </div>
+      {#if !editableColumn.timeOnly}
+        {#if datasource?.source !== SourceName.ORACLE && datasource?.source !== SourceName.SQL_SERVER && !editableColumn.dateOnly}
+          <div>
+            <div class="row">
+              <Label>Time zones</Label>
+              <AbsTooltip
+                position="top"
+                type="info"
+                text={isCreating
+                  ? null
+                  : "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
+              >
+                <Icon size="XS" name="InfoOutline" />
+              </AbsTooltip>
+            </div>
+            <Toggle
+              bind:value={editableColumn.ignoreTimezones}
+              text="Ignore time zones"
+            />
+          </div>
+        {/if}
+        <Toggle bind:value={editableColumn.dateOnly} text="Date only" />
       {/if}
-    </div>
-  {/if}
-</Layout>
-
-<div class="action-buttons">
-  {#if !uneditable && originalName != null}
-    <Button quiet warning text on:click={confirmDelete}>Delete</Button>
-  {/if}
-  <Button secondary newStyles on:click={cancelEdit}>Cancel</Button>
-  <Button
-    disabled={invalid || savingColumn}
-    newStyles
-    cta
-    on:click={saveColumn}
-  >
-    {#if savingColumn}
-      <div class="save-loading">
-        <ProgressCircle overBackground={true} size="S" />
+    {:else if editableColumn.type === FieldType.NUMBER && !editableColumn.autocolumn}
+      <div class="split-label">
+        <div class="label-length">
+          <Label size="M">Min Value</Label>
+        </div>
+        <div class="input-length">
+          <Input
+            type="number"
+            bind:value={editableColumn.constraints.numericality
+              .greaterThanOrEqualTo}
+          />
+        </div>
       </div>
-    {:else}
-      Save
+
+      <div class="split-label">
+        <div class="label-length">
+          <Label size="M">Max Value</Label>
+        </div>
+        <div class="input-length">
+          <Input
+            type="number"
+            bind:value={editableColumn.constraints.numericality
+              .lessThanOrEqualTo}
+          />
+        </div>
+      </div>
+    {:else if editableColumn.type === FieldType.LINK && !editableColumn.autocolumn}
+      <RelationshipSelector
+        bind:relationshipPart1
+        bind:relationshipPart2
+        bind:relationshipTableIdPrimary
+        bind:relationshipTableIdSecondary
+        bind:editableColumn
+        {relationshipOpts1}
+        {relationshipOpts2}
+        {linkEditDisabled}
+        {tableOptions}
+        {errors}
+      />
+    {:else if editableColumn.type === FORMULA_TYPE}
+      {#if !table.sql}
+        <div class="split-label">
+          <div class="label-length">
+            <Label size="M">Formula Type</Label>
+          </div>
+          <div class="input-length">
+            <Select
+              bind:value={editableColumn.formulaType}
+              options={[
+                { label: "Dynamic", value: "dynamic" },
+                { label: "Static", value: "static" },
+              ]}
+              disabled={!isCreating}
+              getOptionLabel={option => option.label}
+              getOptionValue={option => option.value}
+              tooltip="Dynamic formula are calculated when retrieved, but cannot be filtered or sorted by,
+         while static formula are calculated when the row is saved."
+            />
+          </div>
+        </div>
+      {/if}
+      <div class="split-label">
+        <div class="label-length">
+          <Label size="M">Formula</Label>
+        </div>
+        <div class="input-length">
+          <ModalBindableInput
+            panel={ServerBindingPanel}
+            title="Formula"
+            value={editableColumn.formula}
+            on:change={e => {
+              editableColumn = {
+                ...editableColumn,
+                formula: e.detail,
+              }
+            }}
+            bindings={getBindings({ table })}
+            allowJS
+            context={rowGoldenSample}
+          />
+        </div>
+      </div>
+    {:else if editableColumn.type === JSON_TYPE}
+      <Button primary text on:click={openJsonSchemaEditor}
+        >Open schema editor</Button
+      >
     {/if}
-  </Button>
-</div>
+    {#if editableColumn.type === AUTO_TYPE || editableColumn.autocolumn}
+      <Select
+        label="Auto column type"
+        value={editableColumn.subtype}
+        on:change={e => (editableColumn.subtype = e.detail)}
+        options={Object.entries(autoColumnOptions)}
+        getOptionLabel={option => option[1].name}
+        getOptionValue={option => option[0]}
+        disabled={!availableAutoColumnKeys?.length || editableColumn.autocolumn}
+        error={errors?.subtype}
+      />
+    {/if}
+
+    {#if canBeRequired || canBeDisplay}
+      <div>
+        {#if canBeRequired}
+          <Toggle
+            value={required}
+            on:change={onChangeRequired}
+            disabled={primaryDisplay}
+            thin
+            text="Required"
+          />
+        {/if}
+      </div>
+    {/if}
+  </Layout>
+
+  <div class="action-buttons">
+    {#if !uneditable && originalName != null}
+      <Button quiet warning text on:click={confirmDelete}>Delete</Button>
+    {/if}
+    <Button secondary newStyles on:click={cancelEdit}>Cancel</Button>
+    <Button
+      disabled={invalid || savingColumn}
+      newStyles
+      cta
+      on:click={saveColumn}
+    >
+      {#if savingColumn}
+        <div class="save-loading">
+          <ProgressCircle overBackground={true} size="S" />
+        </div>
+      {:else}
+        Save
+      {/if}
+    </Button>
+  </div>
+</span>
 <Modal bind:this={jsonSchemaModal}>
   <JSONSchemaModal
     schema={editableColumn.schema}
diff --git a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
index 78cb186f29..62a2b2f830 100644
--- a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
@@ -24,6 +24,7 @@
     ".date-time-popover",
     "#builder-side-panel-container",
     "[data-grid-ignore]",
+    ".create-edit-column",
   ]
 
   // Global key listener which intercepts all key events

From 9edc0b7c3c8b5166463c690c086c2888f7cc342e Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 23 May 2024 17:45:01 +0100
Subject: [PATCH 2/3] Fix for tooltips in the Component tree in the builder

---
 .../builder/src/components/common/NavItem.svelte    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 5cc6db65a0..5a04907570 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { AbsTooltip, Icon } from "@budibase/bbui"
+  import { Icon, TooltipType, TooltipPosition } from "@budibase/bbui"
   import { createEventDispatcher, getContext } from "svelte"
   import { helpers } from "@budibase/shared-core"
   import { UserAvatars } from "@budibase/frontend-core"
@@ -114,9 +114,14 @@
       </div>
     {:else if icon}
       <div class="icon" class:right={rightAlignIcon}>
-        <AbsTooltip type="info" position="right" text={iconTooltip}>
-          <Icon color={iconColor} size="S" name={icon} />
-        </AbsTooltip>
+        <Icon
+          color={iconColor}
+          size="S"
+          name={icon}
+          tooltip={iconTooltip}
+          tooltipType={TooltipType.Info}
+          tooltipPosition={TooltipPosition.Right}
+        />
       </div>
     {/if}
     <div class="text" title={showTooltip ? text : null}>

From 5a289bd027e37b60780a543d4b91e26cd540aa8f Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 23 May 2024 18:06:08 +0100
Subject: [PATCH 3/3] Removed fix for grid keyboard events

---
 .../DataTable/modals/CreateEditColumn.svelte  | 475 +++++++++---------
 .../grid/overlays/KeyboardManager.svelte      |   1 -
 2 files changed, 236 insertions(+), 240 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 477ca1caa9..8583dbcab7 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -517,261 +517,258 @@
   })
 </script>
 
-<span class="create-edit-column">
-  <Layout noPadding gap="S">
-    {#if mounted}
-      <Input
-        value={editableColumn.name}
-        autofocus
-        on:input={e => {
-          if (
-            !uneditable &&
-            !(linkEditDisabled && editableColumn.type === LINK_TYPE)
-          ) {
-            editableColumn.name = e.target.value
-          }
-        }}
-        disabled={uneditable ||
-          (linkEditDisabled && editableColumn.type === LINK_TYPE)}
-        error={errors?.name}
-      />
-    {/if}
-    <Select
-      placeholder={null}
-      disabled={!typeEnabled}
-      bind:value={editableColumn.fieldId}
-      on:change={onHandleTypeChange}
-      options={allowedTypes}
-      getOptionLabel={field => field.name}
-      getOptionValue={field => field.fieldId}
-      getOptionIcon={field => field.icon}
-      isOptionEnabled={option => {
-        if (option.type === AUTO_TYPE) {
-          return availableAutoColumnKeys?.length > 0
+<Layout noPadding gap="S">
+  {#if mounted}
+    <Input
+      value={editableColumn.name}
+      autofocus
+      on:input={e => {
+        if (
+          !uneditable &&
+          !(linkEditDisabled && editableColumn.type === LINK_TYPE)
+        ) {
+          editableColumn.name = e.target.value
         }
-        return true
       }}
+      disabled={uneditable ||
+        (linkEditDisabled && editableColumn.type === LINK_TYPE)}
+      error={errors?.name}
     />
+  {/if}
+  <Select
+    placeholder={null}
+    disabled={!typeEnabled}
+    bind:value={editableColumn.fieldId}
+    on:change={onHandleTypeChange}
+    options={allowedTypes}
+    getOptionLabel={field => field.name}
+    getOptionValue={field => field.fieldId}
+    getOptionIcon={field => field.icon}
+    isOptionEnabled={option => {
+      if (option.type === AUTO_TYPE) {
+        return availableAutoColumnKeys?.length > 0
+      }
+      return true
+    }}
+  />
 
-    {#if editableColumn.type === FieldType.STRING}
-      <Input
-        type="number"
-        label="Max Length"
-        bind:value={editableColumn.constraints.length.maximum}
-      />
-    {:else if editableColumn.type === FieldType.OPTIONS}
-      <OptionSelectDnD
-        bind:constraints={editableColumn.constraints}
-        bind:optionColors={editableColumn.optionColors}
-      />
-    {:else if editableColumn.type === FieldType.LONGFORM}
-      <div>
-        <div class="tooltip-alignment">
-          <Label size="M">Formatting</Label>
-          <AbsTooltip
-            position="top"
-            type="info"
-            text={"Rich text includes support for images, link"}
-          >
-            <Icon size="XS" name="InfoOutline" />
-          </AbsTooltip>
-        </div>
+  {#if editableColumn.type === FieldType.STRING}
+    <Input
+      type="number"
+      label="Max Length"
+      bind:value={editableColumn.constraints.length.maximum}
+    />
+  {:else if editableColumn.type === FieldType.OPTIONS}
+    <OptionSelectDnD
+      bind:constraints={editableColumn.constraints}
+      bind:optionColors={editableColumn.optionColors}
+    />
+  {:else if editableColumn.type === FieldType.LONGFORM}
+    <div>
+      <div class="tooltip-alignment">
+        <Label size="M">Formatting</Label>
+        <AbsTooltip
+          position="top"
+          type="info"
+          text={"Rich text includes support for images, link"}
+        >
+          <Icon size="XS" name="InfoOutline" />
+        </AbsTooltip>
+      </div>
 
-        <Toggle
-          bind:value={editableColumn.useRichText}
-          text="Enable rich text support (markdown)"
+      <Toggle
+        bind:value={editableColumn.useRichText}
+        text="Enable rich text support (markdown)"
+      />
+    </div>
+  {:else if editableColumn.type === FieldType.ARRAY}
+    <OptionSelectDnD
+      bind:constraints={editableColumn.constraints}
+      bind:optionColors={editableColumn.optionColors}
+    />
+  {:else if editableColumn.type === DATE_TYPE && !editableColumn.autocolumn}
+    <div class="split-label">
+      <div class="label-length">
+        <Label size="M">Earliest</Label>
+      </div>
+      <div class="input-length">
+        <DatePicker
+          bind:value={editableColumn.constraints.datetime.earliest}
+          enableTime={!editableColumn.dateOnly}
+          timeOnly={editableColumn.timeOnly}
         />
       </div>
-    {:else if editableColumn.type === FieldType.ARRAY}
-      <OptionSelectDnD
-        bind:constraints={editableColumn.constraints}
-        bind:optionColors={editableColumn.optionColors}
-      />
-    {:else if editableColumn.type === DATE_TYPE && !editableColumn.autocolumn}
-      <div class="split-label">
-        <div class="label-length">
-          <Label size="M">Earliest</Label>
-        </div>
-        <div class="input-length">
-          <DatePicker
-            bind:value={editableColumn.constraints.datetime.earliest}
-            enableTime={!editableColumn.dateOnly}
-            timeOnly={editableColumn.timeOnly}
-          />
-        </div>
-      </div>
+    </div>
 
-      <div class="split-label">
-        <div class="label-length">
-          <Label size="M">Latest</Label>
-        </div>
-        <div class="input-length">
-          <DatePicker
-            bind:value={editableColumn.constraints.datetime.latest}
-            enableTime={!editableColumn.dateOnly}
-            timeOnly={editableColumn.timeOnly}
-          />
-        </div>
+    <div class="split-label">
+      <div class="label-length">
+        <Label size="M">Latest</Label>
       </div>
-      {#if !editableColumn.timeOnly}
-        {#if datasource?.source !== SourceName.ORACLE && datasource?.source !== SourceName.SQL_SERVER && !editableColumn.dateOnly}
-          <div>
-            <div class="row">
-              <Label>Time zones</Label>
-              <AbsTooltip
-                position="top"
-                type="info"
-                text={isCreating
-                  ? null
-                  : "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
-              >
-                <Icon size="XS" name="InfoOutline" />
-              </AbsTooltip>
-            </div>
-            <Toggle
-              bind:value={editableColumn.ignoreTimezones}
-              text="Ignore time zones"
-            />
+      <div class="input-length">
+        <DatePicker
+          bind:value={editableColumn.constraints.datetime.latest}
+          enableTime={!editableColumn.dateOnly}
+          timeOnly={editableColumn.timeOnly}
+        />
+      </div>
+    </div>
+    {#if !editableColumn.timeOnly}
+      {#if datasource?.source !== SourceName.ORACLE && datasource?.source !== SourceName.SQL_SERVER && !editableColumn.dateOnly}
+        <div>
+          <div class="row">
+            <Label>Time zones</Label>
+            <AbsTooltip
+              position="top"
+              type="info"
+              text={isCreating
+                ? null
+                : "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
+            >
+              <Icon size="XS" name="InfoOutline" />
+            </AbsTooltip>
           </div>
-        {/if}
-        <Toggle bind:value={editableColumn.dateOnly} text="Date only" />
-      {/if}
-    {:else if editableColumn.type === FieldType.NUMBER && !editableColumn.autocolumn}
-      <div class="split-label">
-        <div class="label-length">
-          <Label size="M">Min Value</Label>
-        </div>
-        <div class="input-length">
-          <Input
-            type="number"
-            bind:value={editableColumn.constraints.numericality
-              .greaterThanOrEqualTo}
-          />
-        </div>
-      </div>
-
-      <div class="split-label">
-        <div class="label-length">
-          <Label size="M">Max Value</Label>
-        </div>
-        <div class="input-length">
-          <Input
-            type="number"
-            bind:value={editableColumn.constraints.numericality
-              .lessThanOrEqualTo}
-          />
-        </div>
-      </div>
-    {:else if editableColumn.type === FieldType.LINK && !editableColumn.autocolumn}
-      <RelationshipSelector
-        bind:relationshipPart1
-        bind:relationshipPart2
-        bind:relationshipTableIdPrimary
-        bind:relationshipTableIdSecondary
-        bind:editableColumn
-        {relationshipOpts1}
-        {relationshipOpts2}
-        {linkEditDisabled}
-        {tableOptions}
-        {errors}
-      />
-    {:else if editableColumn.type === FORMULA_TYPE}
-      {#if !table.sql}
-        <div class="split-label">
-          <div class="label-length">
-            <Label size="M">Formula Type</Label>
-          </div>
-          <div class="input-length">
-            <Select
-              bind:value={editableColumn.formulaType}
-              options={[
-                { label: "Dynamic", value: "dynamic" },
-                { label: "Static", value: "static" },
-              ]}
-              disabled={!isCreating}
-              getOptionLabel={option => option.label}
-              getOptionValue={option => option.value}
-              tooltip="Dynamic formula are calculated when retrieved, but cannot be filtered or sorted by,
-         while static formula are calculated when the row is saved."
-            />
-          </div>
-        </div>
-      {/if}
-      <div class="split-label">
-        <div class="label-length">
-          <Label size="M">Formula</Label>
-        </div>
-        <div class="input-length">
-          <ModalBindableInput
-            panel={ServerBindingPanel}
-            title="Formula"
-            value={editableColumn.formula}
-            on:change={e => {
-              editableColumn = {
-                ...editableColumn,
-                formula: e.detail,
-              }
-            }}
-            bindings={getBindings({ table })}
-            allowJS
-            context={rowGoldenSample}
-          />
-        </div>
-      </div>
-    {:else if editableColumn.type === JSON_TYPE}
-      <Button primary text on:click={openJsonSchemaEditor}
-        >Open schema editor</Button
-      >
-    {/if}
-    {#if editableColumn.type === AUTO_TYPE || editableColumn.autocolumn}
-      <Select
-        label="Auto column type"
-        value={editableColumn.subtype}
-        on:change={e => (editableColumn.subtype = e.detail)}
-        options={Object.entries(autoColumnOptions)}
-        getOptionLabel={option => option[1].name}
-        getOptionValue={option => option[0]}
-        disabled={!availableAutoColumnKeys?.length || editableColumn.autocolumn}
-        error={errors?.subtype}
-      />
-    {/if}
-
-    {#if canBeRequired || canBeDisplay}
-      <div>
-        {#if canBeRequired}
           <Toggle
-            value={required}
-            on:change={onChangeRequired}
-            disabled={primaryDisplay}
-            thin
-            text="Required"
+            bind:value={editableColumn.ignoreTimezones}
+            text="Ignore time zones"
           />
-        {/if}
+        </div>
+      {/if}
+      <Toggle bind:value={editableColumn.dateOnly} text="Date only" />
+    {/if}
+  {:else if editableColumn.type === FieldType.NUMBER && !editableColumn.autocolumn}
+    <div class="split-label">
+      <div class="label-length">
+        <Label size="M">Min Value</Label>
+      </div>
+      <div class="input-length">
+        <Input
+          type="number"
+          bind:value={editableColumn.constraints.numericality
+            .greaterThanOrEqualTo}
+        />
+      </div>
+    </div>
+
+    <div class="split-label">
+      <div class="label-length">
+        <Label size="M">Max Value</Label>
+      </div>
+      <div class="input-length">
+        <Input
+          type="number"
+          bind:value={editableColumn.constraints.numericality.lessThanOrEqualTo}
+        />
+      </div>
+    </div>
+  {:else if editableColumn.type === FieldType.LINK && !editableColumn.autocolumn}
+    <RelationshipSelector
+      bind:relationshipPart1
+      bind:relationshipPart2
+      bind:relationshipTableIdPrimary
+      bind:relationshipTableIdSecondary
+      bind:editableColumn
+      {relationshipOpts1}
+      {relationshipOpts2}
+      {linkEditDisabled}
+      {tableOptions}
+      {errors}
+    />
+  {:else if editableColumn.type === FORMULA_TYPE}
+    {#if !table.sql}
+      <div class="split-label">
+        <div class="label-length">
+          <Label size="M">Formula Type</Label>
+        </div>
+        <div class="input-length">
+          <Select
+            bind:value={editableColumn.formulaType}
+            options={[
+              { label: "Dynamic", value: "dynamic" },
+              { label: "Static", value: "static" },
+            ]}
+            disabled={!isCreating}
+            getOptionLabel={option => option.label}
+            getOptionValue={option => option.value}
+            tooltip="Dynamic formula are calculated when retrieved, but cannot be filtered or sorted by,
+         while static formula are calculated when the row is saved."
+          />
+        </div>
       </div>
     {/if}
-  </Layout>
-
-  <div class="action-buttons">
-    {#if !uneditable && originalName != null}
-      <Button quiet warning text on:click={confirmDelete}>Delete</Button>
-    {/if}
-    <Button secondary newStyles on:click={cancelEdit}>Cancel</Button>
-    <Button
-      disabled={invalid || savingColumn}
-      newStyles
-      cta
-      on:click={saveColumn}
+    <div class="split-label">
+      <div class="label-length">
+        <Label size="M">Formula</Label>
+      </div>
+      <div class="input-length">
+        <ModalBindableInput
+          panel={ServerBindingPanel}
+          title="Formula"
+          value={editableColumn.formula}
+          on:change={e => {
+            editableColumn = {
+              ...editableColumn,
+              formula: e.detail,
+            }
+          }}
+          bindings={getBindings({ table })}
+          allowJS
+          context={rowGoldenSample}
+        />
+      </div>
+    </div>
+  {:else if editableColumn.type === JSON_TYPE}
+    <Button primary text on:click={openJsonSchemaEditor}
+      >Open schema editor</Button
     >
-      {#if savingColumn}
-        <div class="save-loading">
-          <ProgressCircle overBackground={true} size="S" />
-        </div>
-      {:else}
-        Save
+  {/if}
+  {#if editableColumn.type === AUTO_TYPE || editableColumn.autocolumn}
+    <Select
+      label="Auto column type"
+      value={editableColumn.subtype}
+      on:change={e => (editableColumn.subtype = e.detail)}
+      options={Object.entries(autoColumnOptions)}
+      getOptionLabel={option => option[1].name}
+      getOptionValue={option => option[0]}
+      disabled={!availableAutoColumnKeys?.length || editableColumn.autocolumn}
+      error={errors?.subtype}
+    />
+  {/if}
+
+  {#if canBeRequired || canBeDisplay}
+    <div>
+      {#if canBeRequired}
+        <Toggle
+          value={required}
+          on:change={onChangeRequired}
+          disabled={primaryDisplay}
+          thin
+          text="Required"
+        />
       {/if}
-    </Button>
-  </div>
-</span>
+    </div>
+  {/if}
+</Layout>
+
+<div class="action-buttons">
+  {#if !uneditable && originalName != null}
+    <Button quiet warning text on:click={confirmDelete}>Delete</Button>
+  {/if}
+  <Button secondary newStyles on:click={cancelEdit}>Cancel</Button>
+  <Button
+    disabled={invalid || savingColumn}
+    newStyles
+    cta
+    on:click={saveColumn}
+  >
+    {#if savingColumn}
+      <div class="save-loading">
+        <ProgressCircle overBackground={true} size="S" />
+      </div>
+    {:else}
+      Save
+    {/if}
+  </Button>
+</div>
 <Modal bind:this={jsonSchemaModal}>
   <JSONSchemaModal
     schema={editableColumn.schema}
diff --git a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
index 62a2b2f830..78cb186f29 100644
--- a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
@@ -24,7 +24,6 @@
     ".date-time-popover",
     "#builder-side-panel-container",
     "[data-grid-ignore]",
-    ".create-edit-column",
   ]
 
   // Global key listener which intercepts all key events