Merge pull request #11 from jhnnsrs/with_next

With next

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
  - name: setup node
  uses: actions/setup-node@v1
  with:
- node-version: 16
+ node-version: 18
  - name: install Rust stable
  uses: actions-rs/toolchain@v1
  with:

src/components/MyAgents.tsx

@@ -27,7 +27,7 @@ const MyAgents: React.FC<IActiveClientsProps> = ({}) => {
 
  return (
  <>
- <SectionTitle>Active Agents</SectionTitle>
+ <SectionTitle>Active Apps</SectionTitle>
  <ResponsiveContainerGrid>
  {data?.myagents?.filter(notEmpty).map((agent, index) => (
  <AgentCard

src/components/navigation/NavigationBar.tsx

@@ -144,18 +144,6 @@ const NavigationBar: React.FC<INavigationBarProps> = ({ children }) => {
  <TbLayoutDashboard />
  </DroppableNavLink>
  </RekuestGuard>
- <RekuestGuard>
- <NavLink
- key={"History"}
- to={"rekuest/history"}
- className={({ isActive }) =>
- ` dark:hover:text-back-400 px-2 py-2 hidden md:block
- } ${isActive ? "dark:text-back-400" : "text-back-500"}`
- }
- >
- <TbHistory />
- </NavLink>
- </RekuestGuard>
  <MikroNextGuard>
  <DroppableNavLink
  key={"MikroNext"}

src/lok/components/UserImage.tsx

@@ -0,0 +1,35 @@
+import { useDatalayer } from "@jhnnsrs/datalayer";
+import { LokUser } from "../../linker";
+import { withLok } from "../LokContext";
+import { useUserQuery } from "../api/graphql";
+
+export const UserImage: React.FC<{ sub: string; className?: string }> = ({
+ sub,
+ className,
+}) => {
+ const { data, error } = withLok(useUserQuery)({
+ variables: { id: sub },
+ });
+
+ const { s3resolve } = useDatalayer();
+ return (
+ <>
+ {data?.user?.id && (
+ <LokUser.DetailLink object={data?.user?.id}>
+ <img
+ className={
+ className ||
+ "h-8 w-8 rounded-full ring-pink-200 ring-2 hover:ring-pink-500 hover:ring-2 cursor-pointer"
+ }
+ src={
+ data?.user?.profile?.avatar
+ ? s3resolve(data?.user?.profile.avatar)
+ : `https://eu.ui-avatars.com/api/?name=${data?.user?.username}&background=random`
+ }
+ alt=""
+ />
+ </LokUser.DetailLink>
+ )}
+ </>
+ );
+};

src/lok/components/cards/UserCard.tsx

@@ -29,14 +29,12 @@ export const UserCard = ({ user }: UserCardProps) => {
  object={user.id}
  className="flex-grow flex-col truncate"
  >
- <div className="text-xl font-light mb-1 hidden @xs:block flex">
- {user.firstName
+ <div className="text-xl font-light mb-1 flex">{user.username}</div>
+ <div className="text-sm font-extralight hidden @sm:block">
+ {user.firstName && user.lastName
  ? user.firstName + " " + user.lastName
  : user.username}
  </div>
- <div className="text-sm font-extralight hidden @sm:block">
- {user.username}
- </div>
  </LokUser.DetailLink>
  </LokUser.DetailLink>
  </LokUser.Smart>

src/lok/pages/TeamHome.tsx

@@ -17,6 +17,8 @@ import {
  useMyMentionsQuery,
  useResolveCommentMutation,
 } from "../api/graphql";
+import { CommentEdit } from "../komment/edit/CommentEdit";
+import { Comment } from "../komment/display/Comment";
 
 interface IFlowHomeProps {}
 
@@ -50,28 +52,7 @@ export const MentionedComment = ({
  <div className="flex flex-col text-white">
  {comment?.user && (
  <div className="mt-2 flex flex-col w-full">
- <div className="flex flex-row ">
- <LokUser.DetailLink
- object={comment?.user?.id}
- className="flex flex-row p-1 bg-back-700 rounded"
- >
- <div className="my-auto mr-2">{comment?.user.username}</div>
- <img
- className="h-6 w-6 rounded-full hover:ring-pink-500 hover:ring-2 cursor-pointer"
- src={
- comment?.user?.profile?.avatar
- ? s3resolve(comment?.user?.profile.avatar)
- : `https://eu.ui-avatars.com/api/?name=${comment?.user?.username}&background=random`
- }
- alt=""
- />
- </LokUser.DetailLink>
- <div className="flex flex-grow my-auto">
- mentioned you <div className="mr-2"></div>
- {comment.mentions.length > 1 &&
- "and " + comment.mentions.length + " others"}{" "}
- <Timestamp relative date={comment?.createdAt} />
- </div>
+ <div className="flex flex-row-reverse">
  <div className="flex flex-initial my-auto">
  {comment.resolved ? (
  <div className="flex flex-row mr-2">
@@ -98,15 +79,17 @@ export const MentionedComment = ({
  )}
  <div className="text-gray-500 my-auto">
  <Model.DetailLink
- object={comment.identifier}
+ object={comment.object}
  className="text-slate-50 mt-5 "
  >
  <BsFolder2Open />
  </Model.DetailLink>
  </div>
  </div>
  </div>
- <div className="flex-initial my-auto w-full"></div>
+ <div className="flex-initial my-auto w-full">
+ <Comment comment={comment} />
+ </div>
  </div>
  )}
  </div>

src/rekuest/components/cards/TemplateCard.tsx

@@ -8,9 +8,14 @@ import { ListTemplateFragment } from "../../api/graphql";
 interface TemplateCardProps {
  template: ListTemplateFragment;
  mates?: MateFinder[];
+ noemblem?: boolean;
 }
 
-export const TemplateCard = ({ template, mates }: TemplateCardProps) => {
+export const TemplateCard = ({
+ template,
+ mates,
+ noemblem,
+}: TemplateCardProps) => {
  const { data: appdata } = withLok(useReleaseQuery)({
  variables: {
  clientId: template?.agent?.registry?.client?.clientId,
@@ -56,7 +61,7 @@ export const TemplateCard = ({ template, mates }: TemplateCardProps) => {
  </LokRelease.DetailLink>
  )}
  </div>
- {userdata?.user?.id && (
+ {userdata?.user?.id && !noemblem && (
  <LokUser.DetailLink
  object={userdata?.user?.id}
  className="absolute bottom-0 right-0 p-1 transform translate-x-1/2 translate-y-1/2"

src/rekuest/pages/agents/DashboardAgent.tsx

@@ -2,12 +2,14 @@ import React from "react";
 import { useParams } from "react-router";
 import { withRekuest } from "../..";
 import { PageLayout } from "../../../layout/PageLayout";
-import { ListRender } from "../../../layout/SectionTitle";
+import { ListRender, SectionTitle } from "../../../layout/SectionTitle";
 import { useProvideMate } from "../../../mates/template/useLinkProvisionMate";
 import { useTemplateActionMate } from "../../../mates/template/useTemplateActionsMate";
 import { useDetailAgentQuery } from "../../api/graphql";
 import { ProvisionCard } from "../../components/cards/ProvisionCard";
 import { TemplateCard } from "../../components/cards/TemplateCard";
+import { UserEmblem } from "../../../lok/components/UserEmblem";
+import { UserImage } from "../../../lok/components/UserImage";
 
 export interface DashboardAgentProps {}
 
@@ -19,27 +21,40 @@ export const DashboardAgent: React.FC<DashboardAgentProps> = (props) => {
  variables: { id },
  });
 
- const provideMate = useProvideMate();
  const reserveMate = useTemplateActionMate();
 
  return (
  <PageLayout>
  <div className="text-white">
- <div className="flex flex-row items-center">
- {data?.agent?.registry?.app?.identifier}:
- {data?.agent?.registry?.app?.version} used by
- {data?.agent?.registry?.user?.sub} on
- {data?.agent?.instanceId}
+ <div className="flex flex-row items-center max-w-[20%] p-3 bg-back-800 rounded rounded-md">
+ <div className="grid gap-2 grid-cols-2">
+ <div className="flex flex-row gap-2"> App </div>
+ <div className="flex flex-row gap-2">
+ {data?.agent?.registry?.app?.identifier}
+ </div>
+ <div className="flex flex-row gap-2"> Version </div>
+ <div className="flex flex-row gap-2">
+ {data?.agent?.registry?.app?.version}
+ </div>
+ <div className="flex flex-row gap-2"> Instance </div>
+ <div className="flex flex-row gap-2">{data?.agent?.instanceId}</div>
+ <div className="flex flex-row gap-2"> User </div>
+ <div className="flex flex-row gap-2">
+ {data?.agent?.registry?.user?.sub && (
+ <UserImage
+ sub={data?.agent?.registry?.user?.sub}
+ className="w-10 h-10"
+ />
+ )}
+ </div>
+ </div>
  </div>
  <ListRender array={data?.agent?.provisions} title="Provisions">
  {(p) => <ProvisionCard provision={p} mates={[]} />}
  </ListRender>
- <ListRender array={data?.agent?.templates} title="Templates">
+ <ListRender array={data?.agent?.templates} title="Defined Nodes">
  {(t) => (
- <TemplateCard
- template={t}
- mates={[provideMate(t), reserveMate(t)]}
- />
+ <TemplateCard template={t} noemblem mates={[reserveMate(t)]} />
  )}
  </ListRender>
  </div>