feat(vision): allow specifying custom api version

sanity-io · Mar 26, 2021 · 63bef3e · 63bef3e
1 parent 14a5dc1
commit 63bef3e
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 3 deletions.
diff --git a/packages/@sanity/vision/src/apiVersions.js b/packages/@sanity/vision/src/apiVersions.js
@@ -1 +1 @@
-export const apiVersions = ['v1', 'vX', 'v2020-03-15']
+export const apiVersions = ['v1', 'vX', 'v2020-03-25']
diff --git a/packages/@sanity/vision/src/components/VisionGui.js b/packages/@sanity/vision/src/components/VisionGui.js
@@ -78,6 +78,7 @@ class VisionGui extends React.PureComponent {
 
     this.handleChangeDataset = this.handleChangeDataset.bind(this)
     this.handleChangeApiVersion = this.handleChangeApiVersion.bind(this)
+    this.handleCustomApiVersionChange = this.handleCustomApiVersionChange.bind(this)
     this.handleListenExecution = this.handleListenExecution.bind(this)
     this.handleListenerCancellation = this.handleListenerCancellation.bind(this)
     this.handleListenerMutation = this.handleListenerMutation.bind(this)
@@ -166,12 +167,42 @@ class VisionGui extends React.PureComponent {
 
   handleChangeApiVersion(evt) {
     const apiVersion = evt.target.value
+    if (apiVersion === 'other') {
+      this.setState({customApiVersion: true})
+      return
+    }
+
     storeState('apiVersion', apiVersion)
-    this.setState({apiVersion})
+    this.setState({apiVersion, customApiVersion: undefined})
     this.client.config({apiVersion})
     this.handleQueryExecution()
   }
 
+  handleCustomApiVersionChange(evt) {
+    const customApiVersion = evt.target.value
+    const parseableApiVersion = customApiVersion
+      .replace(/^v/, '')
+      .trim()
+      .match(/^\d{4}-\d{2}-\d{2}$/)
+
+    const isValidApiVersion = !isNaN(Date.parse(parseableApiVersion))
+
+    this.setState(
+      (prevState) => ({
+        apiVersion: isValidApiVersion ? customApiVersion : prevState.apiVersion,
+        customApiVersion: customApiVersion || true,
+        isValidApiVersion,
+      }),
+      () => {
+        if (!this.state.isValidApiVersion) {
+          return
+        }
+
+        this.client.config({apiVersion: this.state.customApiVersion})
+      }
+    )
+  }
+
   handleListenerMutation(mut) {
     // eslint-disable-next-line react/no-access-state-in-setstate
     const listenMutations = [mut].concat(this.state.listenMutations)
@@ -306,6 +337,8 @@ class VisionGui extends React.PureComponent {
       listenMutations,
       apiVersion,
       dataset,
+      customApiVersion,
+      isValidApiVersion,
     } = this.state
     const styles = this.context.styles.visionGui
     const hasResult = !error && !queryInProgress && typeof result !== 'undefined'
@@ -342,14 +375,37 @@ class VisionGui extends React.PureComponent {
                 <Card padding={2}>
                   <Label>API version</Label>
                 </Card>
-                <Select value={apiVersion} onChange={this.handleChangeApiVersion}>
+                <Select
+                  value={customApiVersion ? 'other' : apiVersion}
+                  onChange={this.handleChangeApiVersion}
+                >
                   {apiVersions.map((version) => (
                     <option key={version}>{version}</option>
                   ))}
+                  <option key="other" value="other">
+                    Other
+                  </option>
                 </Select>
               </Stack>
             </Box>
 
+            {/* Custom API version input */}
+            {customApiVersion && (
+              <Box padding={1}>
+                <Stack>
+                  <Card padding={2}>
+                    <Label>Custom API version</Label>
+                  </Card>
+
+                  <TextInput
+                    value={typeof customApiVersion === 'string' ? customApiVersion : ''}
+                    onChange={this.handleCustomApiVersionChange}
+                    customValidity={isValidApiVersion ? undefined : 'Invalid API version'}
+                  />
+                </Stack>
+              </Box>
+            )}
+
             {/* Query URL (for copying) */}
             {typeof url === 'string' ? (
               <Box padding={1} flex={1}>