Merge pull request #464 from smiclea/cache-wizard

Cache wizard options calls with reload ability

src/components/organisms/WizardPageContent/WizardPageContent.jsx

@@ -21,6 +21,7 @@ import { observer } from 'mobx-react'
 import EndpointLogos from '../../atoms/EndpointLogos'
 import WizardType from '../../molecules/WizardType'
 import Button from '../../atoms/Button'
+import InfoIcon from '../../atoms/InfoIcon'
 import WizardBreadcrumbs from '../../molecules/WizardBreadcrumbs'
 import WizardEndpointList from '../WizardEndpointList'
 import WizardInstances from '../WizardInstances'
@@ -60,11 +61,31 @@ const Wrapper = styled.div`
   flex-direction: column;
 `
 const Header = styled.div`
+  display: flex;
+  position: relative;
+  margin-bottom: 32px;
+  align-items: center;
+`
+const HeaderLabel = styled.div`
   text-align: center;
   font-size: 32px;
   font-weight: ${StyleProps.fontWeights.light};
   color: ${Palette.primary};
-  margin-bottom: 32px;
+  width: 100%;
+`
+const HeaderReload = styled.div`
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 0;
+`
+const HeaderReloadLabel = styled.div`
+  font-size: 10px;
+  color: ${Palette.grayscale[4]};
+  &:hover {
+    color: ${Palette.primary};
+  }
+  cursor: pointer;
 `
 const Body = styled.div`
   flex-grow: 1;
@@ -163,6 +184,7 @@ type Props = {
   onScheduleChange: (scheduleId: string, schedule: ScheduleType) => void,
   onScheduleRemove: (scheudleId: string) => void,
   onContentRef: (ref: any) => void,
+  onReloadOptionsClick: () => void,
 }
 type TimezoneValue = 'local' | 'utc'
 type State = {
@@ -270,12 +292,27 @@ class WizardPageContent extends React.Component<Props, State> {
 
   renderHeader() {
     let title = this.props.page.title
-
-    if (this.props.page.id === 'type') {
+    let pageId = this.props.page.id
+    if (pageId === 'type') {
       title += ` ${this.props.type.charAt(0).toUpperCase() + this.props.type.substr(1)}`
     }
 
-    return <Header data-test-id={`${testName}-header`}>{title}</Header>
+    return (
+      <Header>
+        <HeaderLabel data-test-id={`${testName}-header`}>{title}</HeaderLabel>
+        {pageId === 'source-options' || pageId === 'dest-options' ? (
+          <HeaderReload>
+            <HeaderReloadLabel onClick={() => { this.props.onReloadOptionsClick() }}>Reload Options</HeaderReloadLabel>
+            <InfoIcon
+              text="Options may be cached by the UI. Here you can reload them from the API."
+              marginBottom={0}
+              marginLeft={8}
+              filled
+            />
+          </HeaderReload>
+        ) : null}
+      </Header>
+    )
   }
 
   renderBody() {

src/components/pages/WizardPage/WizardPage.jsx

@@ -224,11 +224,13 @@ class WizardPage extends React.Component<Props, State> {
       providerName: source.type,
       schemaType: this.state.type,
       optionsType: 'source',
+      useCache: true,
     })
     source && providerStore.getOptionsValues({
       optionsType: 'source',
       endpointId: source.id,
       providerName: source.type,
+      useCache: true,
     })
   }
 
@@ -244,12 +246,14 @@ class WizardPage extends React.Component<Props, State> {
       providerName: target.type,
       schemaType: this.state.type,
       optionsType: 'destination',
+      useCache: true,
     })
     // Preload destination options values
     providerStore.getOptionsValues({
       optionsType: 'destination',
       endpointId: target.id,
       providerName: target.type,
+      useCache: true,
     })
   }
 
@@ -341,6 +345,25 @@ class WizardPage extends React.Component<Props, State> {
     wizardStore.removeSchedule(scheduleId)
   }
 
+  async handleReloadOptionsClick() {
+    let optionsType: 'source' | 'destination' = wizardStore.currentPage.id === 'source-options' ? 'source' : 'destination'
+    let endpoint = optionsType === 'source' ? wizardStore.data.source : wizardStore.data.target
+    if (!endpoint) {
+      return
+    }
+    await providerStore.loadOptionsSchema({
+      providerName: endpoint.type,
+      schemaType: this.state.type,
+      optionsType,
+    })
+    await providerStore.getOptionsValues({
+      optionsType,
+      endpointId: endpoint.id,
+      providerName: endpoint.type,
+    })
+    await this.loadExtraOptions(undefined, optionsType, false)
+  }
+
   initializeState() {
     wizardStore.getDataFromPermalink()
     let type = this.props.match && this.props.match.params.type
@@ -349,7 +372,7 @@ class WizardPage extends React.Component<Props, State> {
     }
   }
 
-  loadExtraOptions(field?: Field, type: 'source' | 'destination') {
+  loadExtraOptions(field?: Field, type: 'source' | 'destination', useCache: boolean = true) {
     let endpoint = type === 'source' ? wizardStore.data.source : wizardStore.data.target
     if (!endpoint) {
       return
@@ -369,6 +392,7 @@ class WizardPage extends React.Component<Props, State> {
       endpointId: endpoint.id,
       providerName: endpoint.type,
       envData,
+      useCache,
     })
   }
 
@@ -382,6 +406,7 @@ class WizardPage extends React.Component<Props, State> {
         providerName: endpoint.type,
         schemaType: this.state.type,
         optionsType,
+        useCache: true,
       })
 
       // Preload source options if data is set from 'Permalink'
@@ -390,6 +415,7 @@ class WizardPage extends React.Component<Props, State> {
           optionsType,
           endpointId: endpoint.id,
           providerName: endpoint.type,
+          useCache: true,
         })
         await this.loadExtraOptions(undefined, optionsType)
       }
@@ -567,6 +593,7 @@ class WizardPage extends React.Component<Props, State> {
             onScheduleChange={(scheduleId, data) => { this.handleScheduleChange(scheduleId, data) }}
             onScheduleRemove={scheduleId => { this.handleScheduleRemove(scheduleId) }}
             onContentRef={ref => { this.contentRef = ref }}
+            onReloadOptionsClick={() => { this.handleReloadOptionsClick() }}
           />}
         />
         <Modal

src/utils/Cacher.js

@@ -3,8 +3,7 @@
 import type { Cache } from '../types/Cache'
 
 const MAX_ITEMS = 100
-
-const DEFAULT_MAX_AGE = 15 * 60 * 1000 // 15 minutes
+const DEFAULT_MAX_AGE = 30 * 60 * 1000 // 30 minutes
 const STORE = 'api-cacher'
 
 class Cacher {