console: export button to download open api spec from rest endpoint

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9418
GitOrigin-RevId: a4d81f13cdec4302be45bed2eb21051b5868d2b3

frontend/libs/console/legacy-ce/src/lib/Endpoints.ts

@@ -35,6 +35,7 @@ export const getEndpoints = (globals: typeof consoleGlobals) => {
     registerEETrial: `https://licensing.pro.hasura.io/v1/graphql`,
     schemaRegistry: `${window.location.protocol}//${globals.schemaRegistryHost}/v1/graphql`,
     // registerEETrial: `http://licensing.lux-dev.hasura.me/v1/graphql`,
+    exportOpenApi: 'api/swagger/json',
   };
 
   return endpoints;

frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Rest/Form/ExportOpenAPI.tsx

@@ -0,0 +1,65 @@
+import { useQuery } from 'react-query';
+import { Button } from '../../../../../new-components/Button';
+import { FaFileExport } from 'react-icons/fa';
+import { useHttpClient } from '../../../../../features/Network';
+import { Axios, AxiosError } from 'axios';
+import { hasuraToast } from '../../../../../new-components/Toasts';
+import { Analytics } from '../../../../../features/Analytics';
+import endpoints from '../../../../../Endpoints';
+import { downloadObjectAsJsonFile } from '../../../../Common/utils/export.utils';
+
+const fetchData = async (httpClient: Axios) => {
+  try {
+    const response = await httpClient.get(endpoints?.exportOpenApi);
+    return response.data;
+  } catch (error: unknown) {
+    const axiosError = error as AxiosError<{ error: string }>;
+    if (axiosError.response) {
+      // Server responded with a status other than 200 range
+      throw new Error(axiosError.response.data.error || 'Something went wrong');
+    } else {
+      // Something happened while setting up the request and triggered an Error
+      throw new Error('Something went wrong');
+    }
+  }
+};
+
+export const ExportOpenApiButton = () => {
+  const httpClient = useHttpClient();
+  const { isLoading, refetch, isRefetching } = useQuery(
+    'exportOpenApi',
+    () => fetchData(httpClient),
+    {
+      enabled: false,
+      retry: 0,
+      onSuccess: data => {
+        downloadObjectAsJsonFile('OpenAPISpec.json', data);
+        hasuraToast({
+          title: 'OpenApiSpec Exported Successfully!',
+          type: 'success',
+        });
+      },
+      onError: (error: Error) => {
+        hasuraToast({
+          title: 'Unable to Export!',
+          type: 'error',
+          message: error.message,
+        });
+      },
+    }
+  );
+
+  return (
+    <Analytics name="export-open-api-spec-btn">
+      <Button
+        icon={<FaFileExport />}
+        className="ml-2"
+        onClick={() => refetch()}
+        size="sm"
+        isLoading={isLoading || isRefetching}
+      >
+        Export OpenAPI Spec
+      </Button>
+    </Analytics>
+  );
+};

frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Rest/List.tsx

@@ -16,6 +16,7 @@ import _push from '../../Data/push';
 import Landing from './Landing';
 import { badgeSort } from './utils';
 import CollapsibleToggle from '../../../Common/CollapsibleToggle/CollapsibleToggle';
+import { ExportOpenApiButton } from './Form/ExportOpenAPI';
 
 const ListComponent: React.FC<Props> = ({
   restEndpoints,
@@ -59,8 +60,10 @@ const ListComponent: React.FC<Props> = ({
             <LearnMoreLink href="https://hasura.io/docs/latest/graphql/core/api-reference/restified.html" />
           </div>
         </div>
-
-        <div className="mt-md overflow-x-auto border border-gray-300 rounded">
+        <div className="pt-xs text-right">
+          <ExportOpenApiButton />
+        </div>
+        <div className="mt-xs overflow-x-auto border border-gray-300 rounded">
           <table className="min-w-full divide-y divide-gray-200">
             <thead className="bg-gray-50">
               <th className="px-sm py-xs max-w-xs text-left text-sm bg-gray-50 font-semibold text-gray-600 uppercase tracking-wider">