From 5a30824daf7a8e3f30bff9c313cd1634a4e2ecc6 Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Wed, 28 Feb 2024 17:06:48 -0500
Subject: [PATCH] :bug: Address style issues on assessment summary /
 questionnaire view (#1706)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolves https://issues.redhat.com/browse/MTA-1880
- Adds spacing for vertical tabs to align with question table
- Adds spacing for expanded section to meet PF standards as outlined in
above issue comments from UXD
- Adds Explanation term for explanation previously not labeled.
<img width="1638" alt="Screenshot 2024-02-27 at 2 48 46 PM"
src="https://github.com/konveyor/tackle2-ui/assets/11218376/a5d915d9-7977-48cd-ac4c-5c3ca1cdc909">

---------

Signed-off-by: Ian Bolton <ibolton@redhat.com>
Co-authored-by: Scott Dickerson <sdickers@redhat.com>
---
 client/public/locales/en/translation.json           |  1 +
 .../questionnaire-summary/questionnaire-summary.tsx |  1 +
 .../components/questions-table/questions-table.tsx  | 13 ++++++++-----
 .../questionnaire/questionnaire-page.css            |  5 +++++
 .../assessment-summary/assessment-summary-page.css  | 11 -----------
 .../assessment-summary/assessment-summary-page.tsx  |  1 -
 6 files changed, 15 insertions(+), 17 deletions(-)
 delete mode 100644 client/src/app/pages/assessment/components/assessment-summary/assessment-summary-page.css

diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
index 32f0ae1e7b..29f0802aaf 100644
--- a/client/public/locales/en/translation.json
+++ b/client/public/locales/en/translation.json
@@ -323,6 +323,7 @@
     "email": "Email",
     "error": "Error",
     "errorReport": "Error report",
+    "explanation": "Explanation",
     "exclude": "Exclude",
     "exportToIssue": "Export to Issue Manager",
     "facts": "Facts",
diff --git a/client/src/app/components/questionnaire-summary/questionnaire-summary.tsx b/client/src/app/components/questionnaire-summary/questionnaire-summary.tsx
index d9b44830a0..0fded78200 100644
--- a/client/src/app/components/questionnaire-summary/questionnaire-summary.tsx
+++ b/client/src/app/components/questionnaire-summary/questionnaire-summary.tsx
@@ -166,6 +166,7 @@ const QuestionnaireSummary: React.FC<QuestionnaireSummaryProps> = ({
                 isVertical
                 aria-label="Tabs for summaryData sections"
                 role="region"
+                className="tabs-vertical-container__tabs"
               >
                 {[
                   <Tab
diff --git a/client/src/app/components/questions-table/questions-table.tsx b/client/src/app/components/questions-table/questions-table.tsx
index 4d417dec68..729a7b036c 100644
--- a/client/src/app/components/questions-table/questions-table.tsx
+++ b/client/src/app/components/questions-table/questions-table.tsx
@@ -178,11 +178,14 @@ const QuestionsTable: React.FC<{
                       className={spacing.pyLg}
                     >
                       <ExpandableRowContent>
-                        {question.explanation}
-                        <AnswerTable
-                          hideAnswerKey={hideAnswerKey}
-                          answers={question.answers}
-                        />
+                        <div className={spacing.mlMd}>
+                          <strong>{t("terms.explanation")}: &nbsp;</strong>
+                          <span>{question.explanation}</span>
+                          <AnswerTable
+                            hideAnswerKey={hideAnswerKey}
+                            answers={question.answers}
+                          />
+                        </div>
                       </ExpandableRowContent>
                     </Td>
                   </Tr>
diff --git a/client/src/app/pages/assessment-management/questionnaire/questionnaire-page.css b/client/src/app/pages/assessment-management/questionnaire/questionnaire-page.css
index 52420e3fe3..597d206106 100644
--- a/client/src/app/pages/assessment-management/questionnaire/questionnaire-page.css
+++ b/client/src/app/pages/assessment-management/questionnaire/questionnaire-page.css
@@ -1,5 +1,10 @@
 .tabs-vertical-container {
   display: flex;
+  margin-top: 1.5em;
+}
+
+.tabs-vertical-container__tabs {
+  margin-top: 1.5em;
 }
 
 .tabs-vertical-container .pf-v5-c-tabs {
diff --git a/client/src/app/pages/assessment/components/assessment-summary/assessment-summary-page.css b/client/src/app/pages/assessment/components/assessment-summary/assessment-summary-page.css
deleted file mode 100644
index 52420e3fe3..0000000000
--- a/client/src/app/pages/assessment/components/assessment-summary/assessment-summary-page.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.tabs-vertical-container {
-  display: flex;
-}
-
-.tabs-vertical-container .pf-v5-c-tabs {
-  width: 20%;
-}
-
-.tabs-vertical-container .pf-v5-c-tab-content {
-  width: 80%;
-}
diff --git a/client/src/app/pages/assessment/components/assessment-summary/assessment-summary-page.tsx b/client/src/app/pages/assessment/components/assessment-summary/assessment-summary-page.tsx
index 8a840c8e06..1325284d24 100644
--- a/client/src/app/pages/assessment/components/assessment-summary/assessment-summary-page.tsx
+++ b/client/src/app/pages/assessment/components/assessment-summary/assessment-summary-page.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { useParams } from "react-router-dom";
-import "./assessment-summary-page.css";
 import QuestionnaireSummary, {
   SummaryType,
 } from "@app/components/questionnaire-summary/questionnaire-summary";