Make UI changes based on UX feedback

Signed-off-by: Derek Ho <dxho@amazon.com>
derek-ho · Sep 30, 2023 · 41d304f · 41d304f
1 parent 6ef3f4b
commit 41d304f
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 49 deletions.
diff --git a/common/constants/data_connections.ts b/common/constants/data_connections.ts
@@ -3,8 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export const OPENSEARCH_DOCUMENTATION_URL =
-  'https://opensearch.org/docs/latest/data-connections/index';
+import { DatasourceType } from '../../common/types/data_connections';
+
+export const OPENSEARCH_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/data-sources/index';
 
 export const QUERY_RESTRICTED = 'query-restricted';
 export const QUERY_ALL = 'query-all';
+
+export const DatasourceTypeToDisplayName: { [key in DatasourceType]: string } = {
+  PROMETHEUS: 'Prometheus',
+  S3GLUE: 'S3',
+};
diff --git a/common/types/data_connections.ts b/common/types/data_connections.ts
@@ -14,4 +14,4 @@ export interface PermissionsConfigurationProps {
 
 export type Role = EuiComboBoxOptionOption;
 
-export type DatasourceType = 'SPARK' | 'S3GLUE' | 'OPENSEARCH' | 'PROMETHEUS';
+export type DatasourceType = 'S3GLUE' | 'PROMETHEUS';
diff --git a/...atasources/components/__tests__/__snapshots__/manage_data_connections_table.test.tsx.snap b/...atasources/components/__tests__/__snapshots__/manage_data_connections_table.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
              
             <a
               class="euiLink euiLink--primary"
-              href="https://opensearch.org/docs/latest/data-connections/index"
+              href="https://opensearch.org/docs/latest/data-sources/index"
               rel="noreferrer"
               target="blank"
             >

diff --git a/public/components/datasources/components/new/configure_datasource.tsx b/public/components/datasources/components/new/configure_datasource.tsx
@@ -25,13 +25,15 @@ import { useToast } from '../../../../../public/components/common/toast';
 import { DatasourceType, Role } from '../../../../../common/types/data_connections';
 import { ConfigurePrometheusDatasource } from './configure_prometheus_datasource';
 import { ReviewPrometheusDatasource } from './review_prometheus_datasource_configuration';
+import { DatasourceTypeToDisplayName } from '../../../../../common/constants/data_connections';
+import { formatError } from '../../../../../public/components/event_analytics/utils';
 
 interface ConfigureDatasourceProps {
   type: string;
 }
 
 export function Configure(props: ConfigureDatasourceProps) {
-  const { type } = props;
+  const { type, notifications } = props;
   const { http, chrome } = coreRefs;
   const { setToast } = useToast();
 
@@ -76,7 +78,7 @@ export function Configure(props: ConfigureDatasourceProps) {
         href: '#/new',
       },
       {
-        text: `${type}`,
+        text: `${DatasourceTypeToDisplayName[type]}`,
         href: `#/configure/${type}`,
       },
     ]);
@@ -194,7 +196,9 @@ export function Configure(props: ConfigureDatasourceProps) {
               iconType="arrowRight"
               fill
             >
-              {page === 'configure' ? `Review Configuration` : `Connect to ${type}`}
+              {page === 'configure'
+                ? `Review Configuration`
+                : `Connect to ${DatasourceTypeToDisplayName[type]}`}
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -255,11 +259,10 @@ export function Configure(props: ConfigureDatasourceProps) {
       })
       .catch((err) => {
         console.log(JSON.stringify(err));
-        setToast(
-          `Could not create data source`,
-          'danger',
-          `An error occured while trying to create the ${type} data source ${name}: ${err.body.message}`
-        );
+        const formattedError = formatError(err.name, err.message, err.body.message);
+        notifications.toasts.addError(formattedError, {
+          title: 'Could not create data source',
+        });
         setPage('configure');
       });
   };

diff --git a/public/components/datasources/components/new/configure_prometheus_datasource.tsx b/public/components/datasources/components/new/configure_prometheus_datasource.tsx
@@ -16,9 +16,8 @@ import {
   EuiFieldPassword,
 } from '@elastic/eui';
 import React, { useState } from 'react';
-import { access } from 'fs';
 import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../../common/constants/data_connections';
-import { QueryPermissionsConfiguration } from '../manage/query_permissions';
+import { QueryPermissionsConfiguration } from './query_permissions';
 import { Role } from '../../../../../common/types/data_connections';
 
 interface ConfigurePrometheusDatasourceProps {

diff --git a/public/components/datasources/components/new/configure_s3_datasource.tsx b/public/components/datasources/components/new/configure_s3_datasource.tsx
@@ -16,7 +16,7 @@ import {
 } from '@elastic/eui';
 import React, { useState } from 'react';
 import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../../common/constants/data_connections';
-import { QueryPermissionsConfiguration } from '../manage/query_permissions';
+import { QueryPermissionsConfiguration } from './query_permissions';
 import { Role } from '../../../../../common/types/data_connections';
 
 interface ConfigureS3DatasourceProps {

diff --git a/public/components/datasources/components/new/new_datasource.tsx b/public/components/datasources/components/new/new_datasource.tsx
@@ -10,7 +10,7 @@ import { HomeProps } from '../../home';
 import { NewDatasourceCardView } from './new_datasource_card_view';
 
 export const NewDatasource = (props: HomeProps) => {
-  const { chrome } = props;
+  const { chrome, notifications } = props;
 
   useEffect(() => {
     chrome.setBreadcrumbs([

diff --git a/public/components/datasources/components/new/new_datasource_card_view.tsx b/public/components/datasources/components/new/new_datasource_card_view.tsx
@@ -3,17 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {
-  EuiPanel,
-  EuiCard,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiFieldSearch,
-  EuiButtonGroup,
-  EuiIcon,
-} from '@elastic/eui';
-import React, { useState } from 'react';
+import { EuiPanel, EuiCard, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiIcon } from '@elastic/eui';
+import React from 'react';
 import { NewDatasourceDescription } from './new_datasource_description';
 import s3Svg from '../../icons/s3-logo.svg';
 import prometheusSvg from '../../icons/prometheus-logo.svg';
@@ -28,8 +19,6 @@ export interface DatasourceCard {
 }
 
 export function NewDatasourceCardView() {
-  const [toggleIconIdSelected, setToggleIconIdSelected] = useState('1');
-
   const Datasources: DatasourceCard[] = [
     {
       name: 'S3GLUE',
@@ -41,29 +30,12 @@ export function NewDatasourceCardView() {
     {
       name: 'PROMETHEUS',
       displayName: 'Prometheus',
-      description: 'Connect to Amazon managed Prometheus',
+      description: 'Connect to Prometheus',
       displayIcon: <EuiIcon type={prometheusSvg} size="xl" />,
       onClick: () => (window.location.hash = `#/configure/PROMETHEUS`),
     },
   ];
 
-  const toggleButtonsIcons = [
-    {
-      id: '0',
-      label: 'list',
-      iconType: 'list',
-    },
-    {
-      id: '1',
-      label: 'grid',
-      iconType: 'grid',
-    },
-  ];
-
-  const onChangeIcons = (optionId: string) => {
-    setToggleIconIdSelected(optionId);
-  };
-
   const renderRows = (datasources: DatasourceCard[]) => {
     return (
       <>

diff --git a/public/components/datasources/components/new/query_permissions.tsx b/public/components/datasources/components/new/query_permissions.tsx
@@ -0,0 +1,89 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiComboBox,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiRadioGroup,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import React, { useState } from 'react';
+import {
+  OPENSEARCH_DOCUMENTATION_URL,
+  QUERY_ALL,
+  QUERY_RESTRICTED,
+} from '../../../../../common/constants/data_connections';
+import { PermissionsConfigurationProps } from '../../../../../common/types/data_connections';
+
+export const QueryPermissionsConfiguration = (props: PermissionsConfigurationProps) => {
+  const { roles, selectedRoles, setSelectedRoles, layout } = props;
+
+  const [selectedAccessLevel, setSelectedAccessLevel] = useState(
+    selectedRoles.length ? QUERY_RESTRICTED : QUERY_ALL
+  );
+  const accessLevelOptions = [
+    {
+      id: QUERY_RESTRICTED,
+      label: 'Restricted - accessible by users with specific OpenSearch roles',
+    },
+    {
+      id: QUERY_ALL,
+      label: 'Everyone - accessible by all users on this cluster',
+    },
+  ];
+
+  const ConfigureRoles = () => {
+    return (
+      <div>
+        <EuiSpacer size="s" />
+        <EuiText>OpenSearch Roles</EuiText>
+        <EuiText size="xs">
+          Select one or more OpenSearch roles that can query this data connection.
+        </EuiText>
+        <EuiComboBox
+          placeholder="Select one or more options"
+          options={roles}
+          selectedOptions={selectedRoles}
+          onChange={setSelectedRoles}
+          isClearable={true}
+          data-test-subj="query-permissions-combo-box"
+        />
+      </div>
+    );
+  };
+
+  return (
+    <EuiFlexItem>
+      <EuiFlexGroup direction={layout === 'horizontal' ? 'row' : 'column'}>
+        <EuiFlexItem>
+          <EuiText>
+            <h3>Query permissions</h3>
+          </EuiText>
+          <EuiText size="s">
+            <p>
+              Control which OpenSearch roles have permission to query and index data from this data
+              source
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiRadioGroup
+            options={accessLevelOptions}
+            idSelected={selectedAccessLevel}
+            onChange={(id) => setSelectedAccessLevel(id)}
+            name="query-radio-group"
+            legend={{
+              children: <span>Query access level</span>,
+            }}
+          />
+          {selectedAccessLevel === QUERY_RESTRICTED && <ConfigureRoles />}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+};
diff --git a/public/components/datasources/home.tsx b/public/components/datasources/home.tsx
@@ -5,7 +5,12 @@
 
 import React from 'react';
 import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
-import { ChromeBreadcrumb, ChromeStart, HttpStart } from '../../../../../src/core/public';
+import {
+  ChromeBreadcrumb,
+  ChromeStart,
+  HttpStart,
+  NotificationsStart,
+} from '../../../../../src/core/public';
 import { DataConnection } from './components/manage/data_connection';
 import { ManageDataConnectionsTable } from './components/manage/manage_data_connections_table';
 import { NewDatasource } from './components/new/new_datasource';
@@ -16,15 +21,17 @@ export interface HomeProps extends RouteComponentProps {
   parentBreadcrumb: ChromeBreadcrumb;
   http: HttpStart;
   chrome: ChromeStart;
+  notifications: NotificationsStart;
 }
 
 export const Home = (props: HomeProps) => {
-  const { http, chrome, pplService } = props;
+  const { http, chrome, pplService, notifications } = props;
 
   const commonProps = {
     http,
     chrome,
     pplService,
+    notifications,
   };
 
   return (