From a7a75b45b684c8367f85f7675e1f2aadf62644de Mon Sep 17 00:00:00 2001
From: Jyrki Keisala <jyrki.keisala@doubleopen.org>
Date: Thu, 24 Oct 2024 09:24:39 +0300
Subject: [PATCH 1/3] feat(ui): Add optional text confirmation to item deletion

Deleting items (organizations, products, repositories, secrets etc.) from
the server can be considered dangerous, as deletion is irreversible and
might have unwanted side effects.

Add an optional boolean prop `textConfirmation` to the delete modal.
When it is set to `true`, the user is required to write the name of the
item which is about to be deleted to an input box, before the Delete
button is enabled.

Signed-off-by: Jyrki Keisala <jyrki.keisala@doubleopen.org>
---
 ui/src/components/delete-dialog.tsx | 50 ++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/delete-dialog.tsx b/ui/src/components/delete-dialog.tsx
index 7ef00e311..0e51093ab 100644
--- a/ui/src/components/delete-dialog.tsx
+++ b/ui/src/components/delete-dialog.tsx
@@ -18,6 +18,7 @@
  */
 
 import { Loader2, OctagonAlert, TrashIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 import {
   AlertDialog,
@@ -30,6 +31,7 @@ import {
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import {
   Tooltip,
   TooltipContent,
@@ -47,6 +49,7 @@ interface DeleteDialogProps {
   onDelete: () => void;
   isPending: boolean;
   className?: string;
+  textConfirmation?: boolean;
 }
 
 export const DeleteDialog = ({
@@ -56,7 +59,18 @@ export const DeleteDialog = ({
   onDelete,
   isPending,
   className,
+  textConfirmation = false,
 }: DeleteDialogProps) => {
+  const [input, setInput] = useState('');
+  const isDeleteDisabled = textConfirmation && input !== item.name;
+
+  // Reset the input field whenever the dialog is opened/closed
+  useEffect(() => {
+    if (open) {
+      setInput('');
+    }
+  }, [open]);
+
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
       <Tooltip delayDuration={300}>
@@ -82,13 +96,39 @@ export const DeleteDialog = ({
             <AlertDialogTitle>Delete {item.descriptor}</AlertDialogTitle>
           </div>
         </AlertDialogHeader>
-        <AlertDialogDescription>
-          Are you sure you want to delete this {item.descriptor}:{' '}
-          <span className='font-bold'>{item.name}</span>?
-        </AlertDialogDescription>
+        {textConfirmation ? (
+          <AlertDialogDescription>
+            <div className='flex flex-col gap-2'>
+              <div>
+                Are you sure you want to delete this {item.descriptor}:{' '}
+                <span className='font-bold'>{item.name}</span>?
+              </div>
+              <div>
+                Deleting might have unwanted results and side effects, and the
+                deletion is irreversible. Please type{' '}
+                <span className='font-bold'>{item.name}</span> below to confirm
+                deletion.
+              </div>
+              <Input
+                autoFocus
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+              />
+            </div>
+          </AlertDialogDescription>
+        ) : (
+          <AlertDialogDescription>
+            Are you sure you want to delete this {item.descriptor}:{' '}
+            <span className='font-bold'>{item.name}</span>?
+          </AlertDialogDescription>
+        )}
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <Button onClick={onDelete} className='bg-red-500'>
+          <Button
+            disabled={isDeleteDisabled}
+            onClick={onDelete}
+            className='bg-red-500'
+          >
             {isPending ? (
               <>
                 <span className='sr-only'>Deleting {item.descriptor}...</span>

From 6486e8c82c014a3bfa217f492e7833957c7fe52a Mon Sep 17 00:00:00 2001
From: Jyrki Keisala <jyrki.keisala@doubleopen.org>
Date: Thu, 24 Oct 2024 09:33:30 +0300
Subject: [PATCH 2/3] feat(ui): Extend the user creation form

PR #1278 extends user creation by adding optional first name, last name
and email to the user information.

Add these fields to the user creation form and mark them as optional.

Signed-off-by: Jyrki Keisala <jyrki.keisala@doubleopen.org>
---
 .../_layout/admin/users/create-user.tsx       | 52 ++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/ui/src/routes/_layout/admin/users/create-user.tsx b/ui/src/routes/_layout/admin/users/create-user.tsx
index 39bcb3b46..ab0e38bf3 100644
--- a/ui/src/routes/_layout/admin/users/create-user.tsx
+++ b/ui/src/routes/_layout/admin/users/create-user.tsx
@@ -18,7 +18,7 @@
  */
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -48,16 +48,24 @@ import { toast } from '@/lib/toast';
 
 const formSchema = z.object({
   username: z.string(),
+  firstName: z.string().optional(),
+  lastName: z.string().optional(),
+  email: z.string().email().optional(),
   password: z.string().optional(),
   temporary: z.boolean(),
 });
 
 const CreateUser = () => {
+  const navigate = useNavigate();
+
   const { mutateAsync, isPending } = useAdminServicePostUsers({
     onSuccess() {
       toast.info('Add User', {
         description: `User "${form.getValues().username}" added successfully to the server.`,
       });
+      navigate({
+        to: '/admin/users',
+      });
     },
     onError(error: ApiError) {
       toast.error(error.message, {
@@ -82,6 +90,9 @@ const CreateUser = () => {
     await mutateAsync({
       requestBody: {
         username: values.username,
+        firstName: values.firstName,
+        lastName: values.lastName,
+        email: values.email,
         password: values.password,
         temporary: values.temporary,
       },
@@ -109,6 +120,45 @@ const CreateUser = () => {
                 </FormItem>
               )}
             />
+            <FormField
+              control={form.control}
+              name='firstName'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>First name</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder='(optional)' />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='lastName'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Last name</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder='(optional)' />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email address</FormLabel>
+                  <FormControl>
+                    <Input type='email' {...field} placeholder='(optional)' />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
             <FormField
               control={form.control}
               name='password'

From d670ebd1711a284f04201237020211bd1ac0cb9e Mon Sep 17 00:00:00 2001
From: Jyrki Keisala <jyrki.keisala@doubleopen.org>
Date: Thu, 24 Oct 2024 10:11:03 +0300
Subject: [PATCH 3/3] feat(ui): Add support for basic CR(U)D for users to admin
 section

Add support for creating, listing and deleting users. Updating user data
wasn't considered to be necessary at this point, so there's currently no
back-end support for it, thus it is also omitted from the front-end.

List users (username, first name, last name, email) in a data table which
is paginated on client-side. Users can be added and deleted from this
view, and because deleting a user might be considered a dangerous
operation, deleting needs manual text input in the delete dialog.

Signed-off-by: Jyrki Keisala <jyrki.keisala@doubleopen.org>
---
 ui/src/routes/_layout/admin/route.tsx       |   8 +-
 ui/src/routes/_layout/admin/users/index.tsx | 205 ++++++++++++++++++++
 2 files changed, 209 insertions(+), 4 deletions(-)
 create mode 100644 ui/src/routes/_layout/admin/users/index.tsx

diff --git a/ui/src/routes/_layout/admin/route.tsx b/ui/src/routes/_layout/admin/route.tsx
index 68d290a72..46b3ce6cf 100644
--- a/ui/src/routes/_layout/admin/route.tsx
+++ b/ui/src/routes/_layout/admin/route.tsx
@@ -18,7 +18,7 @@
  */
 
 import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
-import { Eye, KeyRound, ListVideo, UserPlus } from 'lucide-react';
+import { Eye, KeyRound, ListVideo, User } from 'lucide-react';
 
 import { PageLayout } from '@/components/page-layout';
 
@@ -37,9 +37,9 @@ const Layout = () => {
       label: 'User Management',
       items: [
         {
-          title: 'Create User',
-          to: '/admin/users/create-user',
-          icon: () => <UserPlus className='h-4 w-4' />,
+          title: 'Users',
+          to: '/admin/users',
+          icon: () => <User className='h-4 w-4' />,
         },
         {
           title: 'Authorization',
diff --git a/ui/src/routes/_layout/admin/users/index.tsx b/ui/src/routes/_layout/admin/users/index.tsx
new file mode 100644
index 000000000..b37643045
--- /dev/null
+++ b/ui/src/routes/_layout/admin/users/index.tsx
@@ -0,0 +1,205 @@
+/*
+ * Copyright (C) 2024 The ORT Server Authors (See <https://github.com/eclipse-apoapsis/ort-server/blob/main/NOTICE>)
+ *
+ * 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
+ *
+ *     https://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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * License-Filename: LICENSE
+ */
+
+import { useQueryClient } from '@tanstack/react-query';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { UserPlus } from 'lucide-react';
+import { useState } from 'react';
+
+import {
+  useAdminServiceDeleteUserByUsername,
+  useAdminServiceGetUsersKey,
+} from '@/api/queries';
+import { prefetchUseAdminServiceGetUsers } from '@/api/queries/prefetch';
+import { useAdminServiceGetUsersSuspense } from '@/api/queries/suspense';
+import { ApiError, User } from '@/api/requests';
+import { DataTable } from '@/components/data-table/data-table';
+import { DeleteDialog } from '@/components/delete-dialog';
+import { LoadingIndicator } from '@/components/loading-indicator';
+import { ToastError } from '@/components/toast-error';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { toast } from '@/lib/toast';
+import { paginationSchema } from '@/schemas';
+
+const defaultPageSize = 10;
+
+const columnHelper = createColumnHelper<User>();
+
+const columns = [
+  columnHelper.accessor('username', {
+    header: 'Username',
+    cell: ({ row }) => <>{row.original.username}</>,
+  }),
+  columnHelper.accessor('firstName', {
+    header: 'First name',
+    cell: ({ row }) => <>{row.original.firstName}</>,
+  }),
+  columnHelper.accessor('lastName', {
+    header: 'Last name',
+    cell: ({ row }) => <>{row.original.lastName}</>,
+  }),
+  columnHelper.accessor('email', {
+    header: 'Email address',
+    cell: ({ row }) => <>{row.original.email}</>,
+  }),
+  columnHelper.display({
+    id: 'actions',
+    header: () => <div className='text-right'>Actions</div>,
+    cell: function CellComponent({ row }) {
+      const queryClient = useQueryClient();
+      const [openDelDialog, setOpenDelDialog] = useState(false);
+
+      const { mutateAsync: delUser, isPending: isDelPending } =
+        useAdminServiceDeleteUserByUsername({
+          onSuccess() {
+            setOpenDelDialog(false);
+            toast.info('Delete User', {
+              description: `User "${row.original.username}" deleted successfully.`,
+            });
+            queryClient.invalidateQueries({
+              queryKey: [useAdminServiceGetUsersKey],
+            });
+          },
+          onError(error: ApiError) {
+            toast.error(error.message, {
+              description: <ToastError error={error} />,
+              duration: Infinity,
+              cancel: {
+                label: 'Dismiss',
+                onClick: () => {},
+              },
+            });
+          },
+        });
+
+      return (
+        <div className='flex justify-end'>
+          <DeleteDialog
+            open={openDelDialog}
+            setOpen={setOpenDelDialog}
+            item={{
+              descriptor: 'user',
+              name: row.original.username,
+            }}
+            onDelete={() => delUser({ username: row.original.username })}
+            isPending={isDelPending}
+            textConfirmation={true}
+          />
+        </div>
+      );
+    },
+  }),
+];
+
+const Users = () => {
+  const search = Route.useSearch();
+  const pageIndex = search.page ? search.page - 1 : 0;
+  const pageSize = search.pageSize ? search.pageSize : defaultPageSize;
+
+  const { data: users } = useAdminServiceGetUsersSuspense();
+
+  const table = useReactTable({
+    data: users || [],
+    columns,
+
+    state: {
+      pagination: {
+        pageIndex,
+        pageSize,
+      },
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
+
+  return (
+    <Card className='h-fit'>
+      <CardHeader>
+        <CardTitle>Users</CardTitle>
+        <CardDescription>
+          These are all current users of the server. By clicking the delete
+          button in the action column you can delete users, and a written
+          confirmation is required to prevent accidental deletions.
+        </CardDescription>
+        <div className='py-2'>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button asChild size='sm' className='ml-auto gap-1'>
+                <Link to='/admin/users/create-user'>
+                  Add user
+                  <UserPlus className='h-4 w-4' />
+                </Link>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              Add a new user to the server. Note that the username has to be
+              unique.
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <CardContent>
+          <DataTable
+            table={table}
+            setCurrentPageOptions={(currentPage) => {
+              return {
+                to: Route.to,
+                search: { ...search, page: currentPage },
+              };
+            }}
+            setPageSizeOptions={(size) => {
+              return {
+                to: Route.to,
+                search: { ...search, page: 1, pageSize: size },
+              };
+            }}
+          />
+        </CardContent>
+      </CardContent>
+    </Card>
+  );
+};
+
+export const Route = createFileRoute('/_layout/admin/users/')({
+  validateSearch: paginationSchema,
+  loader: async ({ context }) => {
+    prefetchUseAdminServiceGetUsers(context.queryClient);
+  },
+  component: Users,
+  pendingComponent: LoadingIndicator,
+});