Consistent Apps in Dev Server (#1198)

* Same gap as other buttons * Delete unused code * Same apps terminology in dev server * Put Apps links in tables inside Pill
inngest · Feb 28, 2024 · bcf9fdb · bcf9fdb
1 parent 9990064
commit bcf9fdb
Show file tree

Hide file tree

Showing 18 changed files with 107 additions and 197 deletions.
diff --git a/...(organization-active)/(dashboard)/env/[environmentSlug]/apps/[externalID]/ResyncModal.tsx b/...(organization-active)/(dashboard)/env/[environmentSlug]/apps/[externalID]/ResyncModal.tsx
@@ -125,7 +125,7 @@ export default function ResyncModal({ isOpen, onClose, url, platform }: Props) {
         {failure && !isSyncing && <DeployFailure {...failure} />}
       </div>
 
-      <div className="flex flex-row justify-end gap-4 p-6">
+      <div className="flex justify-end gap-2 p-6">
         <Button
           appearance="outlined"
           btnAction={onClose}

diff --git a/...c/app/(organization-active)/(dashboard)/env/[environmentSlug]/functions/FunctionTable.tsx b/...c/app/(organization-active)/(dashboard)/env/[environmentSlug]/functions/FunctionTable.tsx
@@ -164,15 +164,9 @@ function createColumns(environmentSlug: string) {
         }
 
         return (
-          <Link
-            key="name"
-            href={`/env/${environmentSlug}/apps/${encodeURIComponent(appExternalID)}` as Route}
-            internalNavigation
-            showIcon={false}
-            className="px-2 py-3 text-sm font-medium"
-          >
-            {appExternalID}
-          </Link>
+          <Pill href={`/env/${environmentSlug}/apps/${encodeURIComponent(appExternalID)}` as Route}>
+            <PillContent type="APP">{appExternalID}</PillContent>
+          </Pill>
         );
       },
       header: 'App',

diff --git a/...n-active)/(dashboard)/env/[environmentSlug]/functions/[slug]/InvokeButton/InvokeModal.tsx b/...n-active)/(dashboard)/env/[environmentSlug]/functions/[slug]/InvokeButton/InvokeModal.tsx
@@ -72,7 +72,7 @@ export function InvokeModal({ doesFunctionAcceptPayload, isOpen, onCancel, onCon
           )}
         </Modal.Body>
 
-        <Modal.Footer className="flex flex-row justify-end gap-4">
+        <Modal.Footer className="flex justify-end gap-2">
           <Button appearance="outlined" btnAction={onCancel} label="Cancel" />
           <Button appearance="solid" kind="primary" label="Invoke Function" type="submit" />
         </Modal.Footer>

diff --git a/ui/apps/dev-server-ui/src/app/(dashboard)/apps/page.tsx b/ui/apps/dev-server-ui/src/app/(dashboard)/apps/page.tsx
@@ -2,18 +2,19 @@
 
 import { useMemo } from 'react';
 import { Link } from '@inngest/components/Link';
+import { IconApp } from '@inngest/components/icons/App';
 
 import AddAppButton from '@/components/App/AddAppButton';
 import AppCard from '@/components/App/AppCard';
-import { IconSpinner, IconWindow } from '@/icons';
+import { IconSpinner } from '@/icons';
 import { useGetAppsQuery } from '@/store/generated';
 
 export default function AppList() {
   const { data } = useGetAppsQuery(undefined, { pollingInterval: 1500 });
   const apps = data?.apps || [];
 
-  const connectedApps = apps.filter((app) => app.connected === true);
-  const numberOfConnectedApps = connectedApps.length;
+  const syncedApps = apps.filter((app) => app.connected === true);
+  const numberOfSyncedApps = syncedApps.length;
 
   const memoizedAppCards = useMemo(() => {
     return apps.map((app) => {
@@ -24,7 +25,7 @@ export default function AppList() {
   return (
     <div className="flex h-full flex-col overflow-y-scroll px-10 py-6">
       <header className="mb-8">
-        <h1 className="text-lg text-slate-50">Connected Apps</h1>
+        <h1 className="text-lg text-slate-50">Synced Apps</h1>
         <p className="my-4 flex gap-1">
           This is a list of all apps. We auto-detect apps that you have defined in{' '}
           <Link href="https://www.inngest.com/docs/local-development#connecting-apps-to-the-dev-server">
@@ -40,9 +41,9 @@ export default function AppList() {
         </div>
       </header>
       <div className="mb-4 flex items-center gap-3">
-        <IconWindow className="h-5 w-5" />
+        <IconApp />
         <p className="text-slate-200">
-          {numberOfConnectedApps} / {apps.length} Apps Connected
+          {numberOfSyncedApps} / {apps.length} Apps Synced
         </p>
       </div>
       <div className="grid min-h-max grid-cols-1 gap-6 md:grid-cols-2">{memoizedAppCards}</div>

diff --git a/ui/apps/dev-server-ui/src/app/(dashboard)/functions/page.tsx b/ui/apps/dev-server-ui/src/app/(dashboard)/functions/page.tsx
@@ -51,7 +51,11 @@ const columns = [
   }),
   columnHelper.accessor('app', {
     header: () => <span>App</span>,
-    cell: (props) => props.getValue()?.name,
+    cell: (props) => (
+      <Pill className="text-sm font-normal">
+        <PillContent type="APP">{props.getValue()?.name}</PillContent>
+      </Pill>
+    ),
     enableSorting: false,
     enableGlobalFilter: false,
   }),

diff --git a/ui/apps/dev-server-ui/src/app/(dashboard)/layout.tsx b/ui/apps/dev-server-ui/src/app/(dashboard)/layout.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import { TooltipProvider } from '@inngest/components/Tooltip';
+import { IconApp } from '@inngest/components/icons/App';
+import { IconFunction } from '@inngest/components/icons/Function';
 import { cn } from '@inngest/components/utils/classNames';
 import { Toaster } from 'sonner';
 import colors from 'tailwindcss/colors';
@@ -9,13 +11,13 @@ import BG from '@/components/BG';
 import Header from '@/components/Header';
 import Navbar from '@/components/Navbar/Navbar';
 import NavbarLink from '@/components/Navbar/NavbarLink';
-import { IconFeed, IconFunction, IconWindow } from '@/icons';
+import { IconFeed } from '@/icons';
 import { useGetAppsQuery } from '@/store/generated';
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
-  const { hasConnectedError } = useGetAppsQuery(undefined, {
+  const { hasSyncingError } = useGetAppsQuery(undefined, {
     selectFromResult: (result) => ({
-      hasConnectedError: result?.data?.apps?.some((app) => app.connected === false),
+      hasSyncingError: result?.data?.apps?.some((app) => app.connected === false),
     }),
     pollingInterval: 1500,
   });
@@ -31,12 +33,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
       <Header>
         <Navbar>
           <NavbarLink icon={<IconFeed />} href="/stream" tabName="Stream" />
-          <NavbarLink
-            icon={<IconWindow />}
-            href="/apps"
-            hasError={hasConnectedError}
-            tabName="Apps"
-          />
+          <NavbarLink icon={<IconApp />} href="/apps" hasError={hasSyncingError} tabName="Apps" />
           <NavbarLink icon={<IconFunction />} href="/functions" tabName="Functions" />
         </Navbar>
       </Header>

diff --git a/ui/apps/dev-server-ui/src/app/(dashboard)/stream/SourceBadge.tsx b/ui/apps/dev-server-ui/src/app/(dashboard)/stream/SourceBadge.tsx
diff --git a/ui/apps/dev-server-ui/src/app/(dashboard)/stream/Stream.tsx b/ui/apps/dev-server-ui/src/app/(dashboard)/stream/Stream.tsx
@@ -24,8 +24,6 @@ import FunctionRunList from './FunctionRunList';
 
 // import OutputList from './OutputList';
 
-// import SourceBadge from './SourceBadge';
-
 const columnHelper = createColumnHelper<StreamItem>();
 
 const columns = [
@@ -39,12 +37,6 @@ const columns = [
     size: 250,
     minSize: 250,
   }),
-  // The Source BE is not built yet
-  // columnHelper.accessor((row) => row.source.name, {
-  //   id: 'source',
-  //   cell: (props) => <SourceBadge row={props.row} />,
-  //   header: () => <span>Source</span>,
-  // }),
   columnHelper.accessor('type', {
     header: () => <span>Trigger</span>,
     cell: (props) => (

diff --git a/ui/apps/dev-server-ui/src/components/App/AddAppButton.tsx b/ui/apps/dev-server-ui/src/components/App/AddAppButton.tsx
@@ -9,7 +9,11 @@ export default function AddAppButton() {
 
   return (
     <>
-      <Button label="Add App" icon={<IconPlus />} btnAction={() => setAddAppModalVisible(true)} />
+      <Button
+        label="Sync New App"
+        icon={<IconPlus />}
+        btnAction={() => setAddAppModalVisible(true)}
+      />
       {isAddAppModalVisible && (
         <AddAppModal isOpen={isAddAppModalVisible} onClose={() => setAddAppModalVisible(false)} />
       )}

diff --git a/ui/apps/dev-server-ui/src/components/App/AddAppModal.tsx b/ui/apps/dev-server-ui/src/components/App/AddAppModal.tsx
@@ -67,45 +67,43 @@ export default function AddAppModal({ isOpen, onClose }: AddAppModalProps) {
   }
 
   return (
-    <Modal
-      title="Add Inngest App"
-      description="Connect your Inngest application to the Dev Server"
-      isOpen={isOpen}
-      onClose={onClose}
-      footer={
-        <div className="flex items-center justify-between">
-          <Button label="Cancel" appearance="outlined" btnAction={onClose} />
-          <Button
-            disabled={isDisabled || isUrlInvalid}
-            label="Connect App"
-            type="submit"
-            form="add-app"
-          />
-        </div>
-      }
-    >
-      <form id="add-app" onSubmit={handleSubmit}>
-        <div className="p-6">
-          <label htmlFor="addAppUrlModal" className="text-sm font-semibold text-white">
-            App URL
-            <span className="block pb-4 text-sm text-slate-500">The URL of your application</span>
-          </label>
-          <Input
-            id="addAppUrlModal"
-            value={inputUrl}
-            placeholder="http://localhost:3000/api/inngest"
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            isInvalid={isUrlInvalid}
-          />
-        </div>
-        {isUrlInvalid && inputUrl.length > 0 && (
-          <p className="flex items-center gap-2 bg-rose-600/50 px-6 py-2 text-sm text-white">
-            <IconExclamationTriangle />
-            Please enter a valid URL
-          </p>
-        )}
-      </form>
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <Modal.Header description="Sync your Inngest application to the Dev Server">
+        Sync App
+      </Modal.Header>
+      <Modal.Body>
+        <form id="add-app" onSubmit={handleSubmit}>
+          <div>
+            <label htmlFor="addAppUrlModal" className="text-sm font-semibold text-white">
+              App URL
+              <span className="block pb-4 text-sm text-slate-500">The URL of your application</span>
+            </label>
+            <Input
+              id="addAppUrlModal"
+              value={inputUrl}
+              placeholder="http://localhost:3000/api/inngest"
+              onChange={handleChange}
+              onKeyDown={handleKeyDown}
+              isInvalid={isUrlInvalid}
+            />
+          </div>
+          {isUrlInvalid && inputUrl.length > 0 && (
+            <p className="flex items-center gap-2 bg-rose-600/50 px-6 py-2 text-sm text-white">
+              <IconExclamationTriangle />
+              Please enter a valid URL
+            </p>
+          )}
+        </form>
+      </Modal.Body>
+      <Modal.Footer className="flex justify-end gap-2">
+        <Button label="Cancel" appearance="outlined" btnAction={onClose} />
+        <Button
+          disabled={isDisabled || isUrlInvalid}
+          label="Sync App"
+          type="submit"
+          form="add-app"
+        />
+      </Modal.Footer>
     </Modal>
   );
 }
diff --git a/ui/apps/dev-server-ui/src/components/App/AppCard.tsx b/ui/apps/dev-server-ui/src/components/App/AppCard.tsx
@@ -98,19 +98,19 @@ export default function AppCard({ app }: { app: App }) {
 
   return (
     <div>
-      <AppCardHeader connected={app.connected} functionCount={app.functionCount} />
+      <AppCardHeader synced={app.connected} functionCount={app.functionCount} />
       <div className="divide-y divide-slate-700/30 rounded-b-md border border-slate-700/30 bg-slate-800/30">
         {!app.name ? (
           <div className="flex items-center gap-2 p-4 pr-6">
             <IconSpinner />
-            <p className="text-lg font-normal text-slate-400">Connecting...</p>
+            <p className="text-lg font-normal text-slate-400">Syncing...</p>
           </div>
         ) : (
           <div className="flex items-center justify-between px-6 py-4 ">
             {!app.connected ? (
               <div className="flex items-center gap-2">
                 <IconSpinner />
-                <p className="text-lg font-normal text-slate-400">Connecting to {app.name}...</p>
+                <p className="text-lg font-normal text-slate-400">Syncing to {app.name}...</p>
               </div>
             ) : (
               <p className=" text-lg text-white">{app.name}</p>
@@ -124,9 +124,9 @@ export default function AppCard({ app }: { app: App }) {
               <div className="">
                 <div className="flex items-center gap-3 text-base">
                   {app.connected ? (
-                    <>{<IconStatusCompleted />}Connected to App</>
+                    <>{<IconStatusCompleted />}Synced to app</>
                   ) : (
-                    <>{<IconStatusFailed />}No Connection to App</>
+                    <>{<IconStatusFailed />}Not synced to app</>
                   )}
                 </div>
                 <p className="ui-open:hidden pl-10 text-slate-300 xl:hidden">{app.url}</p>
@@ -142,7 +142,7 @@ export default function AppCard({ app }: { app: App }) {
               {!app.connected && (
                 <>
                   <p className="pb-4 text-slate-400">
-                    The Inngest Dev Server can’t find your application. Ensure your full URL is
+                    The Inngest Dev Server can&apos;t find your application. Ensure your full URL is
                     correct, including the correct port. Inngest automatically scans{' '}
                     <span className="text-white">multiple ports</span> by default.
                   </p>
@@ -195,7 +195,7 @@ export default function AppCard({ app }: { app: App }) {
               </div>
               {!app.connected && (
                 <Link className="w-fit" href="https://www.inngest.com/docs/sdk/serve">
-                  Connecting to the Dev Server
+                  Syncing to the Dev Server
                 </Link>
               )}
             </>
@@ -209,14 +209,14 @@ export default function AppCard({ app }: { app: App }) {
                   <>
                     {app.connected && <IconStatusCompleted />}
                     {!app.connected && <IconStatusCanceled />}
-                    {app.functionCount} Function
-                    {app.functionCount === 1 ? '' : 's'} Registered
+                    {app.functionCount} function
+                    {app.functionCount === 1 ? '' : 's'} registered
                   </>
                 )}
                 {app.functionCount < 1 && (
                   <>
                     <IconStatusCanceled />
-                    No Functions Found
+                    No functions found
                   </>
                 )}
               </div>