Update URL of create datasources, fix spacing (#1149)

* Update some bug bash items Signed-off-by: Derek Ho <[email protected]> * Make button not primary, update snapshot Signed-off-by: Derek Ho <[email protected]> * False as default Signed-off-by: Derek Ho <[email protected]> --------- Signed-off-by: Derek Ho <[email protected]>
opensearch-project · Oct 23, 2023 · 2c94e9e · 2c94e9e
1 parent ddb697a
commit 2c94e9e
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 15 deletions.
diff --git 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/...c/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap b/...c/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>