Merge branch 'main' into fix-analysis-details-modal

konveyor · Jul 5, 2023 · 90144b3 · 90144b3
2 parents c04ac4a + 54f156b
commit 90144b3
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 2 deletions.
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -309,6 +309,8 @@
     "scheduled": "Scheduled",
     "select": "Select",
     "settingsAllowApps": "Allow reviewing applications without running an assessment first",
+    "showLess": "Show less",
+    "showMore": "Show more",
     "source": "Source",
     "sourceBranch": "Branch",
     "sourceCode": "Source code",

diff --git a/client/src/app/pages/external/jira/components/tracker-status.css b/client/src/app/pages/external/jira/components/tracker-status.css
@@ -0,0 +1,9 @@
+.tracker-status-code {
+  min-width: 30em;
+  max-width: 60em;
+}
+
+.tracker-status-code .pf-c-code-block__content {
+  max-height: 450px;
+  overflow: auto;
+}
diff --git a/client/src/app/pages/external/jira/components/tracker-status.tsx b/client/src/app/pages/external/jira/components/tracker-status.tsx
@@ -7,19 +7,28 @@ import {
   Button,
   CodeBlock,
   CodeBlockCode,
+  ExpandableSectionToggle,
   Popover,
   Text,
   TextContent,
 } from "@patternfly/react-core";
 import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon";
 
+import "./tracker-status.css";
+
 interface ITrackerStatusProps {
   name: string;
   connected: boolean;
   message: string;
 }
 const TrackerStatus = ({ name, connected, message }: ITrackerStatusProps) => {
   const { t } = useTranslation();
+
+  const [isExpanded, setIsExpanded] = useState(false);
+  const needsExpanding = message.length > 300;
+  const messageFirst = message.slice(0, 300);
+  const messageRest = message.slice(300);
+
   return (
     <>
       <StatusIcon
@@ -34,12 +43,34 @@ const TrackerStatus = ({ name, connected, message }: ITrackerStatusProps) => {
               alertSeverityVariant="danger"
               headerIcon={<ExclamationCircleIcon />}
               headerContent={t("composed.error", { what: t("terms.instance") })}
+              hasAutoWidth
+              onHidden={() => setIsExpanded(false)}
               bodyContent={
                 <TextContent>
                   <Text>{t("message.jiraInstanceNotConnected", { name })}</Text>
                   <Text>{t("message.reasonForError")}</Text>
-                  <CodeBlock>
-                    <CodeBlockCode id="code-content">{message}</CodeBlockCode>
+                  <CodeBlock
+                    className="tracker-status-code"
+                    actions={[
+                      needsExpanding && (
+                        <ExpandableSectionToggle
+                          disabled={!needsExpanding}
+                          isExpanded={isExpanded}
+                          onToggle={setIsExpanded}
+                          contentId="code-block-expand"
+                          direction="up"
+                        >
+                          {isExpanded
+                            ? t("terms.showLess")
+                            : t("terms.showMore")}
+                        </ExpandableSectionToggle>
+                      ),
+                    ].filter(Boolean)}
+                  >
+                    <CodeBlockCode id="code-content">
+                      {messageFirst}
+                      {isExpanded ? messageRest : ""}
+                    </CodeBlockCode>
                   </CodeBlock>
                 </TextContent>
               }