From 243106d836e7858e694a880664c2169059cf9188 Mon Sep 17 00:00:00 2001
From: Alison Goryachev <alisonmllr20@gmail.com>
Date: Sat, 18 Apr 2020 21:38:14 -0400
Subject: [PATCH 1/2] polish details panel and empty list

---
 .../sections/pipelines_list/details.tsx       | 95 ++++++++++---------
 .../pipelines_list/details_json_block.tsx     | 32 ++++---
 .../sections/pipelines_list/empty_list.tsx    |  4 +-
 3 files changed, 71 insertions(+), 60 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
index 798b9153a1644..2e14216ece5ad 100644
--- 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,6 +12,8 @@ import {
   EuiFlyoutBody,
   EuiTitle,
   EuiDescriptionList,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
   EuiSpacer,
   EuiFlyoutFooter,
   EuiFlexGroup,
@@ -35,24 +37,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 +51,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/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details_json_block.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details_json_block.tsx
index b648d2445b271..6c44336c7547d 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details_json_block.tsx
+++ b/x-pack/plugins/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
index 45c09a944a74f..ef64fb33a6a55 100644
--- 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',
         })}

From e527d4a95c1bee9cb312660f37851fb84fee7061 Mon Sep 17 00:00:00 2001
From: Alison Goryachev <alisonmllr20@gmail.com>
Date: Sun, 19 Apr 2020 21:39:51 -0400
Subject: [PATCH 2/2] remove unused import

---
 .../public/application/sections/pipelines_list/details.tsx       | 1 -
 1 file changed, 1 deletion(-)

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
index 2e14216ece5ad..a3e47cb59860d 100644
--- 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
@@ -14,7 +14,6 @@ import {
   EuiDescriptionList,
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
-  EuiSpacer,
   EuiFlyoutFooter,
   EuiFlexGroup,
   EuiFlexItem,