Skip to content

Commit

Permalink
[NEW] Marketplace integration with Rocket.Chat Cloud (#13809)
Browse files Browse the repository at this point in the history 
* Add the cloud token to the marketplace calls

* Switch the app downloading to the server

* Implement some of the buying an app iframe

* Show when apps are purchased in the list

* Revert the committed change in the marketplace base url

* More work on enabling purchasing

* Install Apps from marketplace

* Missing fixes on rebase

* Improve marketplace design

* Improve view of app’s logs

* Move buttons of app details to header

* Fix mispeling

* Fix purchase/download flow

* Enable checking for updates for an app based upon the version of the engine

* Disable a possible issue with installation of apps

* Perform app downloads with a special short lived token for app download only

* Fix imports

* Fix layout of app details on old chrome and safari

* Re enable upload button adding a setting for development mode

* Change download encoding to binary

* Add iframe loading

* Fix some UI problems
  • Loading branch information
@rodrigok
rodrigok authored Mar 28, 2019
1 parent 7c2d680 commit fd817b2
Show file tree
Hide file tree
Showing 26 changed files with 716 additions and 282 deletions.
77 changes: 71 additions & 6 deletions app/apps/assets/stylesheets/apps.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
}

.rc-apps-container {
margin-top: 0;
padding-bottom: 15px;
}

Expand All @@ -97,9 +98,20 @@
margin-top: 6px;
} */

.rc-header .rc-button {
min-height: 0;
margin: 0;
.content {
/* display: block !important; */
padding: 0 !important;

> .rc-apps-container {
display: block;
overflow-y: scroll;

padding: 0 !important;
}

> .rc-apps-details {
display: block;
}
}

.rc-apps-category {
Expand Down Expand Up @@ -143,26 +155,79 @@
}

.rc-table-info {
height: 40px;
margin: 0 7px;
}

.rc-app-price {
position: relative;
top: -3px;
}

.rc-table-td--medium {
width: 300px;
}

.rc-table td {
padding: 0.5rem 0;

padding-right: 10px;
}

td.rc-apps-marketplace-price {
text-align: right;

button {
font-weight: 600;
}

.rc-icon {
color: #3582f3;
}
}

th.rc-apps-marketplace-price {
width: 120px;
}

&__wrap-actions {
& > .rc-icon--loading {
& > .loading {
display: none;
}

&.loading {
& > .rc-icon--loading {
& > .loading {
display: block;

animation: spin 1s linear infinite;
font-size: 11px;
font-weight: 600;

& > .rc-icon--loading {
animation: spin 1s linear infinite;
}
}

& > .apps-installer {
display: none;
}
}
}

.arrow-up {
transform: rotate(180deg);
}

&.page-settings {
.section {
padding: 0 !important;

border-bottom: none !important;

&:hover {
background-color: var(--rc-color-primary-lightest);
}
}
}
}

@keyframes play90 {
Expand Down
51 changes: 18 additions & 33 deletions app/apps/client/admin/appLogs.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,21 @@
<template name="appLogs">
{{#with app}}
<section class="page-container page-list page-settings flex-tab-main-content">
<header class="fixed-title">
{{> burger}}
<a href="{{pathFor "app-manage" appId=id}}" title="{{_ "Back_to_Manage_Apps"}}">
<i class="icon-left-open"></i>
</a> &nbsp;
<section class="page-container page-list page-settings flex-tab-main-content rc-apps-marketplace">
{{# header rawSectionName=title fixedHeight=true hideHelp=true fullpage=true}}
<div class="rc-header__block rc-header__block-action">
<button class="rc-button rc-button--primary js-refresh">
{{> icon icon="reload" block="rc-icon--default-size"}} {{_ "Refresh"}}
</button>
<button class="rc-button rc-button--nude js-cancel">{{> icon icon="cross"}}</button>

{{#if isReady}}
<h2>
<span class="room-title">{{_ "View_the_Logs_for" name=name}}</span>
</h2>
{{/if}}
</div>
{{/header}}
<div class="content">
{{#if hasError}}
<h2>
<span class="room-title">{{ theError }}</span>
</h2>
{{/if}}
</header>
<div class="content">
{{#if isReady}}
<div class="rocket-form">
{{#each log in logs}}
Expand All @@ -28,30 +25,18 @@ <h2>
{{formatDate log._createdAt}}: "{{log.method}}" ({{log.totalTime}}ms)
</div>
<div class="section-title-right">
<button class="button primary expand">
<span>{{_ "Expand"}}</span>
<button class="rc-button rc-button--nude button-down">
{{> icon icon="arrow-down" block="rc-icon--default-size"}}
</button>
</div>
</div>
<div class="section-content">
<h4>General Information</h4>
<ul>
<li>Method: {{ log.method }}</li>
<li>Start Time: {{ log.startTime }}</li>
<li>End Time: {{ log.endTime }}</li>
<li>Total Time: {{ log.totalTime }}ms</li>
<li>Log Entries: {{ log.entries.length }}</li>
</ul>

<h4>Log Entries</h4>
<ul>
{{#each entry in log.entries}}
<li>Timestamp: {{ entry.timestamp }}</li>
<li>Severity: {{ entry.severity }}</li>
<li>Caller: {{ entry.caller }}</li>
<li>Arguments: <pre><code class="code-colors hljs json">{{{ jsonStringify entry.args }}}</code></pre></li>
{{/each}}
</ul>
{{#each entry in log.entries}}
<div>{{ entry.severity }}: {{ entry.timestamp }} (Caller: {{ entry.caller }})</div>
<div>
<pre><code class="code-colors hljs json">{{{ jsonStringify entry.args }}}</code></pre>
</div>
{{/each}}
</div>
</div>
{{/each}}
Expand Down
55 changes: 35 additions & 20 deletions app/apps/client/admin/appLogs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,32 @@ import { APIClient } from '../../../utils';
import moment from 'moment';
import hljs from 'highlight.js';

Template.appLogs.onCreated(function() {
const instance = this;
this.id = new ReactiveVar(FlowRouter.getParam('appId'));
this.ready = new ReactiveVar(false);
this.hasError = new ReactiveVar(false);
this.theError = new ReactiveVar('');
this.app = new ReactiveVar({});
this.logs = new ReactiveVar([]);

const id = this.id.get();

const loadData = (instance) => {
Promise.all([
APIClient.get(`apps/${ id }`),
APIClient.get(`apps/${ id }/logs`),
APIClient.get(`apps/${ instance.id.get() }`),
APIClient.get(`apps/${ instance.id.get() }/logs`),
]).then((results) => {

instance.app.set(results[0].app);
instance.logs.set(results[1].logs);

this.ready.set(true);
instance.ready.set(true);
}).catch((e) => {
instance.hasError.set(true);
instance.theError.set(e.message);
});
};

Template.appLogs.onCreated(function() {
const instance = this;
this.id = new ReactiveVar(FlowRouter.getParam('appId'));
this.ready = new ReactiveVar(false);
this.hasError = new ReactiveVar(false);
this.theError = new ReactiveVar('');
this.app = new ReactiveVar({});
this.logs = new ReactiveVar([]);

loadData(instance);
});

Template.appLogs.helpers({
Expand Down Expand Up @@ -76,16 +78,29 @@ Template.appLogs.helpers({

return value.replace(/\\\\n/g, '<br>');
},
title() {
return TAPi18n.__('View_the_Logs_for', { name: Template.instance().app.get().name });
},
});

Template.appLogs.events({
'click .expand': (e) => {
$(e.currentTarget).closest('.section').removeClass('section-collapsed');
$(e.currentTarget).closest('button').removeClass('expand').addClass('collapse').find('span').text(TAPi18n.__('Collapse'));
'click .section-collapsed .section-title': (e) => {
$(e.currentTarget).closest('.section').removeClass('section-collapsed').addClass('section-expanded');
$(e.currentTarget).find('.button-down').addClass('arrow-up');
},

'click .section-expanded .section-title': (e) => {
$(e.currentTarget).closest('.section').removeClass('section-expanded').addClass('section-collapsed');
$(e.currentTarget).find('.button-down').removeClass('arrow-up');
},

'click .js-cancel': (e, t) => {
FlowRouter.go('app-manage', { appId: t.app.get().id }, { version: FlowRouter.getQueryParam('version') });
},

'click .collapse': (e) => {
$(e.currentTarget).closest('.section').addClass('section-collapsed');
$(e.currentTarget).closest('button').addClass('expand').removeClass('collapse').find('span').text(TAPi18n.__('Expand'));
'click .js-refresh': (e, t) => {
t.ready.set(false);
t.logs.set([]);
loadData(t);
},
});
23 changes: 17 additions & 6 deletions app/apps/client/admin/appManage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,13 @@
{{#with app}}
<section class="page-container page-home page-static page-settings rc-apps-marketplace">
{{# header sectionName='App_Details' fixedHeight=true hideHelp=true fullpage=true}}
<div class="rc-header__section-button">
{{#unless disabled}}
<button class="rc-button rc-button--cancel js-cancel-editing">{{_ "Cancel" }}</button>
{{/unless}}
<button class="rc-button rc-button--primary js-save {{#if saving}} loading{{/if}}" disabled='{{disabled}}'>{{_ "Save_changes" }}</button>
</div>

<div class="rc-header__block rc-header__block-action">
<button class="rc-button rc-button--nude js-cancel">{{> icon icon="cross"}}</button>
</div>
Expand All @@ -18,7 +25,7 @@
<div class="rc-apps-details">
<div class="rc-apps-container rc-apps-container__header">
{{#if iconFileData}}
<div class="rc-apps-details__photo" style="background-image:url(data:image/png;base64,{{iconFileData}})"></div>
<div class="rc-apps-details__photo" style="background-image:url(data:image/png;base64,{{iconFileData}})"></div>
{{else}}
<div class="rc-apps-details__photo" style="background-image:url({{iconFileContent}})"></div>
{{/if}}
Expand All @@ -44,7 +51,15 @@ <h1>{{name}}</h1>
{{/if}}
<button class="rc-button rc-button--nude js-view-logs">{{> icon icon="list-alt"}} {{_ "View_Logs" }}</button>
{{else}}
<button class="rc-button rc-button--primary js-install">{{> icon icon="circled-arrow-down"}} {{_ "Install"}}</button>
{{#if hasPurchased}}
<button class="rc-button rc-button--primary js-install">{{> icon icon="download"}} {{_ "Purchased"}}</button>
{{else}}
{{#if $eq price 0}}
<button class="rc-button rc-button--primary js-purchase">{{> icon icon="circled-arrow-down"}} {{_ "Free"}}</button>
{{else}}
<button class="rc-button rc-button--primary js-purchase">{{> icon icon="circled-arrow-down"}} {{displayPrice}}</button>
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
Expand Down Expand Up @@ -454,10 +469,6 @@ <h2> {{_ "Settings"}} </h2>

</div>
{{/each}}
<div class="rc-button-group">
<button class="rc-button rc-button--outline js-cancel-editing" disabled='{{disabled}}'>{{_ "Cancel" }}</button>
<button class="rc-button rc-button--primary js-save {{#if saving}} loading{{/if}}" disabled='{{disabled}}'>{{_ "Save" }}</button>
</div>
</div>
{{/if}}
</div>
Expand Down
Loading

0 comments on commit fd817b2

Please sign in to comment.