feat: API page rework (#996)

siiick · web-flow · commit f55f3f81e3e0 · 2025-07-24T15:16:28.000+02:00
diff --git a/packages/app-builder/package.json b/packages/app-builder/package.json
@@ -26,7 +26,6 @@
     "@types/qs": "^6.9.18",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@types/swagger-ui-react": "^5.18.0",
     "autoprefixer": "^10.4.21",
     "jsdom": "26.0.0",
     "ora": "^8.2.0",
@@ -114,7 +113,6 @@
     "sharpstate": "^0.0.13",
     "short-uuid": "^5.2.0",
     "spin-delay": "^2.0.1",
-    "swagger-ui-react": "^5.20.1",
     "temporal-polyfill": "^0.2.5",
     "tiny-invariant": "^1.3.3",
     "ts-pattern": "^5.6.2",
diff --git a/packages/app-builder/src/locales/ar/api.json b/packages/app-builder/src/locales/ar/api.json
@@ -1,3 +1,4 @@
 {
-  "download_openapi_spec": "تنزيل مواصفات OpenAPI"
+  "download_openapi_spec": "تنزيل مواصفات OpenAPI v0 (مهمل)",
+  "download_openapi_spec_v1": "تنزيل مواصفات OpenAPI v1"
 }
diff --git a/packages/app-builder/src/locales/en/api.json b/packages/app-builder/src/locales/en/api.json
@@ -1,3 +1,4 @@
 {
-  "download_openapi_spec": "Download OpenAPI specification"
+  "download_openapi_spec": "Download OpenAPI specification v0 (Deprecated)",
+  "download_openapi_spec_v1": "Download OpenAPI specification v1"
 }
diff --git a/packages/app-builder/src/locales/fr/api.json b/packages/app-builder/src/locales/fr/api.json
@@ -1,3 +1,4 @@
 {
-  "download_openapi_spec": "Télécharger la spécification OpenAPI"
+  "download_openapi_spec": "Télécharger la spécification OpenAPI v0 (Déprécié)",
+  "download_openapi_spec_v1": "Télécharger la spécification OpenAPI v1"
 }
diff --git a/packages/app-builder/src/repositories/DataModelRepository.ts b/packages/app-builder/src/repositories/DataModelRepository.ts
@@ -30,6 +30,7 @@ import { type OpenApiSpec } from 'marble-api';
 export interface DataModelRepository {
   getDataModel(): Promise<DataModel>;
   getOpenApiSpec(): Promise<OpenApiSpec>;
+  getOpenApiSpecOfVersion(version: string): Promise<OpenApiSpec>;
   postDataModelTableField(tableId: string, createFieldInput: CreateFieldInput): Promise<void>;
   patchDataModelField(tableId: string, updateFieldInput: UpdateFieldInput): Promise<void>;
   listPivots(args: { tableId?: string }): Promise<Pivot[]>;
@@ -56,6 +57,9 @@ export function makeGetDataModelRepository() {
     getOpenApiSpec: async () => {
       return marbleCoreApiClient.getDataModelOpenApi();
     },
+    getOpenApiSpecOfVersion: async (version: string) => {
+      return marbleCoreApiClient.getDataModelOpenApiOfVersion(version);
+    },
     postDataModelTableField: async (tableId, createFieldInput) => {
       await marbleCoreApiClient.postDataModelTableField(
         tableId,
diff --git a/packages/app-builder/src/routes/_builder+/api.tsx b/packages/app-builder/src/routes/_builder+/api.tsx
@@ -7,19 +7,14 @@ import {
 import { initServerServices } from '@app-builder/services/init.server';
 import { downloadFile } from '@app-builder/utils/download-file';
 import { getRoute } from '@app-builder/utils/routes';
-import { json, type LinksFunction, type LoaderFunctionArgs } from '@remix-run/node';
+import { type LoaderFunctionArgs } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
 import { type Namespace } from 'i18next';
-import * as React from 'react';
 import toast from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
-import * as R from 'remeda';
-import swaggercss from 'swagger-ui-react/swagger-ui.css?url';
 import { Button } from 'ui-design-system';
 import { Icon } from 'ui-icons';
 
-const SwaggerUI = React.lazy(() => import('swagger-ui-react'));
-
 export const handle = {
   i18n: ['common', 'navigation', 'api'] satisfies Namespace,
   BreadCrumbs: [
@@ -36,30 +31,26 @@ export const handle = {
   ],
 };
 
-export const links: LinksFunction = () =>
-  swaggercss ? [{ rel: 'stylesheet', href: swaggercss }] : [];
-
 export async function loader({ request }: LoaderFunctionArgs) {
   const { authService } = initServerServices(request);
   const { dataModelRepository } = await authService.isAuthenticated(request, {
     failureRedirect: getRoute('/sign-in'),
   });
 
-  const openapi = await dataModelRepository.getOpenApiSpec();
-  return json({ openapi });
+  const [openapi, openapiV1] = await Promise.all([
+    dataModelRepository.getOpenApiSpec(),
+    dataModelRepository.getOpenApiSpecOfVersion('v1'),
+  ]);
+
+  return Response.json({ openapi, openapiV1 });
 }
 
 export default function Api() {
   const { t } = useTranslation(handle.i18n);
-  const { openapi } = useLoaderData<typeof loader>();
+  const { openapi, openapiV1 } = useLoaderData<typeof loader>();
 
-  // Remove those parts, because they are part of the proper openapi spec but we do not want them as input to SwaggerUI
-  const openapiWithoutSomeParts = React.useMemo(() => {
-    const openapiWithoutSomeParts = R.clone(openapi);
-    delete openapiWithoutSomeParts.info;
-    delete openapiWithoutSomeParts.components?.securitySchemes;
-    return openapiWithoutSomeParts;
-  }, [openapi]);
+  console.log('openapi', openapi);
+  console.log('openapiV1', openapiV1);
 
   return (
     <Page.Main>
@@ -68,7 +59,24 @@ export default function Api() {
       </Page.Header>
       <Page.Container>
         <Page.Content>
-          <div className="flex">
+          <div className="flex flex-col gap-2  items-start">
+            <Button
+              variant="secondary"
+              onClick={() => {
+                try {
+                  const blob = new Blob([JSON.stringify(openapiV1)], {
+                    type: 'application/json;charset=utf-8,',
+                  });
+                  const url = URL.createObjectURL(blob);
+                  void downloadFile(url, 'openapi-v1.json');
+                } catch (_error) {
+                  toast.error(t('common:errors.unknown'));
+                }
+              }}
+            >
+              <Icon icon="download" className="me-2 size-6" />
+              {t('api:download_openapi_spec_v1')}
+            </Button>
             <Button
               variant="secondary"
               onClick={() => {
@@ -87,17 +95,6 @@ export default function Api() {
               {t('api:download_openapi_spec')}
             </Button>
           </div>
-          <div className="-mx-5">
-            <React.Suspense fallback={t('common:loading')}>
-              {/* Issue with UNSAFE_componentWillReceiveProps: https://github.com/swagger-api/swagger-ui/issues/5729 */}
-              <SwaggerUI
-                spec={openapiWithoutSomeParts}
-                supportedSubmitMethods={[]}
-                defaultModelExpandDepth={5}
-                defaultModelsExpandDepth={4}
-              />
-            </React.Suspense>
-          </div>
         </Page.Content>
       </Page.Container>
     </Page.Main>
diff --git a/packages/marble-api/openapis/marblecore-api.yaml b/packages/marble-api/openapis/marblecore-api.yaml
@@ -232,6 +232,8 @@ paths:
     $ref: ./marblecore-api/data-model.yml#/~1data-model~1links
   /data-model/openapi:
     $ref: ./marblecore-api/data-model.yml#/~1data-model~1openapi
+  /data-model/openapi/{version}:
+    $ref: ./marblecore-api/data-model.yml#/~1data-model~1openapi~1{version}
   /data-model/pivots:
     $ref: ./marblecore-api/data-model.yml#/~1data-model~1pivots
   /data-model/tables/{tableId}/navigation_options:
diff --git a/packages/marble-api/openapis/marblecore-api/data-model.yml b/packages/marble-api/openapis/marblecore-api/data-model.yml
@@ -264,13 +264,39 @@
   get:
     tags:
       - Data Model
-    summary: Get the OpenAPI specification of the client specific API for data ingestion and decision making
+    summary: Get the current version of the OpenAPI specification of the client specific API for data ingestion and decision making
     operationId: getDataModelOpenApi
     security:
       - bearerAuth: []
     responses:
       '200':
-        description: The OpenAPI specification of the client specific API for data ingestion and decision making
+        description: The OpenAPI specification of the client specific API for data ingestion and decision making for the current version
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/OpenAPISpec'
+      '401':
+        $ref: 'components.yml#/responses/401'
+      '403':
+        $ref: 'components.yml#/responses/403'
+/data-model/openapi/{version}:
+  get:
+    tags:
+      - Data Model
+    summary: Get the OpenAPI specification of the client specific API for data ingestion and decision making for a specific version
+    operationId: getDataModelOpenApiOfVersion
+    security:
+      - bearerAuth: []
+    parameters:
+      - name: version
+        description: Version of the API to get the OpenAPI specification for
+        in: path
+        required: true
+        schema:
+          type: string
+    responses:
+      '200':
+        description: The OpenAPI specification of the client specific API for data ingestion and decision making for the provided version
         content:
           application/json:
             schema:
diff --git a/packages/marble-api/src/generated/marblecore-api.ts b/packages/marble-api/src/generated/marblecore-api.ts
@@ -3292,7 +3292,7 @@ export function postDataModelTableLink(createTableLinkBody: CreateTableLinkBody,
     })));
 }
 /**
- * Get the OpenAPI specification of the client specific API for data ingestion and decision making
+ * Get the current version of the OpenAPI specification of the client specific API for data ingestion and decision making
  */
 export function getDataModelOpenApi(opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchJson<{
@@ -3308,6 +3308,23 @@ export function getDataModelOpenApi(opts?: Oazapfts.RequestOpts) {
         ...opts
     }));
 }
+/**
+ * Get the OpenAPI specification of the client specific API for data ingestion and decision making for a specific version
+ */
+export function getDataModelOpenApiOfVersion(version: string, opts?: Oazapfts.RequestOpts) {
+    return oazapfts.ok(oazapfts.fetchJson<{
+        status: 200;
+        data: OpenApiSpec;
+    } | {
+        status: 401;
+        data: string;
+    } | {
+        status: 403;
+        data: string;
+    }>(`/data-model/openapi/${encodeURIComponent(version)}`, {
+        ...opts
+    }));
+}
 /**
  * Get the pivots associated with the current organization (can be filtered by table_id)
  */
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "download_openapi_spec": "تنزيل مواصفات OpenAPI"`
	`2`	`+ "download_openapi_spec": "تنزيل مواصفات OpenAPI v0 (مهمل)",`
	`3`	`+ "download_openapi_spec_v1": "تنزيل مواصفات OpenAPI v1"`
`3`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "download_openapi_spec": "Download OpenAPI specification"`
	`2`	`+ "download_openapi_spec": "Download OpenAPI specification v0 (Deprecated)",`
	`3`	`+ "download_openapi_spec_v1": "Download OpenAPI specification v1"`
`3`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "download_openapi_spec": "Télécharger la spécification OpenAPI"`
	`2`	`+ "download_openapi_spec": "Télécharger la spécification OpenAPI v0 (Déprécié)",`
	`3`	`+ "download_openapi_spec_v1": "Télécharger la spécification OpenAPI v1"`
`3`	`4`	`}`