Refactor flyout into standalone component

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>

Author: ohltyler

public/pages/workflow_detail/tools/resources/resource_flyout.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiCodeBlock,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiText,
+  EuiEmptyPrompt,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
+
+interface ResourceFlyoutProps {
+  resourceName: string;
+  resourceDetails: string;
+  onClose: () => void;
+  loading: boolean;
+  errorMessage?: string;
+}
+
+/**
+ * The searchable list of resources for a particular workflow.
+ */
+export function ResourceFlyout(props: ResourceFlyoutProps) {
+  return (
+    <EuiFlyout onClose={props.onClose}>
+      <EuiFlyoutHeader>
+        <EuiTitle>
+          <h2>Resource details</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiFlexGroup direction="column" gutterSize="xs">
+          <EuiFlexItem grow={true}>
+            <EuiText size="m">
+              <h4>Resource details</h4>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={true}>
+            {!props.errorMessage && !props.loading ? (
+              <EuiCodeBlock
+                language="json"
+                fontSize="m"
+                isCopyable={true}
+                overflowHeight={600}
+              >
+                {props.resourceDetails}
+              </EuiCodeBlock>
+            ) : props.loading ? (
+              <EuiEmptyPrompt
+                icon={<EuiLoadingSpinner size="xl" />}
+                title={<h2>Loading</h2>}
+              />
+            ) : (
+              <EuiEmptyPrompt
+                iconType="alert"
+                iconColor="danger"
+                title={<h2>Error loading resource details</h2>}
+                body={<p>{props.errorMessage}</p>}
+              />
+            )}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  );
+}

public/pages/workflow_detail/tools/resources/resource_list_with_flyout.tsx

@@ -7,18 +7,10 @@ import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import {
   Direction,
-  EuiCodeBlock,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFlyout,
-  EuiFlyoutBody,
-  EuiFlyoutHeader,
   EuiInMemoryTable,
-  EuiTitle,
   EuiIcon,
-  EuiText,
-  EuiEmptyPrompt,
-  EuiLoadingSpinner,
 } from '@elastic/eui';
 import {
   Workflow,
@@ -38,6 +30,7 @@ import {
   getErrorMessageForStepType,
 } from '../../../../utils';
 import { columns } from './columns';
+import { ResourceFlyout } from './resource_flyout';
 
 interface ResourceListFlyoutProps {
   workflow?: Workflow;
@@ -173,46 +166,13 @@ export function ResourceListWithFlyout(props: ResourceListFlyoutProps) {
         </EuiFlexItem>
       </EuiFlexGroup>
       {isFlyoutVisible && (
-        <EuiFlyout onClose={closeFlyout}>
-          <EuiFlyoutHeader>
-            <EuiTitle>
-              <h2>{selectedRowData?.id}</h2>
-            </EuiTitle>
-          </EuiFlyoutHeader>
-          <EuiFlyoutBody>
-            <EuiFlexGroup direction="column" gutterSize="xs">
-              <EuiFlexItem grow={true}>
-                <EuiText size="m">
-                  <h4>Resource details</h4>
-                </EuiText>
-              </EuiFlexItem>
-              <EuiFlexItem grow={true}>
-                {!rowErrorMessage && !loading ? (
-                  <EuiCodeBlock
-                    language="json"
-                    fontSize="m"
-                    isCopyable={true}
-                    overflowHeight={600}
-                  >
-                    {resourceDetails}
-                  </EuiCodeBlock>
-                ) : loading ? (
-                  <EuiEmptyPrompt
-                    icon={<EuiLoadingSpinner size="xl" />}
-                    title={<h2>Loading</h2>}
-                  />
-                ) : (
-                  <EuiEmptyPrompt
-                    iconType="alert"
-                    iconColor="danger"
-                    title={<h2>Error loading resource details</h2>}
-                    body={<p>{rowErrorMessage}</p>}
-                  />
-                )}
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlyoutBody>
-        </EuiFlyout>
+        <ResourceFlyout
+          resourceName={selectedRowData?.id || ''}
+          resourceDetails={resourceDetails || ''}
+          onClose={closeFlyout}
+          loading={loading}
+          errorMessage={rowErrorMessage || undefined}
+        />
       )}
     </>
   );