🐛 Do not show the code viewer when no code snippet available (#1685)

Resolves #1472 - Adds an empty state to the codeviewer when the codesnip is not populated / is an empty string or whitespace characters. <img width="1188" alt="Screenshot 2024-02-13 at 12 43 05 PM" src="https://github.com/konveyor/tackle2-ui/assets/11218376/eed3cf5d-e5a4-44eb-846f-6397c50b23a9"> Signed-off-by: Ian Bolton <[email protected]> Signed-off-by: Cherry Picker <[email protected]>
konveyor · Feb 26, 2024 · 9cc4053 · 9cc4053
1 parent 31dd4f9
commit 9cc4053
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -198,6 +198,8 @@
     "noDataAvailableTitle": "No data available",
     "noResultsFoundBody": "No results match the filter criteria. Remove all filters or clear all filters to show results.",
     "noResultsFoundTitle": "No results found",
+    "noCodesSnippetAvailableTitle": "No code snippet available",
+    "noCodesSnippetAvailableBody": "No code snippet was created for this incident.",
     "overrideAssessmentDescription": "The application {{name}} already is associated with archetypes: {{what}}.",
     "overrideAssessmentConfirmation": "Do you want to create a dedicated assessment for this application and override the inherited archetype assessment(s)?",
     "overrideArchetypeReviewDescription": "The application {{name}} already is associated with archetypes: {{what}}.",

diff --git a/...ages/issues/issue-detail-drawer/file-incidents-detail-modal/incident-code-snip-viewer.tsx b/...ages/issues/issue-detail-drawer/file-incidents-detail-modal/incident-code-snip-viewer.tsx
@@ -4,6 +4,15 @@ import { AnalysisIncident } from "@app/api/models";
 
 import "./incident-code-snip-viewer.css";
 import { LANGUAGES_BY_FILE_EXTENSION } from "config/monacoConstants";
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateVariant,
+} from "@patternfly/react-core";
+import { CubesIcon } from "@patternfly/react-icons";
+import { useTranslation } from "react-i18next";
 
 const codeLineRegex = /^\s*([0-9]+)( {2})?(.*)$/; // Pattern: leading whitespace (line number) (2 spaces)? (code)
 
@@ -16,6 +25,22 @@ export const IncidentCodeSnipViewer: React.FC<IIncidentCodeSnipViewerProps> = ({
   issueTitle,
   incident,
 }) => {
+  const { t } = useTranslation();
+
+  if (!incident?.codeSnip.trim()) {
+    return (
+      <EmptyState variant={EmptyStateVariant.sm}>
+        <EmptyStateHeader
+          titleText={t("message.noCodesSnippetAvailableTitle")}
+          headingLevel="h4"
+          icon={<EmptyStateIcon icon={CubesIcon} />}
+        />
+        <EmptyStateBody>
+          {t("message.noCodesSnippetAvailableBody")}
+        </EmptyStateBody>
+      </EmptyState>
+    );
+  }
   const codeSnipNumberedLines = incident.codeSnip.split("\n");
   const codeSnipTrimmedLines: string[] = [];
   let codeSnipStartLine = 1;