Use presence of meltano_sdk keyword to display SDK settings (#1709)

meltano · Mar 20, 2024 · 427f15b · 427f15b
1 parent 27f3ac1
commit 427f15b
Showing 1 changed file with 25 additions and 17 deletions.
diff --git a/src/components/PluginSettingsSection.vue b/src/components/PluginSettingsSection.vue
@@ -9,18 +9,18 @@
         find the setting you're looking for, click on any setting name from the list:
       </p>
       <ul class="list-disc list-inside pl-4">
-        <li v-for="(setting, index) in definedSettings()" v-bind:key="index">
-          <a :href="getSettingHref(setting)"
+        <li v-for="(setting, index) in definedSettings" v-bind:key="index">
+          <a :href="setting.href"
             ><code>{{ setting.name }}</code></a
           >
         </li>
       </ul>
-      <div v-if="sdkSettings().length > 0">
+      <div v-if="sdkSettings.length > 0">
         <details>
           <summary class="text-xl pb-4 pt-4 font-bold font-hg">Expand To Show SDK Settings</summary>
           <ul class="list-disc list-inside pl-4">
-            <li v-for="(setting, index) in sdkSettings()" v-bind:key="index">
-              <a :href="getSettingHref(setting)"
+            <li v-for="(setting, index) in sdkSettings" v-bind:key="index">
+              <a :href="setting.href"
                 ><code>{{ setting.name }}</code></a
               >
             </li>
@@ -54,7 +54,7 @@
         >
         that defines the settings for this plugin.
       </p>
-      <span class="mt-6" v-for="(setting, index) in definedSettings()" v-bind:key="index">
+      <span class="mt-6" v-for="(setting, index) in definedSettings" v-bind:key="index">
         <p class="mt-3 text-xl" :id="setting.name.replace(/\./g, '-') + '-setting'">
           <code>{{ setting.label }} ({{ setting.name }})</code>
         </p>
@@ -84,14 +84,12 @@
         ><code >meltano config {{ name }} set {{ setting.name.replace(".", " ") }} [value]</code></pre>
       </span>
 
-      <div v-if="sdkSettings().length > 0">
-        <details
-          :open="sdkSettings().some((setting) => getSettingHref(setting) === this.$route.hash)"
-        >
+      <div v-if="sdkSettings.length > 0">
+        <details :open="sdkSettings.some((setting) => setting.href === this.$route.hash)">
           <summary class="text-2xl pb-4 pt-4 font-bold font-hg">
             Expand To Show SDK Settings
           </summary>
-          <span class="mt-6" v-for="(setting, index) in sdkSettings()" v-bind:key="index">
+          <span class="mt-6" v-for="(setting, index) in sdkSettings" v-bind:key="index">
             <p class="mt-3 text-xl" :id="setting.name.replace(/\./g, '-') + '-setting'">
               <code>{{ setting.label }} ({{ setting.name }})</code>
             </p>
@@ -155,15 +153,25 @@ export default {
       ],
     };
   },
-  methods: {
+  computed: {
+    $settingsWithHref() {
+      return this.settings.map((setting) => ({
+        ...setting,
+        href: `#${setting.name.replace(/\./g, "-")}-setting`,
+      }));
+    },
+    $isSdkPlugin() {
+      return this.$page.plugins.keywords.includes("meltano_sdk");
+    },
     definedSettings() {
-      return this.settings.filter((setting) => !this.hardcodedValues.includes(setting.name));
+      return this.$isSdkPlugin
+        ? this.$settingsWithHref.filter((setting) => !this.hardcodedValues.includes(setting.name))
+        : this.$settingsWithHref;
     },
     sdkSettings() {
-      return this.settings.filter((setting) => this.hardcodedValues.includes(setting.name));
-    },
-    getSettingHref(setting) {
-      return `#${setting.name.replace(/\./g, "-")}-setting`;
+      return this.$isSdkPlugin
+        ? this.$settingsWithHref.filter((setting) => this.hardcodedValues.includes(setting.name))
+        : [];
     },
   },
 };