(intoduced) API doc and GraphiQL embedded page under developer

apps/dashboard/package.json

@@ -26,23 +26,30 @@
     "@uiw/react-codemirror": "^4.19.4",
     "axios": "^0.25.0",
     "bulma": "^0.9.4",
+    "core-js": "^3.34.0",
+    "graphiql": "^3.0.10",
+    "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
+    "graphql-ws": "^5.14.2",
     "highlight.js": "^11.2.0",
     "js-beautify": "^1.14.7",
     "libphonenumber-js": "^1.9.23",
     "lodash.groupby": "^4.6.0",
     "lodash.isequal": "^4.5.0",
     "lodash.snakecase": "^4.1.1",
     "lodash.tonumber": "^4.0.3",
+    "mobx": "^6.12.0",
     "moment": "^2.29.4",
     "next": "^13.4.20-canary.13",
     "next-auth": "^4.24.5",
     "pino": "^7.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "redoc": "^2.1.3",
     "request-ip": "^3.3.0",
     "rxjs": "^7.3.0",
-    "sass": "^1.37.5"
+    "sass": "^1.37.5",
+    "styled-components": "^6.1.1"
   },
   "devDependencies": {
     "@types/node": "20.10.0",

apps/dashboard/src/layouts/admin-layout.tsx

@@ -3,51 +3,56 @@ import { AdminNavbar } from '@karrio/ui/components/admin-navbar';
 import { Notifier } from '@karrio/ui/components/notifier';
 import React from 'react';
 import { AppLink } from '@karrio/ui/components/app-link';
+import { ModeIndicator } from '@karrio/ui/components/mode-indicator';
 
 
 export const AdminLayout: React.FC<{ showModeIndicator?: boolean, children?: React.ReactNode }> = ({ children, ...props }) => {
   return (
-    <div className="is-flex is-flex-direction-column" style={{ minHeight: '100vh' }}>
+    <>
 
-      <Notifier />
-      <AdminNavbar showModeIndicator={props.showModeIndicator} />
+      <div className="is-flex is-flex-direction-column" style={{ minHeight: '100vh' }}>
+        {props.showModeIndicator && <ModeIndicator />}
 
-      <div className="is-flex is-flex-grow-1" style={{ paddingTop: 0, height: '100%' }}>
-        <div className="modal-background"></div>
-        <div className="modal-card admin-modal" style={{ width: '100%' }}>
+        <Notifier />
+        <AdminNavbar />
 
-          <section className="modal-card-body modal-form p-0">
-            <header className="form-floating-header p-2 is-flex is-justify-content-space-between">
-              <span className="icon-text has-text-weight-bold is-size-6">
-                <span className="icon">
-                  <i className="fas fa-tools"></i>
-                </span>
-                <span>Administration</span>
-              </span>
-              <div>
-                <AppLink href="/" className="button is-small is-white" shallow={false} prefetch={false}>
-                  <span className="icon is-size-6">
-                    <i className="fa fa-times"></i>
+        <div className="is-flex is-flex-grow-1" style={{ paddingTop: 0, height: '100%' }}>
+          <div className="modal-background"></div>
+          <div className="modal-card admin-modal" style={{ width: '100%' }}>
+
+            <section className="modal-card-body modal-form p-0">
+              <header className="form-floating-header p-2 is-flex is-justify-content-space-between">
+                <span className="icon-text has-text-weight-bold is-size-6">
+                  <span className="icon">
+                    <i className="fas fa-tools"></i>
                   </span>
-                </AppLink>
-              </div>
-            </header>
+                  <span>Administration</span>
+                </span>
+                <div>
+                  <AppLink href="/" className="button is-small is-white" shallow={false} prefetch={false}>
+                    <span className="icon is-size-6">
+                      <i className="fa fa-times"></i>
+                    </span>
+                  </AppLink>
+                </div>
+              </header>
 
-            <div className="admin-wrapper is-relative">
+              <div className="admin-wrapper is-relative">
 
-              <AdminSidebar />
+                <AdminSidebar />
 
-              <div className="plex-wrapper" style={{ background: 'inherit', minHeight: '70vh' }}>
-                {children}
-              </div>
+                <div className="plex-wrapper" style={{ background: 'inherit', minHeight: '70vh' }}>
+                  {children}
+                </div>
 
-            </div>
+              </div>
 
-          </section>
+            </section>
 
+          </div>
         </div>
-      </div>
 
-    </div>
+      </div>
+    </>
   )
 };

apps/dashboard/src/layouts/dashboard-layout.tsx

@@ -1,27 +1,26 @@
 import { ExpandedSidebar } from '@karrio/ui/components/expanded-sidebar';
+import { ModeIndicator } from '@karrio/ui/components/mode-indicator';
 import { Notifier } from '@karrio/ui/components/notifier';
 import { Navbar } from '@karrio/ui/components/navbar';
-import { Footer } from '@karrio/ui/components/footer';
 import React from 'react';
 
 
 export const DashboardLayout: React.FC<{ showModeIndicator?: boolean, children?: React.ReactNode }> = ({ children, ...props }) => {
   return (
     <>
+      {props.showModeIndicator && <ModeIndicator />}
       <ExpandedSidebar />
 
-      <div className="plex-wrapper is-flex is-flex-direction-column">
-        <div className="wrapper-inner is-flex-grow-1 mb-3">
+      <div className="plex-wrapper is-flex is-flex-direction-column pb-0">
+        <div className="wrapper-inner is-flex-grow-1 pb-0">
           <Notifier />
-          <Navbar showModeIndicator={props.showModeIndicator} />
+          <Navbar />
 
-          <div className="dashboard-content is-relative" style={{ paddingTop: 0, height: '100%' }}>
+          <div className="dashboard-content is-relative pt-0 pb-4" style={{ minHeight: "93vh" }}>
             {children}
           </div>
 
         </div>
-
-        <Footer />
       </div>
 
     </>

apps/dashboard/src/layouts/embed-layout.tsx

@@ -0,0 +1,20 @@
+import { ExpandedSidebar } from '@karrio/ui/components/expanded-sidebar';
+import { ModeIndicator } from '@karrio/ui/components/mode-indicator';
+import React from 'react';
+
+
+export const EmbedLayout: React.FC<{ showModeIndicator?: boolean, children?: React.ReactNode }> = ({ children, ...props }) => {
+  return (
+    <>
+      {props.showModeIndicator && <ModeIndicator />}
+      <ExpandedSidebar />
+
+      <div className="plex-wrapper is-relative p-0">
+
+        {children}
+
+      </div>
+
+    </>
+  )
+};

apps/dashboard/src/modules/Admin/carrier_connections.tsx

@@ -20,7 +20,7 @@ export default function Page(pageProps: any) {
     };
 
     return AuthenticatedPage((
-        <AdminLayout>
+        <AdminLayout showModeIndicator={true}>
             <Head><title>{`Administration - ${APP_NAME}`}</title></Head>
 
             <Component />

apps/dashboard/src/modules/Admin/index.tsx

@@ -20,7 +20,7 @@ export default function Page(pageProps: any) {
     };
 
     return AuthenticatedPage((
-        <AdminLayout>
+        <AdminLayout showModeIndicator={true}>
             <Head><title>{`Administration - ${APP_NAME}`}</title></Head>
 
             <Component />

apps/dashboard/src/modules/Developers/docs.tsx

@@ -0,0 +1,38 @@
+import { AuthenticatedPage } from "@/layouts/authenticated-page";
+import { useAPIMetadata } from "@karrio/hooks/api-metadata";
+import { useSyncedSession } from "@karrio/hooks/session";
+import { EmbedLayout } from "@/layouts/embed-layout";
+import { RedocStandalone } from 'redoc';
+import { url$ } from "@karrio/lib";
+import Head from "next/head";
+import React from "react";
+
+export { getServerSideProps } from "@/context/main";
+
+export default function Page(pageProps: any) {
+  const Component: React.FC = () => {
+    const { metadata } = useAPIMetadata();
+
+    return (
+      <>
+
+        <RedocStandalone
+          specUrl={url$`${metadata?.HOST}/shipping-openapi`}
+          options={{
+            nativeScrollbars: true,
+          }}
+        />
+
+      </>
+    );
+  };
+
+  return AuthenticatedPage((
+    <EmbedLayout showModeIndicator={true}>
+      <Head><title>{`API Docs - ${(pageProps as any).metadata?.APP_NAME}`}</title></Head>
+
+      <Component />
+
+    </EmbedLayout>
+  ), pageProps)
+}

apps/dashboard/src/modules/Developers/graphiql.tsx

@@ -0,0 +1,47 @@
+import { AuthenticatedPage } from "@/layouts/authenticated-page";
+import { useAPIMetadata } from "@karrio/hooks/api-metadata";
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { useSyncedSession } from "@karrio/hooks/session";
+import { EmbedLayout } from "@/layouts/embed-layout";
+import { GraphiQL } from 'graphiql';
+import Head from "next/head";
+import React from "react";
+
+import 'graphiql/graphiql.css';
+
+export { getServerSideProps } from "@/context/main";
+
+export default function Page(pageProps: any) {
+  const Component: React.FC = () => {
+    const { metadata } = useAPIMetadata();
+    const { query: { data: session } } = useSyncedSession();
+
+    const fetcher = React.useMemo(() => {
+      return createGraphiQLFetcher({
+        url: metadata?.GRAPHQL,
+        headers: {
+          ...(!!session?.orgId ? { 'x-org-id': session.orgId } : {}),
+          ...(!!session?.testMode ? { 'x-test-mode': session.testMode } : {}),
+          ...(!!session?.accessToken ? { 'authorization': `Bearer ${session.accessToken}` } : {})
+        },
+      })
+    }, [session.accessToken]);
+
+    return (
+      <div className="playground-wrapper" style={{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0 }}>
+
+        <GraphiQL fetcher={fetcher} />
+
+      </div>
+    );
+  };
+
+  return AuthenticatedPage((
+    <EmbedLayout showModeIndicator={true}>
+      <Head><title>{`GraphiQL - ${(pageProps as any).metadata?.APP_NAME}`}</title></Head>
+
+      <Component />
+
+    </EmbedLayout>
+  ), pageProps)
+}

apps/dashboard/src/pages/_sites/[site]/developers/docs.tsx

@@ -0,0 +1 @@
+export { default, getServerSideProps } from "@/modules/Developers/docs";

apps/dashboard/src/pages/_sites/[site]/developers/graphiql.tsx

@@ -0,0 +1 @@
+export { default, getServerSideProps } from "@/modules/Developers/graphiql";

apps/dashboard/src/pages/_sites/[site]/test/developers/docs.tsx

@@ -0,0 +1 @@
+export { default, getServerSideProps } from "@/modules/Developers/docs";

apps/dashboard/src/pages/_sites/[site]/test/developers/graphiql.tsx

@@ -0,0 +1 @@
+export { default, getServerSideProps } from "@/modules/Developers/graphiql";

apps/dashboard/src/pages/developers/docs.tsx

@@ -0,0 +1 @@
+export { default, getServerSideProps } from "@/modules/Developers/docs";

apps/dashboard/src/pages/developers/graphiql.tsx

@@ -0,0 +1 @@
+export { default, getServerSideProps } from "@/modules/Developers/graphiql";

apps/dashboard/src/pages/test/developers/docs.tsx

@@ -0,0 +1 @@
+export { default, getServerSideProps } from "@/modules/Developers/docs";

apps/dashboard/src/pages/test/developers/graphiql.tsx

@@ -0,0 +1 @@
+export { default, getServerSideProps } from "@/modules/Developers/graphiql";

apps/dashboard/src/styles/dashboard.scss

@@ -373,8 +373,9 @@ hr {
 }
 
 .mode-indicator {
-  position: absolute;
-  top: 60px;
+  position: fixed;
+  top: 0;
+  z-index: 40;
   border-top: 1px solid rgb(196, 76, 52);
   padding: 0;
   text-align: center;
@@ -385,10 +386,10 @@ hr {
     margin: 0 auto;
     background: rgb(196, 76, 52);
     display: inline;
-    padding: 2px 14px;
+    padding: 0 10px;
     border-radius: 0 0 5px 5px;
     color: white;
-    font-size: 0.55em;
+    font-size: 0.60em;
     font-weight: bold;
   }
 }

apps/dashboard/src/styles/plex/layout/_layout.scss

@@ -281,9 +281,9 @@ Main wrappers
 .plex-wrapper {
   width: calc(100% - 240px);
   margin-left: 240px;
-  min-height: 98vh;
+  min-height: 100vh;
   background: $white;
-  padding: 0 40px;
+  padding: 0 20px;
   transition: all 0.3s;
 
   &.is-expanded {

modules/graph/karrio/server/graph/utils.py

@@ -1,4 +1,3 @@
-import enum
 import typing
 import base64
 import logging