1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React, { ReactElement, memo } from "react";
6 import { Dispatch } from "redux";
7 import { CustomStyleRulesCallback } from 'common/custom-theme';
24 } from "@mui/material";
25 import { WithStyles } from '@mui/styles';
26 import withStyles from '@mui/styles/withStyles';
27 import { ArvadosTheme } from "common/custom-theme";
28 import { CloseIcon, InputIcon, OutputIcon, MaximizeIcon, UnMaximizeIcon, InfoIcon } from "components/icon/icon";
29 import { MPVPanelProps } from "components/multi-panel-view/multi-panel-view";
31 BooleanCommandInputParameter,
32 CommandInputParameter,
35 DirectoryArrayCommandInputParameter,
36 DirectoryCommandInputParameter,
37 EnumCommandInputParameter,
38 FileArrayCommandInputParameter,
39 FileCommandInputParameter,
40 FloatArrayCommandInputParameter,
41 FloatCommandInputParameter,
42 IntArrayCommandInputParameter,
43 IntCommandInputParameter,
47 StringArrayCommandInputParameter,
48 StringCommandInputParameter,
50 } from "models/workflow";
51 import { CommandOutputParameter } from "cwlts/mappings/v1.0/CommandOutputParameter";
52 import { File } from "models/workflow";
53 import { getInlineFileUrl } from "views-components/context-menu/actions/helpers";
54 import { AuthState } from "store/auth/auth-reducer";
55 import mime from "mime";
56 import { DefaultView } from "components/default-view/default-view";
57 import { getNavUrl } from "routes/routes";
58 import { Link as RouterLink } from "react-router-dom";
59 import { Link as MuiLink } from "@mui/material";
60 import { InputCollectionMount } from "store/processes/processes-actions";
61 import { connect } from "react-redux";
62 import { RootState } from "store/store";
63 import { ProcessOutputCollectionFiles } from "./process-output-collection-files";
64 import { Process } from "store/processes/process";
65 import { navigateTo } from "store/navigation/navigation-action";
66 import classNames from "classnames";
67 import { DefaultVirtualCodeSnippet } from "components/default-code-snippet/default-virtual-code-snippet";
68 import { KEEP_URL_REGEX } from "models/resource";
69 import { FixedSizeList } from 'react-window';
70 import AutoSizer from "react-virtualized-auto-sizer";
71 import { LinkProps } from "@mui/material/Link";
72 import { ConditionalTabs } from "components/conditional-tabs/conditional-tabs";
83 | "paramTableCellText"
94 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
99 paddingTop: theme.spacing(1),
103 fontSize: "1.875rem",
104 color: theme.customs.colors.greyL,
107 alignSelf: "flex-start",
108 paddingTop: theme.spacing(0.5),
112 height: `calc(100% - ${theme.spacing(6)})`,
113 padding: theme.spacing(1),
116 paddingBottom: theme.spacing(1),
122 paddingTop: theme.spacing(0.5),
123 color: theme.customs.colors.greyD,
124 fontSize: "1.875rem",
126 // Applies to table tab and collection table content
129 maxHeight: `calc(100% - ${theme.spacing(6)})`,
131 // Use flexbox to keep scrolling at the virtual list level
133 flexDirection: "column",
134 alignItems: "stretch", // Stretches output collection to full width
138 // Param table virtual list styles
141 flexDirection: "column",
147 padding: "4px 25px 10px",
151 height: "100vh", // Must be constrained by panel maxHeight
153 // Flex header/body rows
154 "& thead tr, & > tbody tr": {
156 // Flex header/body cells
163 // Column width overrides
164 "& th:nth-of-type(1), & td:nth-of-type(1)": {
167 "& th:nth-last-of-type(1), & td:nth-last-of-type(1)": {
176 padding: "2px 25px 2px",
179 flexDirection: "row",
180 alignItems: "center",
181 whiteSpace: "nowrap",
185 // Param value cell typography styles
186 paramTableCellText: {
189 // Every cell contents requires a wrapper for the ellipsis
190 // since adding ellipses to an anchor element parent results in misaligned tooltip
193 textOverflow: "ellipsis",
198 textOverflow: "ellipsis",
204 verticalAlign: "bottom",
205 paddingBottom: "10px",
208 paddingRight: "25px",
213 height: `calc(100% - ${theme.spacing(6)})`,
216 color: theme.palette.primary.main,
217 textDecoration: "none",
218 // Overflow wrap for mounts table
219 overflowWrap: "break-word",
222 // Output collection tab link
226 color: theme.palette.primary.main,
227 textDecoration: "none",
228 overflowWrap: "break-word",
236 color: theme.customs.colors.grey700,
240 borderBottom: "none",
242 paddingBottom: "2px",
253 wordWrap: "break-word",
257 export enum ProcessIOCardType {
258 INPUT = "Input Parameters",
259 OUTPUT = "Output Parameters",
261 export interface ProcessIOCardDataProps {
263 label: ProcessIOCardType;
264 params: ProcessIOParameter[] | null;
266 mounts?: InputCollectionMount[];
268 forceShowParams?: boolean;
271 type ProcessIOCardProps = ProcessIOCardDataProps & WithStyles<CssRules> & MPVPanelProps;
273 export const ProcessIOCard = withStyles(styles)(
288 }: ProcessIOCardProps) => {
289 const PanelIcon = label === ProcessIOCardType.INPUT ? InputIcon : OutputIcon;
290 const mainProcess = !(process && process!.containerRequest.requestingContainerUuid);
291 const showParamTable = mainProcess || forceShowParams;
293 const loading = raw === null || raw === undefined || params === null;
295 const hasRaw = !!(raw && Object.keys(raw).length > 0);
296 const hasParams = !!(params && params.length > 0);
297 // isRawLoaded allows subprocess panel to display raw even if it's {}
298 const isRawLoaded = !!(raw && Object.keys(raw).length >= 0);
301 const hasInputMounts = !!(label === ProcessIOCardType.INPUT && mounts && mounts.length);
302 const hasOutputCollecton = !!(label === ProcessIOCardType.OUTPUT && outputUuid);
303 // Subprocess should not show loading if hasOutputCollection or hasInputMounts
304 const subProcessLoading = loading && !hasOutputCollecton && !hasInputMounts;
308 className={classes.card}
309 data-cy="process-io-card"
312 className={classes.header}
314 content: classes.title,
315 avatar: classes.avatar,
317 avatar={<PanelIcon className={classes.iconHeader} />}
329 {doUnMaximizePanel && panelMaximized && (
331 title={`Unmaximize ${panelName || "panel"}`}
334 <IconButton onClick={doUnMaximizePanel} size="large">
339 {doMaximizePanel && !panelMaximized && (
341 title={`Maximize ${panelName || "panel"}`}
344 <IconButton onClick={doMaximizePanel} size="large">
351 title={`Close ${panelName || "panel"}`}
354 <IconButton disabled={panelMaximized} onClick={doHidePanel} size="large">
362 <CardContent className={classes.content}>
365 {/* raw is undefined until params are loaded */}
371 justifyContent="center"
373 <CircularProgress data-cy="process-io-circular-progress" />
376 {/* Once loaded, either raw or params may still be empty
377 * Raw when all params are empty
378 * Params when raw is provided by containerRequest properties but workflow mount is absent for preview
380 {!loading && (hasRaw || hasParams) && (
383 className={classes.symmetricTabs}
386 // params will be empty on processes without workflow definitions in mounts, so we only show raw
389 content: <ProcessIOPreview
391 valueLabel={forceShowParams ? "Default value" : "Value"}
395 show: !forceShowParams,
397 content: <ProcessIORaw data={raw} />,
400 show: hasOutputCollecton,
402 content: <ProcessOutputCollection outputUuid={outputUuid} />,
407 {!loading && !hasRaw && !hasParams && (
412 justifyContent="center"
414 <DefaultView messages={["No parameters found"]} />
421 {subProcessLoading ? (
426 justifyContent="center"
428 <CircularProgress data-cy="subprocess-circular-progress"/>
430 ) : !subProcessLoading && (hasInputMounts || hasOutputCollecton || isRawLoaded) ? (
433 className={classes.symmetricTabs}
436 show: hasInputMounts,
437 label: "Collections",
438 content: <ProcessInputMounts mounts={mounts || []} />,
441 show: hasOutputCollecton,
443 content: <ProcessOutputCollection outputUuid={outputUuid} />,
448 content: <ProcessIORaw data={raw} />,
457 justifyContent="center"
459 <DefaultView messages={["No data to display"]} />
470 export type ProcessIOValue = {
471 display: ReactElement<any, any>;
473 collection?: ReactElement<any, any>;
477 export type ProcessIOParameter = {
480 value: ProcessIOValue;
483 interface ProcessIOPreviewDataProps {
484 data: ProcessIOParameter[];
489 type ProcessIOPreviewProps = ProcessIOPreviewDataProps & WithStyles<CssRules>;
491 const ProcessIOPreview = memo(
492 withStyles(styles)(({ data, valueLabel, hidden, classes }: ProcessIOPreviewProps) => {
493 const showLabel = data.some((param: ProcessIOParameter) => param.label);
495 const hasMoreValues = (index: number) => (
496 data[index+1] && !isMainRow(data[index+1])
499 const isMainRow = (param: ProcessIOParameter) => (
501 ((param.id || param.label) &&
502 !param.value.secondary)
505 const RenderRow = ({index, style}) => {
506 const param = data[index];
509 [classes.noBorderRow]: hasMoreValues(index),
514 className={classNames(rowClasses)}
515 data-cy={isMainRow(param) ? "process-io-param" : ""}>
517 <Tooltip title={param.id}>
518 <Typography className={classes.paramTableCellText}>
525 {showLabel && <TableCell>
526 <Tooltip title={param.label}>
527 <Typography className={classes.paramTableCellText}>
540 <Typography className={classes.paramTableCellText}>
541 {/** Collection is an anchor so doesn't require wrapper element */}
542 {param.value.collection}
548 return <div className={classes.tableWrapper} hidden={hidden}>
550 className={classes.paramTableRoot}
551 aria-label="Process IO Preview"
555 <TableCell>Name</TableCell>
556 {showLabel && <TableCell>Label</TableCell>}
557 <TableCell>{valueLabel}</TableCell>
558 <TableCell>Collection</TableCell>
563 {({ height, width }) =>
566 itemCount={data.length}
580 interface ProcessValuePreviewProps {
581 value: ProcessIOValue;
584 const ProcessValuePreview = withStyles(styles)(({ value, classes }: ProcessValuePreviewProps & WithStyles<CssRules>) => (
585 <Typography className={classNames(classes.paramTableCellText, value.secondary && classes.secondaryVal)}>
590 interface ProcessIORawDataProps {
591 data: ProcessIOParameter[];
595 const ProcessIORaw = withStyles(styles)(({ data, hidden, classes }: ProcessIORawDataProps & WithStyles<CssRules>) => (
596 <div className={classes.jsonWrapper} hidden={hidden}>
597 <Paper elevation={0} style={{minWidth: "100%", height: "100%"}}>
598 <DefaultVirtualCodeSnippet
599 lines={JSON.stringify(data, null, 2).split('\n')}
607 interface ProcessInputMountsDataProps {
608 mounts: InputCollectionMount[];
612 type ProcessInputMountsProps = ProcessInputMountsDataProps & WithStyles<CssRules>;
614 const ProcessInputMounts = withStyles(styles)(
615 connect((state: RootState) => ({
617 }))(({ mounts, hidden, classes, auth }: ProcessInputMountsProps & { auth: AuthState }) => (
619 className={classes.mountsTableRoot}
620 aria-label="Process Input Mounts"
625 <TableCell>Path</TableCell>
626 <TableCell>Portable Data Hash</TableCell>
630 {mounts.map(mount => (
631 <TableRow key={mount.path}>
633 <pre>{mount.path}</pre>
637 to={getNavUrl(mount.pdh, auth)}
638 className={classes.keepLink}
650 export interface ProcessOutputCollectionActionProps {
651 navigateTo: (uuid: string) => void;
654 const mapNavigateToProps = (dispatch: Dispatch): ProcessOutputCollectionActionProps => ({
655 navigateTo: uuid => dispatch<any>(navigateTo(uuid)),
658 type ProcessOutputCollectionProps = {outputUuid: string | undefined, hidden?: boolean} & ProcessOutputCollectionActionProps & WithStyles<CssRules>;
660 const ProcessOutputCollection = withStyles(styles)(connect(null, mapNavigateToProps)(({ outputUuid, hidden, navigateTo, classes }: ProcessOutputCollectionProps) => (
661 <div className={classes.tableWrapper} hidden={hidden}>
664 <Typography className={classes.collectionLink} data-cy="output-uuid-display">
665 Output Collection:{" "}
667 className={classes.keepLink}
669 navigateTo(outputUuid || "");
676 <ProcessOutputCollectionFiles
678 currentItemUuid={outputUuid}
684 type FileWithSecondaryFiles = {
685 secondaryFiles: File[];
688 export const getIOParamDisplayValue = (auth: AuthState, input: CommandInputParameter | CommandOutputParameter, pdh?: string): ProcessIOValue[] => {
690 case isSecret(input):
691 return [{ display: <SecretValue /> }];
693 case isPrimitiveOfType(input, CWLType.BOOLEAN):
694 const boolValue = (input as BooleanCommandInputParameter).value;
695 return boolValue !== undefined && !(Array.isArray(boolValue) && boolValue.length === 0)
696 ? [{ display: <PrimitiveTooltip data={boolValue}>{renderPrimitiveValue(boolValue, false)}</PrimitiveTooltip> }]
697 : [{ display: <EmptyValue /> }];
699 case isPrimitiveOfType(input, CWLType.INT):
700 case isPrimitiveOfType(input, CWLType.LONG):
701 const intValue = (input as IntCommandInputParameter).value;
702 return intValue !== undefined &&
703 // Missing values are empty array
704 !(Array.isArray(intValue) && intValue.length === 0)
705 ? [{ display: <PrimitiveTooltip data={intValue}>{renderPrimitiveValue(intValue, false)}</PrimitiveTooltip> }]
706 : [{ display: <EmptyValue /> }];
708 case isPrimitiveOfType(input, CWLType.FLOAT):
709 case isPrimitiveOfType(input, CWLType.DOUBLE):
710 const floatValue = (input as FloatCommandInputParameter).value;
711 return floatValue !== undefined && !(Array.isArray(floatValue) && floatValue.length === 0)
712 ? [{ display: <PrimitiveTooltip data={floatValue}>{renderPrimitiveValue(floatValue, false)}</PrimitiveTooltip> }]
713 : [{ display: <EmptyValue /> }];
715 case isPrimitiveOfType(input, CWLType.STRING):
716 const stringValue = (input as StringCommandInputParameter).value || undefined;
717 return stringValue !== undefined && !(Array.isArray(stringValue) && stringValue.length === 0)
718 ? [{ display: <PrimitiveTooltip data={stringValue}>{renderPrimitiveValue(stringValue, false)}</PrimitiveTooltip> }]
719 : [{ display: <EmptyValue /> }];
721 case isPrimitiveOfType(input, CWLType.FILE):
722 const mainFile = (input as FileCommandInputParameter).value;
723 // secondaryFiles: File[] is not part of CommandOutputParameter so we cast to access secondaryFiles
724 const secondaryFiles = (mainFile as unknown as FileWithSecondaryFiles)?.secondaryFiles || [];
725 const files = [...(mainFile && !(Array.isArray(mainFile) && mainFile.length === 0) ? [mainFile] : []), ...secondaryFiles];
726 const mainFilePdhUrl = mainFile ? getResourcePdhUrl(mainFile, pdh) : "";
728 ? files.map((file, i) => fileToProcessIOValue(file, i > 0, auth, pdh, i > 0 ? mainFilePdhUrl : ""))
729 : [{ display: <EmptyValue /> }];
731 case isPrimitiveOfType(input, CWLType.DIRECTORY):
732 const directory = (input as DirectoryCommandInputParameter).value;
733 return directory !== undefined && !(Array.isArray(directory) && directory.length === 0)
734 ? [directoryToProcessIOValue(directory, auth, pdh)]
735 : [{ display: <EmptyValue /> }];
737 case getEnumType(input) !== null:
738 const enumValue = (input as EnumCommandInputParameter).value;
739 return enumValue !== undefined && enumValue ? [{ display: <PrimitiveTooltip data={enumValue}>{enumValue}</PrimitiveTooltip> }] : [{ display: <EmptyValue /> }];
741 case isArrayOfType(input, CWLType.STRING):
742 const strArray = (input as StringArrayCommandInputParameter).value || [];
743 return strArray.length ? [{ display: <PrimitiveArrayTooltip data={strArray}>{strArray.map(val => renderPrimitiveValue(val, true))}</PrimitiveArrayTooltip> }] : [{ display: <EmptyValue /> }];
745 case isArrayOfType(input, CWLType.INT):
746 case isArrayOfType(input, CWLType.LONG):
747 const intArray = (input as IntArrayCommandInputParameter).value || [];
748 return intArray.length ? [{ display: <PrimitiveArrayTooltip data={intArray}>{intArray.map(val => renderPrimitiveValue(val, true))}</PrimitiveArrayTooltip> }] : [{ display: <EmptyValue /> }];
750 case isArrayOfType(input, CWLType.FLOAT):
751 case isArrayOfType(input, CWLType.DOUBLE):
752 const floatArray = (input as FloatArrayCommandInputParameter).value || [];
753 return floatArray.length ? [{ display: <PrimitiveArrayTooltip data={floatArray}>{floatArray.map(val => renderPrimitiveValue(val, true))}</PrimitiveArrayTooltip> }] : [{ display: <EmptyValue /> }];
755 case isArrayOfType(input, CWLType.FILE):
756 const fileArrayMainFiles = (input as FileArrayCommandInputParameter).value || [];
757 const firstMainFilePdh = fileArrayMainFiles.length > 0 && fileArrayMainFiles[0] ? getResourcePdhUrl(fileArrayMainFiles[0], pdh) : "";
759 // Convert each main and secondaryFiles into array of ProcessIOValue preserving ordering
760 let fileArrayValues: ProcessIOValue[] = [];
761 for (let i = 0; i < fileArrayMainFiles.length; i++) {
762 const secondaryFiles = (fileArrayMainFiles[i] as unknown as FileWithSecondaryFiles)?.secondaryFiles || [];
763 fileArrayValues.push(
764 // Pass firstMainFilePdh to secondary files and every main file besides the first to hide pdh if equal
765 ...(fileArrayMainFiles[i] ? [fileToProcessIOValue(fileArrayMainFiles[i], false, auth, pdh, i > 0 ? firstMainFilePdh : "")] : []),
766 ...secondaryFiles.map(file => fileToProcessIOValue(file, true, auth, pdh, firstMainFilePdh))
770 return fileArrayValues.length ? fileArrayValues : [{ display: <EmptyValue /> }];
772 case isArrayOfType(input, CWLType.DIRECTORY):
773 const directories = (input as DirectoryArrayCommandInputParameter).value || [];
774 return directories.length ? directories.map(directory => directoryToProcessIOValue(directory, auth, pdh)) : [{ display: <EmptyValue /> }];
777 return [{ display: <UnsupportedValue /> }];
781 interface PrimitiveTooltipProps {
782 data: boolean | number | string;
785 const PrimitiveTooltip = (props: React.PropsWithChildren<PrimitiveTooltipProps>) => (
786 <Tooltip title={typeof props.data !== 'object' ? String(props.data) : ""}>
787 <pre>{props.children}</pre>
791 interface PrimitiveArrayTooltipProps {
795 const PrimitiveArrayTooltip = (props: React.PropsWithChildren<PrimitiveArrayTooltipProps>) => (
796 <Tooltip title={props.data.join(', ')}>
797 <span>{props.children}</span>
802 const renderPrimitiveValue = (value: any, asChip: boolean) => {
803 const isObject = typeof value === "object";
808 label={String(value)}
809 style={{marginRight: "10px"}}
815 return asChip ? <UnsupportedValueChip /> : <UnsupportedValue />;
820 * @returns keep url without keep: prefix
822 const getKeepUrl = (file: File | Directory, pdh?: string): string => {
823 const isKeepUrl = file.location?.startsWith("keep:") || false;
824 const keepUrl = isKeepUrl ? file.location?.replace("keep:", "") : pdh ? `${pdh}/${file.location}` : file.location;
825 return keepUrl || "";
828 interface KeepUrlProps {
830 res: File | Directory;
834 const getResourcePdhUrl = (res: File | Directory, pdh?: string): string => {
835 const keepUrl = getKeepUrl(res, pdh);
836 return keepUrl ? keepUrl.split("/").slice(0, 1)[0] : "";
839 const KeepUrlBase = withStyles(styles)(({ auth, res, pdh, classes }: KeepUrlProps & WithStyles<CssRules>) => {
840 const pdhUrl = getResourcePdhUrl(res, pdh);
841 // Passing a pdh always returns a relative wb2 collection url
842 const pdhWbPath = getNavUrl(pdhUrl, auth);
843 return pdhUrl && pdhWbPath ? (
844 <Tooltip title={<>View collection in Workbench<br />{pdhUrl}</>}>
848 className={classes.keepLink}
859 const KeepUrlPath = withStyles(styles)(({ auth, res, pdh, classes }: KeepUrlProps & WithStyles<CssRules>) => {
860 const keepUrl = getKeepUrl(res, pdh);
861 const keepUrlParts = keepUrl ? keepUrl.split("/") : [];
862 const keepUrlPath = keepUrlParts.length > 1 ? keepUrlParts.slice(1).join("/") : "";
864 const keepUrlPathNav = getKeepNavUrl(auth, res, pdh);
865 return keepUrlPathNav ? (
866 <Tooltip classes={{tooltip: classes.wrapTooltip}} title={<>View in keep-web<br />{keepUrlPath || "/"}</>}>
868 className={classes.keepLink}
869 href={keepUrlPathNav}
871 rel="noopener noreferrer"
881 const getKeepNavUrl = (auth: AuthState, file: File | Directory, pdh?: string): string => {
882 let keepUrl = getKeepUrl(file, pdh);
883 return getInlineFileUrl(
884 `${auth.config.keepWebServiceUrl}/c=${keepUrl}?api_token=${auth.apiToken}`,
885 auth.config.keepWebServiceUrl,
886 auth.config.keepWebInlineServiceUrl
890 const getImageUrl = (auth: AuthState, file: File, pdh?: string): string => {
891 const keepUrl = getKeepUrl(file, pdh);
892 return getInlineFileUrl(
893 `${auth.config.keepWebServiceUrl}/c=${keepUrl}?api_token=${auth.apiToken}`,
894 auth.config.keepWebServiceUrl,
895 auth.config.keepWebInlineServiceUrl
899 const isFileImage = (basename?: string): boolean => {
900 return basename ? (mime.getType(basename) || "").startsWith("image/") : false;
903 const isFileUrl = (location?: string): boolean =>
904 !!location && !KEEP_URL_REGEX.exec(location) && (location.startsWith("http://") || location.startsWith("https://"));
906 const normalizeDirectoryLocation = (directory: Directory): Directory => {
907 if (!directory.location) {
912 location: (directory.location || "").endsWith("/") ? directory.location : directory.location + "/",
916 const directoryToProcessIOValue = (directory: Directory, auth: AuthState, pdh?: string): ProcessIOValue => {
917 if (isExternalValue(directory)) {
918 return { display: <UnsupportedValue /> };
921 const normalizedDirectory = normalizeDirectoryLocation(directory);
926 res={normalizedDirectory}
933 res={normalizedDirectory}
940 type MuiLinkWithTooltipProps = WithStyles<CssRules> & React.PropsWithChildren<LinkProps>;
942 const MuiLinkWithTooltip = withStyles(styles)((props: MuiLinkWithTooltipProps) => (
943 <Tooltip title={props.title} classes={{tooltip: props.classes.wrapTooltip}}>
950 const fileToProcessIOValue = (file: File, secondary: boolean, auth: AuthState, pdh: string | undefined, mainFilePdh: string): ProcessIOValue => {
951 if (isExternalValue(file)) {
952 return { display: <UnsupportedValue /> };
955 if (isFileUrl(file.location)) {
962 title={file.location}
965 </MuiLinkWithTooltip>
971 const resourcePdh = getResourcePdhUrl(file, pdh);
981 imageUrl: isFileImage(file.basename) ? getImageUrl(auth, file, pdh) : undefined,
983 resourcePdh !== mainFilePdh ? (
995 const isExternalValue = (val: any) => Object.keys(val).includes("$import") || Object.keys(val).includes("$include");
997 export const EmptyValue = withStyles(styles)(({ classes }: WithStyles<CssRules>) => <span className={classes.emptyValue}>No value</span>);
999 const UnsupportedValue = withStyles(styles)(({ classes }: WithStyles<CssRules>) => <span className={classes.emptyValue}>Cannot display value</span>);
1001 const SecretValue = withStyles(styles)(({ classes }: WithStyles<CssRules>) => <span className={classes.emptyValue}>Cannot display secret</span>);
1003 const UnsupportedValueChip = withStyles(styles)(({ classes }: WithStyles<CssRules>) => (
1006 label={"Cannot display value"}