diff --git a/src/custom/ResourceDetailFormatters/Component.tsx b/src/custom/ResourceDetailFormatters/Component.tsx index 5e2e65f57..9031d3227 100644 --- a/src/custom/ResourceDetailFormatters/Component.tsx +++ b/src/custom/ResourceDetailFormatters/Component.tsx @@ -1,6 +1,8 @@ -import React from 'react'; +import UnfoldLessIcon from '@mui/icons-material/UnfoldLess'; +import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore'; +import React, { useState } from 'react'; import { Grid, IconButton, Typography } from '../../base'; -import { iconSmall } from '../../constants/iconsSizes'; +import { iconSmall, iconXSmall } from '../../constants/iconsSizes'; import { CopyIcon } from '../../icons'; import { useTheme } from '../../theme'; import { CustomTooltip } from './../CustomTooltip'; @@ -29,7 +31,7 @@ import { PrimaryDetailsProps, SectionHeadingProps } from './types'; -import { splitCamelCaseString } from './utils.js'; +import { splitCamelCaseString } from './utils'; export const PrimaryDetails: React.FC = ({ title, value, hide = false }) => { const titleFormatted = splitCamelCaseString(title); @@ -151,16 +153,39 @@ export const ActionIconButton: React.FC = ({ title, Icon, ); }; -export const KeyValueInRow: React.FC = ({ Key, Value }) => { +export const KeyValueInRow: React.FC = ({ Key, Value, showFold = false }) => { + const [isFolded, setIsFolded] = useState(true); + if (!Value || !Key) return null; + + const handleToggleFold = () => { + setIsFolded(!isFolded); + }; + return ( - + {Key} + {showFold && ( + + {isFolded ? ( + + ) : ( + + )} + + )} -
{React.isValidElement(Value) ? Value : String(Value)}
+
+ {React.isValidElement(Value) ? Value : String(Value)} +