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

…1699)

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]>

Signed-off-by: Ian Bolton <[email protected]>
Signed-off-by: Cherry Picker <[email protected]>
Co-authored-by: Ian Bolton <[email protected]>

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}}.",

client/src/app/pages/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;