Skip to content

Try-out button for Swagger file #1563

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brylie merged 15 commits into from
Sep 14, 2016
Merged

Try-out button for Swagger file #1563

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
0224569
change addHooks to hooks
marla-singer Sep 9, 2016
7964a03
fix codegen feature
marla-singer Sep 9, 2016
95ef85d
add field in Manage modal for checking methods
marla-singer Sep 12, 2016
832948e
work version
marla-singer Sep 12, 2016
9fe75f5
Fix console error with conflictof available doc editor
marla-singer Sep 12, 2016
7298b3c
realize updating methods in swagger
marla-singer Sep 12, 2016
a557700
fix duplicated sAlert on Manage module
marla-singer Sep 13, 2016
999207c
update swagger-ui-browserify version
marla-singer Sep 13, 2016
209b7a0
fix sAlert on clicking button Choose File
marla-singer Sep 13, 2016
b02083d
add i18n in schema
marla-singer Sep 14, 2016
0422cde
separate long line with sAlert
marla-singer Sep 14, 2016
8799a81
replace Glyphicon icon to font awesome
marla-singer Sep 14, 2016
8a82642
add comment to helper
marla-singer Sep 14, 2016
395b72e
replace class of button to id
marla-singer Sep 14, 2016
cc99194
lint
marla-singer Sep 14, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions apis/collection/schema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ Apis.schema = new SimpleSchema({
type: String,
optional: true
},

apiLogoFileId: {
type: String,
optional: true
Expand All @@ -34,6 +35,10 @@ Apis.schema = new SimpleSchema({
optional: true,
regEx: SimpleSchema.RegEx.Url
},
submit_methods: {
type: [String],
optional: true
},
created_at: {
type: Date,
optional: true
Expand Down Expand Up @@ -88,4 +93,7 @@ Apis.schema = new SimpleSchema({
}
});

// Enable translations (i18n)
Apis.schema.i18n('schemas.apis');

Apis.attachSchema(Apis.schema);
2 changes: 1 addition & 1 deletion documentation/client/codegenerator/codegenerator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Template.sdkCodeGeneratorModal.onCreated(function () {
instance.dataReady = new ReactiveVar(false);

// Get documentation file id
const documentationFileId = instance.data.apiBackend.documentationFileId;
const documentationFileId = instance.data.api.documentationFileId;

// Save documentation file URL
instance.documentationFileURL = Meteor.absoluteUrl().slice(0, -1) + DocumentationFiles.baseURL + '/id/' + documentationFileId;
Expand Down
12 changes: 7 additions & 5 deletions documentation/client/manage/autoform.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
AutoForm.addHooks(['apiDocumentationForm'], {
onSuccess () {
sAlert.success(TAPi18n.__('manageApiDocumentationModal_LinkField_Updated_Message'));
},
});
AutoForm.hooks({
apiDocumentationForm: {
onSuccess () {
sAlert.success(TAPi18n.__('manageApiDocumentationModal_LinkField_Updated_Message'));
Copy link
Copy Markdown
Contributor

@brylie brylie Sep 14, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please separate this line into two parts:

// Get success message translation
const message = TAPi18n.__('manageApiDocumentationModal_LinkField_Updated_Message');

// Alert user of success
sAlert.success(message);

It is a bit 'cleaner' this way, and shortens the line length.

Copy link
Copy Markdown
Contributor Author

@marla-singer marla-singer Sep 14, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay

},
}
});
90 changes: 49 additions & 41 deletions documentation/client/manage/manage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,48 +9,56 @@
<h1 class="modal-title">{{_ "manageApiDocumentationModal_Title" }}</h1>
</div>
<div class="modal-body">
<legend>
{{> showHelp 'uploadApiDocumentation'}}
{{_ "import_ApiDocumentation_Title"}}
</legend>
<div class="documentation-file">
{{#unless documentationFile }}
{{> manageApiDocumentationModalUploadButton }}
{{else}}
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-file"></span>
{{ documentationFile.filename }}
<span class="pull-right">
<button class="btn btn-xs btn-danger delete-documentation">
<span class="glyphicon glyphicon-trash"></span>
</button>
</span>
</li>
</ul>
{{/unless}}
</div>
{{# if apiDocumentationEditorIsEnabled}}
<legend>
{{>showHelp 'documentation_editor_create_file'}}
{{_ "manageApiDocumentationModal_CreateDocumentation_Title" }}
</legend>
<a id="open-api-editor" class="btn btn-primary" href="/documentation/editor">
{{_ "manageApiDocumentationModal_openDocumentationEditor" }}
</a>
{{/ if }}
<legend>
{{>showHelp 'documentation_link'}}
{{_ "manageApiDocumentationModal_DocumentationLink_Title" }}
</legend>
{{#autoForm collection=apisCollection doc=api id="apiDocumentationForm" type="update" }}
{{> afQuickField name='documentation_link'}}
<button type="submit" class="btn btn-success" id="save-documentation-link">
{{_ "manageApiDocumentationModal_CreateDocumentation_SaveButton" }}
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
{{_ "manageApiDocumentationModal_CreateDocumentation_CancelButton" }}
</button>

<legend>
{{> showHelp 'uploadApiDocumentation'}}
{{_ "import_ApiDocumentation_Title"}}
</legend>
<div class="documentation-file">
{{#unless documentationFile }}
{{> manageApiDocumentationModalUploadButton }}
{{else}}
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-file"></span>
Copy link
Copy Markdown
Contributor

@brylie brylie Sep 14, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using FontAwesome icon here, since we have been using FontAwesome more often than Glyphicon. If you like the Glyphicon better, it can stay. Just check FontAwsome in case it has a nicer icon.

http://fontawesome.io/icons/

E.g.
http://fontawesome.io/icon/file-o/
http://fontawesome.io/icon/file-text-o/

Copy link
Copy Markdown
Contributor Author

@marla-singer marla-singer Sep 14, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's old code, I didn't use glyphicon. Replace?

Copy link
Copy Markdown
Contributor

@brylie brylie Sep 14, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is up to you. Which do you like better?

One thing to note, we can clean up/improve/lint old code when working nearby or refactoring related parts.

Copy link
Copy Markdown
Contributor Author

@marla-singer marla-singer Sep 14, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to use FontAwesome

{{ documentationFile.filename }}
<span class="pull-right">
<button type="button" class="btn btn-xs btn-danger delete-documentation">
<span class="glyphicon glyphicon-trash"></span>
Copy link
Copy Markdown
Contributor

@brylie brylie Sep 14, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Compare Glyphicon with available FontAwesome fonts. If Glyphicon is 'better' keep it. If FontAwesome is nicer, use FA here instead.

E.g.
http://fontawesome.io/icon/trash/
http://fontawesome.io/icon/trash-o/

</button>
</span>
</li>
</ul>
{{> afQuickField
name="submit_methods"
options=submitMethods
type="select-checkbox-inline"
noselect=false
}}
{{/unless}}
</div>
{{# if apiDocumentationEditorIsEnabled}}
<legend>
{{>showHelp 'documentation_editor_create_file'}}
{{_ "manageApiDocumentationModal_CreateDocumentation_Title" }}
</legend>
<a id="open-api-editor" class="btn btn-primary" href="/documentation/editor">
{{_ "manageApiDocumentationModal_openDocumentationEditor" }}
</a>
{{/ if }}
<legend>
{{>showHelp 'documentation_link'}}
{{_ "manageApiDocumentationModal_DocumentationLink_Title" }}
</legend>
{{> afQuickField name='documentation_link'}}
<button type="submit" class="btn btn-success" id="save-documentation-link">
{{_ "manageApiDocumentationModal_CreateDocumentation_SaveButton" }}
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
{{_ "manageApiDocumentationModal_CreateDocumentation_CancelButton" }}
</button>

{{/ autoForm }}
</div>
</div>
Expand Down
15 changes: 14 additions & 1 deletion documentation/client/manage/manage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,11 @@ Template.manageApiDocumentationModal.helpers({
const settings = Settings.findOne();

// Check settings exists, editor is enabled and host setting exists
if (settings && settings.apiDocumentationEditor.enabled && settings.apiDocumentationEditor.host) {
if (
settings &&
settings.apiDocumentationEditor &&
settings.apiDocumentationEditor.enabled &&
settings.apiDocumentationEditor.host) {
// Editor is enabled and has host setting, return true
return true;
} else {
Expand All @@ -110,4 +114,13 @@ Template.manageApiDocumentationModal.helpers({
// Return a reference to Apis collection, for AutoForm
return Apis;
},
submitMethods () {
return [
Copy link
Copy Markdown
Contributor

@brylie brylie Sep 14, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add comment, and/or semantic variable name, describing this return object. E.g. what is it used for?

{label: 'GET', value: 'get'},
{label: 'POST', value: 'post'},
{label: 'DELETE', value: 'delete'},
{label: 'PATCH', value: 'patch'},
{label: 'PUT', value: 'put'}
]
},
});
2 changes: 1 addition & 1 deletion documentation/client/manage/uploadButton/uploadButton.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<template name="manageApiDocumentationModalUploadButton">
<button class="btn btn-primary fileBrowse">{{_ "manageApiDocumentationModalUploadButton" }}</button>
<button type="button" class="btn btn-primary fileBrowse">{{_ "manageApiDocumentationModalUploadButton" }}</button>
Copy link
Copy Markdown
Contributor

@brylie brylie Sep 14, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Break this into multiple lines, to improve readability.

<button type="button" class="btn btn-primary fileBrowse">
  {{_ "manageApiDocumentationModalUploadButton" }}
</button>

Also, consider using an ID, instead of class, for the fileBrowse label.

This reason is twofold:

  • ID is used for unique page elements
    • there is only one fileBrowse button on the page, so the fileBrowse label should be ID
  • moving fileBrowse to an id attribute makes the code a little easier to read:
<button type="button" id="file-browse" class="btn btn-primary">
  ...
</button>

Notice also that we are trying to use hyphens instead of camel case for HTML attributes. This arbitrary decision is a bit more inline with other class declarations, e.g. Bootstrap classes.

</template>
2 changes: 1 addition & 1 deletion documentation/client/swaggerUI/swaggerUi.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<div id="message-bar" class="swagger-ui-wrap message-success" data-sw-translate=""></div>
{{#if dataFetched}}
{{#if documentationValid}}
{{>swaggerUiContent apiDocumentation=apiDocumentation}}
{{>swaggerUiContent apiDoc=apiDoc api=api}}
Copy link
Copy Markdown
Contributor

@brylie brylie Sep 14, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check the indentation on this file. It may be sufficient to use two space per nested level when indenting HTML files. This also matches our JS indentation convention.

{{else}}
<i>
{{_ 'swaggerUi_swaggerDocumentInvalidText'}}
Expand Down
2 changes: 1 addition & 1 deletion documentation/client/swaggerUI/swaggerUi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Template.swaggerUi.onCreated(function () {
instance.dataFetched = new ReactiveVar(false);

// Get url of api documentation
const documentationURL = instance.data.apiDocumentation;
const documentationURL = instance.data.apiDoc;

// Check validation of Swagger file
Meteor.call('isValidSwagger', documentationURL, function (error, result) {
Expand Down
32 changes: 19 additions & 13 deletions documentation/client/swaggerUI/swaggerUiContent/swaggerUiContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,35 @@
import SwaggerUi from 'swagger-ui-browserify';
import { Apis } from '/apis/collection';

Template.swaggerUiContent.onCreated(function () {
const instance = this;

// Get URL of api documentation
const documentationURL = this.data.apiDocumentation;
const documentationURL = this.data.apiDoc;

// Create Swagger UI
const swagger = window.swaggerUi = new SwaggerUi({
// Create Swagger UI object
const swagger = new SwaggerUi({
url: documentationURL,
dom_id: 'swagger-ui-container',
useJQuery: true,
supportHeaderParams: true,
supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
apisSorter: 'alpha',
operationsSorter: 'alpha',
docExpansion: 'none'
docExpansion: 'none',
});

// Load Swagger UI
swagger.load();
});
// Subscribe to api collection
instance.autorun(() => {
// Get relevant api collection
instance.subscribe('apiBackend', instance.data.api._id);

Template.swaggerUiContent.onRendered(function () {
// Get URL of api documentation
const documentationURL = this.data.apiDocumentation;
// Get api
const api = Apis.findOne(instance.data.api._id);

// Display URL on Swagger UI input
$('#input_baseUrl').val(documentationURL);
// Set selected methods in Swagger
swagger.setOption('supportedSubmitMethods', api.submit_methods);

// Load Swagger UI
swagger.load();
});
});
6 changes: 3 additions & 3 deletions documentation/client/view/documentation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ <h2 class="panel-title">{{_ "documentation_Link_Title" }}</h2>
{{else}}
<i>
{{_ "documentation_No_Link_Message" }}
{{#if apiBackend.currentUserCanEdit }}
{{#if api.currentUserCanEdit }}
{{_ "documentation_No_Link_Manager_Message" }}
{{/if}}
</i>
Expand All @@ -66,11 +66,11 @@ <h2 class="panel-title">{{_ "documentation_Viewer_Title" }}</h2>
<div class="panel-body">
{{#if Template.subscriptionsReady }}
{{#if documentationExists }}
{{> swaggerUi apiDocumentation=uploadedDocumentationLink}}
{{> swaggerUi apiDoc=uploadedDocumentationLink api=api}}
{{ else }}
<i>
{{_ "documentation_No_Swagger_Message" }}
{{#if apiBackend.currentUserCanEdit }}
{{#if api.currentUserCanEdit }}
{{_ "documentation_No_Swagger_Manager_Message" }}
{{/if}}
</i>
Expand Down
5 changes: 5 additions & 0 deletions lib/i18n/en.i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,11 @@
"responseTimeDistributionChart_title": "API Response Time",
"responseTimeDistributionChart_help_text": "Click on any bar to filter API Request Timeline and HTTP Status Code chart by requests that have the selected response time range.",
"schemas": {
"apis": {
"submit_methods": {
"label": "Allow try-out for following methods:"
}
},
"apiMetadata": {
"organization": {
"label": "Organization",
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"swagger-client": "^2.1.0",
"swagger-parser": "^3.4.1",
"swagger-ui": "^2.2.3",
"swagger-ui-browserify": "^2.2.3",
"swagger-ui-browserify": "^2.2.3-a",
"urijs": "^1.18.1"
},
"devDependencies": {
Expand Down