[ZEPPELIN-4398] Add notebook repository page

### What is this PR for?

Add the notebook repository page

### What type of PR is it?
[Feature]

### What is the Jira issue?

https://issues.apache.org/jira/browse/ZEPPELIN-4398

### How should this be tested?

Not applicable

### Screenshots (if appropriate)

![repos](https://user-images.githubusercontent.com/22736418/70308435-338edf00-1846-11ea-9030-bcf4ecaf22bb.gif)

### Questions:
* Does the licenses files need update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No

Author: Hsuan Lee <[email protected]>

Closes #3543 from hsuanxyz/feat/notebook-repos and squashes the following commits:

d148902 [Hsuan Lee] feat: add notebook repository page

Author: hsuanxyz

zeppelin-web-angular/src/app/interfaces/notebook-repo.ts

@@ -0,0 +1,32 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface NotebookRepo {
+  name: string;
+  className: string;
+  settings: NotebookRepoSettingsItem[];
+}
+
+export interface NotebookRepoPutData {
+  name: string;
+  settings: {
+    [key: string]: string;
+  };
+}
+
+export interface NotebookRepoSettingsItem {
+  type: string;
+  // tslint:disable-next-line:no-any
+  value: any[];
+  selected: string;
+  name: string;
+}

zeppelin-web-angular/src/app/interfaces/public-api.ts

@@ -16,3 +16,4 @@ export * from './interpreter';
 export * from './message-interceptor';
 export * from './security';
 export * from './credential';
+export * from './notebook-repo';

zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.html

@@ -0,0 +1,79 @@
+<!--
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<nz-card class="repo-item"
+         [class.edit]="editMode"
+         [nzTitle]="repo.name"
+         [nzExtra]="extraTemplate">
+  <ng-template #extraTemplate>
+    <div class="extra-wrap" *ngIf="!editMode">
+      <button nz-button
+              nzSize="small"
+              (click)="triggerEditMode()">
+        <i nz-icon nzType="edit"></i>
+        Edit
+      </button>
+    </div>
+    <div class="extra-wrap" *ngIf="editMode">
+      <button nz-button
+              nzType="primary"
+              nzSize="small"
+              [disabled]="!settingFormArray.valid"
+              (click)="save()">
+        <i nz-icon nzType="save" nzTheme="outline"></i>
+        Save
+      </button>
+      <button nz-button
+              nzSize="small"
+              (click)="cancel()">
+        <i nz-icon nzType="close" nzTheme="outline"></i>
+        Cancel
+      </button>
+    </div>
+  </ng-template>
+  <h3>Setting</h3>
+  <form nz-form>
+    <nz-table nzTemplateMode nzSize="small">
+      <thead>
+      <tr>
+        <th>Name</th>
+        <th>Value</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let setting of repo.settings; index as i">
+        <td>{{setting.name}}</td>
+        <ng-container *ngIf="!editMode">
+          <td>{{setting.selected}}</td>
+        </ng-container>
+        <ng-container *ngIf="editMode">
+          <td>
+            <input *ngIf="setting.type === 'INPUT'"
+                   nzSize="small"
+                   nz-input
+                   [formControl]="settingFormArray.controls[i]">
+
+            <nz-select *ngIf="setting.type === 'DROPDOWN'" [formControl]="settingFormArray.controls[i]">
+              <nz-option
+                *ngFor="let option of setting.value"
+                [nzLabel]="option"
+                [nzValue]="option">
+              </nz-option>
+            </nz-select>
+          </td>
+        </ng-container>
+      </tr>
+      </tbody>
+    </nz-table>
+  </form>
+
+</nz-card>

zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.less

@@ -0,0 +1,37 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import 'theme-mixin';
+
+.themeMixin({
+
+  display: block;
+  margin-bottom: @card-padding-base;
+  position: relative;
+
+  ::ng-deep .repo-item {
+    &.edit {
+      background: @orange-1;
+    }
+  }
+
+  .extra-wrap {
+    button {
+      transition: none;
+    }
+    button + button {
+      margin-bottom: 0;
+      margin-left: 8px;
+    }
+  }
+
+});

zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.ts

@@ -0,0 +1,78 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges
+} from '@angular/core';
+import { FormArray, FormBuilder, Validators } from '@angular/forms';
+import { NotebookRepo } from '@zeppelin/interfaces';
+
+@Component({
+  selector: 'zeppelin-notebook-repo-item',
+  templateUrl: './item.component.html',
+  styleUrls: ['./item.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NotebookRepoItemComponent implements OnChanges {
+  @Input() repo: NotebookRepo;
+  @Output() readonly repoChange = new EventEmitter<NotebookRepo>();
+
+  settingFormArray: FormArray;
+  editMode = false;
+
+  constructor(private cdr: ChangeDetectorRef, private fb: FormBuilder) {}
+
+  triggerEditMode() {
+    this.editMode = !this.editMode;
+    this.cdr.markForCheck();
+  }
+
+  save() {
+    this.settingFormArray.controls.forEach(control => {
+      control.markAsDirty();
+      control.updateValueAndValidity();
+    });
+
+    if (this.settingFormArray.valid) {
+      const values = this.settingFormArray.getRawValue() as string[];
+      values.forEach((value, i) => (this.repo.settings[i].selected = value));
+      this.repoChange.emit(this.repo);
+      this.editMode = false;
+      this.cdr.markForCheck();
+    }
+  }
+
+  cancel() {
+    this.buildForm();
+    this.editMode = false;
+    this.cdr.markForCheck();
+  }
+
+  buildForm() {
+    const controls = this.repo.settings.map(setting => {
+      return this.fb.control(setting.selected, [Validators.required]);
+    });
+    this.settingFormArray = this.fb.array(controls);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.repo) {
+      this.buildForm();
+    }
+  }
+}

zeppelin-web-angular/src/app/pages/workspace/notebook-repos/notebook-repos-routing.module.ts

@@ -0,0 +1,28 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { NotebookReposComponent } from './notebook-repos.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NotebookReposComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class NotebookReposRoutingModule {}

zeppelin-web-angular/src/app/pages/workspace/notebook-repos/notebook-repos.component.html

@@ -0,0 +1,21 @@
+<!--
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<zeppelin-page-header title="Notebook Repository" description="Manage your Notebook Repositories' settings.">
+</zeppelin-page-header>
+<div class="content">
+  <zeppelin-notebook-repo-item
+    *ngFor="let repo of repositories"
+    (repoChange)="updateRepoSetting($event)"
+    [repo]="repo">
+
+  </zeppelin-notebook-repo-item>
+</div>

zeppelin-web-angular/src/app/pages/workspace/notebook-repos/notebook-repos.component.less

@@ -0,0 +1,20 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import 'theme-mixin';
+
+.themeMixin({
+
+  .content {
+    padding: @card-padding-base / 2;
+  }
+});

zeppelin-web-angular/src/app/pages/workspace/notebook-repos/notebook-repos.component.ts

@@ -0,0 +1,51 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { NotebookRepo } from '@zeppelin/interfaces';
+import { NotebookRepoService } from '@zeppelin/services';
+
+@Component({
+  selector: 'zeppelin-notebook-repos',
+  templateUrl: './notebook-repos.component.html',
+  styleUrls: ['./notebook-repos.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NotebookReposComponent implements OnInit {
+  repositories: NotebookRepo[] = [];
+
+  constructor(private notebookRepoService: NotebookRepoService, private cdr: ChangeDetectorRef) {}
+
+  ngOnInit() {
+    this.getRepos();
+  }
+
+  getRepos() {
+    this.notebookRepoService.getRepos().subscribe(data => {
+      this.repositories = data.sort((a, b) => a.name.charCodeAt(0) - b.name.charCodeAt(0));
+      this.cdr.markForCheck();
+    });
+  }
+
+  updateRepoSetting(repo: NotebookRepo) {
+    const data = {
+      name: repo.className,
+      settings: {}
+    };
+    repo.settings.forEach(({ name, selected }) => {
+      data.settings[name] = selected;
+    });
+
+    this.notebookRepoService.updateRepo(data).subscribe(() => {
+      this.getRepos();
+    });
+  }
+}