Merge pull request #527 from pokt-foundation/stage

Latest fixes & new team management ➡️ Peod

app/components/Sparkline/Sparkline.tsx

@@ -47,7 +47,7 @@ const Sparkline = ({
         >
           <Text className="label">Date: {label}</Text>
           <Text className="desc">
-            {payload[0].value
+            {payload[0].value || payload[0].value === 0
               ? `${
                   commifyValue ? commify(payload[0].value) : payload[0].value
                 } ${valueLabel}`

app/models/portal/queries.graphqls

@@ -48,16 +48,13 @@ query getUserAccount(
     id
     name
     planType
-    users {
-      userID
-      owner
+    accountUsers {
+      accountUserID
       email
-      portalAppRoles {
+      owner
+      portalApps {
         portalAppID
         roleName
-      }
-      portalAppsAccepted {
-        portalAppID
         accepted
       }
     }
@@ -158,8 +155,8 @@ query getUserAccounts(
       id
       name
     }
-    users {
-      userID
+    accountUsers {
+      accountUserID
       owner
     }
   }
@@ -172,18 +169,11 @@ query getUserPortalApp($portalAppID: ID!) {
     accountID
     appEmoji
     description
-    users {
-      userID
-      owner
+    portalAppUsers {
+      portalAppUserID
       email
-      portalAppRoles {
-        portalAppID
-        roleName
-      }
-      portalAppsAccepted {
-        portalAppID
-        accepted
-      }
+      roleName
+      accepted
     }
     settings {
       appID
@@ -264,18 +254,11 @@ query getUserPortalApps(
     accountID
     appEmoji
     description
-    users {
-      userID
-      owner
+    portalAppUsers {
+      portalAppUserID
       email
-      portalAppRoles {
-        portalAppID
-        roleName
-      }
-      portalAppsAccepted {
-        portalAppID
-        accepted
-      }
+      roleName
+      accepted
     }
   }
 }

app/routes/account.$accountId.$appId.insights/view.tsx

@@ -54,12 +54,12 @@ export default function ApplicationInsightsView({ data }: ApplicationInsightsVie
         <TitledCard
           header={() => (
             <Group position="apart">
-              <Text weight={600}>
-                Total Relays
-                <Badge ml="sm" px={6} radius="sm">
+              <Group>
+                <Text weight={600}>Total Relays</Text>
+                <Badge px={6} radius="sm">
                   {commify(total?.countTotal ?? 0)}
                 </Badge>
-              </Text>
+              </Group>
               <ChartPeriodSelector />
             </Group>
           )}
@@ -77,12 +77,12 @@ export default function ApplicationInsightsView({ data }: ApplicationInsightsVie
           <TitledCard
             header={() => (
               <Group position="apart">
-                <Text weight={600}>
-                  Average Latency{" "}
-                  <Badge ml="sm" px={6} radius="sm">
+                <Group>
+                  <Text weight={600}>Average Latency </Text>
+                  <Badge px={6} radius="sm">
                     {commify(total?.avgLatency ?? 0)}ms
                   </Badge>
-                </Text>
+                </Group>
                 <ChartPeriodSelector />
               </Group>
             )}
@@ -98,12 +98,12 @@ export default function ApplicationInsightsView({ data }: ApplicationInsightsVie
           <TitledCard
             header={() => (
               <Group position="apart">
-                <Text weight={600}>
-                  Success Rate{" "}
-                  <Badge ml="sm" px={6} radius="sm">
+                <Group>
+                  <Text weight={600}>Success Rate </Text>
+                  <Badge px={6} radius="sm">
                     {commify(total?.rateSuccess ?? 0)}%
                   </Badge>
-                </Text>
+                </Group>
                 <ChartPeriodSelector />
               </Group>
             )}
@@ -120,12 +120,12 @@ export default function ApplicationInsightsView({ data }: ApplicationInsightsVie
         <TitledCard
           header={() => (
             <Group position="apart">
-              <Text weight={600}>
-                Total Errors{" "}
-                <Badge ml="sm" px={6} radius="sm">
+              <Group>
+                <Text weight={600}>Total Errors </Text>
+                <Badge px={6} radius="sm">
                   {totalErrors ? commify(totalErrors) : 0}
                 </Badge>
-              </Text>
+              </Group>
               <ChartPeriodSelector />
             </Group>
           )}

app/routes/account.$accountId.$appId.logs/route.tsx

@@ -45,6 +45,7 @@ export const loader: LoaderFunction = async ({ request, params }) => {
       error: false,
     })
   } catch (error) {
+    console.error(error)
     return json<DataStruct<AppLogsData>>({
       data: null,
       error: true,

app/routes/account.$accountId.$appId.security/components/ApprovedChainsModal/ApprovedChainsModal.tsx

@@ -39,7 +39,6 @@ const ApprovedChainsModal = ({
   )
 
   const deleteSelectedChain = (chainId: string) => {
-    console.log(chainId)
     setSelectedBlockchainsIds((ids) => ids.filter((id) => chainId !== id))
   }
 

app/routes/account.$accountId.$appId.security/components/WhitelistUserAgentsModal/WhitelistUserAgentsModal.tsx

@@ -29,7 +29,6 @@ const WhitelistUserAgentsModal = ({ dispatch }: WhitelistUserAgentsModalProps) =
   const [selectedUserAgents, setSelectedUserAgents] = useState<string[]>([])
   const [inputUserAgent, setInputUserAgent] = useState("")
   const deletedAgent = (deletedAgent: string) => {
-    console.log(deletedAgent)
     setSelectedUserAgents((agents) => agents.filter((agent) => agent !== deletedAgent))
   }
 

app/routes/account.$accountId.$appId.team/components/TeamMemberAction/TeamMemberAction.tsx

@@ -1,15 +1,15 @@
 import { ActionIcon, Flex, Menu, Text } from "@pokt-foundation/pocket-blocks"
 import React, { useMemo } from "react"
 import { LuMinusCircle, LuMoreHorizontal, LuSend } from "react-icons/lu"
-import { AccountUserAccess, PortalApp, RoleNameV2, User } from "~/models/portal/sdk"
+import { PortalApp, PortalAppUser, RoleNameV2, User } from "~/models/portal/sdk"
 import useTeamModals from "~/routes/account.$accountId.$appId.team/hooks/useTeamModals"
 import useCommonStyles from "~/styles/commonStyles"
 
 type TeamMemberActionProps = {
   app: PortalApp
   userRole: RoleNameV2 | null
   user?: User
-  teamMember: AccountUserAccess & { accepted: boolean; roleName: RoleNameV2 | null }
+  teamMember: PortalAppUser
   status: Boolean
 }
 
@@ -30,13 +30,14 @@ const TeamMemberAction = ({
 
     switch (userRole) {
       case RoleNameV2.Owner:
-        if (teamMember.userID === user?.portalUserID) {
+        if (teamMember.portalAppUserID === user?.portalUserID) {
           // OWNER --CANNOT-- LEAVE THEIR OWN APP
         } else {
           // OWNER --CAN--REMOVE OTHER USERS
           items.push({
             icon: <LuMinusCircle size={18} />,
-            onClick: () => openRemoveUserModal(teamMember.email, teamMember.userID),
+            onClick: () =>
+              openRemoveUserModal(teamMember.email, teamMember.portalAppUserID),
             label: "Remove",
           })
           if (!status) {
@@ -50,18 +51,20 @@ const TeamMemberAction = ({
         }
         break
       case RoleNameV2.Admin:
-        if (teamMember.userID === user?.portalUserID) {
+        if (teamMember.portalAppUserID === user?.portalUserID) {
           // ADMIN --CAN--REMOVE THEMSELVES
           items.push({
             icon: <LuMinusCircle size={18} />,
-            onClick: () => openRemoveUserModal(teamMember.email, teamMember.userID),
+            onClick: () =>
+              openRemoveUserModal(teamMember.email, teamMember.portalAppUserID),
             label: "Remove",
           })
         } else {
           // ADMIN --CAN--REMOVE OTHER USERS
           items.push({
             icon: <LuMinusCircle size={18} />,
-            onClick: () => openRemoveUserModal(teamMember.email, teamMember.userID),
+            onClick: () =>
+              openRemoveUserModal(teamMember.email, teamMember.portalAppUserID),
             label: "Remove",
           })
           if (!status) {
@@ -76,11 +79,12 @@ const TeamMemberAction = ({
         break
       case RoleNameV2.Member:
       default:
-        if (teamMember.userID === user?.portalUserID) {
+        if (teamMember.portalAppUserID === user?.portalUserID) {
           // MEMEBER --CAN-- LEAVE APP THEMSELVES
           items.push({
             icon: <LuMinusCircle size={18} />,
-            onClick: () => openLeaveTeamModal(teamMember.email, teamMember.userID),
+            onClick: () =>
+              openLeaveTeamModal(teamMember.email, teamMember.portalAppUserID),
             label: "Leave",
           })
         } else {
@@ -92,7 +96,7 @@ const TeamMemberAction = ({
     return items
   }, [
     userRole,
-    teamMember.userID,
+    teamMember.portalAppUserID,
     teamMember.email,
     user?.portalUserID,
     status,

app/routes/account.$accountId.$appId.team/components/TeamMembersTable/TeamMembersTable.tsx

@@ -11,7 +11,6 @@ import Identicon from "~/components/Identicon"
 import { PortalApp, RoleName, RoleNameV2, User } from "~/models/portal/sdk"
 import TeamMemberAction from "~/routes/account.$accountId.$appId.team/components/TeamMemberAction"
 import useTeamModals from "~/routes/account.$accountId.$appId.team/hooks/useTeamModals"
-import { getAppAcceptedValue, getUserRole } from "~/utils/applicationUtils"
 
 type TeamMembersTableProps = {
   app: PortalApp
@@ -22,26 +21,22 @@ type TeamMembersTableProps = {
 const TeamMembersTable = ({ app, userRole, user }: TeamMembersTableProps) => {
   const { openChangeRoleModal } = useTeamModals({ app })
 
-  const teamData = app.users
-    .map((user) => ({
-      ...user,
-      roleName: getUserRole(app, user.userID),
-      accepted: getAppAcceptedValue(app, user.userID),
-    }))
-    .sort((a, b) => Number(b.owner) - Number(a.owner))
+  const teamData = app.portalAppUsers.sort(
+    (a, b) => Number(b.roleName === "OWNER") - Number(a.roleName === "OWNER"),
+  )
 
   return (
     <DataTable
       columns={["Member", "Roles", "Status", ""]}
-      data={teamData.map(({ email, roleName, accepted, userID }, index) => {
+      data={teamData.map(({ email, roleName, accepted, portalAppUserID }, index) => {
         return {
           member: {
             element: (
               <Group>
                 <Avatar radius="xl">
                   <Identicon
-                    alt={`${userID} profile picture`}
-                    seed={userID}
+                    alt={`${portalAppUserID} profile picture`}
+                    seed={portalAppUserID}
                     size="md"
                     type="user"
                   />
@@ -71,7 +66,7 @@ const TeamMembersTable = ({ app, userRole, user }: TeamMembersTableProps) => {
                     disabled={!accepted}
                     onChange={(value) =>
                       value !== roleName &&
-                      openChangeRoleModal(email, userID, value as RoleName)
+                      openChangeRoleModal(email, portalAppUserID, value as RoleName)
                     }
                   />
                 </Flex>

app/routes/account.$accountId.$appId/route.tsx

@@ -21,6 +21,7 @@ import useActionNotification from "~/hooks/useActionNotification"
 import { initPortalClient } from "~/models/portal/portal.server"
 import { Blockchain, PortalApp, RoleNameV2 } from "~/models/portal/sdk"
 import { DataStruct } from "~/types/global"
+import { getUserRole } from "~/utils/applicationUtils"
 import { getErrorMessage } from "~/utils/catchError"
 import { seo_title_append } from "~/utils/seo"
 import { requireUser } from "~/utils/user.server"
@@ -126,7 +127,7 @@ export type AppIdOutletContext = AppIdLoaderData & {
 
 export default function AppIdLayout() {
   const { data, error, message } = useLoaderData() as DataStruct<AppIdLoaderData>
-  const { userRoles } = useOutletContext<AccountIdLoaderData>()
+  const { user } = useOutletContext<AccountIdLoaderData>()
   const actionData = useActionData() as DataStruct<AppIdActionData>
 
   // handle all notifications at the layout level
@@ -137,7 +138,7 @@ export default function AppIdLayout() {
   }
 
   const { app, blockchains } = data
-  const userRole = userRoles.find((r) => r.portalAppID === app.id)?.roleName as RoleNameV2
+  const userRole = getUserRole(app.portalAppUsers, user.portalUserID) as RoleNameV2
 
   return (
     <AppIdLayoutView app={app} userRole={userRole}>

app/routes/account.$accountId._index/route.tsx

@@ -71,6 +71,7 @@ export const loader: LoaderFunction = async ({ request, params }) => {
       error: false,
     })
   } catch (error) {
+    console.error(error)
     return json<DataStruct<AccountInsightsData>>({
       data: null,
       error: true,