feat: no iframe, use swagger-ui component

Signed-off-by: Sebastien Marinier <seb@smarinier.net>

Author: smarinier

package-lock.json

@@ -24,7 +24,7 @@
 		"@nextcloud/dialogs": "^5.2.0",
 		"@nextcloud/router": "^3.0.0",
 		"@nextcloud/vue": "^8.10.0",
-		"@stoplight/elements": "^8.1.0",
+		"swagger-ui": "^5.17.14",
 		"vue": "^2.7.16"
 	},
 	"browserslist": [

package.json

@@ -15,9 +15,9 @@
 		</NcAppNavigation>
 		<NcAppContent>
 			<div v-if="currentAppID" style="height: 100%">
-				<iframe height="100%" width="100%" :src="generateUrl(`/apps/ocs_api_viewer/view/${currentAppID}`)" />
+				<SwaggerUI :key="currentAppID" :appid="currentAppID" :openapi="generateUrl(`/apps/ocs_api_viewer/apps/${currentAppID}`)" />
 			</div>
-			<div v-if="!currentAppID">
+			<div v-else>
 				<NcEmptyContent :name="t('ocs_api_viewer', 'Select an app to get started')" />
 			</div>
 		</NcAppContent>
@@ -33,6 +33,7 @@ import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
+import SwaggerUI from './SwaggerUI.vue'
 
 export default {
 	name: 'App',
@@ -42,6 +43,7 @@ export default {
 		NcAppNavigationItem,
 		NcContent,
 		NcEmptyContent,
+		SwaggerUI,
 	},
 	data() {
 		return {

src/App.vue

@@ -0,0 +1,34 @@
+<template>
+	<div id="swagger-ui" />
+</template>
+<script>
+import JSSwaggerUI from 'swagger-ui'
+
+const DisableAuthorizePlugin = function() {
+	return {
+		wrapComponents: {
+			authorizeBtn: () => () => null,
+		},
+	}
+}
+export default {
+	name: 'SwaggerUI',
+	props: {
+		appid: { type: String, default: '' },
+		openapi: { type: String, default: '' },
+	},
+	mounted() {
+		JSSwaggerUI({
+			url: this.openapi,
+			dom_id: '#swagger-ui',
+			presets: [
+				JSSwaggerUI.presets.apis,
+			],
+			plugins: [
+				DisableAuthorizePlugin,
+			],
+			layout: 'BaseLayout',
+		})
+	},
+}
+</script>

src/SwaggerUI.vue

@@ -7,6 +7,7 @@ import { generateFilePath } from '@nextcloud/router'
 
 import Vue from 'vue'
 import App from './App.vue'
+import 'swagger-ui/dist/swagger-ui.css'
 
 // eslint-disable-next-line
 __webpack_public_path__ = generateFilePath(appName, '', 'js/')

src/iframe-theme.js

@@ -3,7 +3,6 @@
 const webpackConfig = require('@nextcloud/webpack-vue-config')
 const ESLintPlugin = require('eslint-webpack-plugin')
 const StyleLintPlugin = require('stylelint-webpack-plugin')
-const CopyPlugin = require('copy-webpack-plugin')
 const path = require('path');
 
 const buildMode = process.env.NODE_ENV
@@ -18,7 +17,6 @@ webpackConfig.stats = {
 const appId = 'ocs_api_viewer'
 webpackConfig.entry = {
 	main: { import: path.join(__dirname, 'src', 'main.js'), filename: appId + '-main.js' },
-	'iframe-theme': { import: path.join(__dirname, 'src', 'iframe-theme.js'), filename: appId + '-iframe-theme.js' },
 }
 
 webpackConfig.plugins.push(
@@ -34,13 +32,5 @@ webpackConfig.plugins.push(
 		failOnError: !isDev,
 	}),
 )
-webpackConfig.plugins.push(
-	new CopyPlugin({
-		patterns: [
-			{ from: 'node_modules/@stoplight/elements/web-components.min.js', to: 'stoplight-elements.js' },
-			{ from: 'node_modules/@stoplight/elements/styles.min.css', to: 'stoplight-elements.css' },
-		],
-	}),
-)
 
 module.exports = webpackConfig