Fix styles

Author: kshmidt-digma

Dockerfile

@@ -1,3 +1,3 @@
-FROM nginx:1.27.3
+FROM openresty/openresty:1.21.4.2-alpine
 
-COPY ./dist/ /app/
+COPY ./dist/ /app/

src/components/Agentic/IncidentTemplate/MCPServerDialog/ToolsStep/index.tsx

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { useState, type ChangeEvent } from "react";
+import { useEffect, useState, type ChangeEvent } from "react";
 import { useDropzone } from "react-dropzone";
 import { useFormDataRequest } from "../../../../../hooks/useFormDataRequest";
 import type { MCPServerIcon } from "../../../../../redux/services/types";
@@ -35,7 +35,7 @@ export const ToolsStep = ({
   const [selectedTools, setSelectedTools] = useState(initialSelectedTools);
   const [searchInputValue, setSearchInputValue] = useState("");
   const [dropzoneError, setDropzoneError] = useState<string>();
-  const [iconId, setIconId] = useState<string | null>(null);
+  const [iconId, setIconId] = useState<string | null>(icon?.id ?? null);
   const [fileToUpload, setFileToUpload] = useState<File | null>(null);
   const {
     send: upload,
@@ -65,19 +65,20 @@ export const ToolsStep = ({
     }
   });
 
-  const fileDetails = icon
-    ? {
-        name: icon.fileName,
-        size: icon.fileSize,
-        type: icon.fileName.split(".")[1] ?? ""
-      }
-    : fileToUpload
-    ? {
-        name: fileToUpload.name,
-        size: fileToUpload.size,
-        type: fileToUpload.type.split("/")[1]
-      }
-    : null;
+  const fileDetails =
+    iconId && icon?.id === iconId
+      ? {
+          name: icon.fileName,
+          size: icon.fileSize,
+          type: icon.fileName.split(".")[1] ?? ""
+        }
+      : fileToUpload
+      ? {
+          name: fileToUpload.name,
+          size: fileToUpload.size,
+          type: fileToUpload.type.split("/")[1]
+        }
+      : null;
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept: {
@@ -177,6 +178,15 @@ export const ToolsStep = ({
     setDropzoneError(undefined);
   };
 
+  useEffect(() => {
+    if (icon?.id) {
+      setFileToUpload(null);
+      setIconId(icon.id);
+    } else {
+      setIconId(null);
+    }
+  }, [icon?.id]);
+
   const formattedFileSize = fileDetails
     ? fileDetails.size >= MAX_ICON_FILE_SIZE
       ? `${roundTo(fileDetails.size / 1024 / 1024, 0)} MB`

src/components/Agentic/IncidentTemplate/MCPServerDialog/ToolsStep/styles.ts

@@ -160,6 +160,8 @@ export const DropzoneContent = styled.div<DropzoneContentProps>`
 
 export const FileIconContainer = styled.div`
   color: ${({ theme }) => theme.colors.v3.surface.brandSecondary};
+  position: relative;
+  display: flex;
 `;
 
 export const FileExtension = styled.span`
@@ -172,8 +174,11 @@ export const FileExtension = styled.span`
   text-transform: uppercase;
   position: absolute;
   bottom: 6px;
-  left: auto;
-  right: auto;
+  left: 0;
+  right: 0;
+  user-select: none;
+  width: 100%;
+  text-align: center;
 `;
 
 export const DownloadIconContainer = styled.div<DropzoneContentIconContainerProps>`
@@ -193,6 +198,7 @@ export const DownloadIconContainer = styled.div<DropzoneContentIconContainerProp
     $isDragActive
       ? theme.colors.v3.surface.brandPrimary
       : theme.colors.v3.surface.primary};
+  box-sizing: border-box;
 `;
 
 export const DropzoneContentTextContainer = styled.div`