Skip to content

Commit

Permalink
Added plugin manager.
Browse files Browse the repository at this point in the history
  • Loading branch information
imolorhe committed Dec 28, 2019
1 parent f37fb4d commit d8fd04c
Show file tree
Hide file tree
Showing 21 changed files with 477 additions and 104 deletions.
11 changes: 10 additions & 1 deletion src/app/actions/windows-meta/windows-meta.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export const SHOW_IMPORT_CURL_DIALOG = 'SHOW_IMPORT_CURL_DIALOG';
export const SHOW_EDIT_COLLECTION_DIALOG = 'SHOW_EDIT_COLLECTION_DIALOG';
export const SHOW_SETTINGS_DIALOG = 'SHOW_SETTINGS_DIALOG';
export const SHOW_ENVIRONMENT_MANAGER = 'SHOW_ENVIRONMENT_MANAGER';
export const SHOW_PLUGIN_MANAGER = 'SHOW_PLUGIN_MANAGER';

export class SetActiveWindowIdAction implements Action {
readonly type = SET_ACTIVE_WINDOW_ID;
Expand Down Expand Up @@ -51,11 +52,19 @@ export class ShowEnvironmentManagerAction implements Action {
constructor(public payload?: { value: boolean }) { }
}

export class ShowPluginManagerAction implements Action {
readonly type = SHOW_PLUGIN_MANAGER;

constructor(public payload?: { value: boolean }) { }
}

export type Action =
| SetActiveWindowIdAction
| SetWindowIdsAction
| RepositionWindowAction
| ShowImportCurlDialogAction
| ShowEditCollectionDialogAction
| ShowSettingsDialogAction
| ShowEnvironmentManagerAction;
| ShowEnvironmentManagerAction
| ShowPluginManagerAction
;
2 changes: 1 addition & 1 deletion src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { WindowsEffects } from './effects/windows';
import { QueryCollectionEffects } from './effects/query-collection';

import { DirectivesModule } from './directives';
import { ComponentModule } from './components';
import { ComponentModule } from './components/components.module';
import { DocViewerModule } from './components/doc-viewer/doc-viewer.module';
import { SmartInputModule } from './components/smart-input/smart-input.module';
import { SchemaFormModule } from './components/schema-form/schema-form.module';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { FancyInputComponent } from './fancy-input/fancy-input.component';
import { PluginElementComponent } from './plugin-element/plugin-element.component';
import { PreRequestEditorComponent } from './pre-request-editor/pre-request-editor.component';
import { SchemaFormModule } from './schema-form/schema-form.module';
import { PluginManagerComponent } from './plugin-manager/plugin-manager.component';

const COMPONENTS = [
QueryEditorComponent,
Expand All @@ -56,6 +57,7 @@ const COMPONENTS = [
FancyInputComponent,
PluginElementComponent,
PreRequestEditorComponent,
PluginManagerComponent,
];

@NgModule({
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/doc-viewer/doc-viewer.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { DocViewerComponent } from './doc-viewer/doc-viewer.component';
import { DocViewerFieldComponent } from './doc-viewer-field/doc-viewer-field.component';
import { DocViewerTypeComponent } from './doc-viewer-type/doc-viewer-type.component';
import { DocViewerSearchResultsComponent } from './doc-viewer-search-results/doc-viewer-search-results.component';
import { ComponentModule } from '..';
import { ComponentModule } from '../components.module';

@NgModule({
imports: [
Expand Down
94 changes: 94 additions & 0 deletions src/app/components/plugin-manager/plugin-manager.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<nz-modal
[nzVisible]="showPluginManager"
(nzVisibleChange)="toggleDialogChange.next($event)"
[nzTitle]="modalTitle"
[nzContent]="modalContent"
[nzFooter]="modalFooter"
[nzWidth]="870"
(nzOnCancel)="toggleDialogChange.next($event)"
>
<ng-template #modalTitle>
<div class="app-dialog-header">
<div class="app-dialog-title">{{ 'PLUGINS_TEXT' | translate }}</div>
{{ 'PLUGINS_SUB_TEXT' | translate }}
</div>
</ng-template>

<ng-template #modalContent>
<div class="app-dialog-body">
<div class="app-dialog-section">
<div class="plugin-manager-wrapper">
<div class="plugin-manager__list">
<div
*ngFor="let item of (remotePlugins$ | async);trackBy: trackByName;"
class="plugin-manager__list-item"
[ngClass]="{ 'plugin-manager__list-item--selected': selectedPluginItem && selectedPluginItem.name === item.name }"
(click)="onSelectPlugin(item)"
>
<div class="plugin-manager__list-item-name">
{{ item?.manifest?.display_name || item.name }}
<div class="plugin-manager__list-item-version">
{{ item?.manifest?.version || item.version }}
</div>
</div>
<div class="plugin-manager__list-item-description">
{{ item?.manifest?.description || item.description }}
</div>
</div>
</div>
<div class="plugin-manager__item-details">
<ng-container
*ngIf="selectedPluginItem"
>
<div class="plugin-manager__item-details-name">
{{ selectedPluginItem?.manifest?.display_name || selectedPluginItem.name }}
<div
class="plugin-manager__item-details-unique-name"
[attr.title]="'PLUGIN_UNIQUE_NAME_TEXT' | translate"
>
{{ selectedPluginItem.name }}
</div>
</div>
<div class="plugin-manager__item-details-actions">
<button
*ngIf="!isPluginInstalled(selectedPluginItem.name)"
class="app-button active-grey"
(click)="onAddPlugin(selectedPluginItem.name)"
>
<app-icon name="plus-circle"></app-icon>
{{ 'PLUGIN_ADD_BUTTON' | translate }}
</button>
<button
*ngIf="isPluginInstalled(selectedPluginItem.name)"
class="app-button active-destructive"
(click)="onRemovePlugin(selectedPluginItem.name)"
>
<app-icon name="x-circle"></app-icon>
{{ 'PLUGIN_REMOVE_BUTTON' | translate }}
</button>
<button
*ngIf="shouldRestart"
class="app-button"
(click)="onRestartApp()"
>
{{ 'RESTART_TEXT' | translate }}
</button>
</div>
<div
markdown
class="plugin-manager__item-details-summary"
[data]="selectedPluginItem.summary"
></div>
</ng-container>
</div>
</div>
</div>
</div>
</ng-template>

<ng-template #modalFooter>
<div class="app-dialog-footer">
<button class="app-button active-primary right" (click)="toggleDialogChange.next(false);">{{ 'SAVE_BUTTON' | translate }}</button>
</div>
</ng-template>
</nz-modal>
42 changes: 42 additions & 0 deletions src/app/components/plugin-manager/plugin-manager.component.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { PluginManagerComponent } from './plugin-manager.component';
import { SharedModule } from 'app/modules/shared/shared.module';
import { PluginRegistryService } from 'app/services';
import { HttpClientModule } from '@angular/common/http';
import { PluginPropsFactory } from 'app/services/plugin/plugin-props-factory';

describe('PluginManagerComponent', () => {
let component: PluginManagerComponent;
let fixture: ComponentFixture<PluginManagerComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [
PluginRegistryService,
{
provide: PluginPropsFactory,
use: {
getPluginProps() {},
}
}
],
imports: [
HttpClientModule,
SharedModule,
],
declarations: [ PluginManagerComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(PluginManagerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
89 changes: 89 additions & 0 deletions src/app/components/plugin-manager/plugin-manager.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { PluginRegistryService } from 'app/services';
import { Observable, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

import * as fromSettings from '../../reducers/settings/settings';

@Component({
selector: 'app-plugin-manager',
templateUrl: './plugin-manager.component.html',
styles: []
})
export class PluginManagerComponent implements OnInit {

@Input() showPluginManager = false;
@Input() settings: fromSettings.State;

@Output() toggleDialogChange = new EventEmitter();
@Output() settingsJsonChange = new EventEmitter();

remotePlugins$: Observable<[]>;
selectedPluginItem: any;

shouldRestart = false;

constructor(
private pluginRegistry: PluginRegistryService,
) {
this.remotePlugins$ = this.pluginRegistry.getRemotePluginList().pipe(
catchError((error) => {
return of(null);
}),
map((data: any) => {
if (data) {
return data.items;
}
})
);
}

ngOnInit() {
}

onSelectPlugin(pluginItem: any) {
this.selectedPluginItem = pluginItem;
}

isPluginInstalled(pluginName: string) {
if (this.settings['plugin.list']) {
return this.settings['plugin.list'].some(item => {
const pluginInfo = this.pluginRegistry.getPluginInfoFromString(item);
if (pluginInfo) {
return pluginInfo.name === pluginName;
}
return false;
});
}
return false;
}

onAddPlugin(pluginName: string) {
const settings: fromSettings.State = JSON.parse(JSON.stringify(this.settings));
settings['plugin.list'] = settings['plugin.list'] || [];
settings['plugin.list'].push(pluginName);

this.settingsJsonChange.next(JSON.stringify(settings));
this.shouldRestart = true;
}
onRemovePlugin(pluginName: string) {
const settings: fromSettings.State = JSON.parse(JSON.stringify(this.settings));
settings['plugin.list'] = (settings['plugin.list'] || []).filter(pluginStr => {
const pluginInfo = this.pluginRegistry.getPluginInfoFromString(pluginStr);
if (pluginInfo) {
return pluginName !== pluginInfo.name;
}
});

this.settingsJsonChange.next(JSON.stringify(settings));
this.shouldRestart = true;
}

onRestartApp() {
location.reload();
}

trackByName(index: number, item: any) {
return item.name;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
import { TranslateModule } from '@ngx-translate/core';

import { ComponentModule } from '../../components';
import { ComponentModule } from '../../components/components.module';

import { QueryResultComponent } from './query-result.component';

Expand Down
2 changes: 1 addition & 1 deletion src/app/components/smart-input/smart-input.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';

import { SharedModule } from '../../modules/shared/shared.module';

import { ComponentModule } from '..';
import { ComponentModule } from '../components.module';

import { SmartInputComponent } from './smart-input/smart-input.component';
import { SmartInputBlockComponent } from './smart-input-block/smart-input-block.component';
Expand Down
19 changes: 19 additions & 0 deletions src/app/containers/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -305,6 +305,19 @@
</div>

<div class="side-menu__main-bottom">
<a
*ngIf="(settings$ | async).enableExperimental"
class="side-menu-item"
(click)="togglePluginManager(true)"
attr.aria-label="{{ 'PLUGINS_TEXT' | translate }}"
>
<div class="side-menu-item-icon">
<app-icon name="grid"></app-icon>
</div>
<div class="side-menu-item-label">
{{ 'PLUGINS_TEXT' | translate }}
</div>
</a>
<a class="side-menu-item" (click)="toggleCollections()" attr.aria-label="{{ 'COLLECTIONS_TEXT' | translate }}" track-id="show_collections" [ngClass]="{ 'side-menu-item--active': showCollections }">
<div class="side-menu-item-icon">
<app-icon name="folder"></app-icon>
Expand Down Expand Up @@ -347,6 +360,12 @@
(addSubEnvironmentChange)="addNewSubEnvironment()"
(deleteSubEnvironmentChange)="deleteSubEnvironment($event)"
></app-environment-manager>
<app-plugin-manager
[showPluginManager]="(windowsMeta$ | async)?.showPluginManager"
[settings]="settings$ | async"
(toggleDialogChange)="togglePluginManager(!!$event)"
(settingsJsonChange)="setSettingsJson($event)"
></app-plugin-manager>
<app-settings-dialog
[showSettingsDialog]="(windowsMeta$ | async)?.showSettingsDialog"
[settings]="settings$ | async"
Expand Down
2 changes: 1 addition & 1 deletion src/app/containers/app/app.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';

import { DocViewerModule } from './../../components/doc-viewer/doc-viewer.module';
import { ComponentModule } from './../../components';
import { ComponentModule } from './../../components/components.module';

import { AppComponent } from './app.component';
import { WindowComponent } from '../window/window.component';
Expand Down
4 changes: 4 additions & 0 deletions src/app/containers/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -370,6 +370,10 @@ export class AppComponent implements OnDestroy {
this.store.dispatch(new windowsMetaActions.ShowEnvironmentManagerAction({ value: show }));
}

togglePluginManager(show: boolean) {
this.store.dispatch(new windowsMetaActions.ShowPluginManagerAction({ value: show }));
}

updateBaseEnvironmentJson(opts: { value: string }) {
this.store.dispatch(new environmentsActions.UpdateBaseEnvironmentJsonAction(opts));
}
Expand Down

0 comments on commit d8fd04c

Please sign in to comment.