Skip to content

Commit

Permalink
chore: move specs into redux and cleanup oauth related code (#976)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@josephaxisa @bryans99 @jkaster
3 people authored Feb 14, 2022
1 parent 571a817 commit 5e9a221
Show file tree
Hide file tree
Showing 82 changed files with 1,227 additions and 1,432 deletions.
6 changes: 3 additions & 3 deletions examples/access-token-server/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -35,4 +35,4 @@
"ts-node": "^10.2.1",
"typescript": "^4.4.3"
}
}
}
32 changes: 21 additions & 11 deletions examples/access-token-server/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions packages/api-explorer/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
119 changes: 45 additions & 74 deletions packages/api-explorer/src/ApiExplorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
Expand All @@ -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)
Expand All @@ -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)
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 5e9a221

Please sign in to comment.