From ca43dd659a8f9a695524bfc97728c0a1f3da57ca Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 23 Oct 2023 18:30:53 +0000
Subject: [PATCH] Update URL of create datasources, fix spacing (#1149)

* Update some bug bash items

Signed-off-by: Derek Ho <dxho@amazon.com>

* Make button not primary, update snapshot

Signed-off-by: Derek Ho <dxho@amazon.com>

* False as default

Signed-off-by: Derek Ho <dxho@amazon.com>

---------

Signed-off-by: Derek Ho <dxho@amazon.com>
(cherry picked from commit 2c94e9ed04870e5c6113920b3ffd00d7df7a391c)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 common/constants/data_connections.ts                      | 8 ++++++++
 .../__tests__/__snapshots__/data_connection.test.tsx.snap | 4 ++--
 .../datasources/components/manage/access_control_tab.tsx  | 1 -
 .../datasources/components/new/configure_datasource.tsx   | 6 ++++--
 .../components/new/configure_prometheus_datasource.tsx    | 6 +++---
 .../components/new/configure_s3_datasource.tsx            | 6 +++---
 .../components/new/new_datasource_card_view.tsx           | 7 ++++---
 public/components/datasources/home.tsx                    | 2 +-
 8 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/common/constants/data_connections.ts b/common/constants/data_connections.ts
index a0862e6463..23fd9a8697 100644
--- a/common/constants/data_connections.ts
+++ b/common/constants/data_connections.ts
@@ -21,4 +21,12 @@ export const DatasourceTypeToDisplayName: { [key in DatasourceType]: string } =
   S3GLUE: 'Amazon S3',
 };
 
+export const PrometheusURL = 'Prometheus';
+export const AmazonS3URL = 'AmazonS3AWSGlue';
+
+export const UrlToDatasourceType: { [key: string]: DatasourceType } = {
+  [PrometheusURL]: 'PROMETHEUS',
+  [AmazonS3URL]: 'S3GLUE',
+};
+
 export type AuthMethod = 'noauth' | 'basicauth' | 'awssigv4';
diff --git a/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap
index 17da726043..7a9dead8c5 100644
--- a/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap
+++ b/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap
@@ -301,7 +301,7 @@ exports[`Data Connection Page test Renders Prometheus data connection page with
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton--fill"
+                  class="euiButton euiButton--primary"
                   data-test-subj="createButton"
                   type="button"
                 >
@@ -786,7 +786,7 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton--fill"
+                  class="euiButton euiButton--primary"
                   data-test-subj="createButton"
                   type="button"
                 >
diff --git a/public/components/datasources/components/manage/access_control_tab.tsx b/public/components/datasources/components/manage/access_control_tab.tsx
index 3e0f698b39..7ae13c651d 100644
--- a/public/components/datasources/components/manage/access_control_tab.tsx
+++ b/public/components/datasources/components/manage/access_control_tab.tsx
@@ -110,7 +110,6 @@ export const AccessControlTab = (props: AccessControlTabProps) => {
           <EuiButton
             data-test-subj="createButton"
             onClick={() => setMode(mode === 'view' ? 'edit' : 'view')}
-            fill={mode === 'view' ? true : false}
           >
             {mode === 'view' ? 'Edit' : 'Cancel'}
           </EuiButton>
diff --git a/public/components/datasources/components/new/configure_datasource.tsx b/public/components/datasources/components/new/configure_datasource.tsx
index fcd435b1b5..9cd7ccd34f 100644
--- a/public/components/datasources/components/new/configure_datasource.tsx
+++ b/public/components/datasources/components/new/configure_datasource.tsx
@@ -27,17 +27,18 @@ import { ReviewPrometheusDatasource } from './review_prometheus_datasource_confi
 import {
   AuthMethod,
   DatasourceTypeToDisplayName,
+  UrlToDatasourceType,
 } from '../../../../../common/constants/data_connections';
 import { formatError } from '../../../../../public/components/event_analytics/utils';
 import { NotificationsStart } from '../../../../../../../src/core/public';
 
 interface ConfigureDatasourceProps {
-  type: DatasourceType;
+  urlType: string;
   notifications: NotificationsStart;
 }
 
 export function Configure(props: ConfigureDatasourceProps) {
-  const { type, notifications } = props;
+  const { urlType, notifications } = props;
   const { http, chrome } = coreRefs;
   const { setToast } = useToast();
   const [error, setError] = useState<string>('');
@@ -55,6 +56,7 @@ export function Configure(props: ConfigureDatasourceProps) {
   const [hasSecurityAccess, setHasSecurityAccess] = useState(true);
   const [selectedQueryPermissionRoles, setSelectedQueryPermissionRoles] = useState<Role[]>([]);
   const [page, setPage] = useState<'configure' | 'review'>('configure');
+  const type = UrlToDatasourceType[urlType];
   const ConfigureDatasourceSteps = [
     {
       title: 'Configure data source',
diff --git a/public/components/datasources/components/new/configure_prometheus_datasource.tsx b/public/components/datasources/components/new/configure_prometheus_datasource.tsx
index 6f4ecb4f05..853351cb82 100644
--- a/public/components/datasources/components/new/configure_prometheus_datasource.tsx
+++ b/public/components/datasources/components/new/configure_prometheus_datasource.tsx
@@ -106,7 +106,7 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour
           <EuiText>
             <h3>Data source details</h3>
           </EuiText>
-          <EuiSpacer />
+          <EuiSpacer size="m" />
           <NameRow
             currentName={currentName}
             setNameForRequest={setNameForRequest}
@@ -131,7 +131,7 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour
           <EuiText>
             <h3>Prometheus data location</h3>
           </EuiText>
-          <EuiSpacer />
+          <EuiSpacer size="m" />
 
           <EuiFormRow label="Prometheus URI">
             <>
@@ -156,7 +156,7 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour
           <EuiText>
             <h3>Authentication details</h3>
           </EuiText>
-          <EuiSpacer />
+          <EuiSpacer size="m" />
 
           <EuiFormRow label="Authentication method">
             <EuiSelect
diff --git a/public/components/datasources/components/new/configure_s3_datasource.tsx b/public/components/datasources/components/new/configure_s3_datasource.tsx
index 1b65c7b2b1..59aaded9f0 100644
--- a/public/components/datasources/components/new/configure_s3_datasource.tsx
+++ b/public/components/datasources/components/new/configure_s3_datasource.tsx
@@ -106,7 +106,7 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
         <EuiText>
           <h3>Data source details</h3>
         </EuiText>
-        <EuiSpacer />
+        <EuiSpacer size="m" />
         <NameRow
           key={error}
           currentName={currentName}
@@ -131,7 +131,7 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
         <EuiText>
           <h3>AWS Glue Data Catalog authentication details</h3>
         </EuiText>
-        <EuiSpacer />
+        <EuiSpacer size="m" />
 
         <EuiFormRow label="Authentication Method">
           <>
@@ -169,7 +169,7 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
         <EuiText>
           <h3>AWS Glue Data Catalog index store details</h3>
         </EuiText>
-        <EuiSpacer />
+        <EuiSpacer size="m" />
 
         <EuiFormRow label="AWS Glue Data Catalog index store URI">
           <>
diff --git a/public/components/datasources/components/new/new_datasource_card_view.tsx b/public/components/datasources/components/new/new_datasource_card_view.tsx
index bbd695bfb1..46845df10c 100644
--- a/public/components/datasources/components/new/new_datasource_card_view.tsx
+++ b/public/components/datasources/components/new/new_datasource_card_view.tsx
@@ -9,6 +9,7 @@ import { NewDatasourceDescription } from './new_datasource_description';
 import s3Svg from '../../icons/s3-logo.svg';
 import prometheusSvg from '../../icons/prometheus-logo.svg';
 import { DatasourceType } from '../../../../../common/types/data_connections';
+import { AmazonS3URL, PrometheusURL } from '../../../../../common/constants/data_connections';
 
 export interface DatasourceCard {
   name: DatasourceType;
@@ -22,17 +23,17 @@ export function NewDatasourceCardView() {
   const Datasources: DatasourceCard[] = [
     {
       name: 'S3GLUE',
-      displayName: 'S3',
+      displayName: 'Amazon S3',
       description: 'Connect to Amazon S3 via AWS Glue Data Catalog',
       displayIcon: <EuiIcon type={s3Svg} size="xl" />,
-      onClick: () => (window.location.hash = `#/configure/S3GLUE`),
+      onClick: () => (window.location.hash = `#/configure/${AmazonS3URL}`),
     },
     {
       name: 'PROMETHEUS',
       displayName: 'Prometheus',
       description: 'Connect to Prometheus',
       displayIcon: <EuiIcon type={prometheusSvg} size="xl" />,
-      onClick: () => (window.location.hash = `#/configure/PROMETHEUS`),
+      onClick: () => (window.location.hash = `#/configure/${PrometheusURL}`),
     },
   ];
 
diff --git a/public/components/datasources/home.tsx b/public/components/datasources/home.tsx
index 0bbfa93cd6..a6a45ca285 100644
--- a/public/components/datasources/home.tsx
+++ b/public/components/datasources/home.tsx
@@ -59,7 +59,7 @@ export const Home = (props: HomeProps) => {
           exact
           path={['/configure/:id+']}
           render={(routerProps) => (
-            <Configure {...commonProps} type={decodeURIComponent(routerProps.match.params.id)} />
+            <Configure {...commonProps} urlType={decodeURIComponent(routerProps.match.params.id)} />
           )}
         />
       </Switch>