From 510335db17022bb098dbaba6d64c45ceb1a11289 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 10 Oct 2024 12:24:25 +0200
Subject: [PATCH] Fix errors empty state, fix styles

---
 .../Errors/GlobalErrorsList/index.tsx         | 128 +++++++++---------
 src/components/Errors/NewErrorCard/index.tsx  |   7 +-
 .../EndpointOption/styles.ts                  |   1 +
 3 files changed, 70 insertions(+), 66 deletions(-)

diff --git a/src/components/Errors/GlobalErrorsList/index.tsx b/src/components/Errors/GlobalErrorsList/index.tsx
index 845c15c4e..3c08a8b8c 100644
--- a/src/components/Errors/GlobalErrorsList/index.tsx
+++ b/src/components/Errors/GlobalErrorsList/index.tsx
@@ -162,70 +162,72 @@ export const GlobalErrorsList = () => {
   return (
     <s.Container>
       {list ? (
-        list.length > 0 ? (
-          <>
-            <s.ToolbarContainer>
-              <SearchInput value={search} onChange={handleSearchInputChange} />
-              <NewPopover
-                isOpen={isSortingMenuOpen}
-                onOpenChange={setIsSortingMenuOpen}
-                content={
-                  <Popup>
-                    <MenuList items={sortingMenuItems} />
-                  </Popup>
-                }
-                placement={"bottom-end"}
-              >
-                <NewButton
-                  icon={() => (
-                    <s.SortButtonIconContainer>
-                      <OppositeArrowsIcon size={12} color={"currentColor"} />
-                    </s.SortButtonIconContainer>
-                  )}
-                  label={"Sort"}
-                  buttonType={"secondary"}
-                  onClick={handleSortingMenuButtonClick}
-                />
-              </NewPopover>
-            </s.ToolbarContainer>
-            <s.ListContainer ref={listContainerRef}>
-              {list.map((x) => (
-                <NewErrorCard
-                  key={x.id}
-                  data={x}
-                  onSourceLinkClick={handleErrorSourceLinkClick}
-                />
-              ))}
-            </s.ListContainer>
-            <Pagination
-              itemsCount={totalCount}
-              page={page}
-              pageSize={pageSize}
-              onPageChange={handlePageChange}
-              extendedNavigation={true}
-              withDescription={true}
+        <>
+          <s.ToolbarContainer>
+            <SearchInput value={search} onChange={handleSearchInputChange} />
+            <NewPopover
+              isOpen={isSortingMenuOpen}
+              onOpenChange={setIsSortingMenuOpen}
+              content={
+                <Popup>
+                  <MenuList items={sortingMenuItems} />
+                </Popup>
+              }
+              placement={"bottom-end"}
+            >
+              <NewButton
+                icon={() => (
+                  <s.SortButtonIconContainer>
+                    <OppositeArrowsIcon size={12} color={"currentColor"} />
+                  </s.SortButtonIconContainer>
+                )}
+                label={"Sort"}
+                buttonType={"secondary"}
+                onClick={handleSortingMenuButtonClick}
+              />
+            </NewPopover>
+          </s.ToolbarContainer>
+          {list.length > 0 ? (
+            <>
+              <s.ListContainer ref={listContainerRef}>
+                {list.map((x) => (
+                  <NewErrorCard
+                    key={x.id}
+                    data={x}
+                    onSourceLinkClick={handleErrorSourceLinkClick}
+                  />
+                ))}
+              </s.ListContainer>
+              <Pagination
+                itemsCount={totalCount}
+                page={page}
+                pageSize={pageSize}
+                onPageChange={handlePageChange}
+                extendedNavigation={true}
+                withDescription={true}
+              />
+            </>
+          ) : areAnyFiltersApplied ? (
+            <NewEmptyState
+              icon={CardsColoredIcon}
+              title={"No errors"}
+              content={
+                <s.EmptyStateContent>
+                  <span>
+                    No data is available for the selected filters. Try resetting
+                    your filters.
+                  </span>
+                  <NewButton
+                    label={"Reset filters"}
+                    onClick={handleResetFiltersButtonClick}
+                  />
+                </s.EmptyStateContent>
+              }
             />
-          </>
-        ) : areAnyFiltersApplied ? (
-          <NewEmptyState
-            icon={CardsColoredIcon}
-            title={"No errors"}
-            content={
-              <s.EmptyStateContent>
-                <span>
-                  No data is available for the selected filters. Try resetting
-                  your filters.
-                </span>
-                <NewButton
-                  label={"Reset filters"}
-                  onClick={handleResetFiltersButtonClick}
-                />
-              </s.EmptyStateContent>
-            }
-          />
-        ) : (
-          <NoDataEmptyState />
-        )
+          ) : (
+            <NoDataEmptyState />
+          )}
+        </>
       ) : null}
     </s.Container>
   );
diff --git a/src/components/Errors/NewErrorCard/index.tsx b/src/components/Errors/NewErrorCard/index.tsx
index 7b5a15653..34e762d8b 100644
--- a/src/components/Errors/NewErrorCard/index.tsx
+++ b/src/components/Errors/NewErrorCard/index.tsx
@@ -14,15 +14,16 @@ import * as s from "./styles";
 import { NewErrorCardProps } from "./types";
 
 const getStatusTagType = (status: string): TagType => {
-  if (status === "High number of errors") {
+  const statusString = status.toLowerCase();
+  if (statusString.localeCompare("high number of errors")) {
     return "highSeverity";
   }
 
-  if (status === "Escalating") {
+  if (statusString.localeCompare("escalating")) {
     return "mediumSeverity";
   }
 
-  if (status.includes("Recent")) {
+  if (statusString.includes("recent")) {
     return "lowSeverity";
   }
 
diff --git a/src/components/common/AffectedEndpointsSelector/EndpointOption/styles.ts b/src/components/common/AffectedEndpointsSelector/EndpointOption/styles.ts
index 331eee28c..c942e62e9 100644
--- a/src/components/common/AffectedEndpointsSelector/EndpointOption/styles.ts
+++ b/src/components/common/AffectedEndpointsSelector/EndpointOption/styles.ts
@@ -36,6 +36,7 @@ export const EndpointName = styled.div<EndpointNameProps>`
         ${ServiceName} {
           flex-shrink: 0;
           width: 151px;
+          max-width: none;
         }
       `;
     }