Add update row limit in extension (#1409)

feat: Add updating row limit and remove trigger from extension SDK

With the addition of being able to update the row limit with a separate
event here, there is no longer a need to have the trigger functionality
copied from Custom Visualizations as all trigger types are covered by
the existing SDK methods.

Also some minor updates to the example extension just for testing
purposes for the reviewer of this PR.

Author: ryandunlavy

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

@@ -147,18 +147,6 @@ describe('TileSDK', () => {
     expect(api.send).toBeCalledWith('TILE_CLEAR_ERRORS', { group: 'abc' })
   })
 
-  it('sends trigger message ', () => {
-    const tileSdk = makeTileSdk()
-    const config = [{ hello: 'world' }]
-    const message = 'message1'
-    tileSdk.trigger(message, config, makeEvent(config))
-    expect(api.send).toBeCalledWith('TILE_TRIGGER', {
-      message,
-      config,
-      event: makeEvent(),
-    })
-  })
-
   it('sends open drill menu message ', () => {
     const tileSdk = makeTileSdk()
     const options = { hello: 'world' }
@@ -211,7 +199,6 @@ describe('TileSDK', () => {
     method
     ${'addErrors'}
     ${'clearErrors'}
-    ${'trigger'}
     ${'openDrillMenu'}
     ${'toggleCrossFilter'}
     ${'runDashboard'}

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

@@ -32,7 +32,6 @@ import type {
   TileSDK,
   TileError,
   DrillMenuOptions,
-  TriggerConfig,
   CrossFilterOptions,
   Filters,
   TileHostData,
@@ -77,18 +76,6 @@ export class TileSDKImpl implements TileSDK {
     }
   }
 
-  trigger(message: string, config: TriggerConfig[], event?: MouseEvent) {
-    if (this.hostApi.isDashboardMountSupported) {
-      this.hostApi.send(ExtensionRequestType.TILE_TRIGGER, {
-        message,
-        config,
-        event: this.sanitizeEvent(event),
-      })
-    } else {
-      throw NOT_DASHBOARD_MOUNT_NOT_SUPPORTED_ERROR
-    }
-  }
-
   openDrillMenu(options: DrillMenuOptions, event?: MouseEvent) {
     if (this.hostApi.isDashboardMountSupported) {
       this.hostApi.send(ExtensionRequestType.TILE_OPEN_DRILL_MENU, {

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

@@ -198,10 +198,6 @@ export interface CrossFilterOptions {
   row: Row
 }
 
-// TODO build out type
-export type TriggerConfig = any
-
-// TODO build out type
 export type DrillMenuOptions = any
 
 export interface Filters {
@@ -216,11 +212,6 @@ export interface TileSDK {
   tileHostDataChanged: (hostData: Partial<TileHostData>) => void
   addErrors: (...errors: TileError[]) => void
   clearErrors: (group?: string) => void
-  trigger: (
-    message: string,
-    config: TriggerConfig[],
-    event?: MouseEvent
-  ) => void
   openDrillMenu: (options: DrillMenuOptions, event?: MouseEvent) => void
   toggleCrossFilter: (options: CrossFilterOptions, event?: MouseEvent) => void
   runDashboard: () => void

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

@@ -139,10 +139,6 @@ export enum ExtensionRequestType {
    * Tile clear error messages
    */
   TILE_CLEAR_ERRORS = 'TILE_CLEAR_ERRORS',
-  /**
-   * Tile trigger
-   */
-  TILE_TRIGGER = 'TILE_TRIGGER',
   /**
    * Tile open drill menu
    */
@@ -151,6 +147,10 @@ export enum ExtensionRequestType {
    * Tile toggle cross filter
    */
   TILE_TOGGLE_CROSS_FILTER = 'TILE_TOGGLE_CROSS_FILTER',
+  /**
+   * Tile update row limit
+   */
+  TILE_ROW_LIMIT_UPDATE = 'TILE_ROW_LIMIT_UPDATE',
   /**
    * Tile run dashboard. Indicates that the dashboard queries should be run.
    */

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

@@ -121,6 +121,7 @@ export interface VisualizationSDK {
   updateVisData: (rawVisData: RawVisualizationData) => void
   configureVisualization: (options: VisOptions) => void
   setVisConfig: (config: RawVisConfig) => void
+  updateRowLimit: (rowLimit: number) => void
 }
 
 export interface VisOptionValue {

packages/extension-sdk/src/connect/visualization/visualization_sdk.ts

@@ -165,6 +165,16 @@ export class VisualizationSDKImpl implements VisualizationSDK {
     return this._visConfig
   }
 
+  updateRowLimit(rowLimit: number) {
+    if (this.hostApi.isDashboardMountSupported) {
+      this.hostApi.send(ExtensionRequestType.TILE_ROW_LIMIT_UPDATE, {
+        rowLimit,
+      })
+    } else {
+      throw NOT_DASHBOARD_MOUNT_NOT_SUPPORTED_ERROR
+    }
+  }
+
   get queryResponse(): QueryResponse {
     if (!this._queryResponse) {
       this._queryResponse = new QueryResponseImpl(

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

@@ -40,6 +40,7 @@ export const EventTester: React.FC = () => {
   const {
     extensionSDK,
     tileSDK,
+    visualizationSDK,
     tileHostData: { dashboardFilters },
   } = useContext(ExtensionContext40)
   const [runDashboard, setRunDashboard] = useState(false)
@@ -67,28 +68,6 @@ export const EventTester: React.FC = () => {
     tileSDK.clearErrors()
   }, [tileSDK])
 
-  const triggerClick = useCallback(
-    (event: MouseEvent) => {
-      // Taken from custom visualizations 2
-      const defaultColors = {
-        red: '#F36254',
-        green: '#4FBC89',
-        yellow: '#FCF758',
-        white: '#FFFFFF',
-      }
-      tileSDK.trigger(
-        'updateConfig',
-        [
-          { lowColor: defaultColors.red },
-          { midColor: defaultColors.white },
-          { highColor: defaultColors.green },
-        ],
-        event
-      )
-    },
-    [tileSDK]
-  )
-
   const toggleCrossFilterClick = useCallback(
     (event: MouseEvent) => {
       // TODO pivot and row data needs to be populated
@@ -135,6 +114,10 @@ export const EventTester: React.FC = () => {
     extensionSDK.updateTitle(`Update tile title ${new Date().getSeconds()}`)
   }, [extensionSDK])
 
+  const updateRowLimit = useCallback(() => {
+    visualizationSDK.updateRowLimit(100)
+  }, [visualizationSDK])
+
   return (
     <Card>
       <CardContent>
@@ -149,8 +132,8 @@ export const EventTester: React.FC = () => {
             <ButtonOutline onClick={clearAllErrorsClick} width="100%">
               Test clear all errors
             </ButtonOutline>
-            <ButtonOutline onClick={triggerClick} width="100%">
-              Test trigger
+            <ButtonOutline onClick={updateRowLimit} width="100%">
+              Test Update Row Limit
             </ButtonOutline>
             <ButtonOutline onClick={openDrillMenuClick} width="100%">
               Test open drill menu

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

@@ -67,7 +67,7 @@ export const TileHostData: React.FC = () => {
       : 'Dashboard is NOT printing'
 
   const exploringMessage =
-    isExploring && 'Extension visualization is being configured in exlore'
+    isExploring && 'Extension visualization is being configured in an explore'
 
   const dashboardEditingMessage = isDashboardEditing
     ? 'Dashboard is editing'

packages/extension-tile-playground/src/components/VisualizationTile/VisualizationTile.tsx

@@ -23,7 +23,13 @@
  SOFTWARE.
 
  */
-import React, { useContext, useEffect, useCallback, useMemo } from 'react'
+import React, {
+  useContext,
+  useEffect,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react'
 import { SpaceVertical, Text, Button } from '@looker/components'
 import { More } from '@looker/icons'
 import { ExtensionContext40 } from '@looker/extension-sdk-react'
@@ -39,6 +45,8 @@ export const VisualizationTile: React.FC = () => {
   const { visualizationData, visualizationSDK, extensionSDK } =
     useContext(ExtensionContext40)
 
+  const [visConfigured, setVisConfigured] = useState<boolean>(true)
+
   const { value, valueFormat } = useMemo(() => {
     if (visualizationData) {
       return getValueAndFormat(visualizationSDK)
@@ -47,8 +55,9 @@ export const VisualizationTile: React.FC = () => {
   }, [visualizationData, visualizationSDK])
 
   useEffect(() => {
-    if (visualizationSDK) {
+    if (visualizationSDK && !visConfigured) {
       visualizationSDK.configureVisualization(liquidFillVisOptions)
+      setVisConfigured(true)
     }
   }, [visualizationSDK])