feat: extension tile update filter (#1087)

1. extension sdk support for update filter
2. extension tile example update filter example

Author: bryans99

packages/extension-sdk/src/connect/tile/tile_sdk.spec.ts

@@ -194,9 +194,10 @@ describe('TileSDK', () => {
   it('sends update filters message ', () => {
     const tileSdk = makeTileSdk()
     const filters = { hello: 'world' }
-    tileSdk.updateFilters(filters)
+    tileSdk.updateFilters(filters, true)
     expect(api.send).toBeCalledWith('TILE_UPDATE_FILTERS', {
       filters,
+      runDashboard: true,
     })
   })
 

packages/extension-sdk/src/connect/tile/tile_sdk.ts

@@ -127,10 +127,11 @@ export class TileSDKImpl implements TileSDK {
     }
   }
 
-  updateFilters(filters: Filters) {
+  updateFilters(filters: Filters, runDashboard = false) {
     if (this.hostApi.isDashboardMountSupported) {
       this.hostApi.send(ExtensionRequestType.TILE_UPDATE_FILTERS, {
         filters,
+        runDashboard,
       })
     } else {
       throw NOT_DASHBOARD_MOUNT_NOT_SUPPORTED_ERROR

packages/extension-sdk/src/connect/tile/types.ts

@@ -189,6 +189,6 @@ export interface TileSDK {
   toggleCrossFilter: (options: CrossFilterOptions, event?: MouseEvent) => void
   runDashboard: () => void
   stopDashboard: () => void
-  updateFilters: (filters: Filters) => void
+  updateFilters: (filters: Filters, runDashboard?: boolean) => void
   openScheduleDialog: () => Promise<void>
 }

packages/extension-tile-playground/src/components/Inspector/components/EventTester/EventTester.tsx

@@ -23,14 +23,16 @@
  SOFTWARE.
 
  */
-import React, { useCallback, useContext } from 'react'
+import React, { useCallback, useContext, useState } from 'react'
 import type { MouseEvent } from 'react'
 import {
+  Space,
   Accordion2,
   Card,
   CardContent,
   Grid,
   ButtonOutline,
+  FieldToggleSwitch,
 } from '@looker/components'
 import { ExtensionContext40 } from '@looker/extension-sdk-react'
 
@@ -39,6 +41,7 @@ export const EventTester: React.FC = () => {
     tileSDK,
     tileHostData: { dashboardFilters },
   } = useContext(ExtensionContext40)
+  const [runDashboard, setRunDashboard] = useState(false)
 
   const addErrorsClick = useCallback(() => {
     tileSDK.addErrors(
@@ -113,12 +116,15 @@ export const EventTester: React.FC = () => {
     const updatedFilter = {}
     Object.entries(dashboardFilters || {}).forEach(([key, value]) => {
       updatedFilter[key] = value
-      if (typeof value === 'string') {
-        updatedFilter[key] = value.split('').reverse().join()
+      if (key === 'State') {
+        updatedFilter[key] =
+          value === 'California' ? 'Washington' : 'California'
+      } else if (typeof value === 'string') {
+        updatedFilter[key] = value.split('').reverse().join('')
       }
     })
-    tileSDK.updateFilters(updatedFilter)
-  }, [tileSDK, dashboardFilters])
+    tileSDK.updateFilters(updatedFilter, runDashboard)
+  }, [tileSDK, dashboardFilters, runDashboard])
 
   const openScheduleDialogClick = useCallback(() => {
     tileSDK.openScheduleDialog()
@@ -153,9 +159,18 @@ export const EventTester: React.FC = () => {
             <ButtonOutline onClick={stopDashboardClick} width="100%">
               Test stop dashboard
             </ButtonOutline>
-            <ButtonOutline onClick={updateFiltersClick} width="100%">
-              Test update filters
-            </ButtonOutline>
+            <Space width="100%">
+              <ButtonOutline onClick={updateFiltersClick} width="50%">
+                Test update filters
+              </ButtonOutline>
+              <FieldToggleSwitch
+                label="Run dashboard"
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                  setRunDashboard(event.target.checked)
+                }
+                on={runDashboard}
+              ></FieldToggleSwitch>
+            </Space>
             <ButtonOutline onClick={openScheduleDialogClick} width="100%">
               Test open schedule dialog
             </ButtonOutline>