refactor: [M3-8255] - Remove ramda from Support

packages/manager/.changeset/pr-12483-tech-stories-1751958887196.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Remove ramda from Support ([#12483](https://github.com/linode/manager/pull/12483))

packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx

@@ -2,7 +2,6 @@ import { uploadAttachment } from '@linode/api-v4';
 import { useSupportTicketReplyMutation } from '@linode/queries';
 import { Accordion, Notice } from '@linode/ui';
 import Grid from '@mui/material/Grid';
-import { lensPath, set } from 'ramda';
 import * as React from 'react';
 import { debounce } from 'throttle-debounce';
 import { makeStyles } from 'tss-react/mui';
@@ -11,6 +10,7 @@ import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';
 import { storage } from 'src/utilities/storage';
 
 import { AttachFileForm } from '../../AttachFileForm';
+import { updateFileAtIndex } from '../../ticketUtils';
 import { MarkdownReference } from './MarkdownReference';
 import { ReplyActions } from './ReplyActions';
 import { TabbedReply } from './TabbedReply';
@@ -96,35 +96,46 @@ export const ReplyContainer = (props: Props) => {
             return;
           }
 
-          setFiles(set(lensPath([idx, 'uploading']), true));
+          setFiles((prevFiles) =>
+            updateFileAtIndex(prevFiles, idx, { uploading: true })
+          );
 
           const formData = new FormData();
           formData.append('file', file.file ?? '');
 
           uploadAttachment(props.ticketId, formData)
             .then(() => {
-              const nullFileState = {
-                file: null,
-                uploaded: true,
-                uploading: false,
-              };
-
-              setFiles(set(lensPath([idx]), nullFileState));
+              setFiles((prevFiles) =>
+                updateFileAtIndex(prevFiles, idx, {
+                  file: null,
+                  uploaded: true,
+                  uploading: false,
+                })
+              );
               reloadAttachments();
             })
             /*
              * Note! We want the first few uploads to succeed even if the last few
              * fail! Don't try to aggregate errors!
              */
             .catch((fileErrors) => {
-              setFiles(set(lensPath([idx, 'uploading']), false));
+              setFiles((prevFiles) =>
+                prevFiles.map((f, i) =>
+                  i === idx ? { ...f, uploading: false } : f
+                )
+              );
 
               const newErrors = getAPIErrorOrDefault(
                 fileErrors,
                 'There was an error attaching this file. Please try again.'
               );
 
-              setFiles(set(lensPath([idx, 'errors']), newErrors));
+              setFiles((prevFiles) =>
+                updateFileAtIndex(prevFiles, idx, {
+                  uploading: false,
+                  errors: newErrors,
+                })
+              );
             });
         });
       })

packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx

@@ -13,7 +13,6 @@ import {
 } from '@linode/ui';
 import { reduceAsync, scrollErrorIntoViewV2 } from '@linode/utilities';
 import { useLocation as useLocationTanstack } from '@tanstack/react-router';
-import { update } from 'ramda';
 import * as React from 'react';
 import type { JSX } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
@@ -28,6 +27,7 @@ import { storage, supportTicketStorageDefaults } from 'src/utilities/storage';
 import { AttachFileForm } from '../AttachFileForm';
 import { MarkdownReference } from '../SupportTicketDetail/TabbedReply/MarkdownReference';
 import { TabbedReply } from '../SupportTicketDetail/TabbedReply/TabbedReply';
+import { updateFileAtIndex } from '../ticketUtils';
 import {
   ENTITY_ID_TO_NAME_MAP,
   SCHEMA_MAP,
@@ -283,12 +283,13 @@ export const SupportTicketDialog = (props: SupportTicketDialogProps) => {
     return uploadAttachment(attachment.ticketId, attachment.file)
       .then(() => {
         /* null out an uploaded file after upload */
-        setFiles((oldFiles: FileAttachment[]) =>
-          update(
-            idx,
-            { file: null, name: '', uploaded: true, uploading: false },
-            oldFiles
-          )
+        setFiles((oldFiles) =>
+          updateFileAtIndex(oldFiles, idx, {
+            file: null,
+            name: '',
+            uploaded: true,
+            uploading: false,
+          })
         );
         return accumulator;
       })
@@ -298,7 +299,9 @@ export const SupportTicketDialog = (props: SupportTicketDialogProps) => {
          * fail! Don't try to aggregate errors!
          */
         setFiles((oldFiles) =>
-          update(idx, { ...oldFiles[idx], uploading: false }, oldFiles)
+          updateFileAtIndex(oldFiles, idx, {
+            uploading: false,
+          })
         );
         const newError = getErrorStringOrDefault(
           attachmentErrors,
@@ -320,7 +323,9 @@ export const SupportTicketDialog = (props: SupportTicketDialogProps) => {
       .filter((file) => !file.uploaded)
       .map((file, idx) => {
         setFiles((oldFiles) =>
-          update(idx, { ...oldFiles[idx], uploading: true }, oldFiles)
+          updateFileAtIndex(oldFiles, idx, {
+            uploading: true,
+          })
         );
         const formData = new FormData();
         formData.append('file', file.file ?? ''); // Safety check for TS only

packages/manager/src/features/Support/ticketUtils.ts

@@ -1,3 +1,5 @@
+import type { FileAttachment } from './index';
+
 export const OFFICIAL_USERNAMES = ['Linode', 'Linode Trust & Safety'];
 
 export const reshapeFiles = (files: FileList) => {
@@ -18,3 +20,10 @@ export const reshapeFiles = (files: FileList) => {
 
   return reshapedFiles;
 };
+
+export const updateFileAtIndex = (
+  files: FileAttachment[],
+  index: number,
+  updates: Partial<FileAttachment>
+): FileAttachment[] =>
+  files.map((file, i) => (i === index ? { ...file, ...updates } : file));