Spacing issues fixed in setting dialog box

proper naming used for the component

src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.ts

@@ -28,7 +28,7 @@ export class EditPipelineHeaderComponent extends BaseEntityHeaderComponent imple
   }
   @Input() pipelineData: Pipeline;
   @Output() createPipelineStep        = new EventEmitter();
-  @Output() settingsPipelineAction       = new EventEmitter();
+  @Output() pipelineSettings       = new EventEmitter();
   @Output() savePipeline        = new EventEmitter();
   @Output() compilePipeline = new EventEmitter();
   @Output() runPipeline        = new EventEmitter();
@@ -56,7 +56,7 @@ export class EditPipelineHeaderComponent extends BaseEntityHeaderComponent imple
     this.createPipelineStep.emit();
   }
   settings() {
-    this.settingsPipelineAction.emit();
+    this.pipelineSettings.emit();
   }
   savePipelineClicked() {
     this.savePipeline.emit();

src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html

@@ -1,4 +1,4 @@
-<sm-edit-pipeline-header (settingsPipelineAction)="settings()" (createPipelineStep)="createPipelineStep()"
+<sm-edit-pipeline-header (pipelineSettings)="settings()" (createPipelineStep)="createPipelineStep()"
   (savePipeline)="savePipeline()" (compilePipeline)="compilePipeline()" (runPipeline)="runPipeline()"
   [pipelineData]="selectedPipeline">
 </sm-edit-pipeline-header>

src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { PipelineAddStepDialogComponent } from '../pipeline-add-step-dialog/pipeline-add-step-dialog.component';
-import { PipelineSettingComponent } from '../pipeline-setting/pipeline-setting.component';
+import { PipelineSettingDialogComponent } from '../pipeline-setting/pipeline-setting.dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
-import { createPipelineStep, settingsPipelineAction, getPipelineById, resetPipelines, resetPipelinesSearchQuery, updatePipeline, compilePipeline, runPipeline } from '../pipelines.actions';
+import { createPipelineStep, pipelineSettings, getPipelineById, resetPipelines, resetPipelinesSearchQuery, updatePipeline, compilePipeline, runPipeline } from '../pipelines.actions';
 import { selectRouterParams } from '@common/core/reducers/router-reducer';
 import { Observable, Subscription, map } from 'rxjs';
 import { Params } from '@angular/router';
@@ -118,7 +118,7 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy  {
   }
 
   settings() {
-    this.dialog.open(PipelineSettingComponent, {
+    this.dialog.open(PipelineSettingDialogComponent, {
       data: {defaultExperimentId: ''},
       panelClass: 'light-theme',
       width: '640px'
@@ -126,7 +126,7 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy  {
       .afterClosed()
       .subscribe(pipeline => {
         if (pipeline) {
-          this.store.dispatch(settingsPipelineAction({pipelinesSettingsRequest: pipeline}));
+          this.store.dispatch(pipelineSettings({pipelinesSettingsRequest: pipeline}));
         }
       });
   }

src/app/webapp-common/pipelines/pipeline-setting/pipeline-setting-form/pipeline-setting-form.component.html

@@ -8,20 +8,9 @@
   <mat-checkbox name="emailAlert" [(ngModel)]="settingFields.emailAlert">Send email alert on failure</mat-checkbox>
   <mat-checkbox name="scheduling" [(ngModel)]="settingFields.scheduling">Enable Scheduling</mat-checkbox>
 
-
-  <!-- <mat-form-field class="w-100" appearance="outline">
-    <mat-label>Schedule Interval</mat-label>
-    <mat-select [(ngModel)]="settingFields.interval" name="intervalName" required (selectionChange)="intervalSelected($event)">
-      <mat-option value="custom">Custom</mat-option>
-      <mat-option value="daily">Daily</mat-option>
-      <mat-option value="hourly">Hourly</mat-option>
-      <mat-option value="weekly">Weekly</mat-option>
-    </mat-select>
-  </mat-form-field> -->
-
   <mat-form-field class="w-100" appearance="outline">
     <mat-label>Schedule Interval</mat-label>
-    <input matInput placeholder="Search for existing intervals" [matAutocomplete]="auto" [(ngModel)]="settingFields.interval" name="intervalName" required>
+    <input matInput placeholder="Search for existing intervals" [matAutocomplete]="auto" [(ngModel)]="settingFields.interval" name="intervalName">
     <mat-autocomplete #auto="matAutocomplete" (optionSelected)="intervalSelected($event)">
       <mat-option value="custom">Custom</mat-option>
       <mat-option value="daily">Daily</mat-option>

src/app/webapp-common/pipelines/pipeline-setting/pipeline-setting-form/pipeline-setting-form.component.scss

@@ -10,5 +10,21 @@
         min-height: 68px;
       }
     }
+
+    .mat-mdc-checkbox{
+    margin-left: -5.5px;
+    margin-bottom: 10px;
   }
 
+  }
+  ::ng-deep .dark-theme .mat-mdc-checkbox .mdc-checkbox {
+    --mdc-checkbox-selected-icon-color: #767d92;
+    --mdc-checkbox-selected-hover-icon-color: #767d92;
+    --mdc-checkbox-selected-focus-icon-color: #767d92;
+}
+::ng-deep .dark-theme .mat-mdc-option {
+  --mat-option-label-text-color: #767d92;
+}
+::ng-deep .dark-theme .mat-mdc-option.mdc-list-item:hover {
+  background-color: #dce0ee;
+}

src/app/webapp-common/pipelines/pipeline-setting/pipeline-setting.dialog.component.ts

@@ -15,16 +15,16 @@ import { getAllExperiments } from '../pipelines.actions';
 
 @Component({
   selector: 'sm-pipeline-setting',
-  templateUrl: './pipeline-setting.component.html',
+  templateUrl: './pipeline-setting.dialog.component.html',
-  styleUrls: ['./pipeline-setting.component.scss']
+  styleUrls: ['./pipeline-setting.dialog.component.scss']
 })
-export class PipelineSettingComponent {
+export class PipelineSettingDialogComponent {
   // public experiments$: Observable<Task[]>;
   public readOnlyIntervalNames$: Observable<string[]>;
 
   constructor(
     private store: Store,
-    private matDialogRef: MatDialogRef<PipelineSettingComponent>,
+    private matDialogRef: MatDialogRef<PipelineSettingDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: { defaultExperimentId: string}
   ) {
     // this.experiments$ = this.store.select(selectExperiments);

src/app/webapp-common/pipelines/pipelines.actions.ts

@@ -17,7 +17,7 @@ export const createPipelineStep = createAction(
   PIPELINES_PREFIX + 'CREATE_PIPELINE_STEP',
   props<{ pipelinesCreateStepRequest: PipelinesCreateStepsRequest }>()
 );
-export const settingsPipelineAction= createAction(
+export const pipelineSettings= createAction(
   PIPELINES_PREFIX + 'SETTINGS_PIPELINE_ACTION',
   props<{ pipelinesSettingsRequest: pipelinesSettingsModel }>()
 );

src/app/webapp-common/pipelines/pipelines.effects.ts

@@ -5,7 +5,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {catchError, filter, map, mergeMap, switchMap, /* tap */} from 'rxjs/operators';
 import {activeLoader, addMessage, /* addMessage, */ deactivateLoader, setServerError} from '../core/actions/layout.actions';
 import {requestFailed} from '../core/actions/http.actions';
-import {settingsPipelineAction,
+import {pipelineSettings,
   createPipeline, createPipelineStep, getAllExperiments, getExperimentById, getPipelineById, setExperimentsResults, setSelectedPipeline, updatePipeline, updatePipelineSuccess, compilePipeline, runPipeline
 } from './pipelines.actions';
 // import {ApiReportsService} from '~/business-logic/api-services/reports.service';
@@ -121,7 +121,7 @@ export class PipelinesEffects {
   
 
   activeLoader = createEffect(() => this.actions.pipe(
-    ofType(/* getReports, getReport, */ createPipeline, createPipelineStep, getAllExperiments, settingsPipelineAction/*  updateReport, restoreReport, archiveReport */),
+    ofType(/* getReports, getReport, */ createPipeline, createPipelineStep, getAllExperiments, pipelineSettings/*  updateReport, restoreReport, archiveReport */),
     filter(action => !action['refresh']),
     map(action => activeLoader(action.type))
   ));
@@ -203,20 +203,20 @@ export class PipelinesEffects {
       })))
   ));
   
-  settingsPipelineAction$ = createEffect(() => this.actions.pipe(
+  pipelineSettings$ = createEffect(() => this.actions.pipe(
-    ofType(settingsPipelineAction),
+    ofType(pipelineSettings),
     switchMap((action) => this.pipelinesApiService.pipelinesSettingCall(action.pipelinesSettingsRequest)
       .pipe(mergeMap((res: pipelinesSettingsModel) => {
         // eslint-disable-next-line no-console
         console.log(res)
         // this.router.navigate(['pipelines', res.id, 'edit']);
-        return [deactivateLoader(settingsPipelineAction.type)];
+        return [deactivateLoader(pipelineSettings.type)];
       }),
       catchError(err => {
         return [
           requestFailed(err),
           setServerError(err, null, 'failed to create a new pipeline step'),
-          deactivateLoader(settingsPipelineAction.type),
+          deactivateLoader(pipelineSettings.type),
         ]
       })))
   ));

src/app/webapp-common/pipelines/pipelines.module.ts

@@ -20,7 +20,7 @@ import { MatSidenavModule } from "@angular/material/sidenav";
 import { MatInputModule } from "@angular/material/input";
 import { PipelineDialogComponent } from "./pipeline-dialog/pipeline-dialog.component";
 import { CreateNewPipelineFormComponent } from "./pipeline-dialog/create-new-pipeline-form/create-new-pipeline-form.component";
-import { PipelineSettingComponent } from './pipeline-setting/pipeline-setting.component';
+import { PipelineSettingDialogComponent } from './pipeline-setting/pipeline-setting.dialog.component';
 import { PipelineSettingFormComponent } from './pipeline-setting/pipeline-setting-form/pipeline-setting-form.component';
 import { MatAutocompleteModule } from "@angular/material/autocomplete";
 import { ScrollEndDirective } from "@common/shared/ui-components/directives/scroll-end.directive";
@@ -118,7 +118,7 @@ const getInitState = (userPreferences: UserPreferences) => ({
     EditPipelineHeaderComponent,
     PipelineParametersComponent,
     FlowEditorComponent,
-    PipelineSettingComponent,
+    PipelineSettingDialogComponent,
     PipelineSettingFormComponent,
     PipelineStepInfoComponent,
   ],