From ddbd6193941d722e33be359a0ebaf1601aea385f Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Mon, 24 Jul 2023 16:23:41 +0200
Subject: [PATCH] fix: Addons toggle (#4312)

## Issue
- When you you enable/disable an addon, in the same time another one is
disabled/enabled
- Sometimes, when clicking enable/disable an addon the toggle switches
quick back to the initial state

## About the changes
- Stable table sorting
- Switch toggle `key`

Closes
https://linear.app/unleash/issue/1-1154/addons-enabledisable-action-misbehaves-changing-other-items
---
 .../AddonList/ConfiguredAddons/ConfiguredAddons.tsx      | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
index c845bb98ab..edfff5c0d9 100644
--- a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
+++ b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
@@ -67,7 +67,7 @@ export const ConfiguredAddons = () => {
     const columns = useMemo(
         () => [
             {
-                id: 'Icon',
+                accessor: 'id',
                 Cell: ({
                     row: {
                         original: { provider },
@@ -75,6 +75,7 @@ export const ConfiguredAddons = () => {
                 }: any) => (
                     <IconCell icon={<AddonIcon name={provider as string} />} />
                 ),
+                disableSortBy: true,
             },
             {
                 Header: 'Name',
@@ -108,6 +109,7 @@ export const ConfiguredAddons = () => {
                     row: { original: IAddon };
                 }) => (
                     <ConfiguredAddonsActionsCell
+                        key={original.id}
                         setShowDelete={setShowDelete}
                         toggleAddon={toggleAddon}
                         setDeletedAddon={setDeletedAddon}
@@ -127,7 +129,10 @@ export const ConfiguredAddons = () => {
 
     const initialState = useMemo(
         () => ({
-            sortBy: [{ id: 'provider', desc: false }],
+            sortBy: [
+                { id: 'provider', desc: false },
+                { id: 'id', desc: false },
+            ],
             hiddenColumns: ['description'],
         }),
         []