Azure Arc extension (#10400)

Adds an extension for Azure Arc with some initial Postgres pages

extensions/arc/src/ui/dashboards/postgres/postgresConnectionStringsPage.ts

@@ -0,0 +1,72 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as azdata from 'azdata';
+import * as loc from '../../../localizedConstants';
+import { IconPathHelper, cssStyles } from '../../../constants';
+import { PostgresDashboardPage } from './postgresDashboardPage';
+import { KeyValueContainer, KeyValue, InputKeyValue } from '../../components/keyValueContainer';
+
+export class PostgresConnectionStringsPage extends PostgresDashboardPage {
+	protected get title(): string {
+		return loc.connectionStrings;
+	}
+
+	protected get id(): string {
+		return 'postgres-connection-strings';
+	}
+
+	protected get icon(): { dark: string; light: string; } {
+		return IconPathHelper.connection;
+	}
+
+	protected get container(): azdata.Component {
+		const root = this.modelView.modelBuilder.divContainer().component();
+		const content = this.modelView.modelBuilder.divContainer().component();
+		root.addItem(content, { CSSStyles: { 'margin': '20px' } });
+
+		content.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+			value: loc.connectionStrings,
+			CSSStyles: { ...cssStyles.title }
+		}).component());
+
+		const info = this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+			value: `${loc.selectConnectionString}.&nbsp;`,
+			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
+		}).component();
+
+		const link = this.modelView.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+			label: loc.learnAboutPostgresClients,
+			url: 'http://example.com', // TODO link to documentation
+		}).component();
+
+		content.addItem(
+			this.modelView.modelBuilder.flexContainer().withItems([info, link]).withLayout({ flexWrap: 'wrap' }).component(),
+			{ CSSStyles: { display: 'inline-flex', 'margin-bottom': '25px' } });
+
+		const endpoint: { ip?: string, port?: number } = this.databaseModel.endpoint();
+		const password = this.databaseModel.password();
+
+		const pairs: KeyValue[] = [
+			new InputKeyValue('ADO.NET', `Server=${endpoint.ip};Database=postgres;Port=${endpoint.port};User Id=postgres;Password=${password};Ssl Mode=Require;`),
+			new InputKeyValue('C++ (libpq)', `host=${endpoint.ip} port=${endpoint.port} dbname=postgres user=postgres password=${password} sslmode=require`),
+			new InputKeyValue('JDBC', `jdbc:postgresql://${endpoint.ip}:${endpoint.port}/postgres?user=postgres&password=${password}&sslmode=require`),
+			new InputKeyValue('Node.js', `host=${endpoint.ip} port=${endpoint.port} dbname=postgres user=postgres password=${password} sslmode=require`),
+			new InputKeyValue('PHP', `host=${endpoint.ip} port=${endpoint.port} dbname=postgres user=postgres password=${password} sslmode=require`),
+			new InputKeyValue('psql', `psql "host=${endpoint.ip} port=${endpoint.port} dbname=postgres user=postgres password=${password} sslmode=require`),
+			new InputKeyValue('Python', `dbname='postgres' user='postgres' host='${endpoint.ip}' password='${password}' port='${endpoint.port}' sslmode='true'`),
+			new InputKeyValue('Ruby', `host=${endpoint.ip}; dbname=postgres user=postgres password=${password} port=${endpoint.port} sslmode=require`),
+			new InputKeyValue('Web App', `Database=postgres; Data Source=${endpoint.ip}; User Id=postgres; Password=${password}`)
+		];
+
+		const keyValueContainer = new KeyValueContainer(this.modelView.modelBuilder, pairs);
+		content.addItem(keyValueContainer.container);
+		return root;
+	}
+
+	protected get toolbarContainer(): azdata.ToolbarContainer {
+		return this.modelView.modelBuilder.toolbarContainer().component();
+	}
+}