@testgorilla/tgo-coding-test 0.0.1

package/src/lib/components/coding-test.module.ts

@@ -0,0 +1,124 @@
+import { CommonModule } from '@angular/common';
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { AngularSplitModule } from 'angular-split';
+import { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor-v2';
+import { QuillModule } from 'ngx-quill';
+import { MatSidenavModule } from '@angular/material/sidenav';
+// import { provideNgxWebstorage, StrategyIndex, withLocalStorage } from 'ngx-webstorage';
+import { provideNgxWebstorage } from 'ngx-webstorage';
+import { TgoCodingTestComponent } from './tgo-coding-test/tgo-coding-test.component';
+import { CodeEditorComponent } from './code-editor/code-editor.component';
+import { CodingQuestionComponent } from './coding-question/coding-question.component';
+import { CodingSectionComponent } from './coding-section/coding-section.component';
+import { ConfigurationsComponent } from './configurations/configurations.component';
+import { InstructionsComponent } from './instructions/instructions.component';
+import { PanelComponent } from './panel/panel.component';
+import { RunnableEditorComponent } from './runnable-editor/runnable-editor.component';
+import { TestCasesComponent } from './tests/test-cases/test-cases.component';
+import { TestResultsComponent } from './tests/test-results.component';
+import { MemoizeFuncPipe } from '../pipes/memoize-func.pipe';
+import { LibCodingTestService } from '../services/lib-coding-test.service';
+import { TestCasesStatusComponent } from './tests/test-cases-status/test-cases-status.component';
+import { TruncatedTextComponent } from './common/truncated-text/truncated-text.component';
+import { TestCasesContentComponent } from './tests/test-cases-content/test-cases-content.component';
+import {
+  ButtonComponentModule,
+  ToggleComponentModule,
+  ProgressBarComponentModule,
+  IconComponentModule,
+  IconLabelComponentModule,
+  SpinnerComponentModule,
+  DropdownComponentModule,
+  FieldComponentModule,
+  TooltipComponentModule,
+  DividerComponentModule,
+  CardComponentModule,
+} from '@testgorilla/tgo-ui';
+// import { CodeEditorService } from './code-editor/code-editor.service';
+// import { ConfigurationsService } from '../services/configurations.service';
+// import { TestCasesService } from '../services/test-cases.service';
+// import { ThemeService } from '../services/theme.service';
+import { MatCardModule } from '@angular/material/card';
+import { MatTabsModule } from '@angular/material/tabs';
+// import { StorageCodingService } from '../services/storage.service';
+
+const monacoConfig: NgxMonacoEditorConfig = {
+  baseUrl: 'assets/libs/monaco/min/vs',
+};
+
+@NgModule({
+  declarations: [
+    // TgoCodingTestComponent,
+    // CodeEditorComponent,
+    // CodingQuestionComponent,
+    // InstructionsComponent,
+    // CodingSectionComponent,
+    // TestResultsComponent,
+    // TestCasesComponent,
+    // PanelComponent,
+    // ConfigurationsComponent,
+    // RunnableEditorComponent,
+    // MemoizeFuncPipe,
+    // TestCasesContentComponent,
+    // TestCasesStatusComponent,
+    // TruncatedTextComponent,
+  ],
+  // imports: [
+  //   FormsModule,
+  //   CommonModule,
+  //   MonacoEditorModule.forRoot(monacoConfig),
+  //   AngularSplitModule,
+  //   ReactiveFormsModule,
+  //   MatCardModule,
+  //   FieldComponentModule,
+  //   MatIconModule,
+  //   MatSidenavModule,
+  //   MatTabsModule,
+  //   QuillModule.forRoot({
+  //     modules: {
+  //       syntax: true,
+  //       toolbar: [
+  //         ['bold', 'italic', 'underline'],
+  //         [{ list: 'ordered' }, { list: 'bullet' }],
+  //       ],
+  //     },
+  //   }),
+  //   ButtonComponentModule,
+  //   ToggleComponentModule,
+  //   ProgressBarComponentModule,
+  //   IconComponentModule,
+  //   IconLabelComponentModule,
+  //   SpinnerComponentModule,
+  //   DropdownComponentModule,
+  //   TooltipComponentModule,
+  //   DividerComponentModule,
+  //   CardComponentModule,
+  // ],
+  providers: [
+    // todo: [migration] this was changed
+    // LibCodingTestService,
+    // StrategyIndex,
+    // CodeEditorService,
+    // ConfigurationsService,
+    // TestCasesService,
+    // ThemeService,
+    // provideNgxWebstorage(withLocalStorage()),
+    // provideNgxWebstorage(),
+    // todo: it was renamed
+    // StorageCodingService,
+  ],
+  exports: [TgoCodingTestComponent],
+})
+export class CodingTestModule {
+  // static forRoot(): ModuleWithProviders<CodingTestModule> {
+  //   return {
+  //     ngModule: CodingTestModule,
+  //     providers: [
+  //       LibCodingTestService,
+  //       // StorageCodingService,
+  //     ],
+  //   };
+  // }
+}

package/src/lib/components/common/truncated-text/truncated-text.component.html

@@ -0,0 +1,6 @@
+<div class="text-container" [class.text-container-word-wrap]="isWordWrap">
+  <span class="text" [class.expanded]="!isTruncated"
+    >{{ [isTruncated, text] | memoizeFunc: getShownText : this
+    }}<a class="show-more-link" *ngIf="isTruncated" (click)="toggleTruncation()">Show more</a></span
+  >
+</div>

package/src/lib/components/common/truncated-text/truncated-text.component.scss

@@ -0,0 +1,18 @@
+.text-container {
+  .text {
+    white-space: pre-wrap;
+  }
+
+  &-word-wrap {
+    .text {
+      overflow-wrap: break-word;
+    }
+  }
+
+  .show-more-link {
+    font-size: 14px;
+    color: var(--main-text-color);
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}

package/src/lib/components/common/truncated-text/truncated-text.component.spec.ts

@@ -0,0 +1,84 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TruncatedTextComponent } from './truncated-text.component';
+import { SimpleChanges } from '@angular/core';
+import { MemoizeFuncPipe } from '../../../pipes/memoize-func.pipe';
+
+describe('TruncatedTextComponent', () => {
+  let component: TruncatedTextComponent;
+  let fixture: ComponentFixture<TruncatedTextComponent>;
+  const loremText =
+    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias aliquid et facere, in inventore ipsum iste itaque maiores nesciunt numquam obcaecati odio odit perferendis quasi quis quo, soluta totam!';
+  const truncatedLoremText =
+    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias aliquid et facere, in inventore ipsum iste itaque maiores nesciunt nu... ';
+  let textSimpleChanges: SimpleChanges;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TruncatedTextComponent, MemoizeFuncPipe],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TruncatedTextComponent);
+    component = fixture.componentInstance;
+    textSimpleChanges = {
+      text: {
+        firstChange: true,
+        currentValue: 'text',
+        previousValue: '',
+        isFirstChange: () => true,
+      },
+    } as SimpleChanges;
+    component.text = loremText;
+
+    fixture.detectChanges();
+  });
+
+  describe('when [text] input value is changed', () => {
+    describe('and text is longer than DEFAULT_MAX_CHARACTERS', () => {
+      it('should set isTruncated to true', () => {
+        component.isTruncated = false;
+        textSimpleChanges.text.firstChange = true;
+        textSimpleChanges.text.currentValue = loremText;
+        component.ngOnChanges(textSimpleChanges);
+        expect(component.isTruncated).toEqual(true);
+      });
+    });
+
+    describe("and it's NOT firstChange", () => {
+      it('should NOT update isTruncated value', () => {
+        component.isTruncated = true;
+        textSimpleChanges.text.firstChange = false;
+        component.ngOnChanges(textSimpleChanges);
+        expect(component.isTruncated).toEqual(true);
+      });
+    });
+
+    describe('when getShownText is called', () => {
+      describe('when getShownText is called', () => {
+        describe('and isTruncated is false', () => {
+          it('should return full text', () => {
+            const isTruncated = false;
+            expect(component.getShownText([isTruncated, loremText])).toEqual(loremText);
+          });
+        });
+
+        describe('and isTruncated is true', () => {
+          it('should return truncated text', () => {
+            const isTruncated = true;
+            expect(component.getShownText([isTruncated, loremText])).toEqual(truncatedLoremText);
+          });
+        });
+      });
+    });
+
+    describe('when toggleTruncation is called', () => {
+      it('should toggle isTruncated value', () => {
+        component.isTruncated = false;
+        component.toggleTruncation();
+        expect(component.isTruncated).toEqual(true);
+        component.toggleTruncation();
+        expect(component.isTruncated).toEqual(false);
+      });
+    });
+  });
+});

package/src/lib/components/common/truncated-text/truncated-text.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MemoizeFuncPipe } from '../../../pipes/memoize-func.pipe';
+
+const DEFAULT_MAX_CHARACTERS = 135;
+
+@Component({
+  standalone: true,
+  selector: 'tgo-truncated-text',
+  templateUrl: './truncated-text.component.html',
+  styleUrls: ['./truncated-text.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, MemoizeFuncPipe],
+})
+export class TruncatedTextComponent implements OnChanges {
+  @Input() text = '';
+  @Input() maxChars = DEFAULT_MAX_CHARACTERS;
+  @Input() isWordWrap = false;
+
+  isTruncated: boolean;
+
+  ngOnChanges({ text }: SimpleChanges): void {
+    if (text?.firstChange && text?.currentValue) {
+      this.isTruncated = this.text.length > this.maxChars;
+    }
+  }
+
+  getShownText([isTruncated, fullText]: [boolean, string]): string {
+    // todo: add as an improvement:
+    // If the first line contains only a few characters, it would be good to truncate the second line to ~55 characters // Anna
+    return isTruncated ? `${this.text.slice(0, this.maxChars)}... ` : fullText;
+  }
+
+  toggleTruncation() {
+    this.isTruncated = !this.isTruncated;
+  }
+}

package/src/lib/components/configurations/configurations.component.html

@@ -0,0 +1,57 @@
+<tgo-code-panel
+  [openPanel]="configurationsPanelOpen$ | async"
+  [heading]="translations['HEADINGS']['CONFIGURATIONS']"
+  (closeEvent)="closeConfigPanel()"
+>
+  <form [formGroup]="configForm" class="configs">
+    <div id="formatting" *ngIf="formattingOptions">
+      <h3>{{ translations['HEADINGS']['FORMATTING'] }}</h3>
+      <ng-container
+        [ngTemplateOutlet]="config"
+        [ngTemplateOutletContext]="{ data: formattingOptions, inputType: 'dropdown' }"
+      ></ng-container>
+    </div>
+    <div id="codingAssistance" *ngIf="codingAssistanceOptions">
+      <h3>{{ translations['HEADINGS']['CODING_ASSISTANCE'] }}</h3>
+      <ng-container
+        [ngTemplateOutlet]="config"
+        [ngTemplateOutletContext]="{
+          data: codingAssistanceOptions,
+          inputType: 'toggle'
+        }"
+      ></ng-container>
+    </div>
+    <ng-template #config let-configData="data" let-inputType="inputType">
+      <ng-container *ngIf="language$ | async as language">
+        <ng-container *ngFor="let row of configData | keyvalue">
+          <div
+            class="config-row"
+            *ngIf="[language, row.key] | memoizeFunc: isValidRow"
+            [class.config-row-toggle]="inputType === 'toggle'"
+          >
+            <p class="config-name">{{ row.key }}</p>
+            <ui-dropdown
+              *ngIf="inputType === 'dropdown'"
+              class="config-dropdown"
+              [formControlName]="row.key"
+              [valueList]="row.value | memoizeFunc: getFormattedOptions"
+              [allowClear]="false"
+              [applicationTheme]="applicationTheme"
+              [showBottomContent]="false"
+              (change)="trackConfigChange(row.key)"
+            ></ui-dropdown>
+            <ui-toggle
+              *ngIf="inputType === 'toggle'"
+              [applicationTheme]="applicationTheme"
+              [formControlName]="row.key"
+              (toggle)="trackConfigChange(row.key)"
+              class="config-toggle"
+              [class.config-toggle-company-colored]="!!companyColor"
+              [style.--toggle-checked-color]="companyColor"
+            ></ui-toggle>
+          </div>
+        </ng-container>
+      </ng-container>
+    </ng-template>
+  </form>
+</tgo-code-panel>

package/src/lib/components/configurations/configurations.component.scss

@@ -0,0 +1,42 @@
+.configs {
+  display: flex;
+  flex-direction: column;
+  color: var(--main-text-color);
+
+  .config-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &.config-row-toggle {
+      margin-bottom: 32px;
+
+      .config-name {
+        margin: 0;
+        padding: 0;
+      }
+
+      .config-toggle {
+        &.config-toggle-company-colored ::ng-deep {
+          .toggle-container.active {
+            background-color: var(--toggle-checked-color);
+          }
+        }
+      }
+    }
+
+    .config-dropdown {
+      width: 100%;
+      max-width: 320px;
+
+      @media screen and (max-width: 599px) {
+        flex: 0 0 55%;
+      }
+    }
+  }
+}
+
+.config-name, .config-dropdown {
+  margin: 0.25em 0;
+  padding-bottom: 1.5em;
+}

package/src/lib/components/configurations/configurations.component.spec.ts

@@ -0,0 +1,186 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { FormBuilder } from '@angular/forms';
+import { MockProvider } from 'ng-mocks';
+
+import { ReplaySubject } from 'rxjs';
+import { CodingAssistanceOptions, Config, FormattingOptions } from '../../models/configs';
+import { Themes } from '../../models/theme';
+import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
+import { ConfigurationsService } from '../../services/configurations.service';
+import { CONFIGURATIONS_SERVICE_MOCK } from '../../services/configurations.service.mocks';
+import { LibCodingTestService } from '../../services/lib-coding-test.service';
+import { StorageCodingService } from '../../services/storage.service';
+import { CodeEditorLanguages } from '../code-editor/helpers/code-editor-helper.model';
+import { ConfigurationsComponent } from './configurations.component';
+
+describe('ConfigurationsComponent', () => {
+  let component: ConfigurationsComponent;
+  let fixture: ComponentFixture<ConfigurationsComponent>;
+  let configurationsService: ConfigurationsService;
+  let storageCodingService: StorageCodingService;
+  let libCodingTestService: LibCodingTestService;
+  let changeCurrentLanguageSpy: jest.SpyInstance;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ConfigurationsComponent, MemoizeFuncPipe, NoopAnimationsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        FormBuilder,
+        MockProvider(ConfigurationsService, CONFIGURATIONS_SERVICE_MOCK),
+        MockProvider(StorageCodingService, {
+          getSavedConfig: () => CONFIGURATIONS_SERVICE_MOCK.defaultConfigs,
+        }),
+        MockProvider(LibCodingTestService, {
+          currentLanguage$: new ReplaySubject(1),
+          changeCurrentLanguage(value: CodeEditorLanguages): void {
+            this.currentLanguage$.next(value);
+          },
+        }),
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfigurationsComponent);
+    component = fixture.componentInstance;
+    component.translations = {
+      HEADINGS: {},
+    };
+    configurationsService = TestBed.inject(ConfigurationsService);
+    storageCodingService = TestBed.inject(StorageCodingService);
+    libCodingTestService = TestBed.inject(LibCodingTestService);
+    changeCurrentLanguageSpy = jest.spyOn(libCodingTestService, 'changeCurrentLanguage');
+    component.formattingOptions = configurationsService.getFormattingOptions();
+    component.codingAssistanceOptions = configurationsService.getCodingAssistanceOptions();
+    component.initialConfig = storageCodingService.getSavedConfig();
+  });
+
+  describe('when initialized', () => {
+    beforeEach(() => {
+      libCodingTestService.changeCurrentLanguage(CodeEditorLanguages.Typescript);
+      component.ngOnInit();
+      fixture.detectChanges();
+    });
+
+    it('should create the form with controls for each of the codingAssistanceOptions', () => {
+      expect(component.configForm.contains(CodingAssistanceOptions.AutoComplete)).toBeTruthy();
+      expect(component.configForm.contains(CodingAssistanceOptions.ErrorHighlighting)).toBeTruthy();
+      expect(component.configForm.contains(CodingAssistanceOptions.AutoBrackets)).toBeTruthy();
+    });
+
+    it('should create the form with correct default values for each of the codingAssistanceOptions', () => {
+      expect(component.configForm.controls[CodingAssistanceOptions.AutoComplete].value).toEqual(
+        component.initialConfig[CodingAssistanceOptions.AutoComplete]
+      );
+      expect(component.configForm.controls[CodingAssistanceOptions.ErrorHighlighting].value).toEqual(
+        component.initialConfig[CodingAssistanceOptions.ErrorHighlighting]
+      );
+      expect(component.configForm.controls[CodingAssistanceOptions.AutoBrackets].value).toEqual(
+        component.initialConfig[CodingAssistanceOptions.AutoBrackets]
+      );
+    });
+
+    it('should create the form with controls for each of the formattingOptions ', () => {
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(component.configForm.contains(FormattingOptions.ColorTheme)).toBeTruthy();
+      expect(component.configForm.contains(FormattingOptions.TabSize)).toBeTruthy();
+      expect(component.configForm.contains(FormattingOptions.FontSize)).toBeTruthy();
+    });
+    it('should create the form with correct default values for each of the formattingOptions', () => {
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(component.configForm.controls[FormattingOptions.ColorTheme].value).toEqual(
+        component.initialConfig[FormattingOptions.ColorTheme]
+      );
+      expect(component.configForm.controls[FormattingOptions.TabSize].value).toEqual(
+        component.initialConfig[FormattingOptions.TabSize]
+      );
+      expect(component.configForm.controls[FormattingOptions.FontSize].value).toEqual(
+        component.initialConfig[FormattingOptions.FontSize]
+      );
+    });
+    describe('when config options are changed', () => {
+      let setConfigSpy: jest.SpyInstance;
+      const currentConfig: Config = {
+        [FormattingOptions.ColorTheme]: Themes.Dark,
+        [FormattingOptions.TabSize]: 8,
+        [FormattingOptions.FontSize]: 16,
+        [CodingAssistanceOptions.AutoBrackets]: true,
+        [CodingAssistanceOptions.AutoComplete]: true,
+        [CodingAssistanceOptions.ErrorHighlighting]: true,
+      };
+
+      beforeEach(() => {
+        component.ngOnInit();
+        fixture.detectChanges();
+        setConfigSpy = jest.spyOn(configurationsService, 'setConfig');
+        component.configForm.setValue(currentConfig);
+      });
+
+      it('should call setConfig with modified value of the configuration changed', () => {
+        expect(setConfigSpy).toBeCalledWith(currentConfig);
+      });
+    });
+  });
+
+  describe('when config panel is closed', () => {
+    let closeConfigPanelSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      closeConfigPanelSpy = jest.spyOn(configurationsService, 'closeConfigPanel');
+      component.closeConfigPanel();
+      fixture.detectChanges();
+    });
+
+    it('should call closeConfigPanel from configuration service', () => {
+      expect(closeConfigPanelSpy).toBeCalled();
+    });
+  });
+
+  describe('when any config control is changed', () => {
+    let trackConfigChangedSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      trackConfigChangedSpy = jest.spyOn(configurationsService, 'trackConfigChanged');
+
+      libCodingTestService.changeCurrentLanguage(CodeEditorLanguages.Python);
+      component.ngOnInit();
+      fixture.detectChanges();
+    });
+
+    it(`should call trackConfigChanged from configuration service with control name and it's value`, () => {
+      const controlName = FormattingOptions.FontSize;
+      const value = 12;
+
+      component.configForm.get(controlName).setValue(value);
+      component.trackConfigChange(controlName);
+
+      expect(trackConfigChangedSpy).toBeCalledWith({ [controlName]: value });
+    });
+  });
+
+  describe('when isValidRow is called', () => {
+    it('should return false if language is anything EXCEPT Javascript or Typescript and editor option is AutoComplete or Error Highlighting', () => {
+      const language = CodeEditorLanguages.Python;
+      libCodingTestService.changeCurrentLanguage(CodeEditorLanguages.Typescript);
+      const editorOption = CodingAssistanceOptions.AutoComplete;
+      expect(component.isValidRow([language, editorOption])).toBeFalsy();
+    });
+    it('should return true if language is Javascript or Typescript and editor option is AutoComplete or Error Highlighting', () => {
+      const language = CodeEditorLanguages.Javascript;
+      libCodingTestService.changeCurrentLanguage(CodeEditorLanguages.Typescript);
+      const editorOption = CodingAssistanceOptions.ErrorHighlighting;
+      expect(component.isValidRow([language, editorOption])).toBeTruthy();
+    });
+    it('should return true if language is anything and editor option is anything EXCEPT AutoComplete or Error Highlighting', () => {
+      const language = CodeEditorLanguages.Java;
+      libCodingTestService.changeCurrentLanguage(CodeEditorLanguages.Typescript);
+      const editorOption = CodingAssistanceOptions.AutoBrackets;
+      expect(component.isValidRow([language, editorOption])).toBeTruthy();
+    });
+  });
+});

package/src/lib/components/configurations/configurations.component.ts

@@ -0,0 +1,98 @@
+import { ChangeDetectionStrategy, Component, inject, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { distinctUntilChanged } from 'rxjs';
+import { ApplicationTheme, OptionType, DropdownComponentModule, ToggleComponentModule } from '@testgorilla/tgo-ui';
+import { CodingAssistanceOptions, Config } from '../../models/configs';
+import { ConfigurationsService } from '../../services/configurations.service';
+import { LibCodingTestService } from '../../services/lib-coding-test.service';
+import { StorageCodingService } from '../../services/storage.service';
+import { CodeEditorLanguages } from '../code-editor/helpers/code-editor-helper.model';
+import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
+import { PanelComponent } from '../panel/panel.component';
+
+@UntilDestroy()
+@Component({
+  standalone: true,
+  selector: 'tgo-code-configurations',
+  templateUrl: 'configurations.component.html',
+  styleUrls: ['configurations.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    DropdownComponentModule,
+    ToggleComponentModule,
+    MemoizeFuncPipe,
+    PanelComponent,
+  ],
+})
+export class ConfigurationsComponent implements OnInit {
+  private readonly fb = inject(FormBuilder);
+  private readonly configurationsService = inject(ConfigurationsService);
+  private readonly StorageCodingService = inject(StorageCodingService);
+  private readonly libCodingTestService = inject(LibCodingTestService);
+
+  @Input() translations: Record<string, unknown>;
+  @Input() companyColor: string;
+  @Input() applicationTheme: ApplicationTheme;
+
+  formattingOptions = this.configurationsService.getFormattingOptions();
+  codingAssistanceOptions = this.configurationsService.getCodingAssistanceOptions();
+  initialConfig = this.StorageCodingService.getSavedConfig();
+  language$ = this.libCodingTestService.currentLanguage$;
+
+  configForm: FormGroup;
+  formObject = {};
+  configurationsPanelOpen$ = this.configurationsService.configurationsPanelOpen$;
+
+  ngOnInit() {
+    if (!this.initialConfig) {
+      this.initialConfig = this.configurationsService.getInitialConfig();
+    }
+    this.addConfigControls(this.formattingOptions);
+    this.addConfigControls(this.codingAssistanceOptions);
+    this.configForm = this.fb.group(this.formObject);
+    this.configForm.valueChanges.pipe(distinctUntilChanged(), untilDestroyed(this)).subscribe((value: Config) => {
+      this.configurationsService.setConfig(value);
+    });
+  }
+
+  trackConfigChange(controlName: string): void {
+    const controlValue = this.configForm.value[controlName];
+    this.configurationsService.trackConfigChanged({
+      [controlName]: controlValue,
+    });
+  }
+
+  closeConfigPanel() {
+    this.configurationsService.closeConfigPanel();
+  }
+
+  private addConfigControls(configObject: object) {
+    // eslint-disable-next-line guard-for-in
+    for (const option in configObject) {
+      this.formObject[option] = this.initialConfig[option];
+    }
+  }
+
+  getFormattedOptions(configurationOptions: { label: string; value: any }[]): OptionType[] {
+    return configurationOptions.map(({ value, label }) => ({
+      value,
+      displayValue: label,
+    }));
+  }
+
+  isValidRow([language, editorOption]: [CodeEditorLanguages, CodingAssistanceOptions]) {
+    if (
+      language !== CodeEditorLanguages.Javascript &&
+      language !== CodeEditorLanguages.Typescript &&
+      (editorOption === CodingAssistanceOptions.AutoComplete ||
+        editorOption === CodingAssistanceOptions.ErrorHighlighting)
+    ) {
+      return false;
+    }
+    return true;
+  }
+}