ui: Add runs overview page for admins

ui/src/components/data-table/data-table-toolbar.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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 { Cross2Icon } from '@radix-ui/react-icons';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface DataTableToolbarProps {
+  filters: React.ReactNode;
+  resetFilters: () => void;
+  resetBtnVisible?: boolean;
+  className?: string;
+}
+
+export const DataTableToolbar = ({
+  filters,
+  resetFilters,
+  className,
+  resetBtnVisible = false,
+}: DataTableToolbarProps) => {
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      {filters}
+      {resetBtnVisible && (
+        <Button
+          variant='ghost'
+          onClick={() => resetFilters()}
+          className='h-8 px-2 lg:px-3'
+        >
+          Reset
+          <Cross2Icon className='ml-2 h-4 w-4' />
+        </Button>
+      )}
+    </div>
+  );
+};

ui/src/components/data-table/filter-multi-select.tsx

@@ -0,0 +1,157 @@
+/*
+ * 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 { CheckIcon, PlusCircledIcon } from '@radix-ui/react-icons';
+import * as React from 'react';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+
+interface FilterMultiSelectProps<T> {
+  title?: string;
+  options: {
+    label: string;
+    value: T;
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+  selected: T[];
+  setSelected: (selected: T[]) => void;
+}
+
+export function FilterMultiSelect<T extends string | number>({
+  title,
+  options,
+  selected,
+  setSelected,
+}: FilterMultiSelectProps<T>) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant='outline' size='sm' className='h-8 border-dashed'>
+          <PlusCircledIcon className='mr-2 h-4 w-4' />
+          {title}
+          {selected.length > 0 && (
+            <>
+              <Separator orientation='vertical' className='mx-2 h-4' />
+              <Badge
+                variant='secondary'
+                className='rounded-sm px-1 font-normal lg:hidden'
+              >
+                {selected.length}
+              </Badge>
+              <div className='hidden space-x-1 lg:flex'>
+                {selected.length > 2 ? (
+                  <Badge
+                    variant='secondary'
+                    className='rounded-sm px-1 font-normal'
+                  >
+                    {selected.length} selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selected.includes(option.value))
+                    .map((option) => (
+                      <Badge
+                        variant='secondary'
+                        key={option.value.toString()}
+                        className='rounded-sm px-1 font-normal'
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className='w-[200px] p-0' align='start'>
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selected.includes(option.value);
+                return (
+                  <CommandItem
+                    key={option.value.toString()}
+                    onSelect={() => {
+                      if (isSelected) {
+                        setSelected(
+                          selected.filter((value) => value !== option.value)
+                        );
+                      } else {
+                        setSelected([...selected, option.value]);
+                      }
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                        isSelected
+                          ? 'bg-primary text-primary-foreground'
+                          : 'opacity-50 [&_svg]:invisible'
+                      )}
+                    >
+                      <CheckIcon className={cn('h-4 w-4')} />
+                    </div>
+                    {option.icon && (
+                      <option.icon className='mr-2 h-4 w-4 text-muted-foreground' />
+                    )}
+                    <span>{option.label}</span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {selected.length > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => setSelected([])}
+                    className='justify-center text-center'
+                  >
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

ui/src/components/sidebar.tsx

@@ -47,6 +47,10 @@ export interface SidebarNavProps {
 }
 
 export const Sidebar = ({ sections, className, ...props }: SidebarNavProps) => {
+  // Helper function to determine if there are any visible sections after the given index.
+  const visibleRemainingSections = (index: number) =>
+    sections.slice(index + 1).some((section) => section.visible !== false);
+
   return (
     <nav className={cn('w-full', className)} {...props}>
       <div className='flex flex-col items-start'>
@@ -108,9 +112,11 @@ export const Sidebar = ({ sections, className, ...props }: SidebarNavProps) => {
                   </Link>
                 ) : null;
               })}
-              {sections.length > 1 && index < sections.length - 1 && (
-                <Separator className='my-2' />
-              )}
+              {sections.length > 1 &&
+                index < sections.length - 1 &&
+                visibleRemainingSections(index) && (
+                  <Separator className='my-2' />
+                )}
             </div>
           );
         })}