Added initial form for adding connections

apps/servicebus-browser-frontend/src/app/app.routes.ts

@@ -1,3 +1,13 @@
 import { Route } from '@angular/router';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  {
+    path: 'connections',
+    loadChildren: () => import('@service-bus-browser/connections-flow').then(m => m.connectionsRoutes)
+  },
+  {
+    path: '',
+    redirectTo: 'connections',
+    pathMatch: 'full'
+  }
+];

apps/servicebus-browser-frontend/src/styles.scss

@@ -4,4 +4,14 @@ head, body {
   font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
   margin: 0;
   padding: 0;
+  user-select: none;
 }/* You can add global styles to this file, and also import other style files */
+
+.page-container {
+  padding: 1rem;
+}
+
+.page-title {
+  font-size: 1.3rem;
+  margin: 0 0 0.5rem 0;
+}

libs/connections/flow/README.md

@@ -0,0 +1,7 @@
+# @service-bus-browser/connections-flow
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @service-bus-browser/connections-flow` to execute the unit tests.

libs/connections/flow/eslint.config.js

@@ -0,0 +1,34 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'lib',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'lib',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/connections/flow/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: '@service-bus-browser/connections-flow',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/connections/flow',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/connections/flow/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "@service-bus-browser/connections-flow",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/connections/flow/src",
+  "prefix": "lib",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/connections/flow/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

libs/connections/flow/src/index.ts

@@ -0,0 +1,17 @@
+import { Routes } from '@angular/router';
+import { provideConnectionsState } from '@service-bus-browser/connections-store';
+
+export const connectionsRoutes: Routes = [
+  {
+    path: 'add',
+    loadComponent: () => import('./lib/add-connection.component').then(m => m.AddConnectionComponent),
+    providers: [
+      provideConnectionsState()
+    ]
+  },
+  {
+    path: '',
+    redirectTo: 'add',
+    pathMatch: 'full'
+  }
+]

libs/connections/flow/src/lib/add-connection.component.html

@@ -0,0 +1,38 @@
+<main class="page-container">
+  <h2 class="page-title">Add connection</h2>
+  <div role="form">
+    <section class="name">
+      <p-floatlabel variant="on">
+        <input id="connectionName" class="full-width" pInputText [(ngModel)]="connectionName" />
+        <label for="connectionName">Connection Name</label>
+      </p-floatlabel>
+    </section>
+    <section class="connection-type">
+      <label for="connectionType" class="heading">Connection type</label>
+      <div class="connection-type-option full-width" id="connectionType">
+        <p-radiobutton
+          name="connectionType"
+          value="connectionString"
+          inputId="connectionStringConnection"
+          [(ngModel)]="connectionType"
+        ></p-radiobutton>
+        <label for="connectionStringConnection">Connection String</label>
+      </div>
+    </section>
+    @if (connectionType() === 'connectionString') {
+      <section class="connection-string">
+        <p-floatlabel variant="on">
+          <input id="connectionString" class="full-width" pInputText [(ngModel)]="connectionString" />
+          <label for="connectionString">Connection String</label>
+        </p-floatlabel>
+      </section>
+    }
+
+
+    <section class="actions">
+      <button pButton severity="secondary" type="button">Cancel</button>
+      <button pButton severity="primary" type="button" [disabled]="!canSave()" (click)="testConnection()">test</button>
+      <button pButton severity="primary" type="button" [disabled]="!canSave()" (click)="save()">Save</button>
+    </section>
+  </div>
+</main>

libs/connections/flow/src/lib/add-connection.component.scss

@@ -0,0 +1,33 @@
+:host{
+  display: block;
+  width: 100%;
+}
+
+.connection-type-option > * {
+  margin: 0 0 0 0.5em;
+}
+
+.heading {
+  font-size: 0.7rem;
+  font-weight: normal;
+  margin: 0 0 1rem 1rem;
+  color: var(--p-floatlabel-active-color);
+}
+
+section {
+  margin: 0 0 1rem 0;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  margin: 1rem 0 0 0;
+
+  button {
+    margin: 0 0 0 0.5rem;
+  }
+}

libs/connections/flow/src/lib/add-connection.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AddConnectionComponent } from './add-connection.component';
+
+describe('AddConnectionComponent', () => {
+  let component: AddConnectionComponent;
+  let fixture: ComponentFixture<AddConnectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddConnectionComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AddConnectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/connections/flow/src/lib/add-connection.component.ts

@@ -0,0 +1,98 @@
+import { Component, computed, effect, inject, model } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RadioButton } from 'primeng/radiobutton';
+import { FloatLabel } from 'primeng/floatlabel';
+import { InputText } from 'primeng/inputtext';
+import { FormsModule } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { ConnectionsActions } from '@service-bus-browser/connections-store';
+import { ButtonDirective } from 'primeng/button';
+import { Connection } from '@service-bus-browser/service-bus-contracts';
+
+@Component({
+  selector: 'lib-add-connection',
+  imports: [
+    CommonModule,
+    RadioButton,
+    FloatLabel,
+    InputText,
+    FormsModule,
+    ButtonDirective,
+  ],
+  templateUrl: './add-connection.component.html',
+  styleUrl: './add-connection.component.scss',
+})
+export class AddConnectionComponent {
+  store = inject(Store);
+
+  connectionName = model<string>();
+  connectionType = model<'connectionString'>('connectionString');
+  connectionString = model<string>();
+
+  connection = computed<Connection | undefined>(() => {
+    const connectionType = this.connectionType();
+    const name = this.connectionName();
+    if (connectionType === undefined || name === undefined) {
+      return undefined;
+    }
+
+    if (connectionType === 'connectionString') {
+      const connectionString = this.connectionString();
+
+      return !connectionString ? undefined : {
+        id: crypto.randomUUID(),
+        name: name,
+        connectionString: connectionString,
+        type: 'connectionString',
+      };
+    }
+
+    return undefined;
+  });
+
+  canSave = computed(() => {
+    return this.connection() !== undefined;
+  });
+
+  constructor() {
+    effect(() => {
+      const connectionType = this.connectionType();
+      if (connectionType !== 'connectionString') {
+        this.connectionString.set(undefined);
+        return;
+      }
+
+      const connectionString = this.connectionString();
+      if (!this.connectionName() && !!connectionString) {
+        const capture = /.*Endpoint=sb:\/\/([a-z1-9-.]*)\/?;.*/i.exec(connectionString);
+        if (capture?.[1]) {
+          this.connectionName.set(capture[1]);
+        }
+      }
+    });
+  }
+
+  testConnection() {
+    const connection = this.connection();
+    if (!connection) {
+      return;
+    }
+
+    this.store.dispatch(ConnectionsActions.checkConnection({
+      connection
+    }))
+  }
+
+  save() {
+    const connection = this.connection();
+    if (!connection) {
+      return;
+    }
+
+    this.store.dispatch(
+      ConnectionsActions.addConnection({
+        connection: connection
+      })
+    );
+  }
+}

libs/connections/flow/src/test-setup.ts

@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});

libs/connections/flow/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/connections/flow/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

libs/connections/flow/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}