fix(spec-renderer): show try it in insomnia separately from try it [TDX-7288]

sandbox/pages/SpecRendererPlayground.vue

@@ -27,6 +27,13 @@
         >
         <label for="hide-tryit">Hide TryIt</label>
         |
+        <input
+          id="hide-tryit-insomnia"
+          v-model="hideTryItInsomnia"
+          type="checkbox"
+        >
+        <label for="hide-tryit-insomnia">Hide TryIt Insomnia</label>
+        |
         <input
           id="hide-navigation-buttons"
           v-model="hideNavigationButtons"
@@ -84,6 +91,7 @@
       :control-address-bar="true"
       :current-path="currentPath"
       :hide-deprecated="hideDeprecated"
+      :hide-insomnia-try-it="hideTryItInsomnia"
       :hide-navigation-buttons="hideNavigationButtons"
       :hide-schemas="hideSchemas"
       :hide-try-it="hideTryIt"
@@ -115,6 +123,7 @@ const currentPath = ref<string>(navigationType.value === 'path' ? route.path : r
 const hideSchemas = ref<boolean>(false)
 const hideDeprecated = ref<boolean>(false)
 const hideTryIt = ref<boolean>(false)
+const hideTryItInsomnia = ref<boolean>(false)
 const allowContentScrolling = ref<boolean>(true)
 const markdownStyles = ref<boolean>(true)
 const showPoweredBy = ref<boolean>(false)

src/components/spec-document/try-it/TryIt.spec.ts

@@ -175,4 +175,86 @@ describe('<TryIt />', () => {
     expect(code).toMatch('Choose file')
   })
 
+  it('should render component with insomnia option when hideTryIt is set to true', async () => {
+    const wrapper = mount(TryIt, {
+      props: {
+        data: {
+          id: '123',
+          method: 'post',
+          path: '/sample-path',
+          responses: [],
+          request: {
+            body: {
+              id: 'bodyId',
+              contents: [
+                {
+                  id: 'mediatypeId',
+                  mediaType: 'application/x-www-form-urlencoded',
+                },
+              ],
+            },
+          },
+          servers: [{
+            id: 'sample-server-id',
+            url: 'https://global.api.konghq.com/v2',
+          }],
+        },
+        requestBody: { isBinary: true, content: [{ name: 'test file.pdf' } as unknown as File] },
+        serverUrl: 'https://global.api.konghq.com/v2',
+      },
+      global: {
+        provide: {
+          ['hide-tryit']: ref(true),
+        },
+      },
+    })
+
+    await flushPromises()
+
+    const component = wrapper.findTestId('tryit-wrapper-123')
+
+    expect(component.exists()).toBe(true)
+  })
+
+  it('should render component with browser option when hideInsomniaTryIt is set to true', async () => {
+    const wrapper = mount(TryIt, {
+      props: {
+        data: {
+          id: '123',
+          method: 'post',
+          path: '/sample-path',
+          responses: [],
+          request: {
+            body: {
+              id: 'bodyId',
+              contents: [
+                {
+                  id: 'mediatypeId',
+                  mediaType: 'application/x-www-form-urlencoded',
+                },
+              ],
+            },
+          },
+          servers: [{
+            id: 'sample-server-id',
+            url: 'https://global.api.konghq.com/v2',
+          }],
+        },
+        requestBody: { isBinary: true, content: [{ name: 'test file.pdf' } as unknown as File] },
+        serverUrl: 'https://global.api.konghq.com/v2',
+      },
+      global: {
+        provide: {
+          ['hide-tryit']: ref(false),
+          ['hide-insomnia-tryit']: ref(true),
+        },
+      },
+    })
+
+    await flushPromises()
+
+    const component = wrapper.findTestId('tryit-wrapper-123')
+
+    expect(component.exists()).toBe(true)
+  })
 })

src/components/spec-document/try-it/TryIt.vue

@@ -183,6 +183,7 @@ const requestBodyChanged = (newBody: RequestBody) => {
 
 // this is tryout state requested by property passed
 const hideTryIt = inject<Ref<boolean>>('hide-tryit', ref(false))
+const hideInsomniaTryIt = inject<Ref<boolean>>('hide-insomnia-tryit', ref(false))
 
 /**
  * read file into binary buffer
@@ -287,13 +288,13 @@ const doApiCall = async (callAsIs = false) => {
 
 /**
  * Hide try-it section if:
- * - `hideTryIt` prop is explicitly true
+ * - `hideTryIt` and `hideInsomniaTryIt` props are explicitly true
  * - or `data.servers` is empty, which means that the spec does not have any servers defined
  * - or `serverUrl` prop is not provided, so try-it snippet can't be generated
  */
 const showTryIt = computed((): boolean => {
   const specHasServers = Array.isArray(props.data.servers) && props.data.servers.length > 0
-  return !hideTryIt.value && (!!props.serverUrl || specHasServers)
+  return (!hideTryIt.value || !hideInsomniaTryIt.value) && (!!props.serverUrl || specHasServers)
 })
 
 watch(() => props.serverUrl, () => {

src/components/spec-document/try-it/TryItDropdown.vue

@@ -5,7 +5,7 @@
   >
     <button
       class="call-button"
-      :class="{ 'no-dropdown': !showInsomnia }"
+      :class="{ 'no-dropdown': !showInsomnia || hideTryIt }"
       :data-testid="`tryit-call-button-${data.id}`"
       :disabled="isLoading"
       @click="startApiCall"
@@ -19,7 +19,7 @@
     </button>
 
     <SelectDropdown
-      v-if="showInsomnia"
+      v-if="showInsomnia && !hideTryIt"
       :id="`tryit-dropdown-${data.id}`"
       class="tryit-dropdown"
       :data-testid="`tryit-dropdown-${data.id}`"
@@ -51,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref, computed } from 'vue'
+import { inject, ref, computed, watch } from 'vue'
 import type { PropType, Ref } from 'vue'
 import type { IHttpOperation } from '@stoplight/types'
 import SelectDropdown from '@/components/common/SelectDropdown.vue'
@@ -74,28 +74,37 @@ const emit = defineEmits<{
   (e: 'tryit-api-call'): void
 }>()
 
-const items: SelectItem[] = [
-  {
-    label: 'in Browser',
-    value: 'browser',
-    key: 'browser',
-  },
-  {
-    label: 'in Insomnia',
-    value: 'insomnia',
-    key: 'insomnia',
-  },
-]
-
-
 const hideInsomniaTryIt = inject<Ref<boolean>>('hide-insomnia-tryit', ref(false))
+const hideTryIt = inject<Ref<boolean>>('hide-tryit', ref(false))
 const specUrl = inject<Ref<string>>('spec-url', ref(''))
 
 // when property forced or url of the specification is not provided
 const showInsomnia = computed((): boolean => {
   return !(hideInsomniaTryIt.value || !specUrl.value)
 })
 
+const items = computed((): SelectItem[] => {
+  const _items: SelectItem[] = []
+
+  if (!hideTryIt.value) {
+    _items.push({
+      label: 'in Browser',
+      value: 'browser',
+      key: 'browser',
+    })
+  }
+
+  if (showInsomnia.value) {
+    _items.push({
+      label: 'in Insomnia',
+      value: 'insomnia',
+      key: 'insomnia',
+    })
+  }
+
+  return _items
+})
+
 const tryItIcon = computed(() => {
   if (props.isLoading) {
     return ProgressIcon
@@ -125,6 +134,16 @@ const selectionChanged = (item: SelectItem) => {
   selectedTryItMethodKey.value = item.key || 'browser'
   startApiCall()
 }
+
+watch([hideTryIt, showInsomnia], () => {
+  if (hideTryIt.value && showInsomnia.value) {
+    selectedTryItMethodKey.value = 'insomnia'
+  } else {
+    selectedTryItMethodKey.value = 'browser'
+  }
+}, {
+  immediate: true,
+})
 </script>
 
 <style lang="scss" scoped>