19383: Add types for advanced tab functions, add support for jsx fragments to code...

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/src/components/code-snippet/code-snippet.tsx b/src/components/code-snippet/code-snippet.tsx
index 83c378b899ec11a884cb6d213b932423a14ba0aa..5a5a7041d88a630717512e562060f3decaac1c2d 100644 (file)
--- a/src/components/code-snippet/code-snippet.tsx
+++ b/src/components/code-snippet/code-snippet.tsx
@@ -30,6 +30,7 @@ export interface CodeSnippetDataProps {
     className?: string;
     apiResponse?: boolean;
     linked?: boolean;
+    children?: JSX.Element;
 }
 
 interface CodeSnippetAuthProps {
@@ -43,11 +44,12 @@ const mapStateToProps = (state: RootState): CodeSnippetAuthProps => ({
 });
 
 export const CodeSnippet = withStyles(styles)(connect(mapStateToProps)(
-    ({ classes, lines, linked, className, apiResponse, dispatch, auth }: CodeSnippetProps & CodeSnippetAuthProps & DispatchProp) =>
+    ({ classes, lines, linked, className, apiResponse, dispatch, auth, children }: CodeSnippetProps & CodeSnippetAuthProps & DispatchProp) =>
         <Typography
         component="div"
         className={classNames(classes.root, className)}>
             <Typography className={apiResponse ? classes.space : className} component="pre">
+                {children}
                 {linked ?
                     lines.map((line, index) => <React.Fragment key={index}>{renderLinks(auth, dispatch)(line)}{`\n`}</React.Fragment>) :
                     lines.join('\n')

diff --git a/src/store/advanced-tab/advanced-tab.tsx b/src/store/advanced-tab/advanced-tab.tsx
index 61fd705ac3778d335fcfeb8db9b9f0221f295d87..ac088f025b8cdd72374584748d3764bb5752df48 100644 (file)
--- a/src/store/advanced-tab/advanced-tab.tsx
+++ b/src/store/advanced-tab/advanced-tab.tsx
@@ -26,8 +26,9 @@ import React from 'react';
 
 export const ADVANCED_TAB_DIALOG = 'advancedTabDialog';
 
-interface AdvancedTabDialogData {
-    apiResponse: any;
+export interface AdvancedTabDialogData {
+    uuid: string;
+    apiResponse: JSX.Element;
     metadata: ListResults<LinkResource> | string;
     user: UserResource | string;
     pythonHeader: string;
@@ -290,7 +291,7 @@ interface AdvancedTabData {
     uuid: string;
     metadata: ListResults<LinkResource> | string;
     user: UserResource | string;
-    apiResponseKind: any;
+    apiResponseKind: (apiResponse) => JSX.Element;
     data: AdvanceResponseData;
     resourceKind: AdvanceResourceKind;
     resourcePrefix: AdvanceResourcePrefix;
@@ -370,7 +371,7 @@ const stringify = (item: string | null | number | boolean) =>
 const stringifyObject = (item: any) =>
     JSON.stringify(item, null, 2) || 'null';
 
-const containerRequestApiResponse = (apiResponse: ContainerRequestResource) => {
+const containerRequestApiResponse = (apiResponse: ContainerRequestResource): JSX.Element => {
     const { uuid, ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid, name, description, properties, state, requestingContainerUuid, containerUuid,
         containerCountMax, mounts, runtimeConstraints, containerImage, environment, cwd, command, outputPath, priority, expiresAt, filters, containerCount,
         useExisting, schedulingParameters, outputUuid, logUuid, outputName, outputTtl } = apiResponse;
@@ -409,7 +410,7 @@ const containerRequestApiResponse = (apiResponse: ContainerRequestResource) => {
     return <span style={{ marginLeft: '-15px' }}>{'{'} {response} {'\n'} <span style={{ marginLeft: '-15px' }}>{'}'}</span></span>;
 };
 
-const collectionApiResponse = (apiResponse: CollectionResource) => {
+const collectionApiResponse = (apiResponse: CollectionResource): JSX.Element => {
     const { uuid, ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid, name, description, properties, portableDataHash, replicationDesired,
         replicationConfirmedAt, replicationConfirmed, deleteAt, trashAt, isTrashed, storageClassesDesired,
         storageClassesConfirmed, storageClassesConfirmedAt, currentVersionUuid, version, preserveVersion, fileCount, fileSizeTotal } = apiResponse;
@@ -442,7 +443,7 @@ const collectionApiResponse = (apiResponse: CollectionResource) => {
     return <span style={{ marginLeft: '-15px' }}>{'{'} {response} {'\n'} <span style={{ marginLeft: '-15px' }}>{'}'}</span></span>;
 };
 
-const groupRequestApiResponse = (apiResponse: ProjectResource) => {
+const groupRequestApiResponse = (apiResponse: ProjectResource): JSX.Element => {
     const { uuid, ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid, name, description, groupClass, trashAt, isTrashed, deleteAt, properties, writableBy } = apiResponse;
     const response = `
 "uuid": "${uuid}",
@@ -463,7 +464,7 @@ const groupRequestApiResponse = (apiResponse: ProjectResource) => {
     return <span style={{ marginLeft: '-15px' }}>{'{'} {response} {'\n'} <span style={{ marginLeft: '-15px' }}>{'}'}</span></span>;
 };
 
-const repositoryApiResponse = (apiResponse: RepositoryResource) => {
+const repositoryApiResponse = (apiResponse: RepositoryResource): JSX.Element => {
     const { uuid, ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid, name, cloneUrls } = apiResponse;
     const response = `
 "uuid": "${uuid}",
@@ -478,7 +479,7 @@ const repositoryApiResponse = (apiResponse: RepositoryResource) => {
     return <span style={{ marginLeft: '-15px' }}>{'{'} {response} {'\n'} <span style={{ marginLeft: '-15px' }}>{'}'}</span></span>;
 };
 
-const sshKeyApiResponse = (apiResponse: SshKeyResource) => {
+const sshKeyApiResponse = (apiResponse: SshKeyResource): JSX.Element => {
     const { uuid, ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid, name, authorizedUserUuid, expiresAt } = apiResponse;
     const response = `
 "uuid": "${uuid}",
@@ -493,7 +494,7 @@ const sshKeyApiResponse = (apiResponse: SshKeyResource) => {
     return <span style={{ marginLeft: '-15px' }}>{'{'} {response} {'\n'} <span style={{ marginLeft: '-15px' }}>{'}'}</span></span>;
 };
 
-const virtualMachineApiResponse = (apiResponse: VirtualMachinesResource) => {
+const virtualMachineApiResponse = (apiResponse: VirtualMachinesResource): JSX.Element => {
     const { uuid, ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid, hostname } = apiResponse;
     const response = `
 "hostname": ${stringify(hostname)},
@@ -508,7 +509,7 @@ const virtualMachineApiResponse = (apiResponse: VirtualMachinesResource) => {
     return <span style={{ marginLeft: '-15px' }}>{'{'} {response} {'\n'} <span style={{ marginLeft: '-15px' }}>{'}'}</span></span>;
 };
 
-const keepServiceApiResponse = (apiResponse: KeepServiceResource) => {
+const keepServiceApiResponse = (apiResponse: KeepServiceResource): JSX.Element => {
     const {
         uuid, readOnly, serviceHost, servicePort, serviceSslFlag, serviceType,
         ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid
@@ -529,7 +530,7 @@ const keepServiceApiResponse = (apiResponse: KeepServiceResource) => {
     return <span style={{ marginLeft: '-15px' }}>{'{'} {response} {'\n'} <span style={{ marginLeft: '-15px' }}>{'}'}</span></span>;
 };
 
-const userApiResponse = (apiResponse: UserResource) => {
+const userApiResponse = (apiResponse: UserResource): JSX.Element => {
     const {
         uuid, ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid,
         email, firstName, lastName, username, isActive, isAdmin, prefs, defaultOwnerUuid,
@@ -554,7 +555,7 @@ const userApiResponse = (apiResponse: UserResource) => {
     return <span style={{ marginLeft: '-15px' }}>{'{'} {response} {'\n'} <span style={{ marginLeft: '-15px' }}>{'}'}</span></span>;
 };
 
-const apiClientAuthorizationApiResponse = (apiResponse: ApiClientAuthorization) => {
+const apiClientAuthorizationApiResponse = (apiResponse: ApiClientAuthorization): JSX.Element => {
     const {
         uuid, ownerUuid, apiToken, apiClientId, userId, createdByIpAddress, lastUsedByIpAddress,
         lastUsedAt, expiresAt, defaultOwnerUuid, scopes, updatedAt, createdAt
@@ -577,7 +578,7 @@ const apiClientAuthorizationApiResponse = (apiResponse: ApiClientAuthorization)
     return <span style={{ marginLeft: '-15px' }}>{'{'} {response} {'\n'} <span style={{ marginLeft: '-15px' }}>{'}'}</span></span>;
 };
 
-const linkApiResponse = (apiResponse: LinkResource) => {
+const linkApiResponse = (apiResponse: LinkResource): JSX.Element => {
     const {
         uuid, name, headUuid, properties, headKind, tailUuid, tailKind, linkClass,
         ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid

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 f493df33ad2533cbf7fcba1a3c16993f2425deb1..7a85078d63bb19437050490f34b09cecd6bdcc79 100644 (file)
--- a/src/views-components/advanced-tab-dialog/advanced-tab-dialog.tsx
+++ b/src/views-components/advanced-tab-dialog/advanced-tab-dialog.tsx
@@ -7,9 +7,11 @@ import { Dialog, DialogActions, Button, StyleRulesCallback, WithStyles, withStyl
 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,
         };
@@ -78,8 +80,8 @@ export const AdvancedTabDialog = compose(
                 <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} />
+                        {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)}
@@ -110,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>;
+}