[EPM] Add Data Source page updates (#52705)

* remove dupe type RegistryPackage * change switches to checkboxes, use datasets to create checkboxes, add some local form state * update types
elastic · Dec 11, 2019 · 7bb19c5 · 7bb19c5
1 parent b26ba26
commit 7bb19c5
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 56 deletions.
diff --git a/x-pack/legacy/plugins/epm/common/types.ts b/x-pack/legacy/plugins/epm/common/types.ts
@@ -132,23 +132,6 @@ interface PackageAdditions {
   title: string;
   assets: AssetsGroupedByServiceByType;
 }
-export interface RegistryPackage {
-  name: string;
-  title?: string;
-  version: string;
-  readme?: string;
-  description: string;
-  categories: string[];
-  requirement: RequirementsByServiceName;
-  screenshots?: ScreenshotItem[];
-  icons?: string[];
-  assets?: string[];
-  internal?: boolean;
-  format_version: string;
-  datasets?: Dataset[];
-  download: string;
-  path: string;
-}
 
 // Managers public HTTP response types
 export type PackageList = PackageListItem[];

diff --git a/...add_data_source/add_data_source_steps.tsx → .../add_data_source/add_data_source_form.tsx b/...add_data_source/add_data_source_steps.tsx → .../add_data_source/add_data_source_form.tsx
@@ -3,13 +3,20 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { EuiButton, EuiHorizontalRule, EuiPanel, EuiSteps } from '@elastic/eui';
-import React, { Fragment, useCallback, useState } from 'react';
+import {
+  EuiButton,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiSteps,
+  EuiCheckboxGroupIdToSelectedMap,
+} from '@elastic/eui';
+import React, { Fragment, useState } from 'react';
 import { Redirect } from 'react-router-dom';
 import styled from 'styled-components';
 import { installDatasource } from '../../data';
 import { useCore, useLinks } from '../../hooks';
-import { StepOneTemplate } from './step_one';
+import { StepOne } from './step_one';
+import { Dataset } from '../../../common/types';
 
 const StyledSteps = styled.div`
   .euiStep__titleWrapper {
@@ -24,16 +31,24 @@ interface AddDataSourceStepsProps {
   pkgName: string;
   pkgTitle: string;
   pkgVersion: string;
+  datasets: Dataset[];
+}
+export interface FormState {
+  datasourceName: string;
+  datasets: EuiCheckboxGroupIdToSelectedMap;
 }
 const FormNav = styled.div`
   text-align: right;
 `;
-export const AddDataSourceSteps = (props: AddDataSourceStepsProps) => {
+
+export const AddDataSourceForm = (props: AddDataSourceStepsProps) => {
   const [addDataSourceSuccess, setAddDataSourceSuccess] = useState<boolean>(false);
+  const [formState, setFormState] = useState<FormState>({ datasourceName: '', datasets: {} });
   const { notifications } = useCore();
   const { toDetailView } = useLinks();
-  const { pkgName, pkgTitle, pkgVersion } = props;
-  const handleRequestInstallDatasource = useCallback(async () => {
+  const { pkgName, pkgTitle, pkgVersion, datasets } = props;
+
+  const handleRequestInstallDatasource = async () => {
     try {
       await installDatasource(`${pkgName}-${pkgVersion}`);
       setAddDataSourceSuccess(true);
@@ -47,11 +62,40 @@ export const AddDataSourceSteps = (props: AddDataSourceStepsProps) => {
         iconType: 'alert',
       });
     }
-  }, [notifications.toasts, pkgName, pkgTitle, pkgVersion]);
+  };
+
+  const onCheckboxChange = (name: string) => {
+    const newCheckboxStateMap = {
+      ...formState,
+      datasets: {
+        ...formState.datasets,
+        [name]: !formState.datasets[name],
+      },
+    };
+    setFormState(newCheckboxStateMap);
+  };
+
+  const onTextChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    setFormState({ ...formState, [evt.target.name]: evt.target.value });
+  };
+
+  // create checkbox items from datasets for EuiCheckboxGroup
+  const checkboxes = datasets.map(dataset => ({
+    id: dataset.name,
+    label: dataset.title,
+  }));
+
   const stepOne = [
     {
       title: 'Define your data source',
-      children: <StepOneTemplate />,
+      children: (
+        <StepOne
+          datasetCheckboxes={checkboxes}
+          onCheckboxChange={onCheckboxChange}
+          onTextChange={onTextChange}
+          formState={formState}
+        />
+      ),
     },
   ];
 

diff --git a/x-pack/legacy/plugins/epm/public/screens/add_data_source/index.tsx b/x-pack/legacy/plugins/epm/public/screens/add_data_source/index.tsx
@@ -10,7 +10,7 @@ import { PackageInfo } from '../../../common/types';
 import { NavButtonBack } from '../../components/nav_button_back';
 import { getPackageInfoByKey } from '../../data';
 import { useLinks } from '../../hooks';
-import { AddDataSourceSteps } from './add_data_source_steps';
+import { AddDataSourceForm } from './add_data_source_form';
 
 export interface AddDataSourceProps {
   pkgkey: string;
@@ -53,7 +53,7 @@ export function AddDataSource({ pkgkey }: AddDataSourceProps) {
   // don't have designs for loading/empty states
   if (!info) return null;
 
-  const { version, name, title } = info;
+  const { version, name, title, datasets } = info;
   const iconType = ICON_TYPES.find(key => key.toLowerCase() === `logo${name}`);
 
   return (
@@ -76,7 +76,14 @@ export function AddDataSource({ pkgkey }: AddDataSourceProps) {
               <h1>Add {title} data source</h1>
             </EuiTitle>
           </EuiPageHeader>
-          <AddDataSourceSteps pkgName={name} pkgVersion={version} pkgTitle={title} />
+          {datasets && (
+            <AddDataSourceForm
+              pkgName={name}
+              pkgVersion={version}
+              pkgTitle={title}
+              datasets={datasets}
+            />
+          )}
         </PageBody>
       </EuiFlexGroup>
     </PageContainer>

diff --git a/x-pack/legacy/plugins/epm/public/screens/add_data_source/step_one.tsx b/x-pack/legacy/plugins/epm/public/screens/add_data_source/step_one.tsx
@@ -3,19 +3,32 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
+import React, { Fragment } from 'react';
 import {
   EuiDescribedFormGroup,
   EuiFieldText,
   EuiForm,
   EuiFormRow,
   EuiHorizontalRule,
-  EuiSpacer,
-  EuiSwitch,
+  EuiCheckboxGroup,
+  EuiCheckboxGroupOption,
 } from '@elastic/eui';
-import React, { Fragment } from 'react';
+import { FormState } from './add_data_source_form';
 
-export const StepOneTemplate = () => {
+interface AddDataSourceFormProps {
+  formState: FormState;
+  // EuiCheckboxGroup onChange prop type says parameter is an event, but it is a string of the input name
+  onCheckboxChange: (name: any) => void;
+  onTextChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
+  datasetCheckboxes: EuiCheckboxGroupOption[];
+}
+
+export const StepOne = ({
+  formState,
+  onCheckboxChange,
+  onTextChange,
+  datasetCheckboxes,
+}: AddDataSourceFormProps) => {
   return (
     <Fragment>
       <EuiForm>
@@ -30,7 +43,11 @@ export const StepOneTemplate = () => {
           }
         >
           <EuiFormRow label="Data source name" describedByIds={['data-source-name']}>
-            <EuiFieldText name="data-source-name" />
+            <EuiFieldText
+              name="datasourceName"
+              value={formState.datasourceName}
+              onChange={onTextChange}
+            />
           </EuiFormRow>
         </EuiDescribedFormGroup>
         <EuiHorizontalRule />
@@ -42,28 +59,11 @@ export const StepOneTemplate = () => {
           }
         >
           <EuiFormRow describedByIds={['select-inputs']}>
-            <Fragment>
-              <EuiSwitch
-                name="switch"
-                label="Collect access logs"
-                checked={true}
-                onChange={() => true}
-              />
-              <EuiSpacer size="s" />
-              <EuiSwitch
-                name="switch"
-                label="Collect error logs"
-                checked={true}
-                onChange={() => true}
-              />
-              <EuiSpacer size="s" />
-              <EuiSwitch
-                name="switch"
-                label="Collect metric logs"
-                checked={true}
-                onChange={() => true}
-              />
-            </Fragment>
+            <EuiCheckboxGroup
+              options={datasetCheckboxes}
+              idToSelectedMap={formState.datasets}
+              onChange={onCheckboxChange}
+            />
           </EuiFormRow>
         </EuiDescribedFormGroup>
       </EuiForm>