-
+
);
};
+
+MSSQLCreateConnection.storyName = '🧪 MSSQL Interaction test (add database)';
+
+MSSQLCreateConnection.play = async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // verify if the right title is displayed. It should contain the word `postgres`.
+ expect(await canvas.findByText('Connect MSSQL Database')).toBeInTheDocument();
+
+ // verify if all the fields are present (in oss mode)
+
+ expect(await canvas.findByLabelText('Database name')).toBeInTheDocument();
+
+ // There should be exactly 3 supported database connection options
+ const radioOptions = await canvas.findAllByLabelText('Connect Database via');
+ expect(radioOptions.length).toBe(2);
+
+ const databaseUrlOption = await canvas.findByTestId(
+ 'configuration.connectionInfo.connectionString.connectionType-databaseUrl'
+ );
+ expect(databaseUrlOption).toBeInTheDocument();
+ expect(databaseUrlOption).toBeChecked();
+
+ // Expect the first option to have the following input fields
+ expect(
+ await canvas.findByPlaceholderText(
+ 'Driver={ODBC Driver 18 for SQL Server};Server=serveraddress;Database=dbname;Uid=username;Pwd=password'
+ )
+ ).toBeInTheDocument();
+
+ // click on the environment variable option and verify if the correct fields are shown
+ const environmentVariableOption = await canvas.findByTestId(
+ 'configuration.connectionInfo.connectionString.connectionType-envVar'
+ );
+ userEvent.click(environmentVariableOption);
+ expect(
+ await canvas.findByPlaceholderText('HASURA_GRAPHQL_DB_URL_FROM_ENV')
+ ).toBeInTheDocument();
+
+ // Find and click on advanced settings
+ userEvent.click(await canvas.findByText('Advanced Settings'));
+ expect(await canvas.findByText('Total Max Connections')).toBeInTheDocument();
+ expect(await canvas.findByText('Idle Timeout')).toBeInTheDocument();
+};
+
+export const MSSQLEditConnection: ComponentStory<
+ typeof ConnectMssqlWidget
+> = () => {
+ return (
+
+ );
+};
+
+MSSQLEditConnection.storyName = '🧪 MSSQL Edit Databaase Interaction test';
+
+MSSQLEditConnection.play = async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // verify if the right title is displayed. It should contain the word `postgres`.
+ expect(await canvas.findByText('Edit MSSQL Connection')).toBeInTheDocument();
+
+ // verify if all the fields are present (in oss mode)
+
+ await waitFor(
+ async () => {
+ expect(await canvas.findByLabelText('Database name')).toHaveValue(
+ 'mssql1'
+ );
+ },
+ { timeout: 5000 }
+ );
+
+ const radioOptions = await canvas.findAllByLabelText('Connect Database via');
+ expect(radioOptions.length).toBe(2);
+ const databaseUrlOption = await canvas.findByTestId(
+ 'configuration.connectionInfo.connectionString.connectionType-databaseUrl'
+ );
+ expect(databaseUrlOption).toBeChecked();
+ expect(
+ await canvas.findByTestId(
+ 'configuration.connectionInfo.connectionString.url'
+ )
+ ).toHaveValue(
+ 'DRIVER={ODBC Driver 17 for SQL Server};SERVER=host.docker.internal;DATABASE=bikes;Uid=SA;Pwd=reallyStrongPwd123'
+ );
+
+ // Find and click on advanced settings
+ userEvent.click(await canvas.findByText('Advanced Settings'));
+ expect(
+ await canvas.findByTestId(
+ 'configuration.connectionInfo.poolSettings.totalMaxConnections'
+ )
+ ).toHaveValue(50);
+ expect(
+ await canvas.findByTestId(
+ 'configuration.connectionInfo.poolSettings.idleTimeout'
+ )
+ ).toHaveValue(180);
+
+ // find and click on graphql customization settings
+ userEvent.click(await canvas.findByText('GraphQL Customization'));
+ expect(
+ await canvas.findByTestId('customization.rootFields.namespace')
+ ).toHaveValue('some_field_name');
+ expect(
+ await canvas.findByTestId('customization.rootFields.prefix')
+ ).toHaveValue('some_field_name_prefix');
+ expect(
+ await canvas.findByTestId('customization.rootFields.suffix')
+ ).toHaveValue('some_field_name_suffix');
+ expect(
+ await canvas.findByTestId('customization.typeNames.prefix')
+ ).toHaveValue('some_type_name_prefix');
+ expect(
+ await canvas.findByTestId('customization.typeNames.suffix')
+ ).toHaveValue('some_type_name_suffix');
+};
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectMssqlWidget/ConnectMssqlWidget.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectMssqlWidget/ConnectMssqlWidget.tsx
index 4f8cce6d34c..e6d03edfe63 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectMssqlWidget/ConnectMssqlWidget.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectMssqlWidget/ConnectMssqlWidget.tsx
@@ -1,18 +1,17 @@
import { InputField, useConsoleForm } from '../../../../new-components/Form';
-import { Tabs } from '../../../../new-components/Tabs';
import { Button } from '../../../../new-components/Button';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
import { GraphQLCustomization } from '../GraphQLCustomization/GraphQLCustomization';
-import { Configuration } from './parts/Configuration';
import { getDefaultValues, MssqlConnectionSchema, schema } from './schema';
import { ReadReplicas } from './parts/ReadReplicas';
-import { get } from 'lodash';
-import { FaExclamationTriangle } from 'react-icons/fa';
import { useManageDatabaseConnection } from '../../hooks/useManageDatabaseConnection';
import { hasuraToast } from '../../../../new-components/Toasts';
import { useMetadata } from '../../../hasura-metadata-api';
import { generateMssqlRequestPayload } from './utils/generateRequests';
-import { isProConsole } from '../../../../utils';
+import { ConnectionString } from './parts/ConnectionString';
+import { areReadReplicasEnabled } from '../ConnectPostgresWidget/utils/helpers';
+import { Collapsible } from '../../../../new-components/Collapsible';
+import { PoolSettings } from './parts/PoolSettings';
interface ConnectMssqlWidgetProps {
dataSourceName?: string;
@@ -59,10 +58,9 @@ export const ConnectMssqlWidget = (props: ConnectMssqlWidgetProps) => {
}
};
- const [tab, setTab] = useState('connection_details');
const {
Form,
- methods: { formState, watch, reset },
+ methods: { reset },
} = useConsoleForm({
schema,
});
@@ -79,68 +77,53 @@ export const ConnectMssqlWidget = (props: ConnectMssqlWidgetProps) => {
}
}, [metadataSource, reset]);
- const readReplicas = watch('configuration.readReplicas');
-
- const connectionDetailsTabErrors = [
- get(formState.errors, 'name'),
- get(formState.errors, 'configuration.connectionInfo'),
- get(formState.errors, 'configuration.extensionSchema'),
- ].filter(Boolean);
-
- const readReplicasError = [
- get(formState.errors, 'configuration.readReplicas'),
- ].filter(Boolean);
-
- const proConsoleTabs = isProConsole(window.__env)
- ? [
- {
- value: 'read_replicas',
- label: `Read Replicas ${
- readReplicas?.length ? `(${readReplicas.length})` : ''
- }`,
- icon: readReplicasError.length ? (
-
- ) : undefined,
- content:
,
- },
- ]
- : [];
-
return (
- {isEditMode ? 'Edit MSSQL Connection' : 'Connect New MSSQL Database'}
+ {isEditMode ? 'Edit MSSQL Connection' : 'Connect MSSQL Database'}
+
+ {areReadReplicasEnabled() && (
+
+ }
+ >
+
+
+