Pre-processing query that shapes the data.
@@ -11,6 +13,8 @@
*ngIf="nextStep"
type="button"
class="btn btn-primary"
+ mat-button
+ matStepperNext
[disabled]="!validStep"
data-test-id="next-button"
(click)="changeStep(nextStep)"
@@ -23,7 +27,7 @@
(click)="saveEvent()"
class="button-save"
data-test-id="save-button"
- [disabled]="!validStep"
+ [disabled]="!validStep || !validAllSteps"
>
Save
diff --git a/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.spec.ts b/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.spec.ts
index 34e1acb3a..2de8c70b1 100644
--- a/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.spec.ts
+++ b/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.spec.ts
@@ -45,6 +45,7 @@ describe("StepperNavigationComponent", () => {
component.prevStep = SetPollingSourceSection.READ;
component.validStep = true;
component.nextStep = null;
+ component.validAllSteps = true;
fixture.detectChanges();
emitClickOnElementByDataTestId(fixture, "save-button");
expect(changeStepEmitterSpy).toHaveBeenCalledWith();
diff --git a/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.ts
index 5957d3a21..6d43f4b99 100644
--- a/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.ts
+++ b/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.ts
@@ -18,6 +18,7 @@ export class StepperNavigationComponent {
@Input() public nextStep: MaybeNull = null;
@Input() public prevStep: MaybeNull = null;
@Input() public validStep?: boolean;
+ @Input() public validAllSteps? = false;
@Output() public changeStepEmitter =
new EventEmitter();
@Output() public saveEventEmitter = new EventEmitter();
diff --git a/src/app/dataset-view/additional-components/metadata-component/metadata-component.spec.ts b/src/app/dataset-view/additional-components/metadata-component/metadata-component.spec.ts
index 713e724a7..0f4fce33c 100644
--- a/src/app/dataset-view/additional-components/metadata-component/metadata-component.spec.ts
+++ b/src/app/dataset-view/additional-components/metadata-component/metadata-component.spec.ts
@@ -12,11 +12,13 @@ import { MatIconModule } from "@angular/material/icon";
import { MetadataBlockModule } from "src/app/dataset-block/metadata-block/metadata-block.module";
import { HIGHLIGHT_OPTIONS } from "ngx-highlightjs";
import { SharedTestModule } from "src/app/common/shared-test.module";
+import { NavigationService } from "src/app/services/navigation.service";
describe("MetadataComponent", () => {
let component: MetadataComponent;
let fixture: ComponentFixture;
let appDatasetSubsService: AppDatasetSubscriptionsService;
+ let navigationService: NavigationService;
beforeEach(async () => {
await TestBed.configureTestingModule({
@@ -53,6 +55,7 @@ describe("MetadataComponent", () => {
fixture = TestBed.createComponent(MetadataComponent);
appDatasetSubsService = TestBed.inject(AppDatasetSubscriptionsService);
+ navigationService = TestBed.inject(NavigationService);
component = fixture.componentInstance;
component.datasetBasics = mockDatasetBasicsFragment;
fixture.detectChanges();
@@ -95,4 +98,28 @@ describe("MetadataComponent", () => {
component.onPageChange(pageNumber);
expect(pageChangeEmitSpy).toHaveBeenCalledWith(pageNumber);
});
+
+ it("should check navigate to edit SetPollingSource event", () => {
+ const navigateToAddPollingSourceSpy = spyOn(
+ navigationService,
+ "navigateToAddPollingSource",
+ );
+ component.navigateToEditPollingSource();
+ expect(navigateToAddPollingSourceSpy).toHaveBeenCalledWith({
+ accountName: mockDatasetBasicsFragment.owner.name,
+ datasetName: mockDatasetBasicsFragment.name as string,
+ });
+ });
+
+ it("should check navigate to edit SetTransform event", () => {
+ const navigateToSetTransformSpy = spyOn(
+ navigationService,
+ "navigateToSetTransform",
+ );
+ component.navigateToEditSetTransform();
+ expect(navigateToSetTransformSpy).toHaveBeenCalledWith({
+ accountName: mockDatasetBasicsFragment.owner.name,
+ datasetName: mockDatasetBasicsFragment.name as string,
+ });
+ });
});
diff --git a/src/app/dataset-view/dataset.module.ts b/src/app/dataset-view/dataset.module.ts
index 289300246..d8c2dabe8 100644
--- a/src/app/dataset-view/dataset.module.ts
+++ b/src/app/dataset-view/dataset.module.ts
@@ -59,6 +59,7 @@ import { EngineSectionComponent } from "./additional-components/metadata-compone
import { QueriesSectionComponent } from "./additional-components/metadata-component/components/set-transform/components/queries-section/queries-section.component";
import { PageNotFoundComponent } from "../components/page-not-found/page-not-found.component";
import { AddPollingSourceComponent } from "./additional-components/metadata-component/components/add-polling-source/add-polling-source.component";
+import { MatStepperModule } from "@angular/material/stepper";
@NgModule({
imports: [
CommonModule,
@@ -99,6 +100,7 @@ import { AddPollingSourceComponent } from "./additional-components/metadata-comp
OwlNativeDateTimeModule,
OwlMomentDateTimeModule,
MatTreeModule,
+ MatStepperModule,
],
exports: [
DatasetViewHeaderComponent,
diff --git a/src/styles.sass b/src/styles.sass
index 4cf55c29b..4863e0e18 100644
--- a/src/styles.sass
+++ b/src/styles.sass
@@ -1,10 +1,21 @@
+
@import '@angular/material/theming'
+@include mat-core()
@import "bootstrap-icons/font/bootstrap-icons.css"
/* Importing Bootstrap SCSS file. */
@import 'bootstrap/scss/bootstrap'
@import "assets/styles/var"
@import "@danielmoncada/angular-datetime-picker/assets/style/picker.min.css"
+// Use the desired palette
+$palette: mat-palette($mat-indigo)
+// Create the theme
+$theme: mat-light-theme($palette, $palette)
+
+// Or wrap inside another selector to scope the styles to only one specific component
+app-add-polling-source
+ @include mat-stepper-theme($theme)
+
body
font-size: 14px
overflow-x: hidden
@@ -1063,3 +1074,6 @@ pre
cursor: pointer
&:enabled
color: blue
+
+input.ng-invalid.ng-touched, input.ng-invalid.ng-dirty
+ border-color: #dc3545