From 3889c95269ba88b706dc1fa40e2c1bdcf0268f79 Mon Sep 17 00:00:00 2001
From: Patrik <zepatrik@users.noreply.github.com>
Date: Tue, 5 Sep 2023 14:26:32 +0200
Subject: [PATCH] fix: settings screen group filter for lookupSecret (#136)

---
 .../ory/user-settings-screen.tsx              | 29 ++++++++-------
 src/stories/Ory/SettingsScreen.stories.tsx    | 36 +++++++++++++++++++
 2 files changed, 52 insertions(+), 13 deletions(-)
 create mode 100644 src/stories/Ory/SettingsScreen.stories.tsx

diff --git a/src/react-components/ory/user-settings-screen.tsx b/src/react-components/ory/user-settings-screen.tsx
index 0c78bcdf3..79bdf1d96 100644
--- a/src/react-components/ory/user-settings-screen.tsx
+++ b/src/react-components/ory/user-settings-screen.tsx
@@ -147,19 +147,22 @@ const body = ({
         "webauthn",
         "totp",
       ] as UserSettingsFlowType[]
-    ).map(
-      (flowType) =>
-        flow.ui.nodes.some(({ group }) => group === flowType) && (
-          <div
-            className={settingsCardContainerClassName}
-            id={flowType}
-            key={flowType}
-          >
-            <UserSettingsCard flowType={flowType} flow={flow} />
-            <Divider fullWidth={false} className={dividerClassName} />
-          </div>
-        ),
-    )}
+    ).map((flowType) => {
+      const $card = <UserSettingsCard flowType={flowType} flow={flow} />
+      if (!$card) {
+        return null
+      }
+      return (
+        <div
+          className={settingsCardContainerClassName}
+          id={flowType}
+          key={flowType}
+        >
+          {$card}
+          <Divider fullWidth={false} className={dividerClassName} />
+        </div>
+      )
+    })}
   </>
 )
 
diff --git a/src/stories/Ory/SettingsScreen.stories.tsx b/src/stories/Ory/SettingsScreen.stories.tsx
new file mode 100644
index 000000000..1135619b1
--- /dev/null
+++ b/src/stories/Ory/SettingsScreen.stories.tsx
@@ -0,0 +1,36 @@
+import { ComponentProps } from "react"
+import { Meta, StoryFn } from "@storybook/react"
+
+import { Container } from "../storyhelper"
+import {
+  UserSettingsScreen,
+  UserSettingsScreenProps,
+} from "../../react-components"
+import settingsFlow from "./settings-flow.json"
+import { SettingsFlow } from "@ory/client"
+
+const Screen = (props: UserSettingsScreenProps) => (
+  <div style={{ display: "flex", flexDirection: "row" }}>
+    <UserSettingsScreen.Nav {...props} />
+    <div style={{ margin: "4rem" }}>
+      <UserSettingsScreen.Body {...props} />
+    </div>
+  </div>
+)
+
+export default {
+  title: "Ory/SettingsScreen",
+  component: Screen,
+} as Meta<typeof Screen>
+
+const Template: StoryFn<ComponentProps<typeof Screen>> = (args) => (
+  <Container>
+    <Screen {...args} />
+  </Container>
+)
+
+export const SettingsScreen = Template.bind({})
+SettingsScreen.args = {
+  flow: settingsFlow as SettingsFlow,
+  logoutUrl: "https://www.ory.sh",
+}