From d47bb4f191e3de3dc8cbd403def6e1bbb384b191 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 1 Sep 2023 10:07:37 +0100
Subject: [PATCH] Show tooltip when initially applying filters to a table

---
 packages/bbui/src/Tooltip/TempTooltip.svelte  |  2 +-
 .../buttons/grid/GridCreateViewButton.svelte  | 22 ++++++++++++++-----
 .../modals/grid/GridCreateViewModal.svelte    |  6 ++---
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/bbui/src/Tooltip/TempTooltip.svelte b/packages/bbui/src/Tooltip/TempTooltip.svelte
index 0d590b1ec6..6da01a2bfc 100644
--- a/packages/bbui/src/Tooltip/TempTooltip.svelte
+++ b/packages/bbui/src/Tooltip/TempTooltip.svelte
@@ -4,7 +4,7 @@
 
   export let text = null
   export let condition = true
-  export let duration = 3000
+  export let duration = 5000
   export let position
   export let type
 
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte
index 3244ce3277..3441d8de17 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte
@@ -1,18 +1,30 @@
 <script>
   import { getContext } from "svelte"
-  import { Modal, ActionButton } from "@budibase/bbui"
+  import { Modal, ActionButton, TooltipType, TempTooltip } from "@budibase/bbui"
   import GridCreateViewModal from "../../modals/grid/GridCreateViewModal.svelte"
 
-  const { rows, columns } = getContext("grid")
+  const { rows, columns, filter } = getContext("grid")
 
   let modal
+  let firstFilterUsage = false
 
   $: disabled = !$columns.length || !$rows.length
+  $: {
+    if ($filter?.length && !firstFilterUsage) {
+      firstFilterUsage = true
+    }
+  }
 </script>
 
-<ActionButton {disabled} icon="CollectionAdd" quiet on:click={modal.show}>
-  Add view
-</ActionButton>
+<TempTooltip
+  text="Create a view to save your filters"
+  type={TooltipType.Info}
+  condition={firstFilterUsage}
+>
+  <ActionButton {disabled} icon="CollectionAdd" quiet on:click={modal.show}>
+    Create view
+  </ActionButton>
+</TempTooltip>
 <Modal bind:this={modal}>
   <GridCreateViewModal />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte b/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte
index f698a8cb97..2f96a3d82a 100644
--- a/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte
@@ -46,13 +46,13 @@
 </script>
 
 <ModalContent
-  title="Create View"
-  confirmText="Create View"
+  title="Create view"
+  confirmText="Create view"
   onConfirm={saveView}
   disabled={nameExists}
 >
   <Input
-    label="View Name"
+    label="View name"
     thin
     bind:value={name}
     error={nameExists ? "A view already exists with that name" : null}