fix: improve feature not enabled UX

server/index.ts

@@ -26,7 +26,6 @@ import Passwordless from "supertokens-node/recipe/passwordless";
 import Session from "supertokens-node/recipe/session";
 import ThirdParty from "supertokens-node/recipe/thirdparty";
 import UserMetaData from "supertokens-node/recipe/usermetadata";
-import UserRoles from "supertokens-node/recipe/userroles";
 
 const websiteDomain = "http://localhost:3000";
 
@@ -89,7 +88,7 @@ SuperTokens.init({
 		}),
 		Session.init(),
 		AccountLinking.init(),
-		UserRoles.init(),
+		// UserRoles.init(),
 	],
 });
 

src/ui/components/alert/alert.scss

@@ -56,6 +56,15 @@
 		& > div {
 			color: #a44915;
 		}
+
+		a {
+			color: #a44915;
+			font-weight: 500;
+		}
+	}
+
+	a:hover {
+		background: transparent !important;
 	}
 }
 

src/ui/components/alert/index.tsx

@@ -18,14 +18,14 @@ import "./alert.scss";
 type AlertProps = {
 	type?: "primary";
 	title: string;
-	content: string;
+	children: React.ReactNode;
 };
 
-export default function Alert({ content, title, type = "primary" }: AlertProps) {
+export default function Alert({ children, title, type = "primary" }: AlertProps) {
 	return (
 		<div className={`alert ${type}`}>
 			<span>{title}</span>
-			<div>{content}</div>
+			<div>{children}</div>
 		</div>
 	);
 }

src/ui/components/userDetail/userRoles/UserRolesList.tsx

@@ -182,10 +182,13 @@ export default function UserRolesList() {
 							) : null}
 						</>
 					) : (
-						<Alert
-							title="Feature is not enabled"
-							content="Please enable this feature first to manage your user roles and permissions!"
-						/>
+						<Alert title="Feature is not enabled">
+							Enable this feature to manage user roles and permissions. Start by initializing the
+							UserRoles recipe in the recipeList on the backend. For more details, see{" "}
+							<a href="https://supertokens.com/docs/userdashboard/managing-user-roles-and-permissions">
+								this page.
+							</a>
+						</Alert>
 					)}
 				</>
 			</div>

src/ui/pages/userroles/index.tsx

@@ -106,10 +106,13 @@ export default function UserRolesList() {
 	function renderContent() {
 		if (isFeatureEnabled === false) {
 			return (
-				<Alert
-					title="Feature is not enabled"
-					content="Please enable this feature first to manage your user roles and permissions!"
-				/>
+				<Alert title="Feature is not enabled">
+					Enable this feature to manage user roles and permissions. Start by initializing the UserRoles recipe
+					in the recipeList on the backend. For more details, see{" "}
+					<a href="https://supertokens.com/docs/userdashboard/managing-user-roles-and-permissions">
+						this page.
+					</a>
+				</Alert>
 			);
 		}