Merge pull request #11 from jhnnsrs/with_next

With next
arkitektio · Oct 23, 2023 · d694747 · d694747
2 parents b739d7a + e395dcb
commit d694747
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 57 deletions.
diff --git a/.github/workflows/release.yml b/.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:

diff --git a/src/components/MyAgents.tsx b/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

diff --git a/src/components/navigation/NavigationBar.tsx b/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"}

diff --git a/src/lok/components/UserImage.tsx b/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>
+      )}
+    </>
+  );
+};
diff --git a/src/lok/components/cards/UserCard.tsx b/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>

diff --git a/src/lok/pages/TeamHome.tsx b/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>

diff --git a/src/rekuest/components/cards/TemplateCard.tsx b/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"

diff --git a/src/rekuest/pages/agents/DashboardAgent.tsx b/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>