feat(openapi): detect every file with openapi or swagger within it's name and...

feat(openapi): detect every file with openapi or swagger within it's name and yml,yaml,json extension

app/assets/javascripts/blob/openapi/index.js

+import { SwaggerUIBundle } from 'swagger-ui-dist';
+import flash from '~/flash';
+import { __ } from '~/locale';
+
+export default () => {
+  const el = document.getElementById('js-openapi-viewer');
+
+  Promise.all([import(/* webpackChunkName: 'openapi' */ 'swagger-ui-dist/swagger-ui.css')])
+    .then(() => {
+      SwaggerUIBundle({
+        url: el.dataset.endpoint,
+        dom_id: '#js-openapi-viewer',
+      });
+    })
+    .catch(error => {
+      flash(__('Something went wrong while initializing the OpenAPI viewer'));
+      throw error;
+    });
+};

app/assets/javascripts/blob/openapi_viewer.js

+import renderOpenApi from './openapi';
+
+export default renderOpenApi;

app/assets/javascripts/blob/viewer/index.js

@@ -39,6 +39,9 @@ export default class BlobViewer {
       case 'notebook':
         initViewer(import(/* webpackChunkName: 'notebook_viewer' */ '../notebook_viewer'));
         break;
+      case 'openapi':
+        initViewer(import(/* webpackChunkName: 'openapi_viewer' */ '../openapi_viewer'));
+        break;
       case 'pdf':
         initViewer(import(/* webpackChunkName: 'pdf_viewer' */ '../pdf_viewer'));
         break;

app/assets/stylesheets/framework/files.scss

@@ -486,3 +486,8 @@ span.idiff {
   overflow-y: auto;
   max-height: 20rem;
 }
+
+#js-openapi-viewer pre.version {
+  background-color: transparent;
+  border: transparent;
+}

app/models/blob.rb

@@ -26,6 +26,7 @@ class Blob < SimpleDelegator
     BlobViewer::Markup,
     BlobViewer::Notebook,
     BlobViewer::SVG,
+    BlobViewer::OpenApi,
 
     BlobViewer::Image,
     BlobViewer::Sketch,

app/models/blob_viewer/open_api.rb

+# frozen_string_literal: true
+
+module BlobViewer
+  class OpenApi < Base
+    include Rich
+    include ClientSide
+
+    self.partial_name = 'openapi'
+    self.file_types = %i(openapi)
+    self.binary = false
+    # TODO: get an icon for OpenAPI
+    self.switcher_icon = 'file-pdf-o'
+    self.switcher_title = 'OpenAPI'
+  end
+end

app/views/projects/blob/viewers/_openapi.html.haml

+.file-content#js-openapi-viewer{ data: { endpoint: blob_raw_path } }

changelogs/unreleased/feat-openapi-viewer.yml

+---
+title: add OpenAPI file viewer
+merge_request: 21106
+author: Roger Meier
+type: added

lib/gitlab/file_detector.rb

@@ -36,7 +36,10 @@ module Gitlab
       podspec_json: %r{\A[^/]*\.podspec\.json\z},
       podspec: %r{\A[^/]*\.podspec\z},
       requirements_txt: %r{\A[^/]*requirements\.txt\z},
-      yarn_lock: 'yarn.lock'
+      yarn_lock: 'yarn.lock',
+
+      # OpenAPI Specification files
+      openapi: %r{.*(openapi|swagger).*\.(yaml|yml|json)\z}i
     }.freeze
 
     # Returns an Array of file types based on the given paths.

locale/gitlab.pot

@@ -16563,6 +16563,9 @@ msgstr ""
 msgid "Something went wrong while fetching the registry list."
 msgstr ""
 
+msgid "Something went wrong while initializing the OpenAPI viewer"
+msgstr ""
+
 msgid "Something went wrong while merging this merge request. Please try again."
 msgstr ""
 

package.json

@@ -113,6 +113,7 @@
     "stickyfilljs": "^2.0.5",
     "style-loader": "^1.0.0",
     "svg4everybody": "2.1.9",
+    "swagger-ui-dist": "^3.24.3",
     "three": "^0.84.0",
     "three-orbit-controls": "^82.1.0",
     "three-stl-loader": "^1.0.4",

spec/lib/gitlab/file_detector_spec.rb

@@ -82,5 +82,21 @@ describe Gitlab::FileDetector do
     it 'returns nil for an unknown file' do
       expect(described_class.type_of('foo.txt')).to be_nil
     end
+
+    it 'returns the type of an OpenAPI spec if file name is correct' do
+      openapi_types = [
+        'openapi.yml', 'openapi.yaml', 'openapi.json',
+        'swagger.yml', 'swagger.yaml', 'swagger.json',
+        'gitlab_swagger.yml', 'openapi_gitlab.yml',
+        'OpenAPI.YML', 'openapi.Yaml', 'openapi.JSON',
+        'openapi.gitlab.yml', 'gitlab.openapi.yml'
+      ]
+
+      openapi_types.each do |type_name|
+        expect(described_class.type_of(type_name)).to eq(:openapi)
+      end
+
+      expect(described_class.type_of('openapiyml')).to be_nil
+    end
   end
 end

yarn.lock

@@ -10765,6 +10765,11 @@ svg4everybody@2.1.9:
   resolved "https://registry.yarnpkg.com/svg4everybody/-/svg4everybody-2.1.9.tgz#5bd9f6defc133859a044646d4743fabc28db7e2d"
   integrity sha1-W9n23vwTOFmgRGRtR0P6vCjbfi0=
 
+swagger-ui-dist@^3.24.3:
+  version "3.24.3"
+  resolved "https://registry.yarnpkg.com/swagger-ui-dist/-/swagger-ui-dist-3.24.3.tgz#99754d11b0ddd314a1a50db850acb415e4b0a0c6"
+  integrity sha512-kB8qobP42Xazaym7sD9g5mZuRL4416VIIYZMqPEIskkzKqbPLQGEiHA3ga31bdzyzFLgr6Z797+6X1Am6zYpbg==
+
 symbol-observable@^1.0.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"