@massdriver/backstage-plugin 1.0.0

package/dist/features/repo/useInfiniteRelayList.esm.js

@@ -0,0 +1,92 @@
+import { useApi } from '@backstage/frontend-plugin-api';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { massdriverApiRef } from '../../api.esm.js';
+
+const useInfiniteRelayList = (query, {
+  responseKey,
+  variables,
+  pageSize = 20,
+  skip = false
+}) => {
+  const api = useApi(massdriverApiRef);
+  const variablesRef = useRef(variables);
+  variablesRef.current = variables;
+  const path = Array.isArray(responseKey) ? responseKey : [responseKey];
+  const resetKey = JSON.stringify({
+    query,
+    variables: variables ?? null,
+    skip
+  });
+  const [items, setItems] = useState([]);
+  const [nextCursor, setNextCursor] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState(void 0);
+  const fetchingRef = useRef(false);
+  const requestIdRef = useRef(0);
+  const runFetch = useCallback(
+    async (cursorNext, mode) => {
+      fetchingRef.current = true;
+      const requestId = ++requestIdRef.current;
+      if (mode === "initial") setLoading(true);
+      else setLoadingMore(true);
+      setError(void 0);
+      try {
+        const data = await api.query(query, {
+          ...variablesRef.current ?? {},
+          cursor: {
+            limit: pageSize,
+            ...cursorNext ? { next: cursorNext } : {}
+          }
+        });
+        if (requestId !== requestIdRef.current) return;
+        const page = path.reduce(
+          (node, key) => node?.[key],
+          data
+        );
+        const pageItems = (page?.items ?? []).filter(Boolean);
+        setItems(
+          (prev) => mode === "initial" ? pageItems : [...prev, ...pageItems]
+        );
+        setNextCursor(page?.cursor?.next ?? null);
+      } catch (caught) {
+        if (requestId !== requestIdRef.current) return;
+        setError(caught);
+      } finally {
+        if (requestId === requestIdRef.current) {
+          if (mode === "initial") setLoading(false);
+          else setLoadingMore(false);
+        }
+        fetchingRef.current = false;
+      }
+    },
+    // path is derived from responseKey, which is part of resetKey.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [api, query, pageSize, resetKey]
+  );
+  useEffect(() => {
+    setItems([]);
+    setNextCursor(null);
+    if (skip) {
+      setLoading(false);
+      setLoadingMore(false);
+      return;
+    }
+    runFetch(null, "initial");
+  }, [resetKey]);
+  const onLoadMore = useCallback(() => {
+    if (!nextCursor || fetchingRef.current || loading || loadingMore) return;
+    runFetch(nextCursor, "more");
+  }, [nextCursor, loading, loadingMore, runFetch]);
+  return {
+    items,
+    loading,
+    loadingMore,
+    error,
+    hasMore: Boolean(nextCursor),
+    onLoadMore
+  };
+};
+
+export { useInfiniteRelayList };
+//# sourceMappingURL=useInfiniteRelayList.esm.js.map

package/dist/features/repo/useInfiniteRelayList.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInfiniteRelayList.esm.js","sources":["../../../src/features/repo/useInfiniteRelayList.ts"],"sourcesContent":["import { useApi } from '@backstage/frontend-plugin-api';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { massdriverApiRef } from '../../api';\n\ninterface RelayPage<T> {\n  items?: (T | null)[] | null;\n  cursor?: { next?: string | null } | null;\n}\n\nexport interface InfiniteRelayResult<T> {\n  items: T[];\n  loading: boolean;\n  loadingMore: boolean;\n  error?: Error;\n  hasMore: boolean;\n  onLoadMore: () => void;\n}\n\n/**\n * Feature-local equivalent of the web app's `useInfiniteQuery` for the relay:\n * accumulates cursor pages into one growing list (`onLoadMore` appends the next\n * page). The accumulated list resets whenever the query inputs (variables/skip)\n * change, so a filter or sort change starts a fresh list. Page size defaults to\n * 20. Mirrors the web's Apollo `useInfiniteQuery` return shape\n * (`items`/`loading`/`loadingMore`/`error`/`hasMore`/`onLoadMore`).\n */\nexport const useInfiniteRelayList = <T>(\n  query: string,\n  {\n    responseKey,\n    variables,\n    pageSize = 20,\n    skip = false,\n  }: {\n    /** Key of the paginated page in the response; an array walks a nested path. */\n    responseKey: string | string[];\n    variables?: Record<string, unknown>;\n    pageSize?: number;\n    skip?: boolean;\n  },\n): InfiniteRelayResult<T> => {\n  const api = useApi(massdriverApiRef);\n\n  // Latest values read inside the async fetch without widening its deps — the\n  // effect keys off `resetKey` (a stable serialization) instead.\n  const variablesRef = useRef(variables);\n  variablesRef.current = variables;\n  const path = Array.isArray(responseKey) ? responseKey : [responseKey];\n\n  const resetKey = JSON.stringify({\n    query,\n    variables: variables ?? null,\n    skip,\n  });\n\n  const [items, setItems] = useState<T[]>([]);\n  const [nextCursor, setNextCursor] = useState<string | null>(null);\n  const [loading, setLoading] = useState(false);\n  const [loadingMore, setLoadingMore] = useState(false);\n  const [error, setError] = useState<Error | undefined>(undefined);\n\n  const fetchingRef = useRef(false);\n  const requestIdRef = useRef(0);\n\n  const runFetch = useCallback(\n    async (cursorNext: string | null, mode: 'initial' | 'more') => {\n      fetchingRef.current = true;\n      const requestId = ++requestIdRef.current;\n      if (mode === 'initial') setLoading(true);\n      else setLoadingMore(true);\n      setError(undefined);\n      try {\n        const data = (await api.query(query, {\n          ...(variablesRef.current ?? {}),\n          cursor: {\n            limit: pageSize,\n            ...(cursorNext ? { next: cursorNext } : {}),\n          },\n        })) as Record<string, unknown>;\n        // A newer fetch superseded this one (filters changed mid-flight); drop it.\n        if (requestId !== requestIdRef.current) return;\n        const page = path.reduce<unknown>(\n          (node, key) =>\n            (node as Record<string, unknown> | null | undefined)?.[key],\n          data,\n        ) as RelayPage<T> | undefined;\n        const pageItems = (page?.items ?? []).filter(Boolean) as T[];\n        setItems(prev =>\n          mode === 'initial' ? pageItems : [...prev, ...pageItems],\n        );\n        setNextCursor(page?.cursor?.next ?? null);\n      } catch (caught) {\n        if (requestId !== requestIdRef.current) return;\n        setError(caught as Error);\n      } finally {\n        if (requestId === requestIdRef.current) {\n          if (mode === 'initial') setLoading(false);\n          else setLoadingMore(false);\n        }\n        fetchingRef.current = false;\n      }\n    },\n    // path is derived from responseKey, which is part of resetKey.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [api, query, pageSize, resetKey],\n  );\n\n  // Reset and re-fetch from the first page whenever the query inputs change.\n  useEffect(() => {\n    setItems([]);\n    setNextCursor(null);\n    if (skip) {\n      setLoading(false);\n      setLoadingMore(false);\n      return;\n    }\n    runFetch(null, 'initial');\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [resetKey]);\n\n  const onLoadMore = useCallback(() => {\n    if (!nextCursor || fetchingRef.current || loading || loadingMore) return;\n    runFetch(nextCursor, 'more');\n  }, [nextCursor, loading, loadingMore, runFetch]);\n\n  return {\n    items,\n    loading,\n    loadingMore,\n    error,\n    hasMore: Boolean(nextCursor),\n    onLoadMore,\n  };\n};\n\nexport default useInfiniteRelayList;\n"],"names":[],"mappings":";;;;AA0BO,MAAM,oBAAA,GAAuB,CAClC,KAAA,EACA;AAAA,EACE,WAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA,GAAW,EAAA;AAAA,EACX,IAAA,GAAO;AACT,CAAA,KAO2B;AAC3B,EAAA,MAAM,GAAA,GAAM,OAAO,gBAAgB,CAAA;AAInC,EAAA,MAAM,YAAA,GAAe,OAAO,SAAS,CAAA;AACrC,EAAA,YAAA,CAAa,OAAA,GAAU,SAAA;AACvB,EAAA,MAAM,OAAO,KAAA,CAAM,OAAA,CAAQ,WAAW,CAAA,GAAI,WAAA,GAAc,CAAC,WAAW,CAAA;AAEpE,EAAA,MAAM,QAAA,GAAW,KAAK,SAAA,CAAU;AAAA,IAC9B,KAAA;AAAA,IACA,WAAW,SAAA,IAAa,IAAA;AAAA,IACxB;AAAA,GACD,CAAA;AAED,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAA,CAAc,EAAE,CAAA;AAC1C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAwB,IAAI,CAAA;AAChE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAA4B,MAAS,CAAA;AAE/D,EAAA,MAAM,WAAA,GAAc,OAAO,KAAK,CAAA;AAChC,EAAA,MAAM,YAAA,GAAe,OAAO,CAAC,CAAA;AAE7B,EAAA,MAAM,QAAA,GAAW,WAAA;AAAA,IACf,OAAO,YAA2B,IAAA,KAA6B;AAC7D,MAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AACtB,MAAA,MAAM,SAAA,GAAY,EAAE,YAAA,CAAa,OAAA;AACjC,MAAA,IAAI,IAAA,KAAS,SAAA,EAAW,UAAA,CAAW,IAAI,CAAA;AAAA,0BACnB,IAAI,CAAA;AACxB,MAAA,QAAA,CAAS,MAAS,CAAA;AAClB,MAAA,IAAI;AACF,QAAA,MAAM,IAAA,GAAQ,MAAM,GAAA,CAAI,KAAA,CAAM,KAAA,EAAO;AAAA,UACnC,GAAI,YAAA,CAAa,OAAA,IAAW,EAAC;AAAA,UAC7B,MAAA,EAAQ;AAAA,YACN,KAAA,EAAO,QAAA;AAAA,YACP,GAAI,UAAA,GAAa,EAAE,IAAA,EAAM,UAAA,KAAe;AAAC;AAC3C,SACD,CAAA;AAED,QAAA,IAAI,SAAA,KAAc,aAAa,OAAA,EAAS;AACxC,QAAA,MAAM,OAAO,IAAA,CAAK,MAAA;AAAA,UAChB,CAAC,IAAA,EAAM,GAAA,KACJ,IAAA,GAAsD,GAAG,CAAA;AAAA,UAC5D;AAAA,SACF;AACA,QAAA,MAAM,aAAa,IAAA,EAAM,KAAA,IAAS,EAAC,EAAG,OAAO,OAAO,CAAA;AACpD,QAAA,QAAA;AAAA,UAAS,CAAA,IAAA,KACP,SAAS,SAAA,GAAY,SAAA,GAAY,CAAC,GAAG,IAAA,EAAM,GAAG,SAAS;AAAA,SACzD;AACA,QAAA,aAAA,CAAc,IAAA,EAAM,MAAA,EAAQ,IAAA,IAAQ,IAAI,CAAA;AAAA,MAC1C,SAAS,MAAA,EAAQ;AACf,QAAA,IAAI,SAAA,KAAc,aAAa,OAAA,EAAS;AACxC,QAAA,QAAA,CAAS,MAAe,CAAA;AAAA,MAC1B,CAAA,SAAE;AACA,QAAA,IAAI,SAAA,KAAc,aAAa,OAAA,EAAS;AACtC,UAAA,IAAI,IAAA,KAAS,SAAA,EAAW,UAAA,CAAW,KAAK,CAAA;AAAA,8BACpB,KAAK,CAAA;AAAA,QAC3B;AACA,QAAA,WAAA,CAAY,OAAA,GAAU,KAAA;AAAA,MACxB;AAAA,IACF,CAAA;AAAA;AAAA;AAAA,IAGA,CAAC,GAAA,EAAK,KAAA,EAAO,QAAA,EAAU,QAAQ;AAAA,GACjC;AAGA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,EAAE,CAAA;AACX,IAAA,aAAA,CAAc,IAAI,CAAA;AAClB,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,UAAA,CAAW,KAAK,CAAA;AAChB,MAAA,cAAA,CAAe,KAAK,CAAA;AACpB,MAAA;AAAA,IACF;AACA,IAAA,QAAA,CAAS,MAAM,SAAS,CAAA;AAAA,EAE1B,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,IAAA,IAAI,CAAC,UAAA,IAAc,WAAA,CAAY,OAAA,IAAW,WAAW,WAAA,EAAa;AAClE,IAAA,QAAA,CAAS,YAAY,MAAM,CAAA;AAAA,EAC7B,GAAG,CAAC,UAAA,EAAY,OAAA,EAAS,WAAA,EAAa,QAAQ,CAAC,CAAA;AAE/C,EAAA,OAAO;AAAA,IACL,KAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA,EAAS,QAAQ,UAAU,CAAA;AAAA,IAC3B;AAAA,GACF;AACF;;;;"}

package/dist/features/repo/useInfiniteScroll.esm.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+
+const useInfiniteScroll = ({
+  onLoadMore,
+  hasMore,
+  loading
+}) => {
+  const [sentinel, setSentinel] = useState(null);
+  useEffect(() => {
+    if (!sentinel || !hasMore || loading) return void 0;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) onLoadMore();
+    });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [sentinel, hasMore, loading, onLoadMore]);
+  return setSentinel;
+};
+
+export { useInfiniteScroll };
+//# sourceMappingURL=useInfiniteScroll.esm.js.map

package/dist/features/repo/useInfiniteScroll.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInfiniteScroll.esm.js","sources":["../../../src/features/repo/useInfiniteScroll.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n// Ported from apps/web/shared/hooks/useInfiniteScroll.js. Returns a ref-setter;\n// attach it to a 1px sentinel at the bottom of a scrollable list and it fires\n// `onLoadMore` when the sentinel scrolls into view.\nexport const useInfiniteScroll = ({\n  onLoadMore,\n  hasMore,\n  loading,\n}: {\n  onLoadMore: () => void;\n  hasMore: boolean;\n  loading: boolean;\n}) => {\n  const [sentinel, setSentinel] = useState<Element | null>(null);\n\n  useEffect(() => {\n    if (!sentinel || !hasMore || loading) return undefined;\n\n    const observer = new IntersectionObserver(entries => {\n      if (entries[0].isIntersecting) onLoadMore();\n    });\n\n    observer.observe(sentinel);\n    return () => observer.disconnect();\n  }, [sentinel, hasMore, loading, onLoadMore]);\n\n  return setSentinel;\n};\n\nexport default useInfiniteScroll;\n"],"names":[],"mappings":";;AAKO,MAAM,oBAAoB,CAAC;AAAA,EAChC,UAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAIM;AACJ,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAyB,IAAI,CAAA;AAE7D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,OAAA,IAAW,SAAS,OAAO,MAAA;AAE7C,IAAA,MAAM,QAAA,GAAW,IAAI,oBAAA,CAAqB,CAAA,OAAA,KAAW;AACnD,MAAA,IAAI,OAAA,CAAQ,CAAC,CAAA,CAAE,cAAA,EAAgB,UAAA,EAAW;AAAA,IAC5C,CAAC,CAAA;AAED,IAAA,QAAA,CAAS,QAAQ,QAAQ,CAAA;AACzB,IAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AAAA,EACnC,GAAG,CAAC,QAAA,EAAU,OAAA,EAAS,OAAA,EAAS,UAAU,CAAC,CAAA;AAE3C,EAAA,OAAO,WAAA;AACT;;;;"}

package/dist/features/repos/ReposListPage.esm.js

@@ -0,0 +1,53 @@
+import { jsx } from 'react/jsx-runtime';
+import { useApi } from '@backstage/frontend-plugin-api';
+import { reposUrl } from '@massdriver/backstage-plugin-common';
+import Alert from '@massdriver/ui/Alert';
+import DataList from '@massdriver/ui/DataList';
+import { massdriverApiRef } from '../../api.esm.js';
+import { OpenInMassdriverButton } from '../../components/OpenInMassdriverButton.esm.js';
+import { PageLayout } from '../../components/PageLayout.esm.js';
+import { buildRepoColumns } from './repoColumns.esm.js';
+import { useReposPaginated, toRepoRow } from './useRepos.esm.js';
+
+const ReposListPage = () => {
+  const api = useApi(massdriverApiRef);
+  const { items, loading, error, hasMore, dataListParams } = useReposPaginated();
+  const columns = buildRepoColumns({
+    appUrl: api.appUrl,
+    organizationId: api.organizationId
+  });
+  const rows = items.map(toRepoRow);
+  const hasSearch = Boolean(dataListParams.state?.search);
+  const emptyMessage = hasSearch ? "No repositories match your search." : "This organization has no repositories.";
+  return /* @__PURE__ */ jsx(
+    PageLayout,
+    {
+      title: "Repositories",
+      description: "Repositories are the basic building blocks of infrastructure, applications, and architectures in Massdriver.",
+      actions: /* @__PURE__ */ jsx(
+        OpenInMassdriverButton,
+        {
+          url: `${reposUrl(api.appUrl, api.organizationId)}?createOciRepo=true`,
+          children: "New Repository"
+        }
+      ),
+      children: error ? /* @__PURE__ */ jsx(Alert, { severity: "error", children: String(error.message ?? error) }) : /* @__PURE__ */ jsx(
+        DataList,
+        {
+          rows,
+          columns,
+          loading,
+          serverSide: true,
+          searchable: true,
+          hasMore,
+          variant: "outlined",
+          emptyMessage,
+          ...dataListParams
+        }
+      )
+    }
+  );
+};
+
+export { ReposListPage };
+//# sourceMappingURL=ReposListPage.esm.js.map

package/dist/features/repos/ReposListPage.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReposListPage.esm.js","sources":["../../../src/features/repos/ReposListPage.tsx"],"sourcesContent":["import { useApi } from '@backstage/frontend-plugin-api';\nimport { reposUrl } from '@massdriver/backstage-plugin-common';\nimport Alert from '@massdriver/ui/Alert';\nimport DataList from '@massdriver/ui/DataList';\nimport { massdriverApiRef } from '../../api';\nimport { OpenInMassdriverButton } from '../../components/OpenInMassdriverButton';\nimport { PageLayout } from '../../components/PageLayout';\nimport { buildRepoColumns } from './repoColumns';\nimport { toRepoRow, useReposPaginated } from './useRepos';\n\n// Ported from apps/web/features/repos/pages/ReposPage.js +\n// sections/ReposList/. The web app's \"New repository\" button opens a dialog\n// driven by the `createOciRepo` URL param; here it deep-links out to Massdriver\n// with that param set (read-only parity).\nexport const ReposListPage = () => {\n  const api = useApi(massdriverApiRef);\n  const { items, loading, error, hasMore, dataListParams } =\n    useReposPaginated();\n  const columns = buildRepoColumns({\n    appUrl: api.appUrl,\n    organizationId: api.organizationId,\n  });\n  const rows = items.map(toRepoRow);\n  const hasSearch = Boolean(dataListParams.state?.search);\n  const emptyMessage = hasSearch\n    ? 'No repositories match your search.'\n    : 'This organization has no repositories.';\n\n  return (\n    <PageLayout\n      title=\"Repositories\"\n      description=\"Repositories are the basic building blocks of infrastructure, applications, and architectures in Massdriver.\"\n      actions={\n        <OpenInMassdriverButton\n          url={`${reposUrl(api.appUrl, api.organizationId)}?createOciRepo=true`}\n        >\n          New Repository\n        </OpenInMassdriverButton>\n      }\n    >\n      {error ? (\n        <Alert severity=\"error\">{String(error.message ?? error)}</Alert>\n      ) : (\n        <DataList\n          rows={rows}\n          columns={columns}\n          loading={loading}\n          serverSide\n          searchable\n          hasMore={hasMore}\n          variant=\"outlined\"\n          emptyMessage={emptyMessage}\n          {...dataListParams}\n        />\n      )}\n    </PageLayout>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAcO,MAAM,gBAAgB,MAAM;AACjC,EAAA,MAAM,GAAA,GAAM,OAAO,gBAAgB,CAAA;AACnC,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAS,OAAO,OAAA,EAAS,cAAA,KACtC,iBAAA,EAAkB;AACpB,EAAA,MAAM,UAAU,gBAAA,CAAiB;AAAA,IAC/B,QAAQ,GAAA,CAAI,MAAA;AAAA,IACZ,gBAAgB,GAAA,CAAI;AAAA,GACrB,CAAA;AACD,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,GAAA,CAAI,SAAS,CAAA;AAChC,EAAA,MAAM,SAAA,GAAY,OAAA,CAAQ,cAAA,CAAe,KAAA,EAAO,MAAM,CAAA;AACtD,EAAA,MAAM,YAAA,GAAe,YACjB,oCAAA,GACA,wCAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,cAAA;AAAA,MACN,WAAA,EAAY,8GAAA;AAAA,MACZ,OAAA,kBACE,GAAA;AAAA,QAAC,sBAAA;AAAA,QAAA;AAAA,UACC,KAAK,CAAA,EAAG,QAAA,CAAS,IAAI,MAAA,EAAQ,GAAA,CAAI,cAAc,CAAC,CAAA,mBAAA,CAAA;AAAA,UACjD,QAAA,EAAA;AAAA;AAAA,OAED;AAAA,MAGD,QAAA,EAAA,KAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EAAM,QAAA,EAAS,OAAA,EAAS,iBAAO,KAAA,CAAM,OAAA,IAAW,KAAK,CAAA,EAAE,CAAA,mBAExD,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,OAAA;AAAA,UACA,OAAA;AAAA,UACA,UAAA,EAAU,IAAA;AAAA,UACV,UAAA,EAAU,IAAA;AAAA,UACV,OAAA;AAAA,UACA,OAAA,EAAQ,UAAA;AAAA,UACR,YAAA;AAAA,UACC,GAAG;AAAA;AAAA;AACN;AAAA,GAEJ;AAEJ;;;;"}

package/dist/features/repos/queries.esm.js

@@ -0,0 +1,40 @@
+const OCI_REPOS_LIST_QUERY = `
+  query MassdriverOciReposList(
+    $organizationId: ID!
+    $filter: OciReposFilter
+    $sort: OciReposSort
+    $cursor: Cursor
+  ) {
+    ociRepos(
+      organizationId: $organizationId
+      filter: $filter
+      sort: $sort
+      cursor: $cursor
+    ) {
+      cursor {
+        next
+        previous
+      }
+      items {
+        id
+        name
+        createdAt
+        updatedAt
+        description
+        icon
+        sourceUrl
+        attributes
+        effectiveAttributes
+        tags(sort: { field: VERSION, order: DESC }, cursor: { limit: 1 }) {
+          items {
+            tag
+            createdAt
+          }
+        }
+      }
+    }
+  }
+`;
+
+export { OCI_REPOS_LIST_QUERY };
+//# sourceMappingURL=queries.esm.js.map

package/dist/features/repos/queries.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"queries.esm.js","sources":["../../../src/features/repos/queries.ts"],"sourcesContent":["// Ported from apps/web/features/repos/hooks/useOciReposQuery.js (OCI_REPOS_QUERY).\n// Operation renamed to MassdriverOciReposList; $organizationId is declared but\n// never passed — the relay injects it.\nexport const OCI_REPOS_LIST_QUERY = `\n  query MassdriverOciReposList(\n    $organizationId: ID!\n    $filter: OciReposFilter\n    $sort: OciReposSort\n    $cursor: Cursor\n  ) {\n    ociRepos(\n      organizationId: $organizationId\n      filter: $filter\n      sort: $sort\n      cursor: $cursor\n    ) {\n      cursor {\n        next\n        previous\n      }\n      items {\n        id\n        name\n        createdAt\n        updatedAt\n        description\n        icon\n        sourceUrl\n        attributes\n        effectiveAttributes\n        tags(sort: { field: VERSION, order: DESC }, cursor: { limit: 1 }) {\n          items {\n            tag\n            createdAt\n          }\n        }\n      }\n    }\n  }\n`;\n"],"names":[],"mappings":"AAGO,MAAM,oBAAA,GAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/dist/features/repos/repoColumns.esm.js

@@ -0,0 +1,121 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import Box from '@massdriver/ui/Box';
+import { col } from '@massdriver/ui/DataList';
+import stylin from '@massdriver/ui/stylin';
+import DeleteOutlineIcon from '@massdriver/ui/icons/DeleteOutlineIcon';
+import EditIcon from '@massdriver/ui/icons/EditIcon';
+import ExtensionIcon from '@massdriver/ui/icons/ExtensionIcon';
+import OpenInNewIcon from '@massdriver/ui/icons/OpenInNewIcon';
+import { reposUrl } from '@massdriver/backstage-plugin-common';
+import { AuthedIcon } from '../../components/AuthedIcon.esm.js';
+import { buildAttributesColumn, Code } from '../../components/AttributesColumn.esm.js';
+import { RouterLinkAdapter } from '../../components/RouterLinkAdapter.esm.js';
+import { formatAbsoluteTime } from '../../utils/formatRelativeTime.esm.js';
+import { internalRoutes } from '../../internalRoutes.esm.js';
+
+const buildRepoColumns = ({
+  appUrl,
+  organizationId
+}) => [
+  col.custom(
+    "name",
+    "Name",
+    (value, row) => /* @__PURE__ */ jsxs(NameCell, { children: [
+      /* @__PURE__ */ jsx(
+        AuthedIcon,
+        {
+          url: row.icon,
+          alt: value,
+          size: "small",
+          fallback: /* @__PURE__ */ jsx(FallbackIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NameLink,
+        {
+          component: RouterLinkAdapter,
+          href: internalRoutes.repository(row.id),
+          children: value || "--"
+        }
+      )
+    ] }),
+    { flex: 2, minWidth: 200, sortable: true, searchable: true }
+  ),
+  col.text("description", "Description", {
+    flex: 3,
+    minWidth: 150,
+    sortable: false
+  }),
+  buildAttributesColumn({
+    directText: "Key-value attributes assigned directly to this repository. Attributes cascade to bundles published from this repo.",
+    effectiveText: /* @__PURE__ */ jsxs(Fragment, { children: [
+      "The full attribute map the authorization system evaluates policies against for this repository \u2014 the repo's own user attributes plus auto-injected ",
+      /* @__PURE__ */ jsx(Code, { children: "md-*" }),
+      " system attributes."
+    ] })
+  }),
+  col.text("latestVersion", "Latest Version", {
+    flex: 1,
+    minWidth: 120,
+    sortable: false,
+    searchable: false
+  }),
+  col.text("updatedAt", "Updated", {
+    flex: 1,
+    minWidth: 150,
+    sortable: false,
+    searchable: false,
+    tooltip: (_value, row) => formatAbsoluteTime(row.updatedAtRaw)
+  }),
+  col.actions([
+    {
+      // "View source code" is a read link — allowed under read-only parity.
+      icon: /* @__PURE__ */ jsx(OpenInNewIcon, { fontSize: "small" }),
+      tooltip: (_row, { disabled }) => disabled ? "Source code not available" : "View source code",
+      href: (row) => row.sourceUrl,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      disabled: (row) => !row.sourceUrl
+    },
+    {
+      icon: /* @__PURE__ */ jsx(EditIcon, { fontSize: "small" }),
+      tooltip: "Edit in Massdriver",
+      href: (row) => `${reposUrl(appUrl, organizationId)}?editOciRepo=${encodeURIComponent(
+        row.id
+      )}`,
+      target: "_blank",
+      rel: "noopener noreferrer"
+    },
+    {
+      icon: /* @__PURE__ */ jsx(DeleteOutlineIcon, { fontSize: "small" }),
+      tooltip: "Delete in Massdriver",
+      href: (row) => `${reposUrl(appUrl, organizationId)}?deleteOciRepo=${encodeURIComponent(
+        row.id
+      )}`,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      color: "error"
+    }
+  ])
+];
+const NameCell = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1.5),
+  minWidth: 0
+}));
+const FallbackIcon = stylin(ExtensionIcon)({
+  fontSize: 18
+});
+const NameLink = stylin(Box)({
+  color: "inherit",
+  textDecoration: "none",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  minWidth: 0,
+  "&:hover": { textDecoration: "underline" }
+});
+
+export { buildRepoColumns };
+//# sourceMappingURL=repoColumns.esm.js.map

package/dist/features/repos/repoColumns.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"repoColumns.esm.js","sources":["../../../src/features/repos/repoColumns.tsx"],"sourcesContent":["import Box from '@massdriver/ui/Box';\nimport { col } from '@massdriver/ui/DataList';\nimport stylin from '@massdriver/ui/stylin';\nimport DeleteOutlineIcon from '@massdriver/ui/icons/DeleteOutlineIcon';\nimport EditIcon from '@massdriver/ui/icons/EditIcon';\nimport ExtensionIcon from '@massdriver/ui/icons/ExtensionIcon';\nimport OpenInNewIcon from '@massdriver/ui/icons/OpenInNewIcon';\nimport { reposUrl } from '@massdriver/backstage-plugin-common';\nimport AuthedIcon from '../../components/AuthedIcon';\nimport { buildAttributesColumn, Code } from '../../components/AttributesColumn';\nimport { RouterLinkAdapter } from '../../components/RouterLinkAdapter';\nimport { formatAbsoluteTime } from '../../utils/formatRelativeTime';\nimport { internalRoutes } from '../../internalRoutes';\nimport type { RepoRow } from './useRepos';\n\n// Ported from apps/web/features/repos/utils/repoColumns.js (buildRepoColumns).\n// The repo's brand icon (`repo.icon`, an auth-guarded SVG URL) is fetched\n// through the backend content proxy by AuthedIcon, exactly like the web app.\n// Edit/Delete mutate, so they deep-link into the web app's dialogs via the\n// same `?editOciRepo=` / `?deleteOciRepo=` URL params the app's list uses.\nexport const buildRepoColumns = ({\n  appUrl,\n  organizationId,\n}: {\n  appUrl: string;\n  organizationId: string;\n}) => [\n  col.custom(\n    'name',\n    'Name',\n    (value: string, row: RepoRow) => (\n      <NameCell>\n        <AuthedIcon\n          url={row.icon}\n          alt={value}\n          size=\"small\"\n          fallback={<FallbackIcon />}\n        />\n        <NameLink\n          component={RouterLinkAdapter}\n          href={internalRoutes.repository(row.id)}\n        >\n          {value || '--'}\n        </NameLink>\n      </NameCell>\n    ),\n    { flex: 2, minWidth: 200, sortable: true, searchable: true },\n  ),\n  col.text('description', 'Description', {\n    flex: 3,\n    minWidth: 150,\n    sortable: false,\n  }),\n  buildAttributesColumn({\n    directText:\n      'Key-value attributes assigned directly to this repository. Attributes cascade to bundles published from this repo.',\n    effectiveText: (\n      <>\n        The full attribute map the authorization system evaluates policies\n        against for this repository — the repo's own user attributes plus\n        auto-injected <Code>md-*</Code> system attributes.\n      </>\n    ),\n  }),\n  col.text('latestVersion', 'Latest Version', {\n    flex: 1,\n    minWidth: 120,\n    sortable: false,\n    searchable: false,\n  }),\n  col.text('updatedAt', 'Updated', {\n    flex: 1,\n    minWidth: 150,\n    sortable: false,\n    searchable: false,\n    tooltip: (_value: unknown, row: RepoRow) =>\n      formatAbsoluteTime(row.updatedAtRaw),\n  }),\n  col.actions([\n    {\n      // \"View source code\" is a read link — allowed under read-only parity.\n      icon: <OpenInNewIcon fontSize=\"small\" />,\n      tooltip: (_row: RepoRow, { disabled }: { disabled: boolean }) =>\n        disabled ? 'Source code not available' : 'View source code',\n      href: (row: RepoRow) => row.sourceUrl,\n      target: '_blank',\n      rel: 'noopener noreferrer',\n      disabled: (row: RepoRow) => !row.sourceUrl,\n    },\n    {\n      icon: <EditIcon fontSize=\"small\" />,\n      tooltip: 'Edit in Massdriver',\n      href: (row: RepoRow) =>\n        `${reposUrl(appUrl, organizationId)}?editOciRepo=${encodeURIComponent(\n          row.id,\n        )}`,\n      target: '_blank',\n      rel: 'noopener noreferrer',\n    },\n    {\n      icon: <DeleteOutlineIcon fontSize=\"small\" />,\n      tooltip: 'Delete in Massdriver',\n      href: (row: RepoRow) =>\n        `${reposUrl(appUrl, organizationId)}?deleteOciRepo=${encodeURIComponent(\n          row.id,\n        )}`,\n      target: '_blank',\n      rel: 'noopener noreferrer',\n      color: 'error',\n    },\n  ]),\n];\n\nconst NameCell = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  minWidth: 0,\n}));\n\nconst FallbackIcon = stylin(ExtensionIcon)({\n  fontSize: 18,\n});\n\nconst NameLink = stylin(Box)({\n  color: 'inherit',\n  textDecoration: 'none',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  minWidth: 0,\n  '&:hover': { textDecoration: 'underline' },\n});\n"],"names":[],"mappings":"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"}

package/dist/features/repos/useRepos.esm.js

@@ -0,0 +1,22 @@
+import { usePaginatedRelayQuery } from '../../hooks/usePaginatedRelayQuery.esm.js';
+import { formatRelativeTime } from '../../utils/formatRelativeTime.esm.js';
+import { OCI_REPOS_LIST_QUERY } from './queries.esm.js';
+
+const toRepoRow = (repo) => ({
+  ...repo,
+  name: repo.name || "",
+  icon: repo.icon ?? null,
+  description: repo.description ?? null,
+  latestVersion: repo.tags?.items?.[0]?.tag ? `v${repo.tags.items[0].tag}` : null,
+  updatedAtRaw: repo.updatedAt,
+  updatedAt: formatRelativeTime(repo.updatedAt)
+});
+const useReposPaginated = () => usePaginatedRelayQuery(OCI_REPOS_LIST_QUERY, {
+  responseKey: "ociRepos",
+  sortFieldMap: { name: "NAME", createdAt: "CREATED_AT" },
+  defaultSort: { field: "name", direction: "asc" },
+  pageSize: 20
+});
+
+export { toRepoRow, useReposPaginated };
+//# sourceMappingURL=useRepos.esm.js.map

package/dist/features/repos/useRepos.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRepos.esm.js","sources":["../../../src/features/repos/useRepos.ts"],"sourcesContent":["import {\n  PaginatedResult,\n  usePaginatedRelayQuery,\n} from '../../hooks/usePaginatedRelayQuery';\nimport { formatRelativeTime } from '../../utils/formatRelativeTime';\nimport { OCI_REPOS_LIST_QUERY } from './queries';\n\n/** A repository as returned by the API (mirrors the web app's selection). */\nexport interface RepoListItem {\n  id: string;\n  name: string;\n  description?: string | null;\n  icon?: string | null;\n  sourceUrl?: string | null;\n  attributes?: unknown;\n  effectiveAttributes?: unknown;\n  createdAt?: string | null;\n  updatedAt?: string | null;\n  tags?: { items?: Array<{ tag: string; createdAt?: string } | null> } | null;\n}\n\n/** A repository row as rendered in the DataList (mirrors the web `toRepoRow`). */\nexport interface RepoRow extends RepoListItem {\n  name: string;\n  description: string | null;\n  latestVersion: string | null;\n  updatedAt: string;\n  updatedAtRaw?: string | null;\n}\n\n/** Transform a raw repo into a display row. Mirrors `toRepoRow` in repoColumns.js. */\nexport const toRepoRow = (repo: RepoListItem): RepoRow => ({\n  ...repo,\n  name: repo.name || '',\n  icon: repo.icon ?? null,\n  description: repo.description ?? null,\n  latestVersion: repo.tags?.items?.[0]?.tag\n    ? `v${repo.tags.items[0].tag}`\n    : null,\n  updatedAtRaw: repo.updatedAt,\n  updatedAt: formatRelativeTime(repo.updatedAt),\n});\n\n/** Server-side, cursor-paginated repositories list (matches the web app). */\nexport const useReposPaginated = (): PaginatedResult<RepoListItem> =>\n  usePaginatedRelayQuery<RepoListItem>(OCI_REPOS_LIST_QUERY, {\n    responseKey: 'ociRepos',\n    sortFieldMap: { name: 'NAME', createdAt: 'CREATED_AT' },\n    defaultSort: { field: 'name', direction: 'asc' },\n    pageSize: 20,\n  });\n"],"names":[],"mappings":";;;;AA+BO,MAAM,SAAA,GAAY,CAAC,IAAA,MAAiC;AAAA,EACzD,GAAG,IAAA;AAAA,EACH,IAAA,EAAM,KAAK,IAAA,IAAQ,EAAA;AAAA,EACnB,IAAA,EAAM,KAAK,IAAA,IAAQ,IAAA;AAAA,EACnB,WAAA,EAAa,KAAK,WAAA,IAAe,IAAA;AAAA,EACjC,aAAA,EAAe,IAAA,CAAK,IAAA,EAAM,KAAA,GAAQ,CAAC,CAAA,EAAG,GAAA,GAClC,CAAA,CAAA,EAAI,IAAA,CAAK,IAAA,CAAK,KAAA,CAAM,CAAC,CAAA,CAAE,GAAG,CAAA,CAAA,GAC1B,IAAA;AAAA,EACJ,cAAc,IAAA,CAAK,SAAA;AAAA,EACnB,SAAA,EAAW,kBAAA,CAAmB,IAAA,CAAK,SAAS;AAC9C,CAAA;AAGO,MAAM,iBAAA,GAAoB,MAC/B,sBAAA,CAAqC,oBAAA,EAAsB;AAAA,EACzD,WAAA,EAAa,UAAA;AAAA,EACb,YAAA,EAAc,EAAE,IAAA,EAAM,MAAA,EAAQ,WAAW,YAAA,EAAa;AAAA,EACtD,WAAA,EAAa,EAAE,KAAA,EAAO,MAAA,EAAQ,WAAW,KAAA,EAAM;AAAA,EAC/C,QAAA,EAAU;AACZ,CAAC;;;;"}

package/dist/features/resource/OriginChip.esm.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import Chip from '@massdriver/ui/Chip';
+import stylin from '@massdriver/ui/stylin';
+import { chipClasses } from '@mui/material/Chip';
+import '@mui/material/Drawer';
+import '@mui/material/OutlinedInput';
+import '@mui/material/Select';
+import '@mui/material/ToggleButton';
+
+const ORIGIN_LABELS = {
+  IMPORTED: "Imported",
+  PROVISIONED: "Provisioned"
+};
+const OriginChip = ({ origin }) => {
+  const provisioned = origin === "PROVISIONED";
+  return /* @__PURE__ */ jsx(
+    StyledChip,
+    {
+      size: "small",
+      label: ORIGIN_LABELS[origin ?? ""] ?? origin,
+      provisioned
+    }
+  );
+};
+const StyledChip = stylin(Chip, ["provisioned"])(
+  ({ theme, provisioned }) => ({
+    height: 20,
+    fontSize: "0.6875rem",
+    fontWeight: 600,
+    letterSpacing: "0.03em",
+    textTransform: "uppercase",
+    borderRadius: "4px",
+    backgroundColor: provisioned ? theme.palette.info.lighter : theme.palette.success.lighter,
+    color: provisioned ? theme.palette.info.dark : theme.palette.success.dark,
+    [`& .${chipClasses.label}`]: {
+      padding: theme.spacing(0, 0.75)
+    }
+  })
+);
+
+export { OriginChip };
+//# sourceMappingURL=OriginChip.esm.js.map

package/dist/features/resource/OriginChip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OriginChip.esm.js","sources":["../../../src/features/resource/OriginChip.tsx"],"sourcesContent":["import Chip from '@massdriver/ui/Chip';\nimport stylin from '@massdriver/ui/stylin';\nimport { chipClasses } from '../../theme/muiClasses';\n\n// Ported from apps/web/features/resources/sections/GeneralTab/GeneralTab.view.js\n// (the OriginChip styled component + ORIGIN_LABELS).\n\nconst ORIGIN_LABELS: Record<string, string> = {\n  IMPORTED: 'Imported',\n  PROVISIONED: 'Provisioned',\n};\n\n/** Small uppercase status chip: provisioned reads info, imported reads success. */\nexport const OriginChip = ({ origin }: { origin?: string | null }) => {\n  const provisioned = origin === 'PROVISIONED';\n  return (\n    <StyledChip\n      size=\"small\"\n      label={ORIGIN_LABELS[origin ?? ''] ?? origin}\n      provisioned={provisioned}\n    />\n  );\n};\n\nexport default OriginChip;\n\nconst StyledChip = stylin(Chip, ['provisioned'])(\n  ({ theme, provisioned }: { theme: any; provisioned: boolean }) => ({\n    height: 20,\n    fontSize: '0.6875rem',\n    fontWeight: 600,\n    letterSpacing: '0.03em',\n    textTransform: 'uppercase',\n    borderRadius: '4px',\n    backgroundColor: provisioned\n      ? theme.palette.info.lighter\n      : theme.palette.success.lighter,\n    color: provisioned ? theme.palette.info.dark : theme.palette.success.dark,\n    [`& .${chipClasses.label}`]: {\n      padding: theme.spacing(0, 0.75),\n    },\n  }),\n);\n"],"names":[],"mappings":";;;;;;;;;AAOA,MAAM,aAAA,GAAwC;AAAA,EAC5C,QAAA,EAAU,UAAA;AAAA,EACV,WAAA,EAAa;AACf,CAAA;AAGO,MAAM,UAAA,GAAa,CAAC,EAAE,MAAA,EAAO,KAAkC;AACpE,EAAA,MAAM,cAAc,MAAA,KAAW,aAAA;AAC/B,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,OAAA;AAAA,MACL,KAAA,EAAO,aAAA,CAAc,MAAA,IAAU,EAAE,CAAA,IAAK,MAAA;AAAA,MACtC;AAAA;AAAA,GACF;AAEJ;AAIA,MAAM,UAAA,GAAa,MAAA,CAAO,IAAA,EAAM,CAAC,aAAa,CAAC,CAAA;AAAA,EAC7C,CAAC,EAAE,KAAA,EAAO,WAAA,EAAY,MAA6C;AAAA,IACjE,MAAA,EAAQ,EAAA;AAAA,IACR,QAAA,EAAU,WAAA;AAAA,IACV,UAAA,EAAY,GAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,aAAA,EAAe,WAAA;AAAA,IACf,YAAA,EAAc,KAAA;AAAA,IACd,eAAA,EAAiB,cACb,KAAA,CAAM,OAAA,CAAQ,KAAK,OAAA,GACnB,KAAA,CAAM,QAAQ,OAAA,CAAQ,OAAA;AAAA,IAC1B,KAAA,EAAO,cAAc,KAAA,CAAM,OAAA,CAAQ,KAAK,IAAA,GAAO,KAAA,CAAM,QAAQ,OAAA,CAAQ,IAAA;AAAA,IACrE,CAAC,CAAA,GAAA,EAAM,WAAA,CAAY,KAAK,EAAE,GAAG;AAAA,MAC3B,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,IAAI;AAAA;AAChC,GACF;AACF,CAAA;;;;"}

package/dist/features/resource/ResourceDetailsPage.esm.js

@@ -0,0 +1,167 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useApi } from '@backstage/frontend-plugin-api';
+import { resourceUrl } from '@massdriver/backstage-plugin-common';
+import Box from '@massdriver/ui/Box';
+import IconButton from '@massdriver/ui/IconButton';
+import IconTile from '@massdriver/ui/IconTile';
+import PageTabs from '@massdriver/ui/PageTabs';
+import Tooltip from '@massdriver/ui/Tooltip';
+import DeleteIcon from '@massdriver/ui/icons/DeleteIcon';
+import ExtensionIcon from '@massdriver/ui/icons/ExtensionIcon';
+import stylin from '@massdriver/ui/stylin';
+import useAsync from 'react-use/esm/useAsync';
+import { useParams } from 'react-router-dom';
+import { massdriverApiRef } from '../../api.esm.js';
+import { DisabledAction } from '../../components/DisabledAction.esm.js';
+import { NotFound } from '../../components/NotFound.esm.js';
+import { OpenInMassdriverButton } from '../../components/OpenInMassdriverButton.esm.js';
+import { PageLayout } from '../../components/PageLayout.esm.js';
+import { RouterLinkAdapter } from '../../components/RouterLinkAdapter.esm.js';
+import { internalRoutes } from '../../internalRoutes.esm.js';
+import { PROVISIONED_EDIT_TOOLTIP, PROVISIONED_DELETE_TOOLTIP } from '../resources/resourceConstants.esm.js';
+import { RESOURCE_HEADER_QUERY } from './queries.esm.js';
+import { GeneralTab } from './tabs/GeneralTab.esm.js';
+import { PermissionsTab } from './tabs/PermissionsTab.esm.js';
+import { UsageTab } from './tabs/UsageTab.esm.js';
+
+const DELETE_TOOLTIP = "Delete in Massdriver";
+const TABS = [
+  { id: "general", label: "General" },
+  { id: "usage", label: "Usage" },
+  { id: "permissions", label: "Permissions" }
+];
+const PANELS = {
+  general: GeneralTab,
+  usage: UsageTab,
+  permissions: PermissionsTab
+};
+const ResourceDetailsPage = () => {
+  const api = useApi(massdriverApiRef);
+  const { resourceId: rawResourceId = "", tab } = useParams();
+  const resourceId = decodeURIComponent(rawResourceId);
+  const activeTab = TABS.some((entry) => entry.id === tab) ? tab : "general";
+  const {
+    value: resource,
+    loading,
+    error
+  } = useAsync(async () => {
+    const data = await api.query(RESOURCE_HEADER_QUERY, {
+      id: resourceId
+    });
+    return data.resource;
+  }, [api, resourceId]);
+  if (!loading && !error && !resource) {
+    return /* @__PURE__ */ jsx(
+      NotFound,
+      {
+        title: "Resource not found",
+        message: "This resource doesn't exist or you don't have access to it."
+      }
+    );
+  }
+  const isProvisioned = resource?.origin === "PROVISIONED";
+  const tabs = TABS.map((entry) => ({
+    ...entry,
+    href: internalRoutes.resourceTab(resourceId, entry.id)
+  }));
+  const titleNode = resource ? /* @__PURE__ */ jsxs(TitleRow, { children: [
+    /* @__PURE__ */ jsx(
+      IconTile,
+      {
+        src: resource.resourceType?.icon,
+        alt: resource.resourceType?.name,
+        size: "medium",
+        fallback: /* @__PURE__ */ jsx(ExtensionIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(TitleText, { children: resource.name })
+  ] }) : "";
+  return /* @__PURE__ */ jsx(
+    PageLayout,
+    {
+      title: titleNode,
+      description: resource?.resourceType?.name,
+      headerActions: resource ? /* @__PURE__ */ jsxs(HeaderActions, { children: [
+        /* @__PURE__ */ jsx(
+          OpenInMassdriverButton,
+          {
+            url: resourceUrl(api.appUrl, api.organizationId, resourceId),
+            variant: "outlined",
+            children: "Open in Massdriver"
+          }
+        ),
+        isProvisioned ? /* @__PURE__ */ jsx(DisabledAction, { label: "Edit", tooltip: PROVISIONED_EDIT_TOOLTIP }) : /* @__PURE__ */ jsx(
+          OpenInMassdriverButton,
+          {
+            url: resourceUrl(api.appUrl, api.organizationId, resourceId),
+            variant: "outlined",
+            children: "Edit"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: isProvisioned ? PROVISIONED_DELETE_TOOLTIP : DELETE_TOOLTIP,
+            arrow: true,
+            placement: "top",
+            children: /* @__PURE__ */ jsx(ButtonWrap, { children: /* @__PURE__ */ jsx(
+              DangerIconButton,
+              {
+                "aria-label": "Delete resource",
+                disabled: isProvisioned,
+                ...isProvisioned ? {} : {
+                  href: resourceUrl(
+                    api.appUrl,
+                    api.organizationId,
+                    resourceId
+                  ),
+                  target: "_blank",
+                  rel: "noopener noreferrer"
+                },
+                children: /* @__PURE__ */ jsx(DeleteIcon, {})
+              }
+            ) })
+          }
+        )
+      ] }) : null,
+      flush: true,
+      children: /* @__PURE__ */ jsx(
+        PageTabs,
+        {
+          orientation: "vertical",
+          tabs,
+          panels: PANELS,
+          activeTab,
+          panelProps: { resourceId, resourceOrigin: resource?.origin },
+          LinkComponent: RouterLinkAdapter
+        }
+      )
+    }
+  );
+};
+const TitleRow = stylin("span")(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: theme.spacing(1.5),
+  minWidth: 0
+}));
+const TitleText = stylin("span")({
+  minWidth: 0,
+  wordBreak: "break-word"
+});
+const HeaderActions = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1)
+}));
+const ButtonWrap = stylin("span")({
+  display: "inline-flex"
+});
+const DangerIconButton = stylin(IconButton)(({ theme }) => ({
+  "&:hover:not(:disabled)": {
+    color: theme.palette.error.main
+  }
+}));
+
+export { ResourceDetailsPage };
+//# sourceMappingURL=ResourceDetailsPage.esm.js.map