feat(console): add new step to activate SMTP provider (#7956)

# Which Problems Are Solved

- In #7929 it was detected that it would be better to show the
activate/deactivate action for a SMTP configuration in the wizard as for
some users it'd not be intuitive that the SMTP provider must be
activated so Zitadel can use it to send notifications.

# How the Problems Are Solved

- When a new SMTP provider is added or updated, the wizard has a new
step that allow us to activate or deactivate the provider configured in
the previous step. The following video shows the new wizard:


https://github.com/zitadel/zitadel/assets/30386061/178234d6-73dc-4719-af0b-1d6f19bf3f7d

# Additional Context

- Closes #7929

console/src/app/modules/smtp-provider/smtp-provider.component.ts

@@ -31,6 +31,8 @@ import {
   OutlookDefaultSettings,
   SendgridDefaultSettings,
 } from './known-smtp-providers-settings';
+import { MatStepper } from '@angular/material/stepper';
+import { SMTPConfigState } from 'src/app/proto/generated/zitadel/settings_pb';
 
 @Component({
   selector: 'cnsl-smtp-provider',
@@ -48,7 +50,7 @@ export class SMTPProviderComponent {
 
   public smtpLoading: boolean = false;
   public hasSMTPConfig: boolean = false;
-
+  public isActive: boolean = false;
   public updateClientSecret: boolean = false;
 
   // stepper
@@ -166,6 +168,7 @@ export class SMTPProviderComponent {
       .then((data) => {
         this.smtpLoading = false;
         if (data.smtpConfig) {
+          this.isActive = data.smtpConfig.state === SMTPConfigState.SMTP_CONFIG_ACTIVE;
           this.hasSMTPConfig = true;
           this.firstFormGroup.patchValue({
             ['description']: data.smtpConfig.description,
@@ -188,7 +191,7 @@ export class SMTPProviderComponent {
       });
   }
 
-  private updateData(): Promise<UpdateSMTPConfigResponse.AsObject | AddSMTPConfigResponse> {
+  private updateData(): Promise<UpdateSMTPConfigResponse.AsObject | AddSMTPConfigResponse.AsObject> {
     if (this.hasSMTPConfig) {
       const req = new UpdateSMTPConfigRequest();
       req.setId(this.id);
@@ -228,19 +231,49 @@ export class SMTPProviderComponent {
     }
   }
 
-  public savePolicy(): void {
-    this.updateData()
+  public activateSMTPConfig() {
+    this.service
+      .activateSMTPConfig(this.id)
       .then(() => {
+        this.toast.showInfo('SMTP.LIST.DIALOG.ACTIVATED', true);
+        this.isActive = true;
+      })
+      .catch((error) => {
+        this.toast.showError(error);
+      });
+  }
+
+  public deactivateSMTPConfig() {
+    this.service
+      .deactivateSMTPConfig(this.id)
+      .then(() => {
+        this.toast.showInfo('SMTP.LIST.DIALOG.DEACTIVATED', true);
+        this.isActive = false;
+      })
+      .catch((error) => {
+        this.toast.showError(error);
+      });
+  }
+
+  public savePolicy(stepper: MatStepper): void {
+    this.updateData()
+      .then((resp) => {
+        if (!this.id) {
+          // This is a new SMTP provider let's get the ID from the addSMTPConfig response
+          let createResponse = resp as AddSMTPConfigResponse.AsObject;
+          this.id = createResponse.id;
+        }
+
         this.toast.showInfo('SETTING.SMTP.SAVED', true);
         setTimeout(() => {
-          this.close();
+          stepper.next();
         }, 2000);
       })
       .catch((error: unknown) => {
         if (`${error}`.includes('No changes')) {
           this.toast.showInfo('SETTING.SMTP.NOCHANGES', true);
           setTimeout(() => {
-            this.close();
+            stepper.next();
           }, 2000);
         } else {
           this.toast.showError(error);