From cf70dbe0c90264acd8947975560bfdb832ec550c Mon Sep 17 00:00:00 2001
From: Thuan Vo <thuan.votann@gmail.com>
Date: Wed, 7 Aug 2024 17:48:10 -0700
Subject: [PATCH] fix: fix automated analysis view in recording table

---
 src/app/Recordings/ActiveRecordingsTable.tsx  | 93 +++++++++++--------
 .../Recordings/ArchivedRecordingsTable.tsx    | 75 +++++++++------
 src/app/app.css                               | 18 ++--
 3 files changed, 107 insertions(+), 79 deletions(-)

diff --git a/src/app/Recordings/ActiveRecordingsTable.tsx b/src/app/Recordings/ActiveRecordingsTable.tsx
index 9975ec883c..798e8d8908 100644
--- a/src/app/Recordings/ActiveRecordingsTable.tsx
+++ b/src/app/Recordings/ActiveRecordingsTable.tsx
@@ -76,6 +76,11 @@ import {
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
+  Divider,
+  Panel,
+  PanelHeader,
+  PanelMain,
+  PanelMainBody,
 } from '@patternfly/react-core';
 import { EllipsisVIcon, RedoIcon } from '@patternfly/react-icons';
 import { ExpandableRowContent, SortByDirection, Tbody, Td, Tr } from '@patternfly/react-table';
@@ -1019,44 +1024,56 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
       <Tr key={`${index}_child`} isExpanded={isExpanded}>
         <Td key={`active-ex-expand-${index}`} dataLabel={'Content Details'} colSpan={tableColumns.length + 3}>
           <ExpandableRowContent>
-            <Title headingLevel={'h5'}>
-              <Button
-                variant="plain"
-                size="sm"
-                isDisabled={loadingAnalysis}
-                onClick={handleLoadAnalysis}
-                icon={<RedoIcon />}
-              />
-              Automated analysis
-            </Title>
-            <Grid>
-              {loadingAnalysis ? (
-                <Bullseye>
-                  <Spinner />
-                </Bullseye>
-              ) : (
-                analyses.map(([topic, evaluations]) => {
-                  return (
-                    <GridItem className="automated-analysis-grid-item" span={2} key={`gridItem-${topic}`}>
-                      <LabelGroup
-                        className="automated-analysis-topic-label-groups"
-                        categoryName={topic}
-                        isVertical
-                        numLabels={2}
-                        isCompact
-                        key={topic}
-                      >
-                        {evaluations.map((evaluation) => {
-                          return (
-                            <ClickableAutomatedAnalysisLabel result={evaluation} key={clickableAutomatedAnalysisKey} />
-                          );
-                        })}
-                      </LabelGroup>
-                    </GridItem>
-                  );
-                })
-              )}
-            </Grid>
+            <Panel>
+              <PanelHeader>
+                <Title headingLevel={'h5'}>
+                  Automated analysis
+                  <Button
+                    variant="plain"
+                    size="sm"
+                    isDisabled={loadingAnalysis}
+                    onClick={handleLoadAnalysis}
+                    icon={<RedoIcon />}
+                  />
+                </Title>
+              </PanelHeader>
+              <Divider />
+              <PanelMain>
+                <PanelMainBody>
+                  <Grid>
+                    {loadingAnalysis ? (
+                      <Bullseye>
+                        <Spinner />
+                      </Bullseye>
+                    ) : (
+                      analyses.map(([topic, evaluations]) => {
+                        return (
+                          <GridItem className="automated-analysis-grid-item" span={2} key={`gridItem-${topic}`}>
+                            <LabelGroup
+                              className="automated-analysis-topic-label-groups"
+                              categoryName={topic}
+                              isVertical
+                              numLabels={2}
+                              isCompact
+                              key={topic}
+                            >
+                              {evaluations.map((evaluation) => {
+                                return (
+                                  <ClickableAutomatedAnalysisLabel
+                                    result={evaluation}
+                                    key={clickableAutomatedAnalysisKey}
+                                  />
+                                );
+                              })}
+                            </LabelGroup>
+                          </GridItem>
+                        );
+                      })
+                    )}
+                  </Grid>
+                </PanelMainBody>
+              </PanelMain>
+            </Panel>
           </ExpandableRowContent>
         </Td>
       </Tr>
diff --git a/src/app/Recordings/ArchivedRecordingsTable.tsx b/src/app/Recordings/ArchivedRecordingsTable.tsx
index 3ccf45a080..58e3fdc279 100644
--- a/src/app/Recordings/ArchivedRecordingsTable.tsx
+++ b/src/app/Recordings/ArchivedRecordingsTable.tsx
@@ -73,6 +73,11 @@ import {
   DropdownList,
   MenuToggle,
   MenuToggleElement,
+  PanelHeader,
+  Divider,
+  Panel,
+  PanelMain,
+  PanelMainBody,
 } from '@patternfly/react-core';
 import { UploadIcon, EllipsisVIcon } from '@patternfly/react-icons';
 import { Tbody, Tr, Td, ExpandableRowContent, Table, SortByDirection } from '@patternfly/react-table';
@@ -942,35 +947,47 @@ export const ArchivedRecordingRow: React.FC<ArchivedRecordingRowProps> = ({
       <Tr key={`${index}_child`} isExpanded={isExpanded}>
         <Td key={`archived-ex-expand-${index}`} dataLabel={'Content Details'} colSpan={tableColumns.length + 3}>
           <ExpandableRowContent>
-            <Title headingLevel={'h5'}>Automated analysis</Title>
-            <Grid>
-              {loadingAnalysis ? (
-                <Bullseye>
-                  <Spinner />
-                </Bullseye>
-              ) : (
-                analyses.map(([topic, evaluations]) => {
-                  return (
-                    <GridItem className="automated-analysis-grid-item" span={2} key={`gridItem-${topic}`}>
-                      <LabelGroup
-                        className="automated-analysis-topic-label-groups"
-                        categoryName={topic}
-                        isVertical
-                        numLabels={2}
-                        isCompact
-                        key={topic}
-                      >
-                        {evaluations.map((evaluation) => {
-                          return (
-                            <ClickableAutomatedAnalysisLabel result={evaluation} key={clickableAutomatedAnalysisKey} />
-                          );
-                        })}
-                      </LabelGroup>
-                    </GridItem>
-                  );
-                })
-              )}
-            </Grid>
+            <Panel>
+              <PanelHeader>
+                <Title headingLevel={'h5'}>Automated analysis</Title>
+              </PanelHeader>
+              <Divider />
+              <PanelMain>
+                <PanelMainBody>
+                  <Grid>
+                    {loadingAnalysis ? (
+                      <Bullseye>
+                        <Spinner />
+                      </Bullseye>
+                    ) : (
+                      analyses.map(([topic, evaluations]) => {
+                        return (
+                          <GridItem className="automated-analysis-grid-item" span={2} key={`gridItem-${topic}`}>
+                            <LabelGroup
+                              className="automated-analysis-topic-label-groups"
+                              categoryName={topic}
+                              isVertical
+                              numLabels={2}
+                              isCompact
+                              key={topic}
+                            >
+                              {evaluations.map((evaluation) => {
+                                return (
+                                  <ClickableAutomatedAnalysisLabel
+                                    result={evaluation}
+                                    key={clickableAutomatedAnalysisKey}
+                                  />
+                                );
+                              })}
+                            </LabelGroup>
+                          </GridItem>
+                        );
+                      })
+                    )}
+                  </Grid>
+                </PanelMainBody>
+              </PanelMain>
+            </Panel>
           </ExpandableRowContent>
         </Td>
       </Tr>
diff --git a/src/app/app.css b/src/app/app.css
index dcf3e13268..35f540a1fb 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -280,26 +280,20 @@ html, body, #root {
   color: var(--pf-v5-global--danger-color--100);
 }
 
-.automated-analysis-grid-item .pf-v5-c-label-group__main {
+.automated-analysis-grid-item .pf-v5-c-label-group {
   width: 100%;
+  height: 100%;
+  background-color: var(--pf-v5-global--BackgroundColor--light-300) !important;
 }
 
-.automated-analysis-grid-item .pf-v5-c-label-group__list {
-  width: 100%;
+:is(.pf-v5-theme-dark) .automated-analysis-grid-item .pf-v5-c-label-group {
+  background-color: var(--pf-v5-global--BackgroundColor--light-300) !important;
 }
 
-.automated-analysis-grid-item .pf-v5-c-label-group__list-item {
+.automated-analysis-grid-item .pf-v5-c-label-group__main {
   width: 100%;
 }
 
-.automated-analysis-grid-item .pf-v5-c-label.pf-v5-m-compact {
-  max-width: 100%;
-}
-
-:is(.pf-v5-theme-dark) .automated-analysis-grid-item .pf-v5-c-label {
-  --pf-v5-c-label--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
-}
-
 .automated-analysis-grid-item .pf-v5-c-label-group__label {
   font-weight: bold;
   max-width: 100%;