@manta-eu/react 0.8.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manta-eu/react",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "The Manta design system, knowledge-graph UI and agent components",
   "homepage": "https://developers.manta.eu",
   "keywords": [
@@ -1139,12 +1139,12 @@
     "usehooks-ts": "^3.1.1",
     "zod": "^4.5.0",
     "zustand": "^5.0.2",
-    "@manta-eu/auth": "0.8.0",
-    "@manta-eu/client": "0.8.0",
-    "@manta-eu/datalog-parser": "0.8.0",
-    "@manta-eu/ldo": "0.8.0",
-    "@manta-eu/rdf-lib": "0.8.0",
-    "@manta-eu/lib": "0.8.0"
+    "@manta-eu/auth": "0.8.1",
+    "@manta-eu/client": "0.8.1",
+    "@manta-eu/lib": "0.8.1",
+    "@manta-eu/rdf-lib": "0.8.1",
+    "@manta-eu/datalog-parser": "0.8.1",
+    "@manta-eu/ldo": "0.8.1"
   },
   "peerDependencies": {
     "@ulb-darmstadt/shacl-form": "^2.1.1-rc1",
@@ -1166,10 +1166,10 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "ajv": "^8.17.1",
-    "eslint": "^9.39.2",
     "happy-dom": "^15.11.7",
     "jsdom": "^28.1.0",
     "next-themes": "^0.4.6",
+    "oxlint": "1.90.0",
     "postcss-cli": "^11.0.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
@@ -1177,11 +1177,11 @@
     "storybook": "^10.6.4",
     "tailwindcss": "^4.3.3",
     "tsc-alias": "^1.9.5",
-    "typescript": "^5.9.3",
+    "typescript": "^7.0.2",
     "uuid": "^13.0.0",
     "vite": "^8.3.5",
     "vitest": "^4.1.8",
-    "@manta-eu/eslint-config": "0.1.0"
+    "@manta-eu/oxlint-config": "0.1.0"
   },
   "imports": {
     "#*": {
@@ -1202,10 +1202,11 @@
   "scripts": {
     "build": "rimraf dist && postcss src/globals.css -o dist/globals.css && tsc --project tsconfig.build.json && tsc-alias --project tsconfig.build.json --resolve-full-paths",
     "build-storybook": "NODE_OPTIONS=\"$NODE_OPTIONS --max-old-space-size=6144\" storybook build",
-    "lint": "eslint .",
+    "lint": "oxlint --type-aware --report-unused-disable-directives-severity=warn .",
     "storybook": "storybook dev -p 6007",
     "test": "vitest --run",
     "types": "tsc --noEmit",
-    "generate:action-shapes": "tsx scripts/generate-action-shapes.ts"
+    "generate:action-shapes": "tsx scripts/generate-action-shapes.ts",
+    "lint:fix": "oxlint --fix --type-aware --report-unused-disable-directives-severity=warn ."
   }
 }

package/src/components/badge/index.tsx

@@ -15,7 +15,7 @@ export const badgeConfig = {
       primary: "bg-primary text-primary-foreground",
       secondary: "bg-accent text-default-foreground",
       copy: "bg-accent text-muted-foreground",
-      // eslint-disable-next-line @manta-eu/no-theme-primitive-colors
+      // oxlint-disable-next-line @manta-eu/no-theme-primitive-colors
       promo: "bg-pink-100 text-pink-700",
       success: "bg-success text-success-foreground",
       warning: "bg-warning text-warning-foreground",

package/src/components/calendar/index.tsx

@@ -189,7 +189,7 @@ export function CalendarDayButton(props: ComponentProps<typeof DayButton>) {
           "flex-col",
           "gap-1",
           "leading-none",
-          // eslint-disable-next-line @manta-eu/no-raw-typography
+          // oxlint-disable-next-line @manta-eu/no-raw-typography
           "font-normal",
           "group-data-[focused=true]/day:relative",
           "group-data-[focused=true]/day:z-10",
@@ -197,7 +197,7 @@ export function CalendarDayButton(props: ComponentProps<typeof DayButton>) {
           "data-[range-end=true]:rounded-2xl-v4",
           "data-[range-middle=true]:rounded-none",
           "data-[range-start=true]:rounded-2xl-v4",
-          // eslint-disable-next-line @manta-eu/no-raw-typography
+          // oxlint-disable-next-line @manta-eu/no-raw-typography
           "[&>span]:text-xs",
           "[&>span]:opacity-70",
           dayButtonClassName,

package/src/components/input/input-field.tsx

@@ -170,7 +170,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputArgs>(function Inpu
       inputRef.current.value = next;
       setInternalCount(next.length);
       onChange?.({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);
-      // eslint-disable-next-line no-useless-catch
+      // oxlint-disable-next-line no-useless-catch
     } catch (error) {
       throw error;
     } finally {

package/src/components/input/textarea.tsx

@@ -178,7 +178,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaArgs>(func
       textareaRef.current.value = next;
       setInternalCount(next.length);
       onChange?.({ target: textareaRef.current } as ChangeEvent<HTMLTextAreaElement>);
-      // eslint-disable-next-line no-useless-catch
+      // oxlint-disable-next-line no-useless-catch
     } catch (error) {
       throw error;
     } finally {

package/src/components/table/index.tsx

@@ -120,7 +120,6 @@ export enum SortingHandlerPlacement {
 }
 
 declare module "@tanstack/react-table" {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData, TValue> {
     /**
      * Placement of the sorting handler relative to the cell header

package/src/hooks/resolved-terms.ts

@@ -4,6 +4,7 @@ import { createTermBatcher, type TermBatcher } from "../lib/term-batcher";
 export type ResolvedTerms<T> = {
   values: Map<string, T>;
   request: (iris: string[]) => void;
+  refresh?: (iris: string[]) => void;
   // IRIs whose lookup has completed, found or not. Absent in static contexts
   // (tests), which are treated as already settled.
   settledIris?: ReadonlySet<string>;
@@ -137,6 +138,10 @@ export function useResolvedTermsState<T>(
   }, [batcher]);
 
   const request = useCallback((iris: string[]) => batcher.request(iris), [batcher]);
+  const refresh = useCallback((iris: string[]) => batcher.request(iris, { force: true }), [batcher]);
 
-  return useMemo(() => ({ values, request, settledIris, failedIris }), [values, request, settledIris, failedIris]);
+  return useMemo(
+    () => ({ values, request, refresh, settledIris, failedIris }),
+    [values, request, refresh, settledIris, failedIris],
+  );
 }

package/src/hooks/useAuth.ts

@@ -1,4 +1,5 @@
 import { SessionContextDocument } from "@manta-eu/client";
+import { loginStatusPollMs } from "@manta-eu/client/shared/constants";
 import { datastoreHeader } from "@manta-eu/client/shared/datastore-path";
 import { createHttpError, isHttpError } from "@manta-eu/client/shared/error-utils";
 import { isValidModelId, type MantaModelId } from "@manta-eu/client/shared/model";
@@ -189,7 +190,8 @@ export function useAuth(): UseAuthResult {
     // Keycloak's SSO session idle timeout (default 30 min) only resets when a request
     // actually reaches processMiddleware. A long WS-only chat session with no other HTTP
     // traffic would otherwise let the underlying session go idle and die silently.
-    refetchInterval: 5 * 60 * 1000,
+    // The poll also renews the access token before it expires, so it must run more often than the token lives.
+    refetchInterval: loginStatusPollMs,
     refetchIntervalInBackground: true,
   });
 

package/src/lib/chat-types.ts

@@ -1,4 +1,4 @@
-/* eslint-disable import/order -- each type is imported beside the re-export it exists for, which is
+/* oxlint-disable import-js/order -- each type is imported beside the re-export it exists for, which is
    how this file is organized; they are type-only, so the positions have no runtime meaning. */
 import type { ConversationMode } from "@manta-eu/client/shared/chat-manager";
 import type { MantaModelId } from "@manta-eu/client/shared/model";

package/src/lib/tanstack-query.ts

@@ -1,7 +1,7 @@
 import type { QueryClient, QueryKey } from "@tanstack/react-query";
 
 export type QueryWithGetKey = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   getKey: (variables?: any) => QueryKey;
 };
 
@@ -12,7 +12,7 @@ function isQueryWithGetKey(keyLike: KeyLike): keyLike is QueryWithGetKey {
 }
 
 function getTopQueryKey(query: QueryWithGetKey): QueryKey {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   const keys = query.getKey({} as any);
   return keys.slice(0, 1);
 }

package/src/lib/term-batcher.ts

@@ -14,7 +14,7 @@ export type TermBatcherConfig<T> = {
 };
 
 export type TermBatcher = {
-  request: (iris: IRI[]) => void;
+  request: (iris: IRI[], options?: { force: boolean }) => void;
   cancel: () => void;
 };
 
@@ -98,13 +98,13 @@ export function createTermBatcher<T>(config: TermBatcherConfig<T>): TermBatcher
   }
 
   return {
-    request(iris) {
+    request(iris, options) {
       cancelled = false;
 
       const unresolvable: IRI[] = [];
 
       for (const iri of iris) {
-        if (requested.has(iri)) continue;
+        if (requested.has(iri) && !options?.force) continue;
 
         requested.add(iri);
 

package/src/lib/utils.ts

@@ -1,4 +1,4 @@
-/* eslint-disable @manta-eu/no-direct-clsx */
+/* oxlint-disable @manta-eu/no-direct-clsx */
 import { clsx, type ClassValue } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 

package/src/routes/data-explorer/components/DetailHeader.tsx

@@ -42,14 +42,14 @@ export function DetailHeader(props: DetailHeaderProps) {
     <div>
       {badges && <div className="mb-3 flex items-center gap-2">{badges}</div>}
 
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex items-center gap-3">
-          <h2 className="typography-header wrap-break-words text-default-foreground">{title}</h2>
+      <div className="flex flex-col items-start justify-between gap-4 sm:flex-row">
+        <div className="flex min-w-0 items-center gap-3">
+          <h2 className="typography-header wrap-anywhere text-default-foreground">{title}</h2>
 
           {titleBadges}
         </div>
 
-        {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+        {actions && <div className="flex flex-wrap items-center gap-2 sm:shrink-0">{actions}</div>}
       </div>
 
       {iri &&

package/src/routes/data-explorer/components/record-detail/RecordActions.tsx

@@ -1,5 +1,9 @@
+import { Button } from "#components/button/index";
+import { DeleteConfirmationDialog } from "#components/layouts/DeleteConfirmationDialog";
+import { useExecuteAction, type ExecuteActionResult } from "#hooks/useExecuteAction";
+import { useTriples, type TripleRow } from "#routes/data-explorer/triples";
 import { GQLExecuteActionErrorCode } from "@manta-eu/client";
-import { compactUri } from "@manta-eu/client/shared/rdf-namespaces";
+import { compactUri, wellKnownPredicates } from "@manta-eu/client/shared/rdf-namespaces";
 import { useState } from "react";
 import { toast } from "sonner";
 import type { PropertyMap } from "./action-properties";
@@ -7,10 +11,7 @@ import { useRecordActionShapes, type RecordActionShape } from "./action-shapes";
 import { ActionFormDialog } from "./ActionFormDialog";
 import { CreateAction } from "./CreateAction";
 import { RecordActionFeedback } from "./RecordActionFeedback";
-import { Button } from "#components/button/index";
-import { DeleteConfirmationDialog } from "#components/layouts/DeleteConfirmationDialog";
-import { useExecuteAction, type ExecuteActionResult } from "#hooks/useExecuteAction";
-import { useTriples, type TripleRow } from "#routes/data-explorer/triples";
+import { RecordRefresh } from "./RecordRefresh";
 
 type RecordActionsProps = { iri: string; typeIris: string[] };
 
@@ -20,20 +21,25 @@ export function RecordActions(props: RecordActionsProps) {
   const { shapes, error } = useRecordActionShapes(typeIris);
   const { triples, isLoading: triplesLoading } = useTriples(iri);
 
-  if (error) return <span className="typography-tiny text-muted-foreground">Actions unavailable</span>;
+  const recordTypes = triples
+    .filter((row) => row.predicate === wellKnownPredicates.type && row.objectIsIri)
+    .map((row) => row.object);
 
   return (
     <>
-      {shapes.map((shape) => (
-        <ShapeActions
-          key={`${iri}|${shape.actionShape}`}
-          subjectIri={iri}
-          shape={shape}
-          triples={triples}
-          triplesLoading={triplesLoading}
-          qualifyLabels={shapes.length > 1}
-        />
-      ))}
+      <RecordRefresh iri={iri} typeIris={recordTypes} />
+      {error && <span className="typography-tiny text-muted-foreground">Actions unavailable</span>}
+      {!error &&
+        shapes.map((shape) => (
+          <ShapeActions
+            key={`${iri}|${shape.actionShape}`}
+            subjectIri={iri}
+            shape={shape}
+            triples={triples}
+            triplesLoading={triplesLoading}
+            qualifyLabels={shapes.length > 1}
+          />
+        ))}
     </>
   );
 }

package/src/routes/data-explorer/components/record-detail/RecordRefresh.tsx

@@ -0,0 +1,150 @@
+import { Button } from "#components/button/index";
+import { InstanceLabelsContext } from "#hooks/use-instance-labels";
+import { useMantaClient } from "#providers/MantaClientProvider";
+import {
+  GQLRefreshResourceStatus,
+  GQLRefreshWorkflowStatus,
+  RefreshResourcesDocument,
+  RefreshResourcesStatusDocument,
+  type GQLRefreshResourceInput,
+  type GQLRefreshResourcesMutation,
+  type GQLRefreshResourcesMutationVariables,
+  type GQLRefreshResourcesStatusQuery,
+  type GQLRefreshResourcesStatusQueryVariables,
+  useRefreshResourceCapabilitiesQuery,
+} from "@manta-eu/client";
+import { isPresent } from "@manta-eu/lib/present";
+import { sleep } from "@manta-eu/lib/sleep";
+import { useIsMutating, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { GraphQLClient } from "graphql-request";
+import { useContext } from "react";
+import { toast } from "sonner";
+import { match } from "ts-pattern";
+
+type RecordRefreshProps = { iri: string; typeIris: string[] };
+
+export function RecordRefresh(props: RecordRefreshProps) {
+  const { iri, typeIris } = props;
+  const { mantaClient } = useMantaClient();
+  const { data } = useRefreshResourceCapabilitiesQuery(
+    mantaClient,
+    { rdfTypes: typeIris },
+    { enabled: isPresent(typeIris) },
+  );
+  const rdfType = data?.refreshResourceCapabilities.capabilities.find((type) => type.supportsRefresh)?.rdfType;
+
+  return rdfType ? <RefreshButton key={`${iri}|${rdfType}`} iri={iri} rdfType={rdfType} /> : null;
+}
+
+type RefreshButtonProps = { iri: string; rdfType: string };
+
+type RefreshResult = GQLRefreshResourcesStatusQuery["refreshResourcesStatus"];
+
+class RefreshError extends Error {
+  constructor(
+    readonly phase: "start" | "status" | "timeout",
+    cause: unknown,
+  ) {
+    super("Unable to complete source refresh", { cause });
+  }
+}
+
+async function refreshResource(client: GraphQLClient, resource: GQLRefreshResourceInput): Promise<RefreshResult> {
+  const controller = new AbortController();
+  const timeoutMs = 5 * 60 * 1000;
+  const deadline = Date.now() + timeoutMs;
+  const timer = setTimeout(() => controller.abort(), timeoutMs);
+  let phase: "start" | "status" = "start";
+
+  try {
+    const { refreshResources } = await client.request<
+      GQLRefreshResourcesMutation,
+      GQLRefreshResourcesMutationVariables
+    >({
+      document: RefreshResourcesDocument,
+      variables: { resources: [resource] },
+      signal: controller.signal,
+    });
+    phase = "status";
+
+    while (true) {
+      controller.signal.throwIfAborted();
+      const { refreshResourcesStatus } = await client.request<
+        GQLRefreshResourcesStatusQuery,
+        GQLRefreshResourcesStatusQueryVariables
+      >({
+        document: RefreshResourcesStatusDocument,
+        variables: { workflowId: refreshResources.workflowId },
+        signal: controller.signal,
+      });
+      controller.signal.throwIfAborted();
+      if (refreshResourcesStatus.status !== GQLRefreshWorkflowStatus.Running) return refreshResourcesStatus;
+
+      await sleep(Math.min(2000, Math.max(0, deadline - Date.now())));
+    }
+  } catch (error) {
+    throw new RefreshError(controller.signal.aborted ? "timeout" : phase, error);
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+function RefreshButton(props: RefreshButtonProps) {
+  const { iri, rdfType } = props;
+  const { mantaClient, datastoreId } = useMantaClient();
+  const queryClient = useQueryClient();
+  const labels = useContext(InstanceLabelsContext);
+  const refreshLabels = labels?.refresh;
+  const pendingFilter = { mutationKey: ["RefreshResource", datastoreId, iri], exact: true };
+  const refreshing = useIsMutating(pendingFilter) > 0;
+  const { mutate } = useMutation<RefreshResult, RefreshError>({
+    mutationKey: pendingFilter.mutationKey,
+    mutationFn: () => refreshResource(mantaClient, { iri, type: rdfType }),
+    retry: false,
+    onSuccess: (result) => {
+      if (result.status === GQLRefreshWorkflowStatus.Failed) {
+        toast.error("Refresh failed", { description: result.error ?? undefined });
+        return;
+      }
+
+      const status = result.results?.find(
+        (resource) => resource.iri === iri && resource.type === rdfType,
+      )?.refreshStatus;
+      match(status)
+        .with(GQLRefreshResourceStatus.Synced, () => {
+          void queryClient.invalidateQueries({ queryKey: ["data-explorer"] });
+          refreshLabels?.([iri]);
+          toast.success("Refreshed from source");
+        })
+        .with(GQLRefreshResourceStatus.NotReadable, () => toast.error("This entity does not support refresh"))
+        .with(GQLRefreshResourceStatus.NotSynced, () =>
+          toast.error("The entity could not be refreshed from its source"),
+        )
+        .with(undefined, () => toast.error("Refresh returned no result for this entity"))
+        .exhaustive();
+    },
+    onError: (error) => {
+      match(error.phase)
+        .with("start", () => toast.error("Could not start refresh"))
+        .with("status", () =>
+          toast.error("Could not check refresh status", { description: "The refresh may still be running." }),
+        )
+        .with("timeout", () =>
+          toast.warning("Refresh is taking longer than expected", {
+            description: "It may still finish in the background.",
+          }),
+        )
+        .exhaustive();
+    },
+  });
+
+  function startRefresh() {
+    if (queryClient.isMutating(pendingFilter) === 0) mutate();
+  }
+
+  return (
+    <Button variant="secondary" size="sm" disabled={refreshing} aria-busy={refreshing} onClick={startRefresh}>
+      {refreshing ? "Refreshing…" : "Refresh from source"}
+    </Button>
+  );
+}

package/src/rules/datalog-ast/DatalogBodyFormulaComponent.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable @manta-eu/no-theme-primitive-colors */
+/* oxlint-disable @manta-eu/no-theme-primitive-colors */
 
 import type {
   AggregateBinding,

package/src/rules/datalog-ast/DatalogTermComponent.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable @manta-eu/no-theme-primitive-colors */
+/* oxlint-disable @manta-eu/no-theme-primitive-colors */
 
 import type { DatalogTerm } from "@manta-eu/datalog-parser";
 import { compactUri } from "@manta-eu/rdf-lib/namespaces";

package/src/shacl/shacl-form-types.ts

@@ -41,7 +41,7 @@ declare module "@ulb-darmstadt/shacl-form" {
 }
 
 declare module "react" {
-  // eslint-disable-next-line @typescript-eslint/no-namespace -- augmenting JSX needs a namespace.
+  // oxlint-disable-next-line typescript/no-namespace -- augmenting JSX needs a namespace.
   namespace JSX {
     interface IntrinsicElements {
       "shacl-form": import("react").DetailedHTMLProps<

package/src/style.ts

@@ -1,4 +1,4 @@
-/* eslint-disable @manta-eu/no-direct-clsx */
+/* oxlint-disable @manta-eu/no-direct-clsx */
 import clsx, { type ClassValue } from "clsx";
 import { twMerge, type ClassNameValue } from "tailwind-merge";
 

package/src/templates/slack-to-markdown.ts

@@ -19,7 +19,7 @@ export function slackToMarkdown(input: string): string {
 
   output = output.replace(/([^\n])\n(?!\n)/g, "$1  \n");
 
-  // eslint-disable-next-line no-control-regex -- NUL delimits the code placeholders this file writes.
+  // oxlint-disable-next-line no-control-regex -- NUL delimits the code placeholders this file writes.
   output = output.replace(/\x00CODE(\d+)\x00/g, (_, i) => placeholders[Number(i)]!);
 
   return output;