feat: SelectTheme component (#1300)

packages/embed-components/package.json

@@ -34,8 +34,25 @@
   },
   "homepage": "https://github.com/looker-open-source/sdk-codegen/tree/master/packages/embed-components",
   "devDependencies": {
+    "redux-saga-tester": "^1.0.874",
+    "@looker/sdk-node": "^23.4.0",
+    "@testing-library/react": "^11.2.7",
+    "@looker/components-test-utils": "^1.5.27",
+    "react-redux": "^7.2.9",
+    "@types/react-redux": "^7.1.25",
+    "@testing-library/user-event": "^14.4.3"
   },
   "dependencies": {
+    "@looker/components": "^4.1.3",
+    "@looker/embed-services": "0.0.1-alpha",
+    "@looker/redux": "0.0.0",
+    "@looker/sdk": "^23.2.0",
+    "@reduxjs/toolkit": "^1.9.3",
+    "@styled-icons/material-outlined": "^10.47.0",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "styled-components": "^5.3.1",
+    "typed-redux-saga": "^1.5.0"
   },
   "keywords": [
     "Looker",

packages/embed-components/src/GlobalStore/index.ts

@@ -0,0 +1,27 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2023 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+export * from './slice'
+export * from './store'

packages/embed-components/src/GlobalStore/sagas.spec.ts

@@ -0,0 +1,92 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2023 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import ReduxSagaTester from 'redux-saga-tester'
+import { getFactory, createFactory } from '@looker/embed-services'
+import type { IAPIMethods } from '@looker/sdk-rtl'
+import {
+  factoryActions,
+  FACTORY_SLICE_NAME,
+  factorySlice,
+  defaultFactoryState,
+} from './slice'
+import * as sagas from './sagas'
+
+jest.mock('@looker/embed-services', () => ({
+  ...jest.requireActual('@looker/embed-services'),
+  createFactory: jest.fn(),
+}))
+
+describe('Factory sagas', () => {
+  let sagaTester: ReduxSagaTester<any>
+  const mockSdk = {} as IAPIMethods
+  const { initFactoryAction, initFactorySuccessAction, setFailureAction } =
+    factoryActions
+
+  beforeEach(() => {
+    sagaTester = new ReduxSagaTester({
+      initialState: { [FACTORY_SLICE_NAME]: defaultFactoryState },
+      reducers: {
+        [FACTORY_SLICE_NAME]: factorySlice.reducer,
+      },
+    })
+    sagaTester.start(sagas.saga)
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('initSaga', () => {
+    it('sends initFactorySuccessAction on success', async () => {
+      expect(getFactory).toThrow('Factory must be created with an SDK.')
+
+      sagaTester.dispatch(initFactoryAction({ sdk: mockSdk }))
+
+      await sagaTester.waitFor('factory/initFactorySuccessAction')
+
+      const calledActions = sagaTester.getCalledActions()
+      expect(calledActions).toHaveLength(2)
+      expect(calledActions[0]).toEqual(initFactoryAction({ sdk: mockSdk }))
+      expect(calledActions[1]).toEqual(initFactorySuccessAction())
+    })
+
+    it('sends setFailureAction on error', async () => {
+      const expectedError = 'Failed to create factory'
+      ;(createFactory as jest.Mock).mockImplementationOnce(() => {
+        throw new Error(expectedError)
+      })
+      sagaTester.dispatch(initFactoryAction({ sdk: mockSdk }))
+
+      await sagaTester.waitFor('factory/setFailureAction')
+      const calledActions = sagaTester.getCalledActions()
+      expect(calledActions).toHaveLength(2)
+      expect(calledActions[0]).toEqual(initFactoryAction({ sdk: mockSdk }))
+      expect(calledActions[1]).toEqual(
+        setFailureAction({ error: expectedError })
+      )
+    })
+  })
+})

packages/embed-components/src/GlobalStore/sagas.ts

@@ -0,0 +1,46 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2023 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import { takeEvery, put } from 'typed-redux-saga'
+import { createFactory } from '@looker/embed-services'
+import type { PayloadAction } from '@reduxjs/toolkit'
+
+import { factoryActions } from './slice'
+import type { InitFactoryAction } from './slice'
+
+function* initSaga(action: PayloadAction<InitFactoryAction>) {
+  const { initFactorySuccessAction, setFailureAction } = factoryActions
+  try {
+    createFactory(action.payload.sdk)
+    yield* put(initFactorySuccessAction())
+  } catch (error: any) {
+    yield* put(setFailureAction({ error: error.message }))
+  }
+}
+
+export function* saga() {
+  const { initFactoryAction } = factoryActions
+  yield* takeEvery(initFactoryAction, initSaga)
+}

packages/embed-components/src/GlobalStore/slice.ts

@@ -0,0 +1,72 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2023 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import { createSlice } from '@reduxjs/toolkit'
+import { createSliceHooks } from '@looker/redux'
+import type { IAPIMethods } from '@looker/sdk-rtl'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { saga } from './sagas'
+
+export interface FactoryState {
+  initialized: boolean
+  error?: string
+}
+
+export const defaultFactoryState: FactoryState = {
+  initialized: false,
+}
+
+export interface InitFactoryAction {
+  sdk: IAPIMethods
+}
+
+type SetFailureAction = Record<'error', string>
+
+export const FACTORY_SLICE_NAME = 'factory'
+
+export const factorySlice = createSlice({
+  name: FACTORY_SLICE_NAME,
+  initialState: defaultFactoryState,
+  reducers: {
+    initFactoryAction(_state, _action: PayloadAction<InitFactoryAction>) {
+      // noop
+    },
+    initFactorySuccessAction(state) {
+      state.initialized = true
+    },
+    destroyFactoryAction() {
+      // noop
+    },
+    setFailureAction(state, action: PayloadAction<SetFailureAction>) {
+      state.error = action.payload.error
+    },
+  },
+})
+
+export const factoryActions = factorySlice.actions
+export const {
+  useActions: useFactoryActions,
+  useStoreState: useFactoryStoreState,
+} = createSliceHooks(factorySlice, saga)

packages/embed-components/src/GlobalStore/store.ts

@@ -0,0 +1,46 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2023 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import { createStore } from '@looker/redux'
+import { defaultThemesState, themesSlice } from '../Theme'
+import type { ThemesState } from '../Theme'
+import { defaultFactoryState, factorySlice } from './slice'
+import type { FactoryState } from './slice'
+
+export const store = createStore({
+  preloadedState: {
+    factory: defaultFactoryState,
+    themes: defaultThemesState,
+  },
+  reducer: {
+    factory: factorySlice.reducer,
+    themes: themesSlice.reducer,
+  },
+})
+
+export interface RootState {
+  factory: FactoryState
+  themes?: ThemesState
+}