Skip to content

Commit

Permalink
(reorganize) sidebar panels links
Browse files Browse the repository at this point in the history
  • Loading branch information
@danh91
danh91 committed Dec 16, 2023
1 parent 8b7560f commit fde45ec
Show file tree
Hide file tree
Showing 42 changed files with 535 additions and 324 deletions.
65 changes: 31 additions & 34 deletions .../dashboard/src/modules/Developers/api.tsx → ...hboard/src/modules/Developers/apikeys.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { GenerateAPIModal } from "@karrio/ui/modals/generate-api-dialog";
import { CopiableLink } from "@karrio/ui/components/copiable-link";
import { AuthenticatedPage } from "@/layouts/authenticated-page";
import { useContext, useEffect, useRef, useState } from "react";
import { DashboardLayout } from "@/layouts/dashboard-layout";
import { useAPIMetadata } from "@karrio/hooks/api-metadata";
import { AppLink } from "@karrio/ui/components/app-link";
import { Loading } from "@karrio/ui/components/loader";
import { useAPIToken } from "@karrio/hooks/api-token";
import Head from "next/head";
Expand Down Expand Up @@ -31,49 +31,46 @@ export default function ApiPage(pageProps: any) {
<>

<header className="px-0 pb-0 pt-4 is-flex is-justify-content-space-between">
<span className="title is-4">API</span>
<span className="title is-4">Developers</span>
<div></div>
</header>

{/* APIs Overview */}
<div className="card px-0 py-3">

<div className="p-3">
<span className="has-text-weight-bold is-size-6">Overview</span>
</div>

<hr className='my-1' style={{ height: '1px' }} />

<div className="is-flex my-0 px-3">
<div className="py-1" style={{ width: '40%' }}>API Version</div>
<div className="py-1" style={{ width: '40%' }}><code>{references?.VERSION}</code></div>
</div>
<div className="is-flex my-0 px-3">
<div className="py-1" style={{ width: '40%' }}>REST API</div>
<div className="py-1" style={{ width: '40%' }}>
<CopiableLink className="button is-white py-2 px-1" text={references?.HOST} />
</div>
</div>
<div className="is-flex my-0 px-3">
<div className="py-1" style={{ width: '40%' }}>GRAPHQL API</div>
<div className="py-1" style={{ width: '40%' }}>
<CopiableLink className="button is-white py-2 px-1" text={references?.GRAPHQL} />
</div>
</div>
<div className="tabs">
<ul>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers" shallow={false} prefetch={false}>
<span>Overview</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold is-active`}>
<AppLink href="/developers/apikeys" shallow={false} prefetch={false}>
<span>API Keys</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/webhooks" shallow={false} prefetch={false}>
<span>Webhooks</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/events" shallow={false} prefetch={false}>
<span>Events</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/logs" shallow={false} prefetch={false}>
<span>Logs</span>
</AppLink>
</li>
</ul>
</div>

{/* API Keys */}
<div className="card px-0 py-3 mt-6">

<div className="p-3">
<span className="has-text-weight-bold is-size-6">API Keys</span>
</div>

<hr className='my-1' style={{ height: '1px' }} />

<div className="is-flex my-0 px-3">
<div className="py-1" style={{ width: '40%' }}>
<p className="subtitle is-6 py-1">Token</p>
<p className="subtitle is-6 py-1">Public Key</p>
<p className="is-size-7 has-text-weight-semibold pr-6">
<span>Use this key to authenticate your API calls. </span>
<a
Expand Down
44 changes: 38 additions & 6 deletions apps/dashboard/src/modules/Developers/events.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { EventPreview, EventPreviewContext } from "@/components/event-preview";
import { AuthenticatedPage } from "@/layouts/authenticated-page";
import { EventsFilter } from "@karrio/ui/filters/events-filter";
import { DashboardLayout } from "@/layouts/dashboard-layout";
import { AppLink } from "@karrio/ui/components/app-link";
import { useLoader } from "@karrio/ui/components/loader";
import { Spinner } from "@karrio/ui/components/spinner";
import React, { useContext, useEffect } from "react";
Expand Down Expand Up @@ -44,21 +45,52 @@ export default function EventsPage(pageProps: any) {
<>

<header className="px-0 pb-0 pt-4 is-flex is-justify-content-space-between">
<span className="title is-4">Events</span>
<EventsFilter context={context} />
<span className="title is-4">Developers</span>
<div></div>
</header>

{!query.isFetched && <Spinner />}
<div className="tabs">
<ul>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers" shallow={false} prefetch={false}>
<span>Overview</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/apikeys" shallow={false} prefetch={false}>
<span>API Keys</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/webhooks" shallow={false} prefetch={false}>
<span>Webhooks</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold is-active`}>
<AppLink href="/developers/events" shallow={false} prefetch={false}>
<span>Events</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/logs" shallow={false} prefetch={false}>
<span>Logs</span>
</AppLink>
</li>
</ul>
</div>

{!query.isFetched && <Spinner />}

{(query.isFetched && (events?.edges || []).length > 0) && <div className="table-container">
<table className="events-table is-size-7 table is-fullwidth">

<tbody className="events-table">
<tr>
<td className="event is-size-7"><span className="ml-2">EVENT</span></td>
<td className="id has-text-right is-size-7">ID</td>
<td className="date has-text-right is-size-7"><span className="mr-2">DATE</span></td>
<td className="event is-size-7 px-0"><span className="ml-2">EVENT</span></td>
<td className="id has-text-right is-size-7"></td>
<td className="date has-text-right">
<EventsFilter context={context} />
</td>
</tr>

{(events?.edges || []).map(({ node: event }) => (
Expand Down
85 changes: 85 additions & 0 deletions apps/dashboard/src/modules/Developers/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { CopiableLink } from "@karrio/ui/components/copiable-link";
import { AuthenticatedPage } from "@/layouts/authenticated-page";
import { DashboardLayout } from "@/layouts/dashboard-layout";
import { useAPIMetadata } from "@karrio/hooks/api-metadata";
import { AppLink } from "@karrio/ui/components/app-link";
import Head from "next/head";

export { getServerSideProps } from "@/context/main";


export default function ApiPage(pageProps: any) {
const { references } = useAPIMetadata();

const Component: React.FC = () => {

return (
<>

<header className="px-0 pb-0 pt-4 is-flex is-justify-content-space-between">
<span className="title is-4">Developers</span>
<div></div>
</header>

<div className="tabs">
<ul>
<li className={`is-capitalized has-text-weight-semibold is-active`}>
<AppLink href="/developers" shallow={false} prefetch={false}>
<span>Overview</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/apikeys" shallow={false} prefetch={false}>
<span>API Keys</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/webhooks" shallow={false} prefetch={false}>
<span>Webhooks</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/events" shallow={false} prefetch={false}>
<span>Events</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/logs" shallow={false} prefetch={false}>
<span>Logs</span>
</AppLink>
</li>
</ul>
</div>

{/* APIs Overview */}
<div className="card px-0 py-3 mt-6">

<div className="is-flex my-0 px-3">
<div className="py-1" style={{ width: '40%' }}>API Version</div>
<div className="py-1" style={{ width: '40%' }}><code>{references?.VERSION}</code></div>
</div>
<div className="is-flex my-0 px-3">
<div className="py-1" style={{ width: '40%' }}>REST API</div>
<div className="py-1" style={{ width: '40%' }}>
<CopiableLink className="button is-white py-2 px-1" text={references?.HOST} />
</div>
</div>
<div className="is-flex my-0 px-3">
<div className="py-1" style={{ width: '40%' }}>GRAPHQL API</div>
<div className="py-1" style={{ width: '40%' }}>
<CopiableLink className="button is-white py-2 px-1" text={references?.GRAPHQL} />
</div>
</div>
</div>

</>
);
};

return AuthenticatedPage((
<DashboardLayout showModeIndicator={true}>
<Head><title>{`API Keys - ${references?.APP_NAME}`}</title></Head>
<Component />
</DashboardLayout>
), pageProps);
}
44 changes: 39 additions & 5 deletions apps/dashboard/src/modules/Developers/logs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import React, { useContext, useEffect } from "react";
import { useRouter } from "next/dist/client/router";
import { useLogs } from "@karrio/hooks/log";
import Head from "next/head";
import { AppLink } from "@karrio/ui/components/app-link";

export { getServerSideProps } from "@/context/main";

Expand Down Expand Up @@ -44,11 +45,42 @@ export default function LogsPage(pageProps: any) {

return (
<>

<header className="px-0 pb-0 pt-4 is-flex is-justify-content-space-between">
<span className="title is-4">Logs</span>
<LogsFilter context={context} />
<span className="title is-4">Developers</span>
<div></div>
</header>

<div className="tabs">
<ul>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers" shallow={false} prefetch={false}>
<span>Overview</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/apikeys" shallow={false} prefetch={false}>
<span>API Keys</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/webhooks" shallow={false} prefetch={false}>
<span>Webhooks</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/events" shallow={false} prefetch={false}>
<span>Events</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold is-active`}>
<AppLink href="/developers/logs" shallow={false} prefetch={false}>
<span>Logs</span>
</AppLink>
</li>
</ul>
</div>

<div className="tabs">
<ul>
<li className={`is-capitalized has-text-weight-semibold ${isNone(filter?.status) ? 'is-active' : ''}`}>
Expand All @@ -71,9 +103,11 @@ export default function LogsPage(pageProps: any) {

<tbody className="logs-table">
<tr>
<td className="status is-size-7"><span className="ml-2">STATUS</span></td>
<td className="description is-size-7">DESCRIPTION</td>
<td className="date has-text-right is-size-7"><span className="mr-2">DATE</span></td>
<td className="status is-size-7 is-vcentered"><span className="ml-2">STATUS</span></td>
<td className="description is-size-7 is-vcentered">DESCRIPTION</td>
<td className="date has-text-right is-size-7">
<LogsFilter context={context} />
</td>
</tr>

{(logs?.edges || []).map(({ node: log }) => (
Expand Down
53 changes: 42 additions & 11 deletions apps/dashboard/src/modules/Developers/webhooks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { AuthenticatedPage } from "@/layouts/authenticated-page";
import { NotificationType, WebhookType } from "@karrio/types";
import { DashboardLayout } from "@/layouts/dashboard-layout";
import { formatDateTime, isNoneOrEmpty } from "@karrio/lib";
import { AppLink } from "@karrio/ui/components/app-link";
import { Notify } from "@karrio/ui/components/notifier";
import { useRouter } from "next/dist/client/router";
import { useContext, useEffect } from "react";
Expand Down Expand Up @@ -53,24 +54,54 @@ export default function WebhooksPage(pageProps: any) {
<>

<header className="px-0 pb-0 pt-4 is-flex is-justify-content-space-between">
<span className="title is-4">Endpoints</span>
<div>
<button className="button is-small is-default is-pulled-right" onClick={() => editWebhook()}>
<span className="icon"><i className="fas fa-plus"></i></span>
<span>Add endpoint</span>
</button>
</div>
<span className="title is-4">Developers</span>
<div></div>
</header>

<div className="tabs">
<ul>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers" shallow={false} prefetch={false}>
<span>Overview</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/apikeys" shallow={false} prefetch={false}>
<span>API Keys</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold is-active`}>
<AppLink href="/developers/webhooks" shallow={false} prefetch={false}>
<span>Webhooks</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/events" shallow={false} prefetch={false}>
<span>Events</span>
</AppLink>
</li>
<li className={`is-capitalized has-text-weight-semibold`}>
<AppLink href="/developers/logs" shallow={false} prefetch={false}>
<span>Logs</span>
</AppLink>
</li>
</ul>
</div>

{((query.data?.webhooks.edges || []).length > 0) && <div className="table-container">
<table className="webhooks-table table is-fullwidth">

<tbody>
<tr>
<td className="url is-size-7">URL</td>
<td className="mode is-size-7">MODE</td>
<td className="last_event is-size-7">LAST EVENT</td>
<td className="action"></td>
<td className="url is-size-7 is-vcentered">URL</td>
<td className="mode is-size-7 is-vcentered">MODE</td>
<td className="last_event is-size-7 is-vcentered">LAST EVENT</td>
<td className="action pr-1">
<button className="button is-small is-default is-pulled-right" onClick={() => editWebhook()}>
<span className="icon"><i className="fas fa-plus"></i></span>
<span>Add endpoint</span>
</button>
</td>
</tr>

{(query.data?.webhooks.edges || []).map(({ node: webhook }) => (
Expand Down
0 ...board/src/modules/Developers/graphiql.tsx → ...hboard/src/modules/Resources/graphiql.tsx
View file
File renamed without changes.
0 ...dashboard/src/modules/Developers/docs.tsx → ...board/src/modules/Resources/reference.tsx
View file
File renamed without changes.
Loading

0 comments on commit fde45ec

Please sign in to comment.