Commit 64bc6134 authored by Pierre Smeyers's avatar Pierre Smeyers
Browse files

feat: selectable include method and version policy

parent 343649a2

package-lock.json

+409 −317

File changed.

Preview size limit exceeded, changes collapsed.

src/app/app.module.ts

+23 −20
Original line number Diff line number Diff line 
import {BrowserModule} from '@angular/platform-browser';

import {NgModule} from '@angular/core';

import {HttpClientModule} from '@angular/common/http';

import {FormsModule} from '@angular/forms';

import { BrowserModule } from "@angular/platform-browser";

import { NgModule } from "@angular/core";

import { HttpClientModule } from "@angular/common/http";

import { FormsModule } from "@angular/forms";



import {ShowdownModule} from 'ngx-showdown';

import { ShowdownModule } from "ngx-showdown";

// import {MatomoModule} from 'ngx-matomo';



import {AppComponent} from './app.component';

import {KickerComponent} from './kicker/kicker.component';

import {GitlabCiComponent} from './gitlab-ci/gitlab-ci.component';

import {TemplatesSectionComponent} from './templates-section/templates-section.component';

import {StepbarComponent} from './stepbar/stepbar.component';

import {VariableEditorComponent} from './variable-editor/variable-editor.component';

import {OptionsBoxComponent} from './options-box/options-box.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from "./app.component";

import { KickerComponent } from "./kicker/kicker.component";

import { GitlabCiComponent } from "./gitlab-ci/gitlab-ci.component";

import { TemplatesSectionComponent } from "./templates-section/templates-section.component";

import { StepbarComponent } from "./stepbar/stepbar.component";

import { VariableEditorComponent } from "./variable-editor/variable-editor.component";

import { OptionsBoxComponent } from "./options-box/options-box.component";

import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

import { OptionsFormComponent } from "./options-form/options-form.component";



@NgModule({

  declarations: [
@@ -24,19 +25,21 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 
    StepbarComponent,

    VariableEditorComponent,

    OptionsBoxComponent,

    OptionsFormComponent,

  ],

  imports: [

    BrowserModule,

    HttpClientModule,

    FormsModule,

    ShowdownModule.forRoot(

      {emoji: true, noHeaderId: true, openLinksInNewWindow: true}

    ),

    ShowdownModule.forRoot({

      emoji: true,

      noHeaderId: true,

      openLinksInNewWindow: true,

    }),

    // MatomoModule,

    NgbModule

    NgbModule,

  ],

  providers: [],

  bootstrap: [AppComponent]

  bootstrap: [AppComponent],

})

export class AppModule {

}
 
export class AppModule {}

src/app/gitlab-ci/gitlab-ci.component.css

+11 −1
Original line number Diff line number Diff line 
:host  {

.gitlab-ci-toolbar {

  /* border-left: solid 10px #595959; */

  background-color: #ddd;

  width: auto;

  border-top: solid #2b2b2b 6px;

}

.gitlab-ci-container  {

  position: relative;

  display: block;

  width: auto;

}

#gitlab-ci-content {

  min-height: 10rem;

}

code {

  display: block;

src/app/gitlab-ci/gitlab-ci.component.html

+243 −65
Original line number Diff line number Diff line 
<button class="btn-clipboard btn btn-sm btn-secondary" placement="top" ngbTooltip="Copy to clipboard"

        id="copy-yaml-to-clipboard" (click)="copyToClipboard()">Copy

<div class="gitlab-ci-toolbar d-flex align-items-center flex-row p-2">

  <!-- Include Mode (local/remote/template) -->

  <div>

    <label

      class="col-form-label col-form-label-sm">Include <i class="fas fa-circle-info" ngbTooltip="Select the template include method you want to use."></i></label>

    <div

      class="btn-group btn-group-toggle btn-group-sm rounded ml-1"

      data-toggle="buttons"

    >

      <label

        class="btn btn-secondary"

        [class.active]="options.includeMode === mode"

        [class.hide]="mode === includeModes.component"

        *ngFor="let mode of keys(includeModes)"

      >

        <input

          type="radio"

          name="include-mode"

          [(ngModel)]="options.includeMode"

          [value]="mode"

          [checked]="options.includeMode === mode"

        />{{ mode }}</label

      >

    </div>

  </div>

  <!-- Version Mode (major/minor/patch) -->

  <div class="ml-4">

    <label class="col-form-label col-form-label-sm">Version <i class="fas fa-circle-info" ngbTooltip="Select the template version pattern you want to include."></i></label>

    <div

      class="btn-group btn-group-toggle btn-group-sm rounded ml-1"

      data-toggle="buttons"

    >

      <label

        class="btn btn-secondary"

        [class.active]="options.versionMode === mode"

        *ngFor="let mode of keys(versionModes)"

      >

        <input

          type="radio"

          name="version-mode"

          [(ngModel)]="options.versionMode"

          [value]="mode"

          [checked]="options.versionMode === mode"

        />{{ mode }}</label

      >

    </div>

  </div>

  <!-- Show Stages -->

  <div class="custom-control custom-control-inline custom-checkbox ml-4 mb-0">

    <input type="checkbox" class="custom-control-input" id="stages-control"

          [(ngModel)]="options.showStages">

    <label class="custom-control-label" for="stages-control">With stages <i class="fas fa-circle-info" ngbTooltip="Required if you wish to override default stages."></i></label>

  </div>

</div>

<div class="gitlab-ci-container">

  <button

    class="btn-clipboard btn btn-sm btn-secondary"

    placement="top"

    ngbTooltip="Copy to clipboard"

    id="copy-yaml-to-clipboard"

    (click)="copyToClipboard()"

  >

    Copy

  </button>

  <code id="gitlab-ci-content">

    <div id="gitlab-ci-includes" [class.hide]="!hasIncludes()">

      <pre class="comment"># included templates</pre>

      <span class="key">include</span>:

      <div class="elements"></div>

      <div *ngFor="let template of templates" [class.hide]="!template.enabled">

      <div

        *ngFor="let template of templates"

        [ngSwitch]="options.includeMode"

        [class.hide]="!template.enabled"

      >

        <pre class="comment">  # {{ template.name }} template</pre>

        <div *ngSwitchCase="includeModes.project">

          <pre>  - <span class="key">project</span>: "<span class="value">{{ template.project.path }}</span>"</pre>

        <pre>    <span class="key">ref</span>: "<span class="value">{{ template.project.tag }}</span>"</pre>

          <pre>    <span class="key">ref</span>: "<span class="value">{{ template.project.getLatestVersion(options.versionMode) }}</span>"</pre>

          <pre>    <span class="key">file</span>: "<span class="value">{{ template.template_path }}</span>"</pre>

        <div *ngFor="let variant of template.variants" [class.hide]="!variant.enabled">

          <pre class="comment">  # {{ template.name }} template ({{ variant.name }} variant)</pre>

          <div

            *ngFor="let variant of template.variants"

            [class.hide]="!variant.enabled"

          >

            <pre class="comment">

  # {{ template.name }} template ({{ variant.name }} variant)</pre

            >

            <pre>  - <span class="key">project</span>: "<span class="value">{{ variant.project.path }}</span>"</pre>

          <pre>    <span class="key">ref</span>: "<span class="value">{{ variant.project.tag }}</span>"</pre>

            <pre>    <span class="key">ref</span>: "<span class="value">{{ variant.project.getLatestVersion(options.versionMode) }}</span>"</pre>

            <pre>    <span class="key">file</span>: "<span class="value">{{ variant.template_path }}</span>"</pre>

          </div>

        </div>

        <div *ngSwitchCase="includeModes.remote">

          <pre>  - <span class="key">remote</span>: "<span class="value">https://{{ serverHost }}/{{ template.project.path }}/-/raw/{{ template.project.getLatestVersion(options.versionMode) }}/{{ template.template_path }}</span>"</pre>

          <div

            *ngFor="let variant of template.variants"

            [class.hide]="!variant.enabled"

          >

            <pre class="comment">

  # {{ template.name }} template ({{ variant.name }} variant)</pre

            >

            <pre>  - <span class="key">remote</span>: "<span class="value">https://{{ serverHost }}/{{ variant.project.path }}/-/raw/{{ variant.project.getLatestVersion(options.versionMode) }}/{{ variant.template_path }}</span>"</pre>

          </div>

        </div>

        <div *ngSwitchCase="includeModes.component">

          <pre>  - <span class="key">component</span>: "<span class="value">{{ serverHost }}/{{ template.project.path }}/{{ template.templateFile }}@{{ template.project.getLatestVersion(options.versionMode) }}</span>"</pre>

          <div [class.hide]="!hasInputs(template)">

            <pre>    <span class="key">inputs</span>:</pre>

            <div class="elements">

              <!-- template variables -->

              <pre

                *ngFor="let variable of template.nonSecrets"

                [class.hide]="variable.isDefault"

              >      <span class="key">{{ template.getInputName(variable.name) }}</span>: <span class="value">{{ variable.inputValue }}</span></pre>

              <!-- feature variables -->

              <div *ngFor="let feature of template.features">

                <!-- disable variable -->

                <pre

                  *ngIf="feature.disable_with"

                  [class.hide]="feature.enabled"

                >      <span class="key">{{ template.getInputName(feature.disable_with) }}</span>: <span class="value">true</span></pre>

                <div [class.hide]="!feature.enabled">

                  <!-- enable variable -->

                  <pre

                    *ngIf="feature.enable_with"

                  >      <span class="key">{{ template.getInputName(feature.enable_with) }}</span>: <span class="value">true</span></pre>

                  <pre

                    *ngFor="let variable of feature.nonSecrets"

                    [class.hide]="variable.isDefault"

                  >      <span class="key">{{ template.getInputName(variable.name) }}</span>: <span class="value">{{ variable.inputValue }}</span></pre>

                </div>

              </div>

            </div>

          </div>

          <div

            *ngFor="let variant of template.variants"

            [class.hide]="!variant.enabled"

          >

            <pre>  - <span class="key">component</span>: "<span class="value">{{ serverHost }}/{{ variant.project.path }}/{{ variant.templateFile }}@{{ variant.project.getLatestVersion(options.versionMode) }}</span>"</pre>

            <pre class="comment">

  # {{ template.name }} template ({{ variant.name }} variant)</pre

            >

            <div [class.hide]="!hasInputs(variant)">

              <pre>    <span class="key">inputs</span>:</pre>

              <div class="elements">

                <!-- variant variables -->

                <pre

                  *ngFor="let variable of variant.nonSecrets"

                  [class.hide]="variable.isDefault"

                >      <span class="key">{{ template.getInputName(variable.name) }}</span>: <span class="value">{{ variable.inputValue }}</span></pre>

                <!-- feature variables -->

                <div *ngFor="let feature of variant.features">

                  <!-- disable variable -->

                  <pre

                    *ngIf="feature.disable_with"

                    [class.hide]="feature.enabled"

                  >      <span class="key">{{ template.getInputName(feature.disable_with) }}</span>: <span class="value">true</span></pre>

                  <div [class.hide]="!feature.enabled">

                    <!-- enable variable -->

                    <pre

                      *ngIf="feature.enable_with"

                    >      <span class="key">{{ template.getInputName(feature.enable_with) }}</span>: <span class="value">true</span></pre>

                    <pre

                      *ngFor="let variable of feature.nonSecrets"

                      [class.hide]="variable.isDefault"

                    >      <span class="key">{{ template.getInputName(variable.name) }}</span>: <span class="value">{{ variable.inputValue }}</span></pre>

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

      <br />

    </div>

    <div id="gitlab-ci-secrets" [class.hide]="!hasSecrets()">

      <pre class="comment"># secret variables</pre>

    <pre class="comment"># (define the variables below in your GitLab group/project variables)</pre>

      <pre class="comment">

# (define the variables below in your GitLab group/project variables)</pre

      >

      <div class="elements">

      <div *ngFor="let template of templates" [class.hide]="!template.enabled">

        <div

          *ngFor="let template of templates"

          [class.hide]="!template.enabled"

        >

          <!-- template secrets -->

        <pre *ngFor="let secret of template.secrets" class="comment"># {{ secret.name }}: {{ secret.description }}</pre>

          <pre *ngFor="let secret of template.secrets" class="comment">

# {{ secret.name }}: {{ secret.description }}</pre

          >

          <!-- feature secrets -->

        <div *ngFor="let feature of template.features" [class.hide]="!feature.enabled">

          <pre *ngFor="let secret of feature.secrets" class="comment"># {{ secret.name }}: {{ secret.description }}</pre>

          <div

            *ngFor="let feature of template.features"

            [class.hide]="!feature.enabled"

          >

            <pre *ngFor="let secret of feature.secrets" class="comment">

# {{ secret.name }}: {{ secret.description }}</pre

            >

          </div>

        </div>

      </div>
@@ -39,24 +203,38 @@ 
      <pre class="comment"># variables</pre>

      <span class="key">variables</span>:

      <div class="elements">

      <div *ngFor="let template of templates" [class.hide]="!template.enabled">

        <div

          *ngFor="let template of templates"

          [class.hide]="!template.enabled"

        >

          <!-- template variables -->

        <pre *ngFor="let variable of template.nonSecrets" [class.hide]="variable.isDefault">  <span class="key">{{ variable.name }}</span>: "<span class="value">{{ variable.value }}</span>"</pre>

          <pre

            *ngFor="let variable of template.nonSecrets"

            [class.hide]="variable.isDefault"

          >  <span class="key">{{ variable.name }}</span>: "<span class="value">{{ variable.value }}</span>"</pre>

          <!-- feature variables -->

          <div *ngFor="let feature of template.features">

            <!-- disable variable -->

          <pre *ngIf="feature.disable_with" [class.hide]="feature.enabled">  <span class="key">{{ feature.disable_with }}</span>: "<span class="value">true</span>"</pre>

            <pre

              *ngIf="feature.disable_with"

              [class.hide]="feature.enabled"

            >  <span class="key">{{ feature.disable_with }}</span>: "<span class="value">true</span>"</pre>

            <div [class.hide]="!feature.enabled">

              <!-- enable variable -->

            <pre *ngIf="feature.enable_with">  <span class="key">{{ feature.enable_with }}</span>: "<span class="value">true</span>"</pre>

            <pre *ngFor="let variable of feature.nonSecrets" [class.hide]="variable.isDefault">  <span class="key">{{ variable.name }}</span>: "<span class="value">{{ variable.value }}</span>"</pre>

              <pre

                *ngIf="feature.enable_with"

              >  <span class="key">{{ feature.enable_with }}</span>: "<span class="value">true</span>"</pre>

              <pre

                *ngFor="let variable of feature.nonSecrets"

                [class.hide]="variable.isDefault"

              >  <span class="key">{{ variable.name }}</span>: "<span class="value">{{ variable.value }}</span>"</pre>

            </div>

          </div>

        </div>

      </div>

      <br />

    </div>

  <div id="gitlab-ci-stages">

    <div id="gitlab-ci-stages" *ngIf="options.showStages">

      <pre class="comment"># your pipeline stages</pre>

      <span class="key">stages</span>:

      <div class="elements">
@@ -72,5 +250,5 @@ 
        <pre>  - production</pre>

      </div>

    </div>



  </code>

</div>

src/app/gitlab-ci/gitlab-ci.component.ts

+29 −1
Original line number Diff line number Diff line 
import {Component, ElementRef, Input} from '@angular/core';

import {Template} from '../kicker';

import {IncludeMode, Options, Template, VersionMode} from '../kicker';

// import {MatomoTracker} from 'ngx-matomo';



@Component({
@@ -11,6 +11,11 @@ export class GitlabCiComponent { 
  @Input() templates: Template[];

  // @ViewChild('#copy-yaml-to-clipboard') copyButtonRef: ElementRef;

  // @ViewChild('#gitlab-ci-content') yamlContent: ElementRef;

  @Input() options: Options;

  @Input() serverHost: string;

  keys = Object.keys;

  includeModes = IncludeMode;

  versionModes = VersionMode



  constructor(

    private hostRef: ElementRef // ,
@@ -44,6 +49,9 @@ export class GitlabCiComponent { 
   * Determines whether there is at least one variable set (not default)

   */

  hasVariables() {

    if (this.options.includeMode == IncludeMode.component) {

      return false;

    }

    for (const template of this.templates) {

      if (template.enabled) {

        if (template.variables.filter(variable => !variable.secret && !variable.isDefault).length > 0) {
@@ -68,6 +76,26 @@ export class GitlabCiComponent { 
    return false;

  }



  hasInputs(template: any) {

    if (template.variables.filter(variable => !variable.secret && !variable.isDefault).length > 0) {

      return true;

    }

    for (const feature of template.features) {

      if (feature.enabled) {

        if (feature.enable_with) {

          return true;

        }

        if (feature.variables.filter(variable => !variable.secret && !variable.isDefault).length > 0) {

          return true;

        }

      } else {

        if (feature.disable_with) {

          return true;

        }

      }

    }

  }



  copyToClipboard() {

    // select

    const node = document.getElementById('gitlab-ci-content');