[Laravel Forge] Update deprecated components, expand search, add breadcrumbs

extensions/laravel-forge/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Laravel Forge Changelog
+
+## [Better search and updated UI] - 2022-04-02
+- Update Raycast deprecated components
+- Add new transition and error views
+- Add server search by site and site alias
+- Add positional breadcrumbs to show server/site relationship
+- Various type improvements and code tweaks

extensions/laravel-forge/README.md

@@ -4,3 +4,4 @@ A command center for sites managed by [Laravel Forge](https://forge.laravel.com/
 Get an API token here: https://forge.laravel.com/user-profile/api
 
 Source repo: https://github.com/KevinBatdorf/laravel-forge-raycast
+

extensions/laravel-forge/package.json

@@ -9,6 +9,10 @@
     "macbookandrew"
   ],
   "license": "MIT",
+  "categories": [
+    "Productivity",
+    "Developer Tools"
+  ],
   "commands": [
     {
       "name": "index",
@@ -56,21 +60,21 @@
     }
   ],
   "dependencies": {
-    "@raycast/api": "^1.26.3",
+    "@raycast/api": "^1.31.0",
     "lodash": "^4.17.21",
-    "node-fetch": "^3.1.0"
+    "node-fetch": "^3.2.3"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.178",
-    "@types/node": "~17.0.1",
-    "@types/react": "^17.0.37",
-    "@typescript-eslint/eslint-plugin": "^5.7.0",
-    "@typescript-eslint/parser": "^5.7.0",
-    "eslint": "^8.5.0",
-    "eslint-config-prettier": "^8.3.0",
-    "prettier": "2.5.1",
-    "react-devtools": "^4.22.1",
-    "typescript": "^4.5.4"
+    "@types/lodash": "^4.14.181",
+    "@types/node": "~17.0.23",
+    "@types/react": "^17.0.43",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
+    "eslint": "^8.12.0",
+    "eslint-config-prettier": "^8.5.0",
+    "prettier": "2.6.1",
+    "react-devtools": "^4.24.3",
+    "typescript": "^4.6.3"
   },
   "scripts": {
     "build": "ray build -e dist",

extensions/laravel-forge/src/Server.tsx

@@ -1,15 +1,4 @@
-import {
-  ActionPanel,
-  CopyToClipboardAction,
-  List,
-  OpenInBrowserAction,
-  Icon,
-  preferences,
-  PushAction,
-  allLocalStorageItems,
-  setLocalStorageItem,
-  LocalStorageValues,
-} from "@raycast/api";
+import { ActionPanel, List, Icon, Action, getPreferenceValues, LocalStorage } from "@raycast/api";
 import { useEffect, useState } from "react";
 import { Server } from "./api/Server";
 import { Site } from "./api/Site";
@@ -18,8 +7,9 @@ import { getServerColor, useIsMounted } from "./helpers";
 
 export const ServersList = () => {
   const [servers, setServers] = useState<IServer[]>([]);
-  const [siteData, setSiteData] = useState<LocalStorageValues>({});
+  const [siteData, setSiteData] = useState<LocalStorage.Values>({});
   const [loading, setLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState("");
   const isMounted = useIsMounted();
 
   /**
@@ -33,40 +23,45 @@ export const ServersList = () => {
     const key = `forge-sites-${serverId.toString()}`;
     // If the sites already exist in the cache, or not found, do nothign
     if (siteData[key] || !isMounted.current) return;
-    const server = servers.find((s) => s.id.toString() === serverId) as IServer;
+    const server = servers.find((s) => s?.id?.toString() === serverId) as IServer;
     if (!server) return;
     const thisSiteData = (await Site.getAll(server)) as ISite[] | undefined;
-    thisSiteData && (await setLocalStorageItem(`forge-sites-${serverId}`, JSON.stringify(thisSiteData)));
+    thisSiteData && (await LocalStorage.setItem(`forge-sites-${serverId}`, JSON.stringify(thisSiteData)));
   };
 
   useEffect(() => {
-    allLocalStorageItems()
+    LocalStorage.allItems()
       .then((data) => {
         if (!isMounted.current) return;
         const servers = data["forge-servers"];
         delete data["forge-servers"];
-        const serverList = JSON.parse(servers?.toString() ?? "[]") as Array<IServer>;
+        const serverList = JSON.parse(servers?.toString() ?? "[]") as IServer[];
         setServers(serverList?.length ? serverList : []);
         setSiteData(data ?? {});
       })
       .finally(() => {
         if (!isMounted.current) return;
-        Server.getAll().then(async (servers: Array<IServer> | undefined) => {
-          if (!isMounted.current) return;
-          setLoading(false);
-          // Add the server list to storage to avoid content flash
-          servers && setServers(servers);
-          await setLocalStorageItem("forge-servers", JSON.stringify(servers));
-        });
+        Server.getAll()
+          .then(async (servers: Array<IServer> | undefined) => {
+            if (!isMounted.current) return;
+            setLoading(false);
+            if (!servers?.length) return;
+            setServers(servers);
+            // Add the server list to storage to avoid content flash
+            await LocalStorage.setItem("forge-servers", JSON.stringify(servers));
+          })
+          .catch((error) => setErrorMessage(error.message));
       });
   }, []);
 
-  if (!servers.length && !loading) {
-    return (
-      <List>
-        <List.Item title="Nothing found..." />
-      </List>
-    );
+  if (errorMessage.length) {
+    return <EmptyView title={errorMessage} />;
+  }
+  if (loading) {
+    return <EmptyView title="Fetching servers..." />;
+  }
+  if (!servers.length) {
+    return <EmptyView title="No servers found" />;
   }
 
   return (
@@ -76,29 +71,37 @@ export const ServersList = () => {
       onSelectionChange={(serverId) => serverId && maybeFetchAndCacheSites(serverId)}
     >
       {servers.map((server: IServer) => {
-        const key = `forge-sites-${server.id.toString()}`;
+        const key = `forge-sites-${server?.id?.toString()}`;
         const sites = JSON.parse(siteData[key] ?? "[]") as ISite[];
         return <ServerListItem key={server.id} server={server} sites={sites} />;
       })}
     </List>
   );
 };
 
+const EmptyView = ({ title }: { title: string }) => (
+  <List>
+    <List.EmptyView icon={{ source: "forge-icon-64.png" }} title={title} />
+  </List>
+);
+
 const ServerListItem = ({ server, sites }: { server: IServer; sites: ISite[] }) => {
+  if (!server?.id) return null;
   return (
     <List.Item
       id={server.id.toString()}
       key={server.id}
-      title={server.name}
+      keywords={server.keywords}
+      accessoryTitle={server?.keywords?.join(", ")}
+      title={server?.name ?? "Server name undefined"}
       icon={{
         source: "server.png",
-        tintColor: getServerColor(server.provider),
+        tintColor: getServerColor(server?.provider ?? ""),
       }}
-      accessoryTitle={server.ipAddress}
       actions={
         <ActionPanel>
           <ActionPanel.Section>
-            <PushAction
+            <Action.Push
               title="Open Server Information"
               icon={Icon.Binoculars}
               target={<SingleServerView server={server} sites={sites} />}
@@ -114,10 +117,11 @@ const ServerListItem = ({ server, sites }: { server: IServer; sites: ISite[] })
 };
 
 const SingleServerView = ({ server, sites }: { server: IServer; sites: ISite[] }) => {
-  const sshUser = preferences?.laravel_forge_ssh_user?.value ?? "forge";
+  const preferences = getPreferenceValues();
+  const sshUser = preferences?.laravel_forge_ssh_user ?? "forge";
   return (
     <List searchBarPlaceholder="Search sites...">
-      <List.Section title={`Sites (${server.name})`}>
+      <List.Section title={`${server.name?.toUpperCase()} -> Sites`}>
         <SitesList server={server} sites={sites} />
       </List.Section>
       <List.Section title="Common Commands">
@@ -129,7 +133,7 @@ const SingleServerView = ({ server, sites }: { server: IServer; sites: ISite[] }
           accessoryTitle="forge.laravel.com"
           actions={
             <ActionPanel>
-              <OpenInBrowserAction url={`https://forge.laravel.com/servers/${server.id}`} />
+              <Action.OpenInBrowser url={`https://forge.laravel.com/servers/${server.id}`} />
             </ActionPanel>
           }
         />
@@ -141,7 +145,7 @@ const SingleServerView = ({ server, sites }: { server: IServer; sites: ISite[] }
           accessoryTitle={`ssh://${sshUser}@${server.ipAddress}`}
           actions={
             <ActionPanel>
-              <OpenInBrowserAction
+              <Action.OpenInBrowser
                 title={`Open SSH Connection (${sshUser})`}
                 url={`ssh://${sshUser}@${server.ipAddress}`}
               />
@@ -156,7 +160,7 @@ const SingleServerView = ({ server, sites }: { server: IServer; sites: ISite[] }
           accessoryTitle={server.ipAddress}
           actions={
             <ActionPanel>
-              <CopyToClipboardAction title="Copy IP Address" content={server.ipAddress} />
+              <Action.CopyToClipboard title="Copy IP Address" content={server?.ipAddress ?? ""} />
             </ActionPanel>
           }
         />
@@ -169,7 +173,7 @@ const SingleServerView = ({ server, sites }: { server: IServer; sites: ISite[] }
           icon={Icon.ArrowClockwise}
           actions={
             <ActionPanel>
-              <ActionPanel.Item
+              <Action
                 icon={Icon.ArrowClockwise}
                 title="Reboot Server"
                 onAction={async () => await Server.reboot({ serverId: server.id, token: server.apiToken })}
@@ -186,7 +190,7 @@ const SingleServerView = ({ server, sites }: { server: IServer; sites: ISite[] }
               icon={Icon.ArrowClockwise}
               actions={
                 <ActionPanel>
-                  <ActionPanel.Item
+                  <Action
                     icon={Icon.ArrowClockwise}
                     title={`Reboot ${label}`}
                     onAction={async () =>
@@ -205,48 +209,50 @@ const SingleServerView = ({ server, sites }: { server: IServer; sites: ISite[] }
 };
 
 export const ServerCommands = ({ server }: { server: IServer }) => {
-  const sshUser = preferences?.laravel_forge_ssh_user?.value ?? "forge";
+  const preferences = getPreferenceValues();
+  const sshUser = preferences?.laravel_forge_ssh_user ?? "forge";
   return (
     <>
-      <OpenInBrowserAction title="Open on Laravel Forge" url={`https://forge.laravel.com/servers/${server.id}`} />
-      <OpenInBrowserAction
+      <Action.OpenInBrowser title="Open on Laravel Forge" url={`https://forge.laravel.com/servers/${server.id}`} />
+      <Action.OpenInBrowser
         icon={Icon.Terminal}
         title={`Open SSH Connection (${sshUser})`}
         url={`ssh://${sshUser}@${server.ipAddress}`}
       />
-      <ActionPanel.Item
+      <Action
         icon={Icon.ArrowClockwise}
         title="Reboot Server"
         onAction={() => Server.reboot({ serverId: server.id, token: server.apiToken })}
       />
-      <CopyToClipboardAction title="Copy IP Address" content={server.ipAddress} />
+      <Action.CopyToClipboard title="Copy IP Address" content={server?.ipAddress ?? ""} />
     </>
   );
 };
 
 export interface IServer {
-  apiToken: string;
-  id: number;
-  credentialId: string;
-  name: string;
-  type: string;
-  provider: string;
-  providerId: string;
-  size: string;
-  region: string;
-  dbStatus: string | null;
-  redisStatus: string | null;
-  phpVersion: string;
-  phpCliVersion: string;
-  databaseType: string;
-  ipAddress: string;
-  sshPort: number;
-  privateIpAddress: string;
-  blackfireStatus: string | null;
-  papertrailStatus: string | null;
-  revoked: boolean;
-  createdAt: string;
-  isReady: boolean;
-  tags: Array<string>;
-  network: string;
+  apiToken?: string;
+  id?: number;
+  credentialId?: string | null;
+  name?: string;
+  type?: string;
+  provider?: string;
+  providerId?: string | null;
+  size?: string;
+  region?: string;
+  dbStatus?: string | null;
+  redisStatus?: string | null;
+  phpVersion?: string;
+  phpCliVersion?: string;
+  databaseType?: string;
+  ipAddress?: string;
+  sshPort?: number;
+  privateIpAddress?: string;
+  blackfireStatus?: string | null;
+  papertrailStatus?: string | null;
+  revoked?: boolean;
+  createdAt?: string;
+  isReady?: boolean;
+  tags?: string[];
+  keywords?: string[];
+  network?: string[];
 }