Data View Accordion

src/components/Accordions/DataViewerAccordion.tsx

@@ -0,0 +1,62 @@
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Grid,
+} from '@mui/material';
+import { useState } from 'react';
+import { IData } from '../../interfaces';
+import { DownloadButton } from '../Buttons/DownloadButton';
+import { DownloadJsonButton } from '../Buttons/DownloadJsonButton';
+import { FFJsonViewer } from '../Viewers/FFJsonViewer';
+import { FFAccordionHeader } from './FFAccordionHeader';
+import { FFAccordionText } from './FFAccordionText';
+
+interface Props {
+  header: string;
+  isOpen?: boolean;
+  data: IData;
+}
+
+export const DataViewAccordion: React.FC<Props> = ({
+  header,
+  isOpen = false,
+  data,
+}) => {
+  const [expanded, setExpanded] = useState<boolean>(isOpen);
+
+  return (
+    <Accordion
+      key={header}
+      expanded={expanded}
+      onChange={() => setExpanded(!expanded)}
+    >
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <FFAccordionHeader
+          leftContent={
+            <FFAccordionText color="primary" text={header} isHeader />
+          }
+          rightContent={
+            data.blob ? (
+              <DownloadButton isBlob url={data.id} filename={data.blob.name} />
+            ) : (
+              <DownloadJsonButton
+                jsonString={JSON.stringify(data.value)}
+                filename={`${data.id}.json`}
+              />
+            )
+          }
+        />
+      </AccordionSummary>
+      <AccordionDetails>
+        {/* Basic Data */}
+        <Grid container item direction="row" alignItems="flex-end">
+          <Grid item pb={1} xs={10} justifyContent="flex-start">
+            <FFJsonViewer json={data.value} />
+          </Grid>
+        </Grid>
+      </AccordionDetails>
+    </Accordion>
+  );
+};

src/components/Accordions/MessageDataAccordion.tsx

@@ -102,7 +102,7 @@ export const MessageDataAccordion: React.FC<Props> = ({
             <Grid container item direction="column">
               <FFAccordionText
                 color="primary"
-                text={t('dataValue')}
+                text={data.blob ? t('dataBlob') : t('dataValue')}
                 padding
                 isHeader
               />

src/components/Slides/DataSlide.tsx

@@ -19,7 +19,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { IData } from '../../interfaces';
 import { DEFAULT_PADDING } from '../../theme';
-import { JsonViewAccordion } from '../Accordions/JsonViewerAccordion';
+import { DataViewAccordion } from '../Accordions/DataViewerAccordion';
 import { DataList } from '../Lists/DataList';
 import { DisplaySlide } from './DisplaySlide';
 import { SlideHeader } from './SlideHeader';
@@ -46,10 +46,10 @@ export const DataSlide: React.FC<Props> = ({ data, open, onClose }) => {
           {/* Value */}
           {data.value && (
             <Grid container item pb={DEFAULT_PADDING}>
-              <JsonViewAccordion
+              <DataViewAccordion
                 isOpen
-                header={t('dataValue')}
-                json={data.value}
+                header={data.blob ? t('dataBlob') : t('dataValue')}
+                data={data}
               />
             </Grid>
           )}

src/components/Viewers/FFJsonViewer.tsx

@@ -22,7 +22,7 @@ export const FFJsonViewer: React.FC<Props> = ({ json }) => {
 
   return typeof json === 'object' && isValidJson(json) ? (
     <ReactJson
-      theme={'pop'}
+      theme={'eighties'}
       style={{
         backgroundColor: 'transparent',
         fontSize: '12px',

src/translations/en.json

@@ -74,6 +74,7 @@
   "datatypeID": "Datatype ID",
   "datatypes": "Datatypes",
   "datatypeValue": "Datatype Value",
+  "dataBlob": "Data Blob",
   "dataValue": "Data Value",
   "definition": "Definition",
   "description": "Description",