From 2f1a0475221b31af8e0b4d26460fce2b0266d4fd Mon Sep 17 00:00:00 2001
From: Juan Lulkin <jmaiz@spotify.com>
Date: Wed, 21 Jul 2021 16:44:53 +0200
Subject: [PATCH 1/5] Align switches left and allows clicking row

Signed-off-by: Juan Lulkin <jmaiz@spotify.com>
---
 .../FeatureFlags/FeatureFlagsItem.tsx         | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx b/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
index 62861d99a9..893fa24fec 100644
--- a/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
+++ b/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
@@ -17,8 +17,10 @@
 import React from 'react';
 import {
   ListItem,
+  Divider,
   ListItemSecondaryAction,
   ListItemText,
+  ListItemIcon,
   Switch,
   Tooltip,
 } from '@material-ui/core';
@@ -31,20 +33,22 @@ type Props = {
 };
 
 export const FlagItem = ({ flag, enabled, toggleHandler }: Props) => (
-  <ListItem>
-    <ListItemText
-      primary={flag.name}
-      secondary={`Registered in ${flag.pluginId} plugin`}
-    />
-    <ListItemSecondaryAction>
-      <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
-        <Switch
-          color="primary"
-          checked={enabled}
-          onChange={() => toggleHandler(flag.name)}
-          name={flag.name}
-        />
-      </Tooltip>
-    </ListItemSecondaryAction>
-  </ListItem>
+  <>
+    <ListItem divider button onClick={() => toggleHandler(flag.name)}>
+      <ListItemIcon>
+        <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
+          <Switch
+            color="primary"
+            checked={enabled}
+            onChange={() => toggleHandler(flag.name)}
+            name={flag.name}
+          />
+        </Tooltip>
+      </ListItemIcon>
+      <ListItemText
+        primary={flag.name}
+        secondary={`Registered in ${flag.pluginId} plugin`}
+      />
+    </ListItem>
+  </>
 );

From b5953c1df36cf6029dcd55eb1ef29c18d8a2e193 Mon Sep 17 00:00:00 2001
From: Juan Lulkin <jmaiz@spotify.com>
Date: Wed, 21 Jul 2021 16:49:57 +0200
Subject: [PATCH 2/5] Adds changeset

Signed-off-by: Juan Lulkin <jmaiz@spotify.com>
---
 .changeset/late-taxis-smile.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/late-taxis-smile.md

diff --git a/.changeset/late-taxis-smile.md b/.changeset/late-taxis-smile.md
new file mode 100644
index 0000000000..80bab5fb54
--- /dev/null
+++ b/.changeset/late-taxis-smile.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Aligns switch left and allows clicking on rows

From d7cee2ea00e49a801403c0119b8d3c05ba6ffe7b Mon Sep 17 00:00:00 2001
From: Juan Lulkin <jmaiz@spotify.com>
Date: Wed, 21 Jul 2021 16:55:43 +0200
Subject: [PATCH 3/5] Fix bubbling of events

Signed-off-by: Juan Lulkin <jmaiz@spotify.com>
---
 .../src/components/FeatureFlags/FeatureFlagsItem.tsx       | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx b/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
index 893fa24fec..6c9e6c811c 100644
--- a/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
+++ b/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
@@ -37,12 +37,7 @@ export const FlagItem = ({ flag, enabled, toggleHandler }: Props) => (
     <ListItem divider button onClick={() => toggleHandler(flag.name)}>
       <ListItemIcon>
         <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
-          <Switch
-            color="primary"
-            checked={enabled}
-            onChange={() => toggleHandler(flag.name)}
-            name={flag.name}
-          />
+          <Switch color="primary" checked={enabled} name={flag.name} />
         </Tooltip>
       </ListItemIcon>
       <ListItemText

From 499e8e85147b6e808536484f2a93b402b8cd11fd Mon Sep 17 00:00:00 2001
From: Juan Lulkin <jmaiz@spotify.com>
Date: Wed, 21 Jul 2021 16:56:58 +0200
Subject: [PATCH 4/5] Remove unused components

Signed-off-by: Juan Lulkin <jmaiz@spotify.com>
---
 .../src/components/FeatureFlags/FeatureFlagsItem.tsx            | 2 --
 1 file changed, 2 deletions(-)

diff --git a/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx b/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
index 6c9e6c811c..d32f2c27f7 100644
--- a/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
+++ b/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
@@ -17,8 +17,6 @@
 import React from 'react';
 import {
   ListItem,
-  Divider,
-  ListItemSecondaryAction,
   ListItemText,
   ListItemIcon,
   Switch,

From b6e36c9a01a6d25a5530bcdd1deea1e8c444e55e Mon Sep 17 00:00:00 2001
From: Juan Lulkin <jmaiz@spotify.com>
Date: Thu, 22 Jul 2021 10:27:04 +0200
Subject: [PATCH 5/5] Remove unused fragment

Signed-off-by: Juan Lulkin <jmaiz@spotify.com>
---
 .../FeatureFlags/FeatureFlagsItem.tsx         | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx b/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
index d32f2c27f7..e97b33cd92 100644
--- a/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
+++ b/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
@@ -31,17 +31,15 @@ type Props = {
 };
 
 export const FlagItem = ({ flag, enabled, toggleHandler }: Props) => (
-  <>
-    <ListItem divider button onClick={() => toggleHandler(flag.name)}>
-      <ListItemIcon>
-        <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
-          <Switch color="primary" checked={enabled} name={flag.name} />
-        </Tooltip>
-      </ListItemIcon>
-      <ListItemText
-        primary={flag.name}
-        secondary={`Registered in ${flag.pluginId} plugin`}
-      />
-    </ListItem>
-  </>
+  <ListItem divider button onClick={() => toggleHandler(flag.name)}>
+    <ListItemIcon>
+      <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
+        <Switch color="primary" checked={enabled} name={flag.name} />
+      </Tooltip>
+    </ListItemIcon>
+    <ListItemText
+      primary={flag.name}
+      secondary={`Registered in ${flag.pluginId} plugin`}
+    />
+  </ListItem>
 );