feat(self-service): sidebars + table abstraction + structure refactor

README.md

@@ -359,15 +359,15 @@ The Qovery and Torii projects are two different projects with different goals:
 Here is a features table to help you understand the difference:
 
 | Feature | Qovery (Internal Developer Platform) | Torii (Internal Developer Portal) |
-|-----------------------|--------------------------------------|-----------------------------------|
-| Build | ✅  | ❌  |
-| Deploy | ✅  | ❌  |
-| Run | ✅  | ❌  |
-| Ephemeral Environment | ✅  | ❌  |
-| Self-Service | ✅  | ✅  |
-| Catalogs Service | ❌  | ✅  |
-| Scorecard Service | ❌  | ✅  |
-| Workflow Service | Partial with the concept of Pipeline | ✅  |
+| --------------------- | ------------------------------------ | --------------------------------- |
+| Build | ✅ | ❌ |
+| Deploy | ✅ | ❌ |
+| Run | ✅ | ❌ |
+| Ephemeral Environment | ✅ | ❌ |
+| Self-Service | ✅ | ✅ |
+| Catalogs Service | ❌ | ✅ |
+| Scorecard Service | ❌ | ✅ |
+| Workflow Service | Partial with the concept of Pipeline | ✅ |
 
 ### Why Torii?
 

frontend/.env

@@ -1 +1 @@
-VITE_API_URL=http://localhost:9999
+VITE_API_URL=http://localhost:9998

frontend/package.json

@@ -18,8 +18,10 @@
  "@tanstack/query-core": "^5.29.0",
  "@tanstack/react-query": "^5.13.4",
  "@tanstack/react-query-devtools": "^5.29.0",
+ "@tanstack/react-table": "^8.16.0",
  "class-variance-authority": "^0.7.0",
  "clsx": "^2.0.0",
+ "dayjs": "^1.11.10",
  "jotai-devtools": "^0.8.0",
  "jotai-tanstack-query": "^0.8.5",
  "localforage": "^1.10.0",

frontend/src/components/Badge.tsx

@@ -0,0 +1,28 @@
+import { ThemeColors } from "@/enums/theme-colors.enum";
+import clsx from "clsx";
+
+export interface BadgeProps {
+ status: ThemeColors;
+ text: string;
+}
+
+export const Badge = ({ status, text }: BadgeProps) => {
+ const config = {
+ [ThemeColors.PRIMARY]: ["text-blue-400", "bg-blue-100"],
+ [ThemeColors.SECONDARY]: ["text-gray-400", "bg-gray-100"],
+ [ThemeColors.SUCCESS]: ["text-green-400", "bg-green-100"],
+ [ThemeColors.WARNING]: ["text-orange-400", "bg-orange-100"],
+ [ThemeColors.DANGER]: ["text-red-400", "bg-red-100"],
+ };
+
+ return (
+ <span
+ className={clsx(
+ "inline-flex items-center gap-x-1.5 rounded-full px-2 py-1 text-xs font-medium",
+ config[status],
+ )}
+ >
+ {text}
+ </span>
+ );
+};

frontend/src/components/common/Dialog.tsx → frontend/src/components/Dialog.tsx

@@ -1,11 +1,11 @@
-import { dialogOpenedAtomFamily } from "@/atoms/dialog.atoms";
 import { DialogIds } from "@/enums/dialog-ids.enum";
 import { ThemeColors } from "@/enums/theme-colors.enum";
 import { Dialog as HeadlessDialog, Transition } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { useAtom } from "jotai";
 import { Fragment, ReactNode } from "react";
 import { Button } from "./Button";
+import { dialogOpenedAtomFamily } from "@/pages/atoms";
 
 export interface DialogProps {
  id: DialogIds;
@@ -89,7 +89,7 @@ export default function Dialog({
  </button>
  </div>
  <div className="sm:flex sm:items-start">
- <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+ <div className="mt-3 text-center sm:mt-0 sm:text-left">
  <HeadlessDialog.Title
  as="h3"
  className="text-base font-semibold leading-6 text-gray-900"

frontend/src/components/DynamicField.tsx

@@ -0,0 +1,29 @@
+import { Field } from "@/types/catalog.type";
+import SwitchField from "./SwitchField";
+import TextField from "./TextField";
+import TextareaField from "./TextareaField";
+
+export interface DynamicFieldProps {
+ field: Field;
+ initialFocus?: {
+ name: string;
+ };
+}
+
+export function DynamicField({ field, initialFocus }: DynamicFieldProps) {
+ const focused = initialFocus?.name === field.slug;
+
+ if (field.type === "text") {
+ return <TextField field={field} focused={focused} />;
+ } else if (field.type === "number") {
+ return <TextField field={field} inputMode="numeric" focused={focused} />;
+ } else if (field.type === "textarea") {
+ return <TextareaField field={field} focused={focused} />;
+ } else if (field.type === "boolean") {
+ return <SwitchField field={field} />;
+ }
+
+ return <p>'{field.type}' is not a supported field</p>;
+}
+
+export default DynamicField;

frontend/src/components/common/DynamicFields.tsx → frontend/src/components/DynamicFields.tsx

@@ -5,7 +5,6 @@ export interface DynamicFieldsProps {
  fields: Field[];
  initialFocus?: {
  name: string;
- ref: React.MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;
  };
 }
 

frontend/src/components/common/Header.tsx → frontend/src/components/Header.tsx

@@ -1,4 +1,3 @@
-import { userAtom } from "@/atoms/user.atoms";
 import { Disclosure, Menu, Transition } from "@headlessui/react";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
@@ -7,17 +6,22 @@ import { BellIcon } from "lucide-react";
 import { Fragment } from "react";
 import { MobileNav, Nav } from "./Nav";
 import { RouteItem } from "./NavigationItem";
+import { userAtom } from "@/pages/atoms";
 
 export interface HeaderProps {
  routes: RouteItem[];
  userMenu: RouteItem[];
 }
 
 export function Header({ routes, userMenu }: HeaderProps) {
+ /** @TODO This shoud be deleted and place at top level when the back end supports users */
  const user = useAtomValue(userAtom);
 
  return (
- <Disclosure as="nav" className="bg-white shadow-sm">
+ <Disclosure
+ as="nav"
+ className="border-b border-gray-200 bg-white shadow-sm"
+ >
  {({ open }) => (
  <>
  <div className="px-4 sm:px-6 lg:px-8">

frontend/src/components/Input.tsx

@@ -0,0 +1,37 @@
+import { InputHTMLAttributes, useEffect } from "react";
+import { useFormContext } from "react-hook-form";
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+ label?: string;
+ focused?: boolean;
+}
+
+export const Input = ({ label, focused, ...props }: InputProps) => {
+ const { register, setFocus } = useFormContext();
+
+ useEffect(() => {
+ if (focused && props.id) {
+ setFocus(props.id);
+ }
+ }, [props.id, setFocus, focused]);
+
+ return (
+ <div className="space-y-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-2 sm:py-5">
+ {label && (
+ <label
+ htmlFor={props.id}
+ className="block text-sm font-medium leading-6 text-gray-900 sm:mt-1.5"
+ >
+ {label}
+ </label>
+ )}
+ <div className="sm:col-span-3">
+ <input
+ {...props}
+ className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+ {...register(props.id as string)}
+ />
+ </div>
+ </div>
+ );
+};

frontend/src/components/common/Nav.tsx → frontend/src/components/Nav.tsx

@@ -1,9 +1,9 @@
-import { userAtom } from "@/atoms/user.atoms";
 import { Disclosure } from "@headlessui/react";
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
 import { BellIcon } from "lucide-react";
 import NavigationItem, { RouteItem } from "./NavigationItem";
+import { userAtom } from "@/pages/atoms";
 
 export interface NavProps {
  routes: RouteItem[];
@@ -14,6 +14,7 @@ export interface MobileNavProps extends NavProps {
 }
 
 export function MobileNav({ routes, userMenu }: MobileNavProps) {
+ /** @TODO This shoud be deleted and place at top level when the back end supports users */
  const user = useAtomValue(userAtom);
 
  return (

frontend/src/components/Subheader.tsx

@@ -0,0 +1,15 @@
+export interface SubheaderProps {
+ pageTitle: string;
+}
+
+export function Subheader({ pageTitle }: SubheaderProps) {
+ return (
+ <header>
+ <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
+ {pageTitle}
+ </h1>
+ </header>
+ );
+}
+
+export default Subheader;