fix: dashboard roles

dashboard/src/components/EnvComponents/Roles.tsx

@@ -1,24 +1,25 @@
-import React from "react";
-import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
-import { ArrayInputType } from "../../constants";
-import InputField from "../InputField";
+import React from 'react';
+import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
+import { ArrayInputType } from '../../constants';
+import InputField from '../InputField';
 
 const Roles = ({ variables, setVariables }: any) => {
-  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
+
 	return (
 		<div>
-      {" "}
+			{' '}
 			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
 				Roles
 			</Text>
 			<Stack spacing={6} padding="2% 0%">
-        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
 					<Flex w="30%" justifyContent="start" alignItems="center">
 						<Text fontSize="sm">Roles:</Text>
 					</Flex>
 					<Center
-            w={isNotSmallerScreen ? "70%" : "100%"}
-            mt={isNotSmallerScreen ? "0" : "2"}
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '2'}
 						overflow="hidden"
 					>
 						<InputField
@@ -29,13 +30,13 @@ const Roles = ({ variables, setVariables }: any) => {
 						/>
 					</Center>
 				</Flex>
-        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
 					<Flex w="30%" justifyContent="start" alignItems="center">
 						<Text fontSize="sm">Default Roles:</Text>
 					</Flex>
 					<Center
-            w={isNotSmallerScreen ? "70%" : "100%"}
-            mt={isNotSmallerScreen ? "0" : "2"}
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '2'}
 					>
 						<InputField
 							variables={variables}
@@ -44,13 +45,13 @@ const Roles = ({ variables, setVariables }: any) => {
 						/>
 					</Center>
 				</Flex>
-        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
 					<Flex w="30%" justifyContent="start" alignItems="center">
 						<Text fontSize="sm">Protected Roles:</Text>
 					</Flex>
 					<Center
-            w={isNotSmallerScreen ? "70%" : "100%"}
-            mt={isNotSmallerScreen ? "0" : "2"}
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '2'}
 					>
 						<InputField
 							variables={variables}

dashboard/src/graphql/queries/index.ts

@@ -30,6 +30,7 @@ export const EnvVariablesQuery = `
       LINKEDIN_CLIENT_SECRET,
       DEFAULT_ROLES,
       PROTECTED_ROLES,
+      ROLES,
       JWT_TYPE,
       JWT_SECRET,
       JWT_ROLE_CLAIM,

server/resolvers/env.go

@@ -147,7 +147,14 @@ func EnvResolver(ctx context.Context) (*model.Env, error) {
 	res.AllowedOrigins = strings.Split(store[constants.EnvKeyAllowedOrigins].(string), ",")
 	res.Roles = strings.Split(store[constants.EnvKeyRoles].(string), ",")
 	res.DefaultRoles = strings.Split(store[constants.EnvKeyDefaultRoles].(string), ",")
-	res.ProtectedRoles = strings.Split(store[constants.EnvKeyProtectedRoles].(string), ",")
+	// since protected role is optional default split gives array with empty string
+	protectedRoles := strings.Split(store[constants.EnvKeyProtectedRoles].(string), ",")
+	res.ProtectedRoles = []string{}
+	for _, role := range protectedRoles {
+		if strings.Trim(role, " ") != "" {
+			res.ProtectedRoles = append(res.ProtectedRoles, strings.Trim(role, " "))
+		}
+	}
 
 	// bool vars
 	res.DisableEmailVerification = store[constants.EnvKeyDisableEmailVerification].(bool)