Merge branch '19383-advanced-dialog' into main. Closes #19383

[arvados-workbench2.git] / src / views-components / advanced-tab-dialog / advanced-tab-dialog.tsx

diff --git a/src/views-components/advanced-tab-dialog/advanced-tab-dialog.tsx b/src/views-components/advanced-tab-dialog/advanced-tab-dialog.tsx
index ff2dc50415e6aef6a6f44fc788fba12789954640..bc84ed2cf3aeef617ff3cafcbacab432536a027a 100644 (file)
--- a/src/views-components/advanced-tab-dialog/advanced-tab-dialog.tsx
+++ b/src/views-components/advanced-tab-dialog/advanced-tab-dialog.tsx
@@ -2,14 +2,16 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from "react";
+import React from "react";
 import { Dialog, DialogActions, Button, StyleRulesCallback, WithStyles, withStyles, DialogTitle, DialogContent, Tabs, Tab, DialogContentText } from '@material-ui/core';
 import { WithDialogProps } from 'store/dialog/with-dialog';
 import { withDialog } from "store/dialog/with-dialog";
 import { compose } from 'redux';
-import { ADVANCED_TAB_DIALOG } from "store/advanced-tab/advanced-tab";
+import { AdvancedTabDialogData, ADVANCED_TAB_DIALOG } from "store/advanced-tab/advanced-tab";
 import { DefaultCodeSnippet } from "components/default-code-snippet/default-code-snippet";
 import { MetadataTab } from 'views-components/advanced-tab-dialog/metadataTab';
+import { LinkResource } from "models/link";
+import { ListResults } from "services/common-service/common-service";
 
 type CssRules = 'content' | 'codeSnippet' | 'spacing';
 
@@ -34,7 +36,7 @@ export const AdvancedTabDialog = compose(
     withDialog(ADVANCED_TAB_DIALOG),
     withStyles(styles),
 )(
-    class extends React.Component<WithDialogProps<any> & WithStyles<CssRules>>{
+    class extends React.Component<WithDialogProps<AdvancedTabDialogData> & WithStyles<CssRules>>{
         state = {
             value: 0,
         };
@@ -61,14 +63,13 @@ export const AdvancedTabDialog = compose(
                 curlHeader,
                 curlExample,
                 uuid,
-                user
             } = this.props.data;
             return <Dialog
                 open={open}
                 maxWidth="lg"
                 onClose={closeDialog}
                 onExit={() => this.setState({ value: 0 })} >
-                <DialogTitle>Advanced</DialogTitle>
+                <DialogTitle>API Details</DialogTitle>
                 <Tabs value={value} onChange={this.handleChange} fullWidth>
                     <Tab label="API RESPONSE" />
                     <Tab label="METADATA" />
@@ -78,7 +79,11 @@ export const AdvancedTabDialog = compose(
                 </Tabs>
                 <DialogContent className={classes.content}>
                     {value === 0 && <div>{dialogContentExample(apiResponse, classes)}</div>}
-                    {value === 1 && <div>{metadata !== '' && metadata.items.length > 0 ? <MetadataTab items={metadata.items} uuid={uuid} user={user} /> : dialogContentHeader('(No metadata links found)')}</div>}
+                    {value === 1 && <div>
+                        {metadata !== '' && (metadata as ListResults<LinkResource>).items.length > 0 ?
+                            <MetadataTab items={(metadata as ListResults<LinkResource>).items} uuid={uuid} />
+                            : dialogContentHeader('(No metadata links found)')}
+                    </div>}
                     {value === 2 && dialogContent(pythonHeader, pythonExample, classes)}
                     {value === 3 && <div>
                         {dialogContent(cliGetHeader, cliGetExample, classes)}
@@ -107,8 +112,14 @@ const dialogContentHeader = (header: string) =>
         {header}
     </DialogContentText>;
 
-const dialogContentExample = (example: string, classes: any) =>
-    <DefaultCodeSnippet
+const dialogContentExample = (example: JSX.Element | string, classes: any) => {
+    // Pass string to lines param or JSX to child props
+    const stringData = example && (example as string).length ? (example as string) : undefined;
+    return <DefaultCodeSnippet
         apiResponse
         className={classes.codeSnippet}
-        lines={[example]} />;
\ No newline at end of file
+        lines={stringData ? [stringData] : []}
+    >
+        {example as JSX.Element || null}
+    </DefaultCodeSnippet>;
+}