From 247002754a888559cd01bb64f64cc5349dc58502 Mon Sep 17 00:00:00 2001
From: "deepsource-autofix[bot]"
 <62050782+deepsource-autofix[bot]@users.noreply.github.com>
Date: Mon, 8 Aug 2022 10:32:49 +0000
Subject: [PATCH] Format code with prettier

This commit fixes the style issues introduced in f30d07d according to the output
from prettier.

Details: https://deepsource.io/gh/niranjan94/rest-data-connector/transform/e0b6a5d8-ed71-4a62-8473-cbb867c689ad/
---
 src/components/ApiItem.vue           | 241 ++++++++++--------
 src/components/rest/DataView.vue     | 362 +++++++++++++++------------
 src/components/rest/RestExplorer.vue | 272 +++++++++++---------
 src/config.js                        |   7 +-
 4 files changed, 503 insertions(+), 379 deletions(-)

diff --git a/src/components/ApiItem.vue b/src/components/ApiItem.vue
index cd94cb8..6f3f3ce 100644
--- a/src/components/ApiItem.vue
+++ b/src/components/ApiItem.vue
@@ -1,50 +1,73 @@
 <template>
   <b-card no-body class="mb-1">
     <b-card-header header-tag="header" class="p-1" role="tab">
-      <b-btn class="endpoint-btn" block href="#" v-b-toggle="uuid" variant="link">
-        <b-badge variant="success" class="method-badge">{{method}}</b-badge>
-        <strong>{{definition.endpoint}}</strong>
-        <span class="text-muted" style="float: right">{{definition.summary}}</span>
+      <b-btn
+        class="endpoint-btn"
+        block
+        href="#"
+        v-b-toggle="uuid"
+        variant="link"
+      >
+        <b-badge variant="success" class="method-badge">{{ method }}</b-badge>
+        <strong>{{ definition.endpoint }}</strong>
+        <span class="text-muted" style="float: right">{{
+          definition.summary
+        }}</span>
       </b-btn>
     </b-card-header>
     <b-collapse :id="uuid" accordion="my-accordion" role="tabpanel">
       <b-card-body>
         <b-form @submit="onSubmit" autocomplete="off">
-          <table v-if="definition.parameters.length" class="table table-sm parameters-table">
+          <table
+            v-if="definition.parameters.length"
+            class="table table-sm parameters-table"
+          >
             <thead>
-            <tr>
-              <th scope="col">Parameters</th>
-              <th scope="col">Value</th>
-              <th scope="col">Description</th>
-              <th scope="col">Parameter Type</th>
-              <th scope="col">Data Type</th>
-            </tr>
+              <tr>
+                <th scope="col">Parameters</th>
+                <th scope="col">Value</th>
+                <th scope="col">Description</th>
+                <th scope="col">Parameter Type</th>
+                <th scope="col">Data Type</th>
+              </tr>
             </thead>
             <tbody>
-            <tr v-for="(parameter, index) in definition.parameters" :key="index">
-              <th scope="row">{{parameter.name}}</th>
-              <td>
-                <b-form-select v-if="parameter.enum"
-                               v-model="parameter.value"
-                               :options="parameter.enum"
-                               size="sm"
-                               :disabled="requestInProgress"
-                               :required="parameter.required"></b-form-select>
-                <b-form-input v-else
-                              :type="parameter.htmlType"
-                              size="sm"
-                              v-model.trim="parameter.value"
-                              :disabled="requestInProgress"
-                              :required="parameter.required"></b-form-input>
-              </td>
-              <td>{{parameter.description}}</td>
-              <td>{{parameter.in}}</td>
-              <td>{{parameter.type}}</td>
-            </tr>
+              <tr
+                v-for="(parameter, index) in definition.parameters"
+                :key="index"
+              >
+                <th scope="row">{{ parameter.name }}</th>
+                <td>
+                  <b-form-select
+                    v-if="parameter.enum"
+                    v-model="parameter.value"
+                    :options="parameter.enum"
+                    size="sm"
+                    :disabled="requestInProgress"
+                    :required="parameter.required"
+                  ></b-form-select>
+                  <b-form-input
+                    v-else
+                    :type="parameter.htmlType"
+                    size="sm"
+                    v-model.trim="parameter.value"
+                    :disabled="requestInProgress"
+                    :required="parameter.required"
+                  ></b-form-input>
+                </td>
+                <td>{{ parameter.description }}</td>
+                <td>{{ parameter.in }}</td>
+                <td>{{ parameter.type }}</td>
+              </tr>
             </tbody>
           </table>
-          <b-button type="submit" size="sm" variant="secondary" :disabled="requestInProgress">
-            {{requestInProgress ? 'Loading ...' : 'Get data'}}
+          <b-button
+            type="submit"
+            size="sm"
+            variant="secondary"
+            :disabled="requestInProgress"
+          >
+            {{ requestInProgress ? "Loading ..." : "Get data" }}
           </b-button>
         </b-form>
       </b-card-body>
@@ -53,87 +76,97 @@
 </template>
 
 <script>
-  import { makeRequest } from '../utils/make-request';
-  import { getErrorMessage } from '../utils/errors';
-  import Raven from 'raven-js';
-  import { supportedContentTypes } from '@/config';
+import { makeRequest } from "../utils/make-request";
+import { getErrorMessage } from "../utils/errors";
+import Raven from "raven-js";
+import { supportedContentTypes } from "@/config";
 
-  export default {
-    name  : 'ApiItem',
-    props : ['url', 'definition', 'requestConfig'],
-    data() {
-      return {
-        method            : 'get',
-        uuid              : this.$uuid.v4(),
-        requestInProgress : false
-      };
-    },
-    methods: {
-      onSubmit(e) {
-        e.preventDefault();
-        this.requestInProgress = true;
-        makeRequest(this.method, this.definition.endpoint, this.definition.parameters)
-          .then(response => {
-            this.requestInProgress = false;
-
-            const contentType = response.headers.get('content-type').split(';')[0].toLowerCase();
+export default {
+  name: "ApiItem",
+  props: ["url", "definition", "requestConfig"],
+  data() {
+    return {
+      method: "get",
+      uuid: this.$uuid.v4(),
+      requestInProgress: false,
+    };
+  },
+  methods: {
+    onSubmit(e) {
+      e.preventDefault();
+      this.requestInProgress = true;
+      makeRequest(
+        this.method,
+        this.definition.endpoint,
+        this.definition.parameters
+      )
+        .then((response) => {
+          this.requestInProgress = false;
 
-            if (!supportedContentTypes.includes(contentType)) {
-              return this.$notify({
-                type  : 'error',
-                title : 'Unsupported response type ' + contentType,
-                text  : 'Only xml and json are supported'
-              });
-            }
+          const contentType = response.headers
+            .get("content-type")
+            .split(";")[0]
+            .toLowerCase();
 
-            this.$emit('result', {
-              contentType,
-              data          : response.body,
-              definition    : this.definition,
-              requestConfig : this.requestConfig,
-              url           : this.url
-            });
-          })
-          .catch(e => {
-            console.error(e);
-            Raven.captureException(e);
-            this.requestInProgress = false;
-            this.$notify({
-              type  : 'error',
-              title : 'Request failed',
-              text  : `<strong>Endpoint:</strong> ${this.definition.endpoint}<br><strong>Reason:</strong> ${getErrorMessage(e.body)}`
+          if (!supportedContentTypes.includes(contentType)) {
+            return this.$notify({
+              type: "error",
+              title: "Unsupported response type " + contentType,
+              text: "Only xml and json are supported",
             });
+          }
+
+          this.$emit("result", {
+            contentType,
+            data: response.body,
+            definition: this.definition,
+            requestConfig: this.requestConfig,
+            url: this.url,
+          });
+        })
+        .catch((e) => {
+          console.error(e);
+          Raven.captureException(e);
+          this.requestInProgress = false;
+          this.$notify({
+            type: "error",
+            title: "Request failed",
+            text: `<strong>Endpoint:</strong> ${
+              this.definition.endpoint
+            }<br><strong>Reason:</strong> ${getErrorMessage(e.body)}`,
           });
-      }
-    }
-  };
+        });
+    },
+  },
+};
 </script>
 
 <style scoped>
-  .endpoint-btn {
-    text-align: left;
-    text-decoration: none !important;
-    color: inherit !important;
-  }
+.endpoint-btn {
+  text-align: left;
+  text-decoration: none !important;
+  color: inherit !important;
+}
 
-  .method-badge {
-    margin-right: 8px;
-    text-transform: uppercase;
-  }
+.method-badge {
+  margin-right: 8px;
+  text-transform: uppercase;
+}
 
-  .card-body {
-    padding: 1rem;
-  }
+.card-body {
+  padding: 1rem;
+}
 
-  .parameters-table {
-    font-size: small;
-  }
+.parameters-table {
+  font-size: small;
+}
 
-  .parameters-table input, .parameters-table select {
-    font-size: 10px;
-  }
+.parameters-table input,
+.parameters-table select {
+  font-size: 10px;
+}
 
-  .parameters-table td {
-    vertical-align: middle;
-  }
+.parameters-table td {
+  vertical-align: middle;
+}
 </style>
diff --git a/src/components/rest/DataView.vue b/src/components/rest/DataView.vue
index 99b4094..283a41c 100644
--- a/src/components/rest/DataView.vue
+++ b/src/components/rest/DataView.vue
@@ -1,202 +1,248 @@
 <template>
-  <b-modal size="lg"
-           v-model="isModelOpen"
-           @ok="onOkay"
-           title="Export Data"
-           :ok-disabled="!inTableau"
-           :ok-title="inTableau ? 'Load into Tableau' : 'Run connector from tableau to load'">
+  <b-modal
+    size="lg"
+    v-model="isModelOpen"
+    @ok="onOkay"
+    title="Export Data"
+    :ok-disabled="!inTableau"
+    :ok-title="
+      inTableau ? 'Load into Tableau' : 'Run connector from tableau to load'
+    "
+  >
     <div v-if="result.definition">
-      <code>{{result.definition.endpoint}}</code> - <span class="text-muted">{{result.definition.summary}}</span>
-      <hr>
+      <code>{{ result.definition.endpoint }}</code> -
+      <span class="text-muted">{{ result.definition.summary }}</span>
+      <hr />
     </div>
 
     <b-form @submit="onOkay">
-
-      <b-form-group v-if="result.contentType === 'application/xml'" label="XML Parsing options" label-size="sm" label-for="parsingOptions">
-        <b-form-checkbox-group id="parsingOptions" name="parsingOptions" v-model="parsingOptions">
-          <b-form-checkbox value="ignoreAttributes">Skip attributes</b-form-checkbox>
+      <b-form-group
+        v-if="result.contentType === 'application/xml'"
+        label="XML Parsing options"
+        label-size="sm"
+        label-for="parsingOptions"
+      >
+        <b-form-checkbox-group
+          id="parsingOptions"
+          name="parsingOptions"
+          v-model="parsingOptions"
+        >
+          <b-form-checkbox value="ignoreAttributes"
+            >Skip attributes</b-form-checkbox
+          >
           <b-form-checkbox value="collapseText">Collapse Text</b-form-checkbox>
         </b-form-checkbox-group>
       </b-form-group>
 
-      <tree-view :data="parsedData" :options="treeViewOptions"/>
-      <hr>
-
-      <b-form-group label="Path to export:"
-                    label-for="pathToExport"
-                    label-size="sm"
-                    :description="pathDescription + ' <br> Preview the data below before proceeding.'">
-
-
+      <tree-view :data="parsedData" :options="treeViewOptions" />
+      <hr />
+
+      <b-form-group
+        label="Path to export:"
+        label-for="pathToExport"
+        label-size="sm"
+        :description="
+          pathDescription + ' <br> Preview the data below before proceeding.'
+        "
+      >
         <b-input-group size="sm">
-          <b-form-input id="pathToExport"
-                        type="text"
-                        v-model="pathToExport">
+          <b-form-input id="pathToExport" type="text" v-model="pathToExport">
           </b-form-input>
           <b-input-group-append>
-            <b-btn :pressed="useJsonPath" variant="info" v-on:click="onPathTypeToggle">JSON Path</b-btn>
-            <b-btn :pressed="!useJsonPath" variant="info" v-on:click="onPathTypeToggle">Dot-notation</b-btn>
+            <b-btn
+              :pressed="useJsonPath"
+              variant="info"
+              v-on:click="onPathTypeToggle"
+              >JSON Path</b-btn
+            >
+            <b-btn
+              :pressed="!useJsonPath"
+              variant="info"
+              v-on:click="onPathTypeToggle"
+              >Dot-notation</b-btn
+            >
           </b-input-group-append>
         </b-input-group>
-
       </b-form-group>
 
-      <b-form-group label="Export options" label-size="sm" label-for="exportOptions">
-        <b-form-checkbox-group id="exportOptions" name="exportOptions" v-model="exportOptions">
-          <b-form-checkbox value="flattenObject">Flatten Object</b-form-checkbox>
+      <b-form-group
+        label="Export options"
+        label-size="sm"
+        label-for="exportOptions"
+      >
+        <b-form-checkbox-group
+          id="exportOptions"
+          name="exportOptions"
+          v-model="exportOptions"
+        >
+          <b-form-checkbox value="flattenObject"
+            >Flatten Object</b-form-checkbox
+          >
         </b-form-checkbox-group>
       </b-form-group>
 
-      <tree-view :data="dataToExport" :options="dataToExportTreeViewOptions"/>
-
-      <hr>
-
-      <b-form-group label="Name for the connector:"
-                    label-for="connectorName"
-                    label-size="sm">
-        <b-form-input id="connectorName"
-                      type="text"
-                      size="sm"
-                      v-model="connectorName">
+      <tree-view :data="dataToExport" :options="dataToExportTreeViewOptions" />
+
+      <hr />
+
+      <b-form-group
+        label="Name for the connector:"
+        label-for="connectorName"
+        label-size="sm"
+      >
+        <b-form-input
+          id="connectorName"
+          type="text"
+          size="sm"
+          v-model="connectorName"
+        >
         </b-form-input>
       </b-form-group>
-
     </b-form>
   </b-modal>
-
 </template>
 
 <script>
-  import { isEmpty, keys, get } from 'lodash-es';
-  import { sendToTableau } from '../../utils/tableau/send';
-  import { xml2js } from 'xml-js';
-  import { collapseKey, collapseObject } from '../../utils/parsing';
-  import jp from 'jsonpath';
+import { isEmpty, keys, get } from "lodash-es";
+import { sendToTableau } from "../../utils/tableau/send";
+import { xml2js } from "xml-js";
+import { collapseKey, collapseObject } from "../../utils/parsing";
+import jp from "jsonpath";
+
+export default {
+  name: "DataView",
+  props: ["openDataView", "result"],
+  data() {
+    let connectorName = this.result.definition
+      ? this.result.definition.summary
+      : this.result.url;
+    if (isEmpty(connectorName)) {
+      connectorName = this.$uuid.v4();
+    }
+    return {
+      isModelOpen: !!this.openDataView,
+      pathToExport: "",
+      useJsonPath: true,
+      connectorName,
+      parsingOptions: ["ignoreAttributes", "collapseText"],
+      exportOptions: [],
+    };
+  },
+  methods: {
+    onOkay(e) {
+      e.preventDefault();
+      let cleanedPath = this.pathToExport.trim();
+      if (!this.useJsonPath) {
+        cleanedPath = cleanedPath.replace(/^root\./, "");
+      }
 
-  export default {
-    name: 'DataView',
-    props: ['openDataView', 'result'],
-    data() {
-      let connectorName = (this.result.definition ? this.result.definition.summary : this.result.url);
-      if(isEmpty(connectorName)) {
-        connectorName = this.$uuid.v4();
+      if (!this.dataToExport) {
+        this.$notify({
+          type: "error",
+          title: "Invalid data path",
+          text: `<code>${this.pathToExport}</code>&nbsp;&nbsp;is invalid. Try again.`,
+        });
+        return;
       }
-      return {
-        isModelOpen: !!this.openDataView,
-        pathToExport: '',
-        useJsonPath: true,
-        connectorName,
-        parsingOptions: ['ignoreAttributes', 'collapseText'],
-        exportOptions: []
-      };
+      sendToTableau(this.dataToExport, this.connectorName, cleanedPath);
     },
-    methods: {
-      onOkay(e) {
-        e.preventDefault();
-        let cleanedPath = this.pathToExport.trim();
-        if (!this.useJsonPath) {
-          cleanedPath = cleanedPath.replace(/^root\./, '');
-        }
-
-        if(!this.dataToExport) {
-          this.$notify({
-            type: 'error',
-            title: 'Invalid data path',
-            text: `<code>${this.pathToExport}</code>&nbsp;&nbsp;is invalid. Try again.`
+    onPathTypeToggle() {
+      this.useJsonPath = !this.useJsonPath;
+    },
+  },
+  computed: {
+    pathDescription() {
+      return this.useJsonPath
+        ? "Enter the <a href='http://goessner.net/articles/JsonPath/'>JSONPath</a> to load into Tableau (eg. <code>$.data</code>, <code>$.meta</code>). Leave blank to load everything."
+        : "Enter the path to load into Tableau (eg. <code>root.data</code>, <code>root.meta</code>, <code>root</code>)";
+    },
+    parsedData() {
+      switch (this.result.contentType) {
+        case "text/json":
+        case "application/json":
+          return this.result.data;
+        case "text/xml":
+        case "application/xml": {
+          let object = xml2js(this.result.data, {
+            compact: true,
+            ignoreCdata: true,
+            ignoreDoctype: true,
+            ignoreInstruction: true,
+            ignoreAttributes: this.parsingOptions.includes("ignoreAttributes"),
+            ignoreDeclaration: true,
+            nativeType: true,
+            trim: true,
           });
-          return;
+          console.log(object);
+          if (this.parsingOptions.includes("collapseText")) {
+            object = collapseKey(object, "_text");
+          }
+          return object;
         }
-        sendToTableau(this.dataToExport, this.connectorName, cleanedPath);
-      },
-      onPathTypeToggle() {
-        this.useJsonPath = !this.useJsonPath;
       }
+      return {};
     },
-    computed: {
-      pathDescription() {
-        return this.useJsonPath ? 'Enter the <a href=\'http://goessner.net/articles/JsonPath/\'>JSONPath</a> to load into Tableau (eg. <code>$.data</code>, <code>$.meta</code>). Leave blank to load everything.': 'Enter the path to load into Tableau (eg. <code>root.data</code>, <code>root.meta</code>, <code>root</code>)';
-      },
-      parsedData() {
-        switch (this.result.contentType) {
-          case 'text/json':
-          case 'application/json':
-            return this.result.data;
-          case 'text/xml':
-          case 'application/xml': {
-            let object = xml2js(this.result.data, {
-              compact           : true,
-              ignoreCdata       : true,
-              ignoreDoctype     : true,
-              ignoreInstruction : true,
-              ignoreAttributes : this.parsingOptions.includes('ignoreAttributes'),
-              ignoreDeclaration : true,
-              nativeType        : true,
-              trim              : true,
-            });
-            console.log(object);
-            if (this.parsingOptions.includes('collapseText')) {
-              object = collapseKey(object, '_text');
-            }
-            return object;
-          }
-        }
-        return {};
-      },
-      dataToExport() {
-        let cleanedPath = this.pathToExport.trim();
-        if (!this.useJsonPath) {
-          cleanedPath = cleanedPath.replace(/^root\./, '');
-        }
-        let data = this.parsedData;
-        if(cleanedPath !== '') {
-          if (this.useJsonPath) {
-            data = jp.query(data, cleanedPath);
-          } else {
-            data = get(data, cleanedPath);
-          }
+    dataToExport() {
+      let cleanedPath = this.pathToExport.trim();
+      if (!this.useJsonPath) {
+        cleanedPath = cleanedPath.replace(/^root\./, "");
+      }
+      let data = this.parsedData;
+      if (cleanedPath !== "") {
+        if (this.useJsonPath) {
+          data = jp.query(data, cleanedPath);
+        } else {
+          data = get(data, cleanedPath);
         }
+      }
 
-        if (this.exportOptions.includes('flattenObject')) {
-          data = collapseObject(data);
-        }
+      if (this.exportOptions.includes("flattenObject")) {
+        data = collapseObject(data);
+      }
 
-        return data;
-      },
-      inTableau() {
-        return this.$store.state.inTableau;
-      },
-      treeViewOptions() {
-        if(!this.parsedData || keys(this.parsedData) > 10 || this.parsedData.length > 10) {
-          return {
-            maxDepth: 0
-          };
-        }
+      return data;
+    },
+    inTableau() {
+      return this.$store.state.inTableau;
+    },
+    treeViewOptions() {
+      if (
+        !this.parsedData ||
+        keys(this.parsedData) > 10 ||
+        this.parsedData.length > 10
+      ) {
         return {
-          maxDepth: 1
+          maxDepth: 0,
         };
-      },
-      dataToExportTreeViewOptions() {
-        if(!this.dataToExport || keys(this.dataToExport) > 10 || this.dataToExport.length > 10) {
-          return {
-            maxDepth: 0
-          };
-        }
+      }
+      return {
+        maxDepth: 1,
+      };
+    },
+    dataToExportTreeViewOptions() {
+      if (
+        !this.dataToExport ||
+        keys(this.dataToExport) > 10 ||
+        this.dataToExport.length > 10
+      ) {
         return {
-          maxDepth: 1
+          maxDepth: 0,
         };
       }
+      return {
+        maxDepth: 1,
+      };
     },
-    watch: {
-      isModelOpen(isModelOpen) {
-        this.$emit('update:openDataView', isModelOpen);
-      },
-      openDataView(openDataView) {
-        this.isModelOpen = !!openDataView;
-      }
-    }
-  };
+  },
+  watch: {
+    isModelOpen(isModelOpen) {
+      this.$emit("update:openDataView", isModelOpen);
+    },
+    openDataView(openDataView) {
+      this.isModelOpen = !!openDataView;
+    },
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/components/rest/RestExplorer.vue b/src/components/rest/RestExplorer.vue
index 6822061..42fe3c7 100644
--- a/src/components/rest/RestExplorer.vue
+++ b/src/components/rest/RestExplorer.vue
@@ -1,138 +1,178 @@
 <template>
   <b-container>
-    <br>
-    <not-tableau-alert/>
-    <url-auth :request-config.sync="requestConfig" :direct-mode="true" :with-method-picker="true"/>
-    <custom-headers :request-headers.sync="requestConfig.headers"/>
-    <body-editor :request-body.sync="requestBody" :method="requestConfig.method"/>
-    <data-view v-if="openDataView" :open-data-view.sync="openDataView" :result="result"/>
-    <br>
-    <b-button type="button" variant="info" @click="makeRequest" :disabled="requestInProgress">Make request</b-button>
+    <br />
+    <not-tableau-alert />
+    <url-auth
+      :request-config.sync="requestConfig"
+      :direct-mode="true"
+      :with-method-picker="true"
+    />
+    <custom-headers :request-headers.sync="requestConfig.headers" />
+    <body-editor
+      :request-body.sync="requestBody"
+      :method="requestConfig.method"
+    />
+    <data-view
+      v-if="openDataView"
+      :open-data-view.sync="openDataView"
+      :result="result"
+    />
+    <br />
+    <b-button
+      type="button"
+      variant="info"
+      @click="makeRequest"
+      :disabled="requestInProgress"
+      >Make request</b-button
+    >
   </b-container>
 </template>
 
 <script>
-  import NotTableauAlert from '../NotTableauAlert';
-  import { merge } from 'lodash-es';
-  import UrlAuth from './UrlAuth';
-  import CustomHeaders from './CustomHeaders';
-  import DataView from './DataView';
-  import BodyEditor from './BodyEditor';
-  import { makeRequest } from '../../utils/make-request';
-  import { modifyRequest } from '../../utils/interceptor';
-  import { getErrorMessage } from '../../utils/errors';
-  import { supportedContentTypes } from '@/config';
+import NotTableauAlert from "../NotTableauAlert";
+import { merge } from "lodash-es";
+import UrlAuth from "./UrlAuth";
+import CustomHeaders from "./CustomHeaders";
+import DataView from "./DataView";
+import BodyEditor from "./BodyEditor";
+import { makeRequest } from "../../utils/make-request";
+import { modifyRequest } from "../../utils/interceptor";
+import { getErrorMessage } from "../../utils/errors";
+import { supportedContentTypes } from "@/config";
 
-  export default {
-    components: {
-      BodyEditor,
-      DataView,
-      NotTableauAlert, UrlAuth, CustomHeaders },
-    name: 'RestExplorer',
-    data() {
-      let lastRequestConfig = localStorage.getItem('lastGenericRequestConfig');
-      if (lastRequestConfig) {
-        lastRequestConfig = JSON.parse(lastRequestConfig);
-      }
-      return {
-        result       : {},
-        openDataView : false,
-        requestBody  : {
-          value : null,
-          type  : 'none'
+export default {
+  components: {
+    BodyEditor,
+    DataView,
+    NotTableauAlert,
+    UrlAuth,
+    CustomHeaders,
+  },
+  name: "RestExplorer",
+  data() {
+    let lastRequestConfig = localStorage.getItem("lastGenericRequestConfig");
+    if (lastRequestConfig) {
+      lastRequestConfig = JSON.parse(lastRequestConfig);
+    }
+    return {
+      result: {},
+      openDataView: false,
+      requestBody: {
+        value: null,
+        type: "none",
+      },
+      requestInProgress: false,
+      requestConfig: merge(
+        {
+          authorizationMode: "none",
+          method: "GET",
+          baseUrl: "",
+          username: "",
+          password: "",
+          token: "",
+          headers: [],
+        },
+        lastRequestConfig || {}
+      ),
+    };
+  },
+  methods: {
+    makeRequest() {
+      let body = null;
+      const options = {
+        params: {},
+        before: (request) => {
+          modifyRequest(this.requestConfig, request);
         },
-        requestInProgress : false,
-        requestConfig     : merge({
-          authorizationMode : 'none',
-          method            : 'GET',
-          baseUrl           : '',
-          username          : '',
-          password          : '',
-          token             : '',
-          headers           : []
-        }, lastRequestConfig || {})
       };
-    },
-    methods: {
-      makeRequest() {
-        let body = null;
-        const options = {
-          params : {},
-          before : request => {
-            modifyRequest(this.requestConfig, request);
-          }
-        };
-        switch (this.requestBody.type) {
-          case 'raw':
-            body = this.requestBody.value;
-            break;
-          case 'query':
-            this.requestBody.value.forEach(item => body[item.name] = item.value);
-            break;
-          case 'form_data':
-            body = new FormData();
-            this.requestBody.value.forEach(item => body.append(item.name, item.value));
-            break;
-        }
-        this.requestInProgress = true;
-        makeRequest(this.requestConfig.method, this.requestConfig.baseUrl, null, body, options)
-          .then(response => {
-            this.requestInProgress = false;
+      switch (this.requestBody.type) {
+        case "raw":
+          body = this.requestBody.value;
+          break;
+        case "query":
+          this.requestBody.value.forEach(
+            (item) => (body[item.name] = item.value)
+          );
+          break;
+        case "form_data":
+          body = new FormData();
+          this.requestBody.value.forEach((item) =>
+            body.append(item.name, item.value)
+          );
+          break;
+      }
+      this.requestInProgress = true;
+      makeRequest(
+        this.requestConfig.method,
+        this.requestConfig.baseUrl,
+        null,
+        body,
+        options
+      )
+        .then((response) => {
+          this.requestInProgress = false;
 
-            const contentType = response.headers.get('content-type').split(';')[0].toLowerCase();
+          const contentType = response.headers
+            .get("content-type")
+            .split(";")[0]
+            .toLowerCase();
 
-            if (!supportedContentTypes.includes(contentType)) {
-              return this.$notify({
-                type  : 'error',
-                title : 'Unsupported response type ' + contentType,
-                text  : 'Only xml and json are supported'
-              });
-            }
+          if (!supportedContentTypes.includes(contentType)) {
+            return this.$notify({
+              type: "error",
+              title: "Unsupported response type " + contentType,
+              text: "Only xml and json are supported",
+            });
+          }
 
-            this.result = {
-              contentType,
-              data: response.body,
-              definition    : null,
-              requestConfig : this.requestConfig,
-              url           : this.requestConfig.baseUrl
-            };
-            this.openDataView = true;
-          })
-          .catch(e => {
-            console.error(e);
-            this.requestInProgress = false;
-            let errorMessage = getErrorMessage(e.body);
-            let text = `<strong>Reason:</strong> ${errorMessage}`;
+          this.result = {
+            contentType,
+            data: response.body,
+            definition: null,
+            requestConfig: this.requestConfig,
+            url: this.requestConfig.baseUrl,
+          };
+          this.openDataView = true;
+        })
+        .catch((e) => {
+          console.error(e);
+          this.requestInProgress = false;
+          let errorMessage = getErrorMessage(e.body);
+          let text = `<strong>Reason:</strong> ${errorMessage}`;
 
-            if (!errorMessage) {
-              text = `
+          if (!errorMessage) {
+            text = `
 <em>Code:</em> <strong>${e.status}</strong><br>
 <em>Status:</em> <strong>${JSON.stringify(e.statusText)}</strong><br>
 <em>Body:</em> <strong>${JSON.stringify(e.body)}</strong>
 `;
-            }
+          }
 
-            this.$notify({
-              type  : 'error',
-              title : e.status <= 0 ? 'Request failed due to <a href="https://tableau.github.io/webdataconnector/docs/wdc_cors" target="_blank" style="color: inherit;">possible CORS error.</a>' : 'Request failed',
-              text
-            });
+          this.$notify({
+            type: "error",
+            title:
+              e.status <= 0
+                ? 'Request failed due to <a href="https://tableau.github.io/webdataconnector/docs/wdc_cors" target="_blank" style="color: inherit;">possible CORS error.</a>'
+                : "Request failed",
+            text,
           });
-      }
+        });
     },
-    watch: {
-      requestConfig: {
-        handler(requestConfig) {
-          if (requestConfig) {
-            localStorage.setItem('lastGenericRequestConfig', JSON.stringify(requestConfig));
-          }
-        },
-        deep: true
-      }
-    }
-  };
+  },
+  watch: {
+    requestConfig: {
+      handler(requestConfig) {
+        if (requestConfig) {
+          localStorage.setItem(
+            "lastGenericRequestConfig",
+            JSON.stringify(requestConfig)
+          );
+        }
+      },
+      deep: true,
+    },
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/config.js b/src/config.js
index 926bdbe..d40f8f4 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1 +1,6 @@
-export const supportedContentTypes = ['application/json', 'application/xml', 'text/json', 'text/xml'];
+export const supportedContentTypes = [
+  "application/json",
+  "application/xml",
+  "text/json",
+  "text/xml",
+];