@testgorilla/tgo-coding-test 2.0.0 → 2.0.1

package/src/lib/components/tgo-coding-test/tgo-coding-test.component.ts

@@ -1,278 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  inject,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  SimpleChanges,
-  ViewEncapsulation,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { take } from 'rxjs';
-import { ApplicationTheme } from '@testgorilla/tgo-ui';
-
-import {
-  CodeEditorFuncParam,
-  CodeEditorLanguages,
-  CodeEditorTypesMap,
-} from '../code-editor/helpers/code-editor-helper.model';
-import { PasteData } from '../code-editor/models/code-editor.model';
-import { CodingSnapshot } from '../code-editor/models/coding-snapshot.model';
-import { AssessmentIdPreview, LATLanguage, LATLanguages } from '../../models/lat-languages';
-import { Modes } from '../../models/mode';
-import { ExampleTestCase } from '../../models/test-cases';
-import { ViewMode } from '../../models/view-mode';
-import { ConfigurationsService } from '../../services/configurations.service';
-import { LibCodingTestService } from '../../services/lib-coding-test.service';
-import { StorageCodingService } from '../../services/storage.service';
-import { TestCasesService } from '../../services/test-cases.service';
-import { ThemeService } from '../../services/theme.service';
-import { timeToMs } from '../../utils/time-to-ms.util';
-import { CodeEditorComponent } from '../code-editor/code-editor.component';
-import { CodingQuestionComponent } from '../coding-question/coding-question.component';
-import { RunnableEditorComponent } from '../runnable-editor/runnable-editor.component';
-
-@UntilDestroy()
-@Component({
-    selector: 'tgo-coding-test[languages]',
-    templateUrl: './tgo-coding-test.component.html',
-    styleUrl: './tgo-coding-test.component.scss',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    imports: [
-        CommonModule,
-        CodeEditorComponent,
-        CodingQuestionComponent,
-        RunnableEditorComponent,
-    ]
-})
-export class TgoCodingTestComponent implements OnInit, OnChanges {
-
-  private readonly configurationsService = inject(ConfigurationsService);
-  private readonly libCodingTestService = inject(LibCodingTestService);
-  private readonly testCasesService = inject(TestCasesService);
-  private readonly StorageCodingService = inject(StorageCodingService);
-  private readonly themeService = inject(ThemeService);
-
-  @Input() initCode: string;
-  @Input() snapshot: CodingSnapshot;
-  @Input() functionParams: CodeEditorFuncParam[];
-  @Input() functionName: string;
-  @Input() returnType: keyof CodeEditorTypesMap;
-  @Input() isLAT: boolean;
-  @Input() isSQL: boolean;
-  @Input() shouldGenerateInitCode = true;
-  @Input() canAddCustomTestCases = true;
-
-  @Input() selectedProgrammingLanguage: LATLanguage;
-
-  @Input()
-  set languages(value: LATLanguages) {
-    if (!value.length) {
-      throw new Error('At least one language is required');
-    } else {
-      Object.defineProperty(this, 'languages', {
-        value,
-        writable: true,
-      });
-      this.updateLanguage();
-    }
-  }
-
-  @Input() isReadonly: boolean;
-  @Input() autoHeight: boolean;
-  @Input() translations: Record<string, unknown>;
-  @Input() questionText: string;
-  @Input() mode: Modes;
-  @Input() assessmentId: string;
-  @Input() companyColor: string;
-  @Input() testCasesStatus: any;
-  @Input() loading: boolean;
-  @Input() runTestResponse = [];
-  @Input() viewMode: ViewMode;
-  @Input() exampleTestCases: ExampleTestCase[];
-  // todo: remove this property from everywhere after sunsetting of the old flow
-  @Input() hideTestCases: boolean;
-  @Input() applicationTheme: ApplicationTheme = 'light';
-  @Input() questionId: number;
-
-  @Output() pasteEvent = new EventEmitter<PasteData>();
-  @Output() codeChange = new EventEmitter<string>();
-  @Output() runTestClick = new EventEmitter<boolean>();
-  @Output() languageChange = new EventEmitter<CodeEditorLanguages>();
-
-  colorTheme$ = this.configurationsService.colorTheme$;
-  isFullscreenMode$ = this.libCodingTestService.isFullscreen$;
-
-  isFullViewMode: boolean;
-  ViewModes = ViewMode;
-  themeSpecificColor: string;
-
-  ngOnInit() {
-    this.setIsFullViewMode();
-    this.setCompanyColor();
-    this.libCodingTestService.setInitCode(this.initCode);
-
-    // Local Data should be maintained only for candidate environment
-    if (this.isFullViewMode) {
-      // Perform periodic storage maintenance
-      this.performPeriodicMaintenance();
-
-      const storageAssessmentId =
-        this.isLAT && this.mode === Modes.NonAssessmentPreview
-          ? AssessmentIdPreview
-          : this.assessmentId;
-      const storageCodeEnable =
-        this.isLAT && (this.mode === Modes.Preview || this.mode === Modes.NonAssessmentPreview)
-          ? true
-          : this.mode === Modes.Running;
-      const storageTestCasesEnable = this.mode === Modes.Running && this.isLAT;
-      const storageQuestionId = Number.isInteger(this.questionId)
-        ? String(this.questionId)
-        : 'default-question-id';
-
-      this.libCodingTestService.currentLanguage$.pipe(take(1)).subscribe(language => {
-        this.StorageCodingService.setupAutoSavedData(
-          language,
-          storageAssessmentId,
-          storageQuestionId,
-          storageCodeEnable,
-          storageTestCasesEnable,
-          this.isLAT,
-          this.mode
-        );
-        if (storageTestCasesEnable) {
-          this.updateTestCases();
-        }
-        this.configurationsService.setCodeComponentDestroyed(false);
-        this.updateInitCode(this.initCode);
-        this.StorageCodingService.initializeSaving();
-      });
-
-      if (this.mode !== Modes.NonAssessmentPreview || this.isLAT) {
-        this.libCodingTestService.clearSavedCode$.pipe(untilDestroyed(this)).subscribe(() => {
-          this.StorageCodingService.clearSavedCode();
-          if (this.isLAT) {
-            this.StorageCodingService.clearSavedTestCases();
-          }
-        });
-
-        if (this.isLAT) {
-          this.libCodingTestService.clearLastLang$.pipe(untilDestroyed(this)).subscribe(() => {
-            this.StorageCodingService.clearLastLang();
-          });
-        }
-      }
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (!changes.initCode?.firstChange && typeof changes.initCode?.currentValue === 'string') {
-      this.libCodingTestService.currentLanguage$.pipe(take(1)).subscribe(language => {
-        this.StorageCodingService.changeLanguage(language);
-        this.libCodingTestService.setInitCode(this.initCode);
-        this.updateInitCode(changes.initCode.currentValue);
-      });
-    }
-    if (changes.companyColor && changes.companyColor?.currentValue) {
-      this.themeService.companyColor = changes.companyColor.currentValue;
-    }
-  }
-
-  updateInitCode(code: string) {
-    const savedCode = this.StorageCodingService.getSavedCode();
-    this.initCode = savedCode ? savedCode : code;
-  }
-
-  private updateLanguage() {
-    const lastLanguageLAT = this.StorageCodingService.getLastLanguageLAT();
-    if (this.isLAT && this.isSavedLangRelevant(lastLanguageLAT)) {
-      this.libCodingTestService.changeCurrentLanguage(lastLanguageLAT.value);
-      const langVersion = this.getRelevantLangVersion(lastLanguageLAT);
-
-      if (langVersion) {
-        this.libCodingTestService.setVersion(langVersion);
-      }
-    } else {
-      const language = this.selectedProgrammingLanguage || this.languages[0];
-      this.libCodingTestService.changeCurrentLanguage(language.value);
-      if (language.version) {
-        this.libCodingTestService.setVersion(language.version);
-      }
-    }
-  }
-
-  private isSavedLangRelevant(lastLanguageLAT: {
-    value: CodeEditorLanguages;
-    version: string;
-  }): boolean {
-    return !!lastLanguageLAT && this.languages.some(({ value }) => value === lastLanguageLAT.value);
-  }
-
-  private getRelevantLangVersion(lastLang: {
-    value: CodeEditorLanguages;
-    version: string;
-  }): string {
-    const relevantLang = this.languages.find(({ value }) => value === lastLang?.value);
-
-    return relevantLang ? relevantLang.version : lastLang.version;
-  }
-
-  private updateTestCases() {
-    if (this.isLAT || (this.isSQL && !this.hideTestCases)) {
-      const testCases = this.StorageCodingService.getSavedTestCases();
-      if (testCases?.length) {
-        this.libCodingTestService.updateTestCases([...testCases]);
-        this.StorageCodingService.updateTestCases([...testCases]);
-        if (testCases[testCases.length - 1].localId) {
-          this.testCasesService.updateTestCaseLocalId(testCases[testCases.length - 1].localId);
-        }
-      } else {
-        this.libCodingTestService.updateTestCases([]);
-        this.StorageCodingService.updateTestCases([]);
-        this.testCasesService.resetLastTestCaseLocalId();
-      }
-    }
-  }
-
-  private setIsFullViewMode(): void {
-    this.isFullViewMode = this.viewMode === ViewMode.Full;
-  }
-
-  private setCompanyColor(): void {
-    this.themeService.themeColors$
-      .pipe(untilDestroyed(this))
-      .subscribe(({ companyColor, themeSpecificColor }) => {
-        this.companyColor = companyColor;
-        this.themeSpecificColor = themeSpecificColor;
-      });
-  }
-
-  /**
-   * Performs periodic maintenance on localStorage data
-   * This is done with a random chance to distribute cleanup over time
-   * and prevent all users from cleaning up storage at the same time.
-   */
-  private performPeriodicMaintenance(): void {
-    // Check the last time maintenance was done (stored in a separate key)
-    const maintenanceKey = 'lastCodingTestStorageMaintenance';
-    const lastMaintenance = localStorage.getItem(maintenanceKey);
-    const now = Date.now();
-    const isDoneLaterThanDay = now - parseInt(lastMaintenance, 10) > timeToMs(1);
-
-    // If maintenance was never done or was done more than a day ago,
-    // perform it with a 20% chance to distribute load
-    if (!lastMaintenance || isDoneLaterThanDay) {
-      // Perform maintenance with 20% probability to distribute load
-      if (Math.random() < 0.2) {
-        // Perform the cleanup silently
-        this.StorageCodingService.performMaintenanceAndCleanup();
-        localStorage.setItem(maintenanceKey, now.toString());
-      }
-    }
-  }
-}

package/src/lib/components/tgo-coding-test-candidate-view/tgo-coding-test-candidate-view.component.html

@@ -1,36 +0,0 @@
-<ng-container *transloco="let t; read: 'CODING_QUESTION'">
-  @if (languages()?.length && codingLibTranslations()) {
-    <tgo-coding-test
-      class="coding-lib"
-      [assessmentId]="assessment!.uuid!"
-      [questionId]="question!.question_id!"
-      [isLAT]="isLAT"
-      [canAddCustomTestCases]="isLAT"
-      [isSQL]="isSQL"
-      [languages]="languages()"
-      [initCode]="initCode"
-      [mode]="mode"
-      [viewMode]="viewModes.Full"
-      [loading]="testResultsLoading()"
-      [companyColor]="companyColor"
-      [questionText]="question.text"
-      [testCasesStatus]="codingTestResults?.resume"
-      [runTestResponse]="codingTestResults?.listResponse!"
-      [exampleTestCases]="exampleTestCases"
-      [applicationTheme]="canopyUiTheme"
-      [translations]="codingLibTranslations()"
-      (codeChange)="updateCode($event)"
-      (runTestClick)="runTest()"
-      (languageChange)="languageChange($event)"
-      (pasteEvent)="screenshotPaste($event)"
-    >
-    </tgo-coding-test>
-  }
-</ng-container>
-
-<ngx-guided-tour
-  [ngClass]="activeGuidedTourId$ | async"
-  [ngStyle]="{ '--company-color': companyColor }"
-  [class.dark]="canopyUiTheme === 'dark'"
-></ngx-guided-tour>
-

package/src/lib/components/tgo-coding-test-candidate-view/tgo-coding-test-candidate-view.component.scss

@@ -1,183 +0,0 @@
-@import 'ngx-guided-tour/scss/guided-tour-base-theme';
-@import '@testgorilla/tgo-ui/projects/tgo-canopy-ui/theme/variables';
-
-body.tour-open {
-  ngx-guided-tour {
-    --guided-tour-background-color: #{$tgo-white};
-    --guided-tour-text-color: #{$tgo-black};
-    $legacy-secondary-black: #2d2d2d;
-
-    &.dark {
-      --guided-tour-background-color: #{$legacy-secondary-black};
-      --guided-tour-text-color: #{$tgo-white};
-    }
-
-    .tour-step {
-      &.hidden {
-        display: none;
-      }
-
-      h2.tour-title,
-      h3.tour-title {
-        font-size: 20px;
-        padding-bottom: 0;
-        margin-top: 0;
-      }
-
-      .tour-block {
-        color: var(--guided-tour-text-color);
-        background-color: var(--guided-tour-background-color);
-        border-radius: 5px;
-        padding: 37px;
-        box-shadow: 0 0 13px #bbb;
-      }
-
-      .tour-buttons {
-        button {
-          text-align: center;
-          border-radius: 5px;
-          width: 45%;
-          height: 48px;
-          padding: 0;
-          font-weight: 600;
-        }
-
-        button.skip-button {
-          background: #e2e2e2;
-        }
-
-        button.next-button {
-          color: $tgo-white;
-          background-color: $tgo-teal-default;
-        }
-
-        button.back-button {
-          display: none;
-        }
-      }
-
-      &.tour-bottom .tour-arrow::before {
-        border-bottom: 1rem solid var(--guided-tour-background-color);
-      }
-
-      &.tour-top .tour-arrow::before {
-        border-top: 1rem solid var(--guided-tour-background-color);
-      }
-
-      &.tour-left .tour-arrow::before {
-        border-left: 1rem solid var(--guided-tour-background-color);
-      }
-
-      &.tour-right .tour-arrow::before {
-        border-right: 1rem solid var(--guided-tour-background-color);
-      }
-
-      &.tour-bottom-right .tour-arrow::before {
-        border-bottom-color: var(--guided-tour-background-color);
-      }
-
-      .tour-content {
-        text-align: center;
-        font-size: 14px;
-      }
-
-      h2.tour-title {
-        text-align: center;
-      }
-
-      h3.tour-title {
-        text-align: center;
-      }
-    }
-
-    .guided-tour-spotlight-overlay {
-      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3),
-        0 0 1.5rem rgba(0, 0, 0, 0.15);
-      border-radius: 5px;
-    }
-
-    &.lat-coding-tour {
-      h3.tour-title,
-      h2.tour-title,
-      .tour-content {
-        text-align: left;
-      }
-
-      .tour-content {
-        padding-bottom: 24px;
-      }
-    }
-
-    &.lat-coding-tour {
-      .tour-buttons {
-        button.skip-button {
-          background: $tgo-white;
-          border: 1px solid $tgo-black;
-        }
-
-        button.next-button {
-          background-color: var(--company-color, $brand-50);
-        }
-      }
-    }
-  }
-
-  &[theme='dark'] {
-    ngx-guided-tour {
-      .tour-step .tour-block {
-        box-shadow: none;
-      }
-
-      .guided-tour-spotlight-overlay {
-        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65),
-          0 0 1.5rem rgba(0, 0, 0, 0.5);
-        border-radius: 5px;
-      }
-    }
-  }
-}
-
-body.theme-dark ngx-guided-tour {
-  .tour-step .tour-block {
-    box-shadow: none;
-  }
-
-  .guided-tour-spotlight-overlay {
-    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65), 0 0 1.5rem rgba(0, 0, 0, 0.5);
-    border-radius: 5px;
-  }
-}
-
-body {
-  .tgo-test-code {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-
-    tgo-question,
-    tgo-micro-test-library-shell-container {
-      display: flex;
-    }
-  }
-
-  &[theme='dark'] {
-    .micro-question-code .coding-lib {
-      ui-dropdown,
-      ui-field {
-        .mat-mdc-text-field-wrapper {
-          background-color: transparent;
-        }
-      }
-    }
-  }
-}
-
-.micro-question-code {
-  display: flex;
-
-  .coding-lib {
-    display: block;
-    height: 100%;
-  }
-}
-