Add most functionality of edit connectiondetails

Signed-off-by: Derek Ho <[email protected]>

public/components/data_connections/components/connection_configuration.tsx

@@ -0,0 +1,139 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFieldPassword,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiSelect,
+  EuiSpacer,
+  EuiText,
+  EuiTextArea,
+} from '@elastic/eui';
+import { EuiSelectOption } from '@elastic/eui/src/components/form/select';
+import React, { useState } from 'react';
+
+interface ConnectionConfigurationProps {
+  connectionName: string;
+  connectionDetails: string;
+  onConnectionDetailsChange: (e: any) => void;
+  authenticationOptions: EuiSelectOption[];
+  setSelectedAuthenticationMethod: (authenticationMethod: EuiSelectOption) => void;
+  selectedAuthenticationMethod: string;
+}
+
+export const ConnectionConfiguration = (props: ConnectionConfigurationProps) => {
+  const {
+    connectionName,
+    connectionDetails,
+    onConnectionDetailsChange,
+    authenticationOptions,
+    selectedAuthenticationMethod,
+    setSelectedAuthenticationMethod,
+  } = props;
+  const [details, setDetails] = useState(connectionDetails);
+
+  const [password, setPassword] = useState('');
+  const [dual, setDual] = useState(true);
+
+  const NameRow = () => {
+    return (
+      <EuiFlexGroup direction="row">
+        <EuiFlexItem>
+          <EuiText className="overview-title">Data source name</EuiText>
+          <EuiText size="s" className="overview-content">
+            This is the name of the data source and how it will be referenced in OpenSearch
+            Dashboards.
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow label="Data source name">
+            <EuiFieldText placeholder={connectionName} readOnly />
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  const SparkEndpointRow = () => {
+    return (
+      <EuiFlexGroup direction="row">
+        <EuiFlexItem>
+          <EuiText className="overview-title">Spark endpoint URL</EuiText>
+          <EuiText size="s" className="overview-content">
+            {
+              "The URL for your Spark cluster and where your data is. This is what OpenSearch will connect to. The endpoint URL can't be changed. If you'd like to use another endpoint create a new data source."
+            }
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow label="Spark endpoint URL">
+            <EuiFieldText placeholder={'-'} readOnly />
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  return (
+    <EuiFlexItem>
+      <NameRow />
+      <EuiSpacer />
+      <EuiFlexGroup direction="row">
+        <EuiFlexItem>
+          <EuiText className="overview-title">Description - optional</EuiText>
+          <EuiText size="s" className="overview-content">
+            Text that can help identify the data source or share additional details
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow label="Description">
+            <EuiTextArea
+              placeholder="Placeholder text"
+              aria-label="test"
+              value={details}
+              onChange={(e) => {
+                setDetails(e.target.value);
+              }}
+              onBlur={onConnectionDetailsChange}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <SparkEndpointRow />
+      <EuiSpacer />
+      <EuiFlexGroup direction="row">
+        <EuiFlexItem>
+          <EuiText className="overview-title">Authentication details</EuiText>
+          <EuiText size="s" className="overview-content">
+            This is information used to authenticate and create a data source with Spark.
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow label="Authentication method">
+            <EuiSelect
+              options={authenticationOptions}
+              value={selectedAuthenticationMethod}
+              onChange={(e) => setSelectedAuthenticationMethod(e)}
+            />
+          </EuiFormRow>
+          <EuiFormRow label="Username">
+            <EuiFieldText placeholder={'Username placeholder'} />
+          </EuiFormRow>
+          <EuiFormRow label="Password">
+            <EuiFieldPassword
+              type={dual ? 'dual' : undefined}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+};

public/components/data_connections/components/connection_details.tsx

@@ -10,16 +10,14 @@ import {
   EuiSpacer,
   EuiText,
   EuiHorizontalRule,
-  EuiBottomBar,
-  EuiButtonEmpty,
 } from '@elastic/eui';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { EuiPanel } from '@elastic/eui';
 import { ConnectionManagementCallout } from './connection_management_callout';
 import { coreRefs } from '../../../../public/framework/core_refs';
-import { QueryPermissionsConfiguration } from './query_permissions';
 import { DATACONNECTIONS_BASE } from '../../../../common/constants/shared';
 import { SaveOrCancel } from './save_or_cancel';
+import { ConnectionConfiguration } from './connection_configuration';
 
 interface ConnectionDetailProps {
   dataConnection: string;
@@ -32,6 +30,21 @@ export const ConnectionDetails = (props: ConnectionDetailProps) => {
   const [mode, setMode] = useState<'view' | 'edit'>('view');
   const { http } = coreRefs;
 
+  const { dataConnection, connector, allowedRoles, properties } = props;
+  const [connectionDetails, setConnectionDetails] = useState('');
+  const onChange = (e) => {
+    setConnectionDetails(e.target.value);
+  };
+  const authenticationOptions = [{ value: 'option_one', text: 'Username & Password' }];
+
+  const [selectedAuthenticationMethod, setSelectedAuthenticationMethod] = useState(
+    authenticationOptions[0].value
+  );
+
+  const onAuthenticationMethodChange = (e) => {
+    setSelectedAuthenticationMethod(e.target.value);
+  };
+
   const ConnectionConfigurationView = () => {
     return (
       <EuiFlexGroup>
@@ -40,7 +53,7 @@ export const ConnectionDetails = (props: ConnectionDetailProps) => {
             <EuiFlexItem grow={false}>
               <EuiText className="overview-title">Data source name</EuiText>
               <EuiText size="s" className="overview-content">
-                {'-'}
+                {dataConnection}
               </EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
@@ -71,16 +84,18 @@ export const ConnectionDetails = (props: ConnectionDetailProps) => {
     );
   };
 
-  const EditAccessControlDetails = () => {
+  const EditConnectionConfiguration = () => {
     return (
-      // <EuiFlexGroup direction="column">
-      //   <QueryPermissionsConfiguration
-      //     roles={roles}
-      //     selectedRoles={selectedQueryPermissionRoles}
-      //     setSelectedRoles={setSelectedQueryPermissionRoles}
-      //   />
-      // </EuiFlexGroup>
-      <></>
+      <EuiFlexGroup direction="column">
+        <ConnectionConfiguration
+          connectionName={dataConnection}
+          connectionDetails={connectionDetails}
+          onConnectionDetailsChange={onChange}
+          authenticationOptions={authenticationOptions}
+          setSelectedAuthenticationMethod={onAuthenticationMethodChange}
+          selectedAuthenticationMethod={selectedAuthenticationMethod}
+        />
+      </EuiFlexGroup>
     );
   };
 
@@ -127,7 +142,7 @@ export const ConnectionDetails = (props: ConnectionDetailProps) => {
       <EuiPanel>
         <ConnectionConfigurationHeader />
         <EuiHorizontalRule />
-        {mode === 'view' ? <ConnectionConfigurationView /> : <EditAccessControlDetails />}
+        {mode === 'view' ? <ConnectionConfigurationView /> : <EditConnectionConfiguration />}
       </EuiPanel>
       <EuiSpacer />
       {mode === 'edit' && (

public/components/data_connections/components/manage_data_connections_table.tsx

@@ -76,7 +76,7 @@ export const ManageDataConnectionsTable = (props: HomeProps) => {
     );
   }
 
-  const getModal = (connectionName: string) => {
+  const displayDeleteModal = (connectionName: string) => {
     setModalLayout(
       <DeleteModal
         onConfirm={() => {
@@ -131,7 +131,7 @@ export const ManageDataConnectionsTable = (props: HomeProps) => {
         <EuiIcon
           type={'trash'}
           onClick={() => {
-            getModal(record.name);
+            displayDeleteModal(record.name);
           }}
         />
       ),

public/components/data_connections/components/no_access.tsx

@@ -12,11 +12,11 @@ export const NoAccess = () => {
     <EuiPage>
       <EuiEmptyPrompt
         iconType="alert"
-        title={<h2>{'No permissions to access or resource does not exist'}</h2>}
+        title={<h2>{'No permissions to access'}</h2>}
         body={
           <EuiText>
             {
-              'This connection does not exist or you are missing permissions to view connection details. Contact your administrator for permissions.'
+              'You are missing permissions to view connection details. Contact your administrator for permissions.'
             }
           </EuiText>
         }