Delete suites functionality added

desktop-app/src/renderer/components/DeviceManager/PreviewSuites/Suite.tsx

@@ -6,6 +6,7 @@ import { useDispatch } from 'react-redux';
 import Button from 'renderer/components/Button';
 import {
   PreviewSuite,
+  deleteSuite,
   setActiveSuite,
   setSuiteDevices,
 } from 'renderer/store/features/device-manager';
@@ -45,7 +46,14 @@ export const Suite = ({ suite: { id, name, devices }, isActive }: Props) => {
         </div>
       ) : null}
       <div className="flex flex-col gap-8 p-4 pb-8">
-        <p className="text-left text-lg">{name}</p>
+        <div className="flex justify-between">
+          <p className="text-lg">{name}</p>
+          {id !== 'default' ? (
+            <Button onClick={() => dispatch(deleteSuite(id))}>
+              <Icon icon="ic:twotone-delete" />
+            </Button>
+          ) : null}
+        </div>
         <div className="flex flex-col gap-2" ref={drop}>
           {devices.map((deviceId) => (
             <DeviceLabel

desktop-app/src/renderer/components/DeviceManager/PreviewSuites/index.tsx

@@ -16,7 +16,7 @@ export const PreviewSuites = () => {
     <div className="flex flex-col">
       <p className="mb-6 text-lg">Preview Suites</p>
       <div className="flex w-full items-center gap-4 overflow-x-auto">
-        <div className="flex gap-4">
+        <div className="flex flex-shrink-0 gap-4">
           {suites.map((suite) => (
             <Suite
               suite={suite}

desktop-app/src/renderer/store/features/device-manager/index.ts

@@ -67,12 +67,30 @@ export const deviceManagerSlice = createSlice({
       state.activeSuite = action.payload.id;
       window.electron.store.set('deviceManager.previewSuites', suites);
     },
+    deleteSuite(state, action: PayloadAction<string>) {
+      const suites: PreviewSuite[] = window.electron.store.get(
+        'deviceManager.previewSuites'
+      );
+      const suiteIndex = suites.findIndex((s) => s.id === action.payload);
+      if (suiteIndex === -1) {
+        return;
+      }
+      suites.splice(suiteIndex, 1);
+      state.suites = suites;
+      state.activeSuite = suites[0].id;
+      window.electron.store.set('deviceManager.previewSuites', suites);
+    },
   },
 });
 
 // Action creators are generated for each case reducer function
-export const { setDevices, setSuiteDevices, setActiveSuite, addSuite } =
-  deviceManagerSlice.actions;
+export const {
+  setDevices,
+  setSuiteDevices,
+  setActiveSuite,
+  addSuite,
+  deleteSuite,
+} = deviceManagerSlice.actions;
 
 export const selectSuites = (state: RootState) => state.deviceManager.suites;