chore: move specs into redux and cleanup oauth related code (#976)

* replace runItSettings and configurator with OAuthConfigProvider

* move specs to redux and cleanup oauth related code
- Work around non-reentrant code
- Cleanup OAuthScene and more tweaks to initSpecs
- Better memory handling
- chore: clean up extension-utils package.json
- feat: move specs to redux

* fix: type and diff scene related issues

* fix: stop diff links from reloading

* fix: DiffScene back/forward browser button behaviour
DiffScene did not handle changes in route when back or forward button
pressed. This change has the react router driving the changes to state.
If diff changes, history is updated. History updates state. When back/forward
button pressed, history is update and again history updates state.

* fix: route from diff page
Setting of current spec has been hoisted to ApiExplorer. ApiExplorer monitors the current
route and sets the current spec if route is different from current spec. Added a check in
the rendering to make sure that the current spec is set correctly before it allows the
router component to render. Renders the loading component instead which I think is okay
but may need to be revisited.

ApiSpecSelector has been modified to ONLY change the route.

This means that if a component needs to switch spec all it needs to do is modify the route
(diff component showing detail for example).

* fix: initial load issue

Co-authored-by: Bryn Ryans <bnryans@google.com>
Co-authored-by: John Kaster <kaster@google.com>

Author: 3 people

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>