[Ingest pipelines] Polish details panel and empty list (elastic#63926)

jloleysens · Apr 20, 2020 · 7e7d776 · 7e7d776
1 parent 8d18877
commit 7e7d776
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 61 deletions.
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
@@ -12,7 +12,8 @@ import {
   EuiFlyoutBody,
   EuiTitle,
   EuiDescriptionList,
-  EuiSpacer,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
   EuiFlyoutFooter,
   EuiFlexGroup,
   EuiFlexItem,
@@ -35,24 +36,6 @@ export const PipelineDetails: FunctionComponent<Props> = ({
   onEditClick,
   onDeleteClick,
 }) => {
-  const descriptionListItems = [
-    {
-      title: i18n.translate('xpack.ingestPipelines.list.pipelineDetails.descriptionTitle', {
-        defaultMessage: 'Description',
-      }),
-      description: pipeline.description ?? '',
-    },
-  ];
-
-  if (pipeline.version) {
-    descriptionListItems.push({
-      title: i18n.translate('xpack.ingestPipelines.list.pipelineDetails.versionTitle', {
-        defaultMessage: 'Version',
-      }),
-      description: String(pipeline.version),
-    });
-  }
-
   return (
     <EuiFlyout
       onClose={onClose}
@@ -67,35 +50,58 @@ export const PipelineDetails: FunctionComponent<Props> = ({
       </EuiFlyoutHeader>
 
       <EuiFlyoutBody>
-        <EuiDescriptionList listItems={descriptionListItems} />
+        <EuiDescriptionList>
+          {/* Pipeline description */}
+          <EuiDescriptionListTitle>
+            {i18n.translate('xpack.ingestPipelines.list.pipelineDetails.descriptionTitle', {
+              defaultMessage: 'Description',
+            })}
+          </EuiDescriptionListTitle>
+          <EuiDescriptionListDescription>
+            {pipeline.description ?? ''}
+          </EuiDescriptionListDescription>
 
-        <EuiSpacer size="m" />
+          {/* Pipeline version */}
+          {pipeline.version && (
+            <>
+              <EuiDescriptionListTitle>
+                {i18n.translate('xpack.ingestPipelines.list.pipelineDetails.versionTitle', {
+                  defaultMessage: 'Version',
+                })}
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                {String(pipeline.version)}
+              </EuiDescriptionListDescription>
+            </>
+          )}
 
-        <PipelineDetailsJsonBlock
-          htmlForId="pipelineDetailsProcessorsJson"
-          label={i18n.translate('xpack.ingestPipelines.list.pipelineDetails.processorsTitle', {
-            defaultMessage: 'Processors JSON',
-          })}
-          json={pipeline.processors}
-        />
+          {/* Processors JSON */}
+          <EuiDescriptionListTitle>
+            {i18n.translate('xpack.ingestPipelines.list.pipelineDetails.processorsTitle', {
+              defaultMessage: 'Processors JSON',
+            })}
+          </EuiDescriptionListTitle>
+          <EuiDescriptionListDescription>
+            <PipelineDetailsJsonBlock json={pipeline.processors} />
+          </EuiDescriptionListDescription>
 
-        {/* On Failure Processor JSON */}
-        {pipeline.on_failure?.length && (
-          <>
-            <EuiSpacer size="m" />
-            <PipelineDetailsJsonBlock
-              htmlForId="pipelineDetailsOnFailureProcessorsJson"
-              label={i18n.translate(
-                'xpack.ingestPipelines.list.pipelineDetails.failureProcessorsTitle',
-                {
-                  defaultMessage: 'On failure processors JSON',
-                }
-              )}
-              json={pipeline.on_failure}
-            />
-          </>
-        )}
-        {/* End On Failure Processor JSON */}
+          {/* On Failure Processor JSON */}
+          {pipeline.on_failure?.length && (
+            <>
+              <EuiDescriptionListTitle>
+                {i18n.translate(
+                  'xpack.ingestPipelines.list.pipelineDetails.failureProcessorsTitle',
+                  {
+                    defaultMessage: 'On failure processors JSON',
+                  }
+                )}
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <PipelineDetailsJsonBlock json={pipeline.on_failure} />
+              </EuiDescriptionListDescription>
+            </>
+          )}
+        </EuiDescriptionList>
       </EuiFlyoutBody>
 
       <EuiFlyoutFooter>

diff --git a/...lugins/ingest_pipelines/public/application/sections/pipelines_list/details_json_block.tsx b/...lugins/ingest_pipelines/public/application/sections/pipelines_list/details_json_block.tsx
@@ -4,24 +4,28 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FunctionComponent } from 'react';
-import { EuiCodeBlock, EuiText } from '@elastic/eui';
+import React, { FunctionComponent, useRef } from 'react';
+import { EuiCodeBlock } from '@elastic/eui';
 
 export interface Props {
-  htmlForId: string;
-  label: string;
   json: Record<string, any>;
 }
 
-export const PipelineDetailsJsonBlock: FunctionComponent<Props> = ({ label, htmlForId, json }) => (
-  <>
-    <EuiText size="s">
-      <label htmlFor={htmlForId}>
-        <b>{label}</b>
-      </label>
-    </EuiText>
-    <EuiCodeBlock paddingSize="s" id={htmlForId} language="json" overflowHeight={200} isCopyable>
+export const PipelineDetailsJsonBlock: FunctionComponent<Props> = ({ json }) => {
+  // Hack so copied-to-clipboard value updates as content changes
+  // Related issue: https://github.com/elastic/eui/issues/3321
+  const uuid = useRef(0);
+  uuid.current++;
+
+  return (
+    <EuiCodeBlock
+      paddingSize="s"
+      language="json"
+      overflowHeight={json.length > 0 ? 300 : undefined}
+      isCopyable
+      key={uuid.current}
+    >
       {JSON.stringify(json, null, 2)}
     </EuiCodeBlock>
-  </>
-);
+  );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx
@@ -14,12 +14,12 @@ export const EmptyList: FunctionComponent = () => (
     title={
       <h2>
         {i18n.translate('xpack.ingestPipelines.list.table.emptyPromptTitle', {
-          defaultMessage: 'Create your first pipeline',
+          defaultMessage: 'Start by creating a pipeline',
         })}
       </h2>
     }
     actions={
-      <EuiButton href={`#${BASE_PATH}/create`}>
+      <EuiButton href={`#${BASE_PATH}/create`} iconType="plusInCircle" fill>
         {i18n.translate('xpack.ingestPipelines.list.table.emptyPrompt.createButtonLabel', {
           defaultMessage: 'Create a pipeline',
         })}