[ADF-3746] Add style lint rules (#3975)

* add stylelint * fix style first part * fix style second part * fix style third part * fix style fourth part * Fix e2e tests first part * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * fix insights * fix style abotu component * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * [ADF-3746] Rebase branch * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * Fix e2e tests second part * Rebase branch * Fix list error * fix new style added * tslint fix * [ADF-3746] Fix scss errors on Process Filters Cloud component
2025-07-24 17:32:15 +00:00 · 2018-11-28 14:43:18 +00:00
parent 5fc03cf26b
commit 1a21f234b6
234 changed files with 2328 additions and 1058 deletions
--- a/lib/insights/analytics-process/components/analytics-generator.component.html
+++ b/lib/insights/analytics-process/components/analytics-generator.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="reports">
-    <div class="report-icons">
+    <div class="adf-report-icons">
        <button mat-icon-button
                *ngFor="let report of reports; let idx = index"
                [matTooltip]="report.title"
@@ -8,7 +8,7 @@
            <mat-icon>{{report.icon}}</mat-icon>
        </button>
    </div>
-    <div class="clear-both"> </div>
+    <div class="adf-clear-both"> </div>
    <div *ngFor="let report of reports; let idx = index">
        <div [ngSwitch]="report.type">
            <div *ngSwitchCase="'pie'">
@@ -17,7 +17,7 @@
                    <div *ngIf="!report.hasData()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                    <div *ngIf="report.hasData()">
                        <div *ngIf="report.hasZeroValues()">{{'ANALYTICS.MESSAGES.ZERO-DATA-FOUND' | translate}}</div>
-                        <canvas baseChart *ngIf="!report.hasZeroValues()" class="chart"
+                        <canvas baseChart *ngIf="!report.hasZeroValues()" class="adf-chart"
                                [data]="report.data"
                                [labels]="report.labels"
                                [chartType]="report.type">
@@ -30,7 +30,7 @@
                    <h4>{{report.title}}</h4>
                    <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                    <div [attr.id]="'chart-table-' + report.id" *ngIf="report.hasDatasets()">
-                        <table class="table table-responsive table-condensed" class="partial-width">
+                        <table class="adf-table adf-table-responsive adf-table-condensed" class="adf-partial-width">
                            <tr>
                                <th *ngFor="let label of report.labels">{{label | translate}}</th>
                            </tr>
@@ -46,17 +46,17 @@
                    <h4>{{report.title}}</h4>
                    <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                    <div [attr.id]="'chart-master-detail-table-' + report.id" *ngIf="report.hasDatasets()">
-                        <table class="table table-responsive table-condensed" class="full-width">
+                        <table class="adf-table adf-table-responsive adf-table-condensed adf-full-width">
                            <tr>
                                <th *ngFor="let label of report.labels">{{label | translate}}</th>
                            </tr>
-                            <tr *ngFor="let rows of report.datasets" class="analytics-row__entry">
+                            <tr *ngFor="let rows of report.datasets" class="adf-analytics-row__entry">
                                <td *ngFor="let row of rows" (click)="toggleDetailsTable()">{{row | translate }}</td>
                            </tr>
                        </table>
                    </div>
                    <div [attr.id]="'chart-master-detail-' + report.id" *ngIf="isShowDetails()">
-                        <table class="table table-responsive table-condensed" class="full-width">
+                        <table class="adf-table adf-table-responsive adf-table-condensed adf-full-width">
                            <tr>
                                <th *ngFor="let label of report.detailsTable.labels">{{label | translate}}</th>
                            </tr>
@@ -71,7 +71,7 @@
                <div *ngIf="isCurrent(idx)">
                    <h4>{{report.title}}</h4>
                    <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
-                    <canvas baseChart *ngIf="report.hasDatasets()" class="chart"
+                    <canvas baseChart *ngIf="report.hasDatasets()" class="adf-chart"
                            [datasets]="report.datasets"
                            [labels]="report.labels"
                            [options]="report.options"
@@ -91,7 +91,7 @@
                            [(ngModel)]="report.options.scales.xAxes[0].stacked"
                            (change)="refresh(report)">Stacked</mat-checkbox>

-                        <canvas baseChart class="chart"
+                        <canvas baseChart class="adf-chart"
                                [datasets]="report.datasets"
                                [labels]="report.labels"
                                [options]="report.options"
--- a/lib/insights/analytics-process/components/analytics-generator.component.scss
+++ b/lib/insights/analytics-process/components/analytics-generator.component.scss
@@ -1,26 +1,26 @@
-.chart {
+.adf-chart {
    display: block;
    width: 100%;
 }

-.analytics-row__entry {
+.adf-analytics-row__entry {
    cursor: pointer;
 }

-.report-icons {
+.adf-report-icons {
    margin: 20px 0;
    float: left;
 }

-.full-width {
-    width: 100%
+.adf-full-width {
+    width: 100%;
 }

-.partial-width {
+.adf-partial-width {
    width: 80%;
-    margin-left: 20px
+    margin-left: 20px;
 }

-.clear-both {
+.adf-clear-both {
    clear: both;
 }
--- a/lib/insights/analytics-process/components/analytics-report-list.component.html
+++ b/lib/insights/analytics-process/components/analytics-report-list.component.html
@@ -1,15 +1,15 @@
 <div class="adf-analytics-report-list menu-container">
    <mat-nav-list *ngIf="isList()">
        <mat-list-item
-            class="activiti-filters__entry"
+            class="adf-activiti-filters__entry"
            (click)="selectReport(report)"
            *ngFor="let report of reports; let idx = index"
-            [class.active]="currentReport === report">
-            <span [attr.id]="'report-list-' + idx" class="activiti-filters__label">
+            [class.adf-active]="currentReport === report">
+            <span [attr.id]="'report-list-' + idx" class="adf-activiti-filters__label">
                <mat-icon mat-list-icon
                    [attr.data-automation-id]="report.name + '_filter'"
-                    class="activiti-filters__entry-icon">assignment</mat-icon>
-                <span class="text">{{report.name}}</span>
+                    class="adf-activiti-filters__entry-icon">assignment</mat-icon>
+                <span class="adf-text">{{report.name}}</span>
            </span>
        </mat-list-item>
    </mat-nav-list>
@@ -19,7 +19,7 @@
                <mat-icon class="adf-report-card-logo-icon">equalizer</mat-icon>
            </div>
            <div mat-card-title class="adf-report-card-title">
-                <h1 class="application-title">{{report.name}}</h1>
+                <h1 class="adf-application-title">{{report.name}}</h1>
            </div>
            <div mat-card-content class="adf-report-card-content">
                <p>{{report.description}}</p>
--- a/lib/insights/analytics-process/components/analytics-report-list.component.scss
+++ b/lib/insights/analytics-process/components/analytics-report-list.component.scss
@@ -6,16 +6,16 @@

    .adf-analytics-report-list {

-        .activiti-filters__entry {
+        .adf-activiti-filters__entry {
            cursor: pointer;
        }

-        .activiti-filters__entry-icon {
+        .adf-activiti-filters__entry-icon {
            position: relative;
            top: 5px;
        }

-        .activiti-filters__label {
+        .adf-activiti-filters__label {
            white-space: nowrap;
            overflow: hidden;
        }
@@ -24,11 +24,11 @@
            line-height: 48px;
        }

-        .activiti-filters__entry.active {
+        .adf-activiti-filters__entry.adf-active {
            color:  mat-color($primary);
        }

-        .activiti-filters__entry.active .activiti-filters__entry-icon {
+        .adf-activiti-filters__entry.adf-active .adf-activiti-filters__entry-icon {
            color:  mat-color($primary);
        }

@@ -70,7 +70,7 @@
                padding: 16px;
                z-index: 7;

-                .application-title {
+                .adf-application-title {
                    font-size: 24px;
                    margin: 0;
                }
--- a/lib/insights/analytics-process/components/analytics-report-list.component.spec.ts
+++ b/lib/insights/analytics-process/components/analytics-report-list.component.spec.ts
@@ -92,7 +92,7 @@ describe('AnalyticsReportListComponent', () => {

            component.success.subscribe(() => {
                fixture.detectChanges();
-                expect(element.querySelector('#report-list-0 .activiti-filters__entry-icon').innerHTML).toBe('assignment');
+                expect(element.querySelector('#report-list-0 .adf-activiti-filters__entry-icon').innerHTML).toBe('assignment');
                expect(element.querySelector('#report-list-0 > span').innerHTML).toBe('Fake Test Process definition heat map');
                expect(element.querySelector('#report-list-1 > span').innerHTML).toBe('Fake Test Process definition overview');
                expect(element.querySelector('#report-list-2 > span').innerHTML).toBe('Fake Test Process instances overview');
@@ -108,7 +108,7 @@ describe('AnalyticsReportListComponent', () => {

            component.success.subscribe(() => {
                fixture.detectChanges();
-                expect(element.querySelector('#report-list-0 .activiti-filters__entry-icon').innerHTML).toBe('assignment');
+                expect(element.querySelector('#report-list-0 .adf-activiti-filters__entry-icon').innerHTML).toBe('assignment');
                expect(element.querySelector('#report-list-0 > span').innerHTML).toBe('Fake Test Process definition heat map');
                expect(element.querySelector('#report-list-1 > span').innerHTML).toBe('Fake Test Process definition overview');
                expect(element.querySelector('#report-list-2 > span').innerHTML).toBe('Fake Test Process instances overview');
--- a/lib/insights/analytics-process/components/analytics-report-parameters.component.html
+++ b/lib/insights/analytics-process/components/analytics-report-parameters.component.html
@@ -1,4 +1,4 @@
-<div [class.hide]="hideComponent">
+<div [class.adf-hide]="hideComponent">
    <div class="adf-report-report-container">
        <div *ngIf="reportParameters">
            <form [formGroup]="reportForm" novalidate>
@@ -43,7 +43,7 @@
                    </adf-buttons-action-menu>
                </adf-toolbar>
                <div *ngFor="let field of reportParameters.definition.parameters"
-                        [class.is-hide]="isParametersHide()">
+                        [class.adf-is-hide]="isParametersHide()">
                    <div [ngSwitch]="field.type">
                        <div *ngSwitchCase="'integer'">
                            <br>
@@ -100,11 +100,11 @@
                    <div id="report-dialog" class="adf-report-dialog">
                        <h5 matDialogTitle id="report-dialog-title">{{action}} report</h5>
                        <div mat-dialog-content>
-                            <div *ngIf="isSaveAction()" id="save-title-submessage" class="export-message">
+                            <div *ngIf="isSaveAction()" id="save-title-submessage" class="adf-export-message">
                                {{'DIALOG.SAVE_MESSAGE' | translate}}
                            </div>
-                            <div class="save-export-input">
-                                <mat-form-field class="example-full-width" floatPlaceholder="always">
+                            <div class="adf-save-export-input">
+                                <mat-form-field class="adf-example-full-width" floatPlaceholder="always">
                                    <input matInput
                                        type="text"
                                        id="repName"
--- a/lib/insights/analytics-process/components/analytics-report-parameters.component.scss
+++ b/lib/insights/analytics-process/components/analytics-report-parameters.component.scss
@@ -5,23 +5,23 @@
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);

-    .dropdown-widget {
+    .adf-dropdown-widget {
        width: 100%;
    }

-    .dropdown-widget__select {
+    .adf-dropdown-widget__select {
        width: 100%;
    }

-    .dropdown-widget__invalid .dropdown-widget__select {
+    .adf-dropdown-widget__invalid .adf-dropdown-widget__select {
        border-color: mat-color($warn);
    }

-    .dropdown-widget__invalid .dropdown-widget__label {
+    .adf-dropdown-widget__invalid .adf-dropdown-widget__label {
        color: mat-color($warn);
    }

-    .dropdown-widget__invalid .dropdown-widget__label:after {
+    .adf-dropdown-widget__invalid .adf-dropdown-widget__label::after {
        background-color: mat-color($warn);
    }

@@ -56,7 +56,7 @@
        width: 100%;
    }

-    .is-hide {
+    .adf-is-hide {
        height: 0;
        overflow: hidden;
        transition: height 0.5s;
@@ -72,29 +72,29 @@
        }
    }

-    .report-container-setting {
+    .adf-report-container-setting {
        padding-left: 10px;
    }

-    .option_button_details {
+    .adf-option_button_details {
        padding-top: 20px;
    }

-    .export-message {
+    .adf-export-message {
        background-color: mat-color($background, background);
    }

-    .save-export-input {
+    .adf-save-export-input {
        width: 100%;
    }

-    .delete-parameter {
+    .adf-delete-parameter {
        position: absolute;
        margin-left: 60%;
        padding-top: 5px;
    }

-    .hide {
+    .adf-hide {
        display: none;
    }

--- a/lib/insights/analytics-process/components/analytics.component.scss
+++ b/lib/insights/analytics-process/components/analytics.component.scss
@@ -1 +1,4 @@
-.chart {display: block; width: 100%;}
+.adf-chart {
+    display: block;
+    width: 100%;
+}
--- a/lib/insights/analytics-process/components/widgets/dropdown/dropdown.widget.scss
+++ b/lib/insights/analytics-process/components/widgets/dropdown/dropdown.widget.scss
@@ -14,6 +14,6 @@
    color: #d50000;
 }

-.adf-dropdown-widget__invalid .adf-dropdown-widget__label:after {
+.adf-dropdown-widget__invalid .adf-dropdown-widget__label::after {
    background-color: #d50000;
-}
+}
--- a/lib/insights/analytics-process/components/widgets/duration/duration.widget.html
+++ b/lib/insights/analytics-process/components/widgets/duration/duration.widget.html
@@ -14,7 +14,7 @@
        </div>
    </div>
    <div class="adf-duration-widget-cell">
-        <div class="dropdown-container">
+        <div class="adf-dropdown-container">
            <analytics-dropdown-widget  [field]="duration" [group]="formGroup" [controllerName]="'timeType'"
                             [showDefaultOption]="false"
                             (fieldChanged)="calculateDuration()"></analytics-dropdown-widget>
--- a/lib/insights/analytics-process/components/widgets/duration/duration.widget.scss
+++ b/lib/insights/analytics-process/components/widgets/duration/duration.widget.scss
@@ -15,6 +15,6 @@
    }
 }

-.dropdown-container {
+.adf-dropdown-container {
    margin-top: 30px;
 }
--- a/lib/insights/analytics-process/components/widgets/number/number.widget.scss
+++ b/lib/insights/analytics-process/components/widgets/number/number.widget.scss
@@ -4,4 +4,4 @@
     .mat-form-field {
         width: 100%;
     }
-}
+}
--- a/lib/insights/diagram/components/tooltip/diagram-tooltip.component.html
+++ b/lib/insights/diagram/components/tooltip/diagram-tooltip.component.html
@@ -1,17 +1,17 @@
-<div #tooltipContent class="{{adf}}-diagram-tooltip">
-    <div class="{{adf}}-diagram-tooltip-header">{{ data.type }} {{ data.name || data.id }}</div>
-    <div class="{{adf}}-diagram-tooltip-body">
-        <div *ngIf="data.value" class="{{adf}}-diagram-heat-value">
-            <span class="{{adf}}-diagram-value">{{ data.value }}</span>
-            <span class="{{adf}}-diagram-valuetype"> {{ data.dataType }}</span>
+<div #tooltipContent class="adf-diagram-tooltip">
+    <div class="adf-diagram-tooltip-header">{{ data.type }} {{ data.name || data.id }}</div>
+    <div class="adf-diagram-tooltip-body">
+        <div *ngIf="data.value" class="adf-diagram-heat-value">
+            <span class="adf-diagram-value">{{ data.value }}</span>
+            <span class="adf-diagram-valuetype"> {{ data.dataType }}</span>
        </div>
-        <div *ngIf="data.name" class="{{adf}}-diagram-name-property">
-            <span class="{{adf}}-diagram-propertyName">Name:</span>
-            <span class="{{adf}}-diagram-propertyValue">{{ data.name }}</span>
+        <div *ngIf="data.name" class="adf-diagram-name-property">
+            <span class="adf-diagram-propertyName">Name:</span>
+            <span class="adf-diagram-propertyValue">{{ data.name }}</span>
        </div>
-        <div *ngFor="let property of data.properties" class="{{adf}}-diagram-general-property">
-            <span class="{{adf}}-diagram-propertyName">{{ property.name }}:</span>
-            <span class="{{adf}}-diagram-propertyValue">{{ property.value }}</span>
+        <div *ngFor="let property of data.properties" class="adf-diagram-general-property">
+            <span class="adf-diagram-propertyName">{{ property.name }}:</span>
+            <span class="adf-diagram-propertyValue">{{ property.value }}</span>
        </div>
    </div>
 </div>
--- a/lib/insights/diagram/components/tooltip/diagram-tooltip.component.scss
+++ b/lib/insights/diagram/components/tooltip/diagram-tooltip.component.scss
@@ -19,13 +19,13 @@
            word-wrap: break-word;
        }

-        &-diagram-tooltip.is-active {
+        &-diagram-tooltip.adf-is-active {
            animation: tooltipAnimation 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
        }

        &-diagram-tooltip-header {
            background-color: rgba(43, 65, 79, 0.95);
-            color: #FFF;
+            color: #fff;
            padding: 8px;
            font-weight: bold;
            min-width: 200px;
--- a/lib/insights/diagram/components/tooltip/diagram-tooltip.component.ts
+++ b/lib/insights/diagram/components/tooltip/diagram-tooltip.component.ts
@@ -33,7 +33,6 @@ export class DiagramTooltipComponent implements AfterViewInit, OnDestroy {
    private targetElement: any;
    private boundMouseEnterHandler: EventListenerObject;
    private boundMouseLeaveAndScrollHandler: EventListenerObject;
-    public adf: string = 'adf';

    @ViewChild('tooltipContent') tooltipContent: ElementRef;