chore: move specs into redux and cleanup oauth related code

examples/access-token-server/package.json

@@ -11,9 +11,9 @@
     "create-status-json": "ts-node script/create_status_json.ts"
   },
   "dependencies": {
-    "@looker/sdk": "^21.14.0",
+    "@looker/sdk": "^21.20.1",
     "@looker/sdk-rtl": "^21.0.20",
-    "@looker/sdk-node": "^21.14.0",
+    "@looker/sdk-node": "^21.20.1",
     "body-parser": "^1.19.0",
     "crypto-js": "^4.0.0",
     "dotenv": "^8.2.0",
@@ -35,4 +35,4 @@
     "ts-node": "^10.2.1",
     "typescript": "^4.4.3"
   }
-}
+}

examples/access-token-server/yarn.lock

@@ -502,13 +502,13 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
-"@looker/sdk-node@^21.14.0":
-  version "21.14.0"
-  resolved "https://registry.yarnpkg.com/@looker/sdk-node/-/sdk-node-21.14.0.tgz#2a7a6d8995f85832cef87165bc99e51041e8d75a"
-  integrity sha512-JoN7o/WdbMiz3IYRkNlcD0zuGGH4jv73ngz4IrljX7uAKDZmxRaZwQnPvFpN6CF5BDXRCLhfMaA0yCwBYV1xig==
+"@looker/sdk-node@^22.0.0":
+  version "21.20.1"
+  resolved "https://registry.yarnpkg.com/@looker/sdk-node/-/sdk-node-21.20.1.tgz#4cef072397ad32ec8d0628bae36c461c8e091d3b"
+  integrity sha512-0xi2uSfGslB8KdXAaG2kVWv9suzgg5yiBOqzpKQaOeLRZY2rZAx8nn3FDNKzk15ZZAG/zwXNGmYblJny24AMLQ==
   dependencies:
-    "@looker/sdk" "^21.14.0"
-    "@looker/sdk-rtl" "^21.0.20"
+    "@looker/sdk" "^21.20.1"
+    "@looker/sdk-rtl" "^21.3.1"
     ini "^1.3.8"
     readable-stream "^3.4.0"
     request "^2.88.0"
@@ -524,12 +524,22 @@
     request "^2.88.0"
     request-promise-native "^1.0.8"
 
-"@looker/sdk@^21.14.0":
-  version "21.14.0"
-  resolved "https://registry.yarnpkg.com/@looker/sdk/-/sdk-21.14.0.tgz#56d6da1eb1ea65e145e25291f09160cc283f9e4f"
-  integrity sha512-0/oh+95HYNG9VoqzKRim6z7bPic9ZgvlnDoBpQ1OZDLuufAWImZPiIwn2qBZESpCEgq1Sj3f2zdD+oqrLfCLIQ==
+"@looker/sdk-rtl@^21.3.1":
+  version "21.3.1"
+  resolved "https://registry.yarnpkg.com/@looker/sdk-rtl/-/sdk-rtl-21.3.1.tgz#ff860249959ccf12a9f48d3c79267113e61724d1"
+  integrity sha512-i4SKNTtpNgNz7hLYMJ2W8xOrgQI81gw674q8pgDw1dFWuUA3yq4nTvuR9CFnStYCIoY/1ar2WcTkWp0YSlFzTw==
   dependencies:
-    "@looker/sdk-rtl" "^21.0.20"
+    ini "^1.3.8"
+    readable-stream "^3.4.0"
+    request "^2.88.0"
+    request-promise-native "^1.0.8"
+
+"@looker/sdk@^21.20.1", "@looker/sdk@^22.0.0":
+  version "21.20.1"
+  resolved "https://registry.yarnpkg.com/@looker/sdk/-/sdk-21.20.1.tgz#3d257309c2fe5ad1246e01837ea71aeeb7f4df22"
+  integrity sha512-t54yXAMeJAIeq7uUc1Oa3SdFsE3zvQaL9S28ebXy9TrljbnHG4FsVMacfq0XQGYPDzYUIoEySShWcBOsFZ+eyw==
+  dependencies:
+    "@looker/sdk-rtl" "^21.3.1"
     ini "^1.3.8"
     readable-stream "^3.4.0"
     request "^2.88.0"

packages/api-explorer/package.json

@@ -34,7 +34,7 @@
   "devDependencies": {
     "@looker/components-test-utils": "^1.5.5",
     "@looker/sdk-codegen-scripts": "^21.2.1",
-    "@looker/sdk-node": "^21.20.1",
+    "@looker/sdk-node": "^22.0.0",
     "@styled-icons/styled-icon": "^10.6.3",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
@@ -75,9 +75,9 @@
     "@looker/icons": "^1.5.3",
     "@looker/redux": "0.0.0",
     "@looker/run-it": "^0.9.26",
-    "@looker/sdk": "^21.20.1",
-    "@looker/sdk-codegen": "^21.3.1",
-    "@looker/sdk-rtl": "^21.3.1",
+    "@looker/sdk": "^22.0.0",
+    "@looker/sdk-codegen": "^21.3.2",
+    "@looker/sdk-rtl": "^21.3.2",
     "@reduxjs/toolkit": "^1.6.2",
     "@styled-icons/material": "^10.28.0",
     "@styled-icons/material-outlined": "^10.28.0",

packages/api-explorer/src/ApiExplorer.tsx

@@ -25,8 +25,7 @@
  */
 
 import type { FC } from 'react'
-import React, { useReducer, useState, useEffect, useCallback } from 'react'
-import { useLocation } from 'react-router'
+import React, { useState, useEffect, useCallback } from 'react'
 import styled, { createGlobalStyle } from 'styled-components'
 import {
   Aside,
@@ -38,41 +37,41 @@ import {
   Page,
   Space,
 } from '@looker/components'
-import type { SpecList } from '@looker/sdk-codegen'
-import type { RunItSetter } from '@looker/run-it'
-import { funFetch, fallbackFetch, OAuthScene } from '@looker/run-it'
 import { FirstPage } from '@styled-icons/material/FirstPage'
 import { LastPage } from '@styled-icons/material/LastPage'
-
-import type { IEnvironmentAdaptor } from '@looker/extension-utils'
 import {
   registerEnvAdaptor,
   unregisterEnvAdaptor,
 } from '@looker/extension-utils'
-import { oAuthPath } from './utils'
+import { useSelector } from 'react-redux'
+import { useLocation } from 'react-router-dom'
+
+import type { IApixAdaptor } from './utils'
 import {
   Header,
   SideNav,
   ErrorBoundary,
-  Loader,
   SelectorContainer,
   HEADER_TOGGLE_LABEL,
+  Loader,
   Banner,
 } from './components'
-import { specReducer, initDefaultSpecState, updateSpecApi } from './reducers'
 import { AppRouter } from './routes'
 import { apixFilesHost } from './utils/lodeUtils'
 import {
   useSettingActions,
   useSettingStoreState,
   useLodeActions,
   useLodesStoreState,
+  useSpecActions,
+  useSpecStoreState,
+  selectSpecs,
+  selectCurrentSpec,
 } from './state'
+import { getSpecKey, diffPath } from './utils'
 
 export interface ApiExplorerProps {
-  specs: SpecList
-  adaptor: IEnvironmentAdaptor
-  setVersionsUrl: RunItSetter
+  adaptor: IApixAdaptor
   examplesLodeUrl?: string
   declarationsLodeUrl?: string
   headless?: boolean
@@ -81,25 +80,21 @@ export interface ApiExplorerProps {
 const BodyOverride = createGlobalStyle` html { height: 100%; overflow: hidden; } `
 
 export const ApiExplorer: FC<ApiExplorerProps> = ({
-  specs,
   adaptor,
-  setVersionsUrl,
   examplesLodeUrl = 'https://raw.githubusercontent.com/looker-open-source/sdk-codegen/main/examplesIndex.json',
   declarationsLodeUrl = `${apixFilesHost}/declarationsIndex.json`,
   headless = false,
 }) => {
-  const { initialized } = useSettingStoreState()
+  useSettingStoreState()
   useLodesStoreState()
+  const { working, description } = useSpecStoreState()
+  const specs = useSelector(selectSpecs)
+  const spec = useSelector(selectCurrentSpec)
   const { initLodesAction } = useLodeActions()
   const { initSettingsAction } = useSettingActions()
-  const location = useLocation()
-  const oauthReturn = location.pathname === `/${oAuthPath}`
-  const [specState, specDispatch] = useReducer(
-    specReducer,
-    initDefaultSpecState(specs, location)
-  )
-  const { spec } = specState
+  const { initSpecsAction, setCurrentSpecAction } = useSpecActions()
 
+  const location = useLocation()
   const [hasNavigation, setHasNavigation] = useState(true)
   const toggleNavigation = (target?: boolean) =>
     setHasNavigation(target || !hasNavigation)
@@ -110,14 +105,24 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
     }
   }, [])
 
+  registerEnvAdaptor(adaptor)
+
   useEffect(() => {
-    registerEnvAdaptor(adaptor)
     initSettingsAction()
     initLodesAction({ examplesLodeUrl, declarationsLodeUrl })
 
+    const specKey = getSpecKey(location)
+    initSpecsAction({ specKey })
     return () => unregisterEnvAdaptor()
   }, [])
 
+  useEffect(() => {
+    const maybeSpec = location.pathname?.split('/')[1]
+    if (spec && maybeSpec && maybeSpec !== diffPath && maybeSpec !== spec.key) {
+      setCurrentSpecAction({ currentSpecKey: maybeSpec })
+    }
+  }, [location.pathname, spec])
+
   useEffect(() => {
     if (headless) {
       window.addEventListener('message', hasNavigationToggle)
@@ -129,47 +134,27 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
     }
   }, [headless, hasNavigationToggle])
 
-  useEffect(() => {
-    const loadSpec = async () => {
-      if (!spec.api) {
-        try {
-          const newSpec = { ...spec }
-          const api = await fallbackFetch(newSpec, funFetch)
-          if (api) {
-            spec.api = api
-            specDispatch(updateSpecApi(spec.key, api))
-          }
-        } catch (error) {
-          console.error(error)
-        }
-      }
-    }
-    if (!oauthReturn) {
-      loadSpec()
-    }
-  }, [spec, location])
-
   const themeOverrides = adaptor.themeOverrides()
 
+  let neededSpec = location.pathname?.split('/')[1]
+  if (!neededSpec || neededSpec === diffPath) {
+    neededSpec = spec?.key
+  }
+
   return (
     <>
       <ComponentsProvider
         loadGoogleFonts={themeOverrides.loadGoogleFonts}
         themeCustomizations={themeOverrides.themeCustomizations}
       >
-        {!initialized ? (
-          <Loader message="Initializing" themeOverrides={themeOverrides} />
+        {working || !neededSpec || neededSpec !== spec.key ? (
+          <Loader message={description} themeOverrides={themeOverrides} />
         ) : (
           <ErrorBoundary logError={adaptor.logError.bind(adaptor)}>
             <Banner adaptor={adaptor} specs={specs} />
             <Page style={{ overflow: 'hidden' }}>
               {!headless && (
-                <Header
-                  specs={specs}
-                  spec={spec}
-                  specDispatch={specDispatch}
-                  toggleNavigation={toggleNavigation}
-                />
+                <Header spec={spec} toggleNavigation={toggleNavigation} />
               )}
               <Layout hasAside height="100%">
                 <AsideBorder
@@ -209,36 +194,22 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
                         <>
                           <Divider mb="u3" appearance="light" />
                           <SelectorContainer
+                            spec={spec}
                             ml="large"
                             mr="large"
-                            specs={specs}
-                            spec={spec}
-                            specDispatch={specDispatch}
                           />
                         </>
                       )}
                     </>
                   )}
-                  {hasNavigation && (
-                    <SideNav
-                      headless={headless}
-                      specs={specs}
-                      spec={spec}
-                      specDispatch={specDispatch}
-                    />
-                  )}
+                  {hasNavigation && <SideNav headless={headless} spec={spec} />}
                 </AsideBorder>
-                {oauthReturn && <OAuthScene />}
-                {!oauthReturn && spec.api && (
-                  <AppRouter
-                    api={spec.api}
-                    specKey={spec.key}
-                    specs={specs}
-                    toggleNavigation={toggleNavigation}
-                    adaptor={adaptor}
-                    setVersionsUrl={setVersionsUrl}
-                  />
-                )}
+                <AppRouter
+                  specKey={spec.key}
+                  api={spec.api!}
+                  specs={specs}
+                  toggleNavigation={toggleNavigation}
+                />
               </Layout>
             </Page>
           </ErrorBoundary>