Fix cubic review

Signed-off-by: Jonathan <contact@grafikart.fr>

apps/console/src/components/table/SortableDataTable.tsx

@@ -55,7 +55,7 @@ export function SortableDataTable({
     });
   };
   return (
-    <SortableContext value={{ order, onOrderChange }}>
+    <SortableContext.Provider value={{ order, onOrderChange }}>
       <div className="space-y-4">
         <DataTable {...props} />
         {hasNext && loadNext && (
@@ -70,7 +70,7 @@ export function SortableDataTable({
           </Button>
         )}
       </div>
-    </SortableContext>
+    </SortableContext.Provider>
   );
 }
 

apps/console/src/components/table/VendorsCell.tsx

@@ -27,7 +27,7 @@ export function VendorsCell(props: Props) {
         organizationId: props.organizationId,
       }}
       items={(data) =>
-        data.organization?.vendors?.edges.map((edge) => edge.node) ?? []
+        data.organization?.vendors?.edges?.map((edge) => edge.node) ?? []
       }
       itemRenderer={({ item, onRemove }) => (
         <VendorBadge vendor={item} onRemove={onRemove} />

apps/console/src/hooks/useStateWithSchema.ts

@@ -8,6 +8,7 @@ export function useStateWithSchema<T extends ZodTypeAny>(
   const [state, setState] = useState(initialValue);
   const [value, errors] = useMemo((): [z.infer<T>, Record<string, string>] => {
     try {
+      schema.parse(state);
       return [schema.parse(state), {}];
     } catch (error) {
       if (error instanceof ZodError) {
@@ -26,7 +27,7 @@ export function useStateWithSchema<T extends ZodTypeAny>(
   }, [state, schema]);
 
   return {
-    rawValue: value,
+    rawValue: state,
     value,
     errors,
     update: useCallback(

apps/console/src/pages/organizations/assets/AssetsPage.tsx

@@ -233,7 +233,9 @@ export default function AssetsPage(props: Props) {
             <VendorsCell
               name="vendorIds"
               organizationId={organizationId}
-              defaultValue={item?.vendors.edges.map((edge) => edge.node) ?? []}
+              defaultValue={
+                item?.vendors?.edges?.map((edge) => edge.node) ?? []
+              }
             />
           </>
         )}

apps/console/vite.config.ts

@@ -12,6 +12,10 @@ export default defineConfig({
         target: "http://localhost:8080",
         changeOrigin: true,
       },
+      "/authz": {
+        target: "http://localhost:8080",
+        changeOrigin: true,
+      },
       "/api": {
         target: "http://localhost:8080",
         changeOrigin: true,
@@ -29,7 +33,9 @@ export default defineConfig({
       "/pages": fileURLToPath(new URL("./src/pages", import.meta.url)),
       "/routes": fileURLToPath(new URL("./src/routes", import.meta.url)),
       "/providers": fileURLToPath(new URL("./src/providers", import.meta.url)),
-      "/permissions": fileURLToPath(new URL("./src/permissions", import.meta.url)),
+      "/permissions": fileURLToPath(
+        new URL("./src/permissions", import.meta.url),
+      ),
     },
   },
 });

cfg/dev.yaml

@@ -16,7 +16,7 @@ probod:
   trust-center:
     http-addr: ":8085"
     https-addr: ":8443"
-  
+
   api:
     addr: "localhost:8080"
     cors:
@@ -101,11 +101,3 @@ probod:
           - "incoming-webhook"
       settings:
         signing-secret: "this-is-not-a-secret-for-slack-signing"
-
-  custom-domains:
-    renewal-interval: 3600
-    provision-interval: 30
-    acme:
-      directory: "https://localhost:14000/dir"
-      email: "bryan@getprobo.com"
-      key-type: "EC256"

packages/helpers/src/dom.ts

@@ -57,11 +57,7 @@ export function focusSiblingElement(direction = 1) {
     ).filter((el) => {
         // Filter out elements that are not visible or have display: none
         const style = window.getComputedStyle(el);
-        return (
-            style.display !== "none" &&
-            style.visibility !== "hidden" &&
-            el.offsetParent !== null
-        );
+        return style.display !== "none" && style.visibility !== "hidden";
     });
 
     const currentIndex = focusableElements.indexOf(current);

packages/ui/src/Atoms/DataTable/DataTable.tsx

@@ -93,6 +93,7 @@ export function RowButton({
     return (
         <button
             {...props}
+            type="button"
             className="py-2 bg-highlight hover:bg-highlight-hover active:bg-highlight-pressed           cursor-pointer w-full flex gap-2 items-center justify-center text-sm text-txt-secondary"
             style={{ gridColumnEnd: -1, gridColumnStart: 1 }}
         >

packages/ui/src/Molecules/Table/EditableRow.tsx

@@ -39,8 +39,8 @@ export function EditableRow(props: Props) {
         [props.errors],
     );
     return (
-        <EditableRowContext value={value}>
+        <EditableRowContext.Provider value={value}>
             <Row>{props.children}</Row>
-        </EditableRowContext>
+        </EditableRowContext.Provider>
     );
 }

packages/ui/src/Molecules/Table/TextCell.tsx

@@ -1,5 +1,5 @@
 import { EditableCell, useEditableCellRef } from "./EditableCell.tsx";
-import { type KeyboardEventHandler, useRef, useState } from "react";
+import { type KeyboardEventHandler, useEffect, useRef, useState } from "react";
 import { useEditableRowContext } from "./EditableRow.tsx";
 
 type Props = {
@@ -27,6 +27,11 @@ export function TextCell(props: Props) {
         setValue(inputValue);
         onUpdate(props.name, inputValue);
     };
+
+    // Keep the value in sync with the props.defaultValue if defaultValue changes
+    useEffect(() => {
+        setValue(props.defaultValue);
+    }, [props.defaultValue]);
     return (
         <EditableCell
             name={props.name}

packages/ui/src/Molecules/Table/utils.ts

@@ -3,7 +3,7 @@ export function getKey<T>(item: T): string {
         item &&
         typeof item === "object" &&
         "id" in item &&
-        typeof item.id === "string"
+        (typeof item.id === "string" || typeof item.id === "number")
     ) {
         return item.id.toString();
     }