feat: members and improvements (#43)

.env.development

@@ -1,5 +1,5 @@
 NEXT_PUBLIC_ARKE_SERVER_URL=http://0.0.0.0:4000
-NEXT_MULTIPROJECT=false
+NEXT_MULTIPROJECT=true
 NEXTAUTH_URL=http://localhost:3100/api/auth
 NEXTAUTH_SECRET=your_secret
 NEXT_PUBLIC_ARKE_PROJECT=""

.github/workflows/build-push-docker.yml

@@ -5,6 +5,10 @@ on:
     tags:
       - "v[0-9]+.[0-9]+.[0-9]+"
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 env:
   REPO_NAME: arke-console
 

.github/workflows/pr-build-test.yml

@@ -8,6 +8,10 @@ on:
     branches:
       - "main"
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 # List of jobs
 jobs:
   Check-License:
@@ -42,4 +46,4 @@ jobs:
           files: ./coverage/cobertura-coverage.xml
           directory: coverage
           fail_ci_if_error: true
-          verbose: true
+          verbose: true

components/ApiDocs/ApiDocsDrawer.tsx

@@ -91,7 +91,7 @@ function ApiDocsDrawer({
     <Drawer
       title="API Docs"
       position="right"
-      className="max-w-[70vw]"
+      className="z-50 max-w-[70vw]"
       open={open}
       onClose={onClose}
     >

components/AppFormConfigProvider/AppFormConfigProvider.tsx

@@ -19,6 +19,7 @@ import { FormConfigProvider as FCProvider } from "@arkejs/form";
 import { Autocomplete, Checkbox, Input, Json } from "@arkejs/ui";
 import AutocompleteLink from "@/components/AppFormConfigProvider/components/AutocompleteLink";
 import FileDropzone from "@/components/AppFormConfigProvider/components/FileDropzone";
+import InputPassword from "@/components/InputPassword/InputPassword";
 
 export default function AppFormConfigProvider(props: { children: ReactNode }) {
   return (
@@ -87,6 +88,14 @@ export default function AppFormConfigProvider(props: { children: ReactNode }) {
             />
           );
         },
+        // @ts-ignore
+        password: ({ field }) => (
+          <InputPassword
+            {...field}
+            fullWidth
+            onChange={(e) => field.onChange(e.target.value)}
+          />
+        ),
         boolean: ({ field }) => (
           <Checkbox
             {...field}

components/InputPassword/InputPassword.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright 2023 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  EyeIcon,
+  EyeSlashIcon,
+  LockClosedIcon,
+} from "@heroicons/react/24/outline";
+import { Input } from "@arkejs/ui";
+import React, { useState } from "react";
+
+interface InputPasswordProps {
+  value: string;
+  onChange(e: React.ChangeEvent<HTMLInputElement>): void;
+}
+
+export default function InputPassword(props: InputPasswordProps) {
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const { value, onChange } = props;
+  return (
+    <Input
+      autoComplete="new-password"
+      value={value}
+      type={!showPassword ? "password" : "text"}
+      onChange={onChange}
+      placeholder="Password"
+      fullWidth
+      startAdornment={<LockClosedIcon className="h-5 w-5 stroke-white/50" />}
+      endAdornment={
+        <span
+          role="presentation"
+          onClick={() => setShowPassword(!showPassword)}
+        >
+          {!showPassword ? (
+            <EyeIcon className="h-5 w-5 stroke-white/50" />
+          ) : (
+            <EyeSlashIcon className="h-5 w-5 stroke-white/50" />
+          )}
+        </span>
+      }
+    />
+  );
+}

components/Layout/Layout.tsx

@@ -16,11 +16,12 @@
 
 import { PropsWithChildren } from "react";
 import Sidebar from "@/components/Sidebar/Sidebar";
-function Layout({ children }: PropsWithChildren<{}>) {
+import { User } from "next-auth";
+function Layout({ user, children }: PropsWithChildren<{ user?: User }>) {
   return (
     <>
       <div className="grid h-screen grid-cols-[300px_auto]">
-        <Sidebar />
+        <Sidebar user={user} />
         <div className="flex-1 overflow-y-auto p-6 pt-0">{children}</div>
       </div>
     </>

components/Permissions/AddPermissionDialog.tsx

@@ -91,6 +91,7 @@ export default function AddPermissionDialog({
 
   return (
     <Dialog
+      disableBackdropClose
       open={open}
       onClose={handleClose}
       title={`Add permission to ${roleID}`}

components/Sidebar/Sidebar.tsx

@@ -22,7 +22,7 @@ import {
 import { useRouter } from "next/router";
 import Image from "next/image";
 import { CopyIcon, HomeIcon } from "@/components/Icon";
-import { Button, Input } from "@arkejs/ui";
+import { Avatar, Button, Input } from "@arkejs/ui";
 import { getCookie } from "cookies-next";
 import toast from "react-hot-toast";
 import SidebarItem from "@/components/Sidebar/SidebarItem";
@@ -31,9 +31,16 @@ import { SettingsIcon } from "@/components/Icon/SettingsIcon";
 import { BookOpenIcon } from "@/components/Icon/BookOpenIcon";
 import { AlertSquareIcon } from "@/components/Icon/AlertSquareIcon";
 import { MessageChatSquareIcon } from "@/components/Icon/MessageChatSquareIcon";
+import { getSession } from "next-auth/react";
+import { User } from "next-auth";
 
-function Sidebar() {
+interface SidebarProps {
+  user?: User;
+}
+
+function Sidebar(props: SidebarProps) {
   const { query } = useRouter();
+  const { user } = props;
   const project = query.project ?? getCookie("arke_project")?.toString();
 
   return (
@@ -53,6 +60,20 @@ function Sidebar() {
             </p>
           </div>
         </Link>
+
+        {user && (
+          <div className="m-4 flex items-center gap-4">
+            <Avatar
+              className="min-w-[32px] font-medium"
+              name={user?.first_name?.toUpperCase()}
+            />
+            <p className="text-sm">
+              {user?.first_name}
+              {user?.last_name}
+            </p>
+          </div>
+        )}
+
         <ul className="mt-8 flex h-full flex-col">
           <SidebarItem icon={HomeIcon} label="Dashboard" href="/" />
 

components/UnitSearch/UnitSearch.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright 2024 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Autocomplete } from "@arkejs/ui";
+import { TUnit } from "@arkejs/client";
+import React, { useEffect, useState } from "react";
+import useDebounce from "@/hooks/useDebounce";
+import useClient from "@/arke/useClient";
+
+export default function UnitSearch({
+  arke,
+  value,
+  onChange,
+  placeholder,
+  label,
+  config,
+  renderValue,
+  renderOption,
+}: {
+  arke: string;
+  value: TUnit;
+  onChange: (value: TUnit) => void;
+  label?: string;
+  placeholder?: string;
+  config?(searchedText: string): any;
+  renderValue?(val: TUnit): any;
+  renderOption?(val: TUnit): any;
+}) {
+  const client = useClient();
+  const [inputValue, setInputValue] = useState("");
+  const [values, setValues] = useState<TUnit[]>([]);
+  const debouncedInputValue = useDebounce<string>(inputValue, 500);
+
+  useEffect(() => {
+    if (debouncedInputValue) {
+      client.unit.getAll(arke, config?.(debouncedInputValue)).then((res) => {
+        setValues(res.data.content.items);
+      });
+    }
+  }, [debouncedInputValue]);
+
+  return (
+    <Autocomplete
+      label={label}
+      onChange={onChange}
+      onInputChange={(event) => setInputValue(event.target.value)}
+      values={values}
+      value={value}
+      renderChips={false}
+      placeholder={placeholder || "Search an unit"}
+      renderValue={(value) =>
+        renderValue?.(value) ?? (value as TUnit).label ?? (value as TUnit).id
+      }
+      renderOption={renderOption}
+    />
+  );
+}

crud/arke/ArkeCrud.tsx

@@ -88,7 +88,7 @@ export function ArkeCrud({
   );
 
   return (
-    <Dialog open={!!open} title={title} onClose={onClose}>
+    <Dialog disableBackdropClose open={!!open} title={title} onClose={onClose}>
       <Form
         fields={fields as Field[]}
         onSubmit={onFormSubmit}
@@ -169,6 +169,7 @@ export function ArkeDelete({
 
   return (
     <Dialog
+      disableBackdropClose
       open={!!open}
       title={
         <div className="flex items-center gap-4">