[feat] Gitpod samples templates now in Raycast (#24)

* added gitpod samples' templates

* added better error handling and readability

* loading all default templates

* improved speed by changing schema and fetching all repos as sample queries

Author: Palanikannan1437

package.json

@@ -27,6 +27,18 @@
         "Open in Gitpod"
       ]
     },
+    {
+      "name": "open_template",
+      "title": "Find Gitpod Templates",
+      "subtitle": "Gitpod Templates",
+      "description": "Start your next app with our pre-configured templates",
+      "mode": "view",
+      "keywords": [
+        "gitpod",
+        "gp",
+        "template"
+      ]
+    },
     {
       "name": "menubar",
       "title": "Recent Repositories",

src/api/repository.graphql

@@ -77,6 +77,30 @@ query searchRepositories($query: String!, $numberOfItems: Int!) {
   }
 }
 
+query searchTemplateRepositories($query: String!, $numberOfItems: Int!) {
+  search(query: $query, first: $numberOfItems, type: REPOSITORY) {
+    repos: edges {
+      repo: node {
+        ... on Repository {
+          name
+          url
+          id
+          issues(states: OPEN) {
+            totalCount
+          }
+          pullRequests(states: OPEN) {
+            totalCount
+          }
+          owner {
+            login
+            avatarUrl(size: 64)
+          }
+        }
+      }
+    }
+  }
+}
+
 query getExistingRepoBranches(
   $orgName: String!
   $repoName: String!

src/components/TemplateListEmptyView.tsx

@@ -0,0 +1,66 @@
+import { List } from "@raycast/api";
+import { random } from "lodash";
+import { useEffect, useMemo, useState } from "react";
+
+type TemplateRepositoryFieldsFragment = {
+    name: string;
+    url: string;
+    id: string;
+    stargazerCount: number;
+    owner: { name?: string | null; login?: string; avatarUrl: string } 
+    issues: {totalCount: number}
+    pullRequests: {totalCount: number}
+};
+
+type TemplateListEmptyViewProps = {
+  searchText: string;
+  isLoading: boolean;
+  sampleRepositories: TemplateRepositoryFieldsFragment[] | undefined;
+};
+
+function searchStringInArray(str: string, strArray: string[] | undefined) {
+  if (strArray) {
+    for (let j = 0; j < strArray.length; j++) {
+      if (strArray[j].match(str)) {
+        return strArray[j];
+      }
+    }
+  }
+  return "";
+}
+
+export default function TemplateListEmptyView({
+  searchText,
+  isLoading,
+  sampleRepositories,
+}: TemplateListEmptyViewProps) {
+  const example = useMemo(
+    () =>
+      sampleRepositories?.map((repository) => {
+        return repository.name;
+      })[random(0, sampleRepositories?.length - 1)],
+    []
+  );
+
+  const sampleRepositoriesList = useMemo(() => sampleRepositories?.map((repository) => repository.name), []);
+
+  const [exampleSearch, setexampleSearchExampleSearch] = useState<string>(example as string);
+
+  useEffect(() => {
+    if (sampleRepositoriesList && example) {
+      setexampleSearchExampleSearch(searchStringInArray(searchText[0], sampleRepositoriesList) as string);
+    }
+  }, [searchText, sampleRepositoriesList, example]);
+
+  if (isLoading) {
+    return <List.EmptyView title={`Type query e.g "${exampleSearch ?? example}"`} />;
+  }
+
+  // If a search has been performed and returned no results, show a message.
+  if (searchText.length > 0) {
+    return <List.EmptyView title={`No templates found, try searching "${exampleSearch ?? example}"`} />;
+  }
+
+  // Unreachable, but required by TypeScript.
+  return null;
+}

src/components/TemplateListItem.tsx

@@ -0,0 +1,96 @@
+import { Color, List, ActionPanel, Action, showToast, Toast, open } from "@raycast/api";
+import { MutatePromise } from "@raycast/utils";
+
+import { GitpodIcons } from "../../constants";
+import { ExtendedRepositoryFieldsFragment } from "../generated/graphql";
+import { getGitHubUser } from "../helpers/users";
+
+type RepositoryListItemProps = {
+  repository: {
+    name: string;
+    url: string;
+    id: string;
+    stargazerCount: number;
+    owner: { name?: string | null; login?: string; avatarUrl: string } 
+    issues: {totalCount: number}
+    pullRequests: {totalCount: number}
+  };
+};
+
+export default function TemplateListItem({ repository }: RepositoryListItemProps) {
+  const owner = getGitHubUser(repository.owner);
+  const numberOfStars = repository.stargazerCount;
+
+  const accessories: List.Item.Accessory[] = [];
+
+  const showLaunchToast = async () => {
+    try {
+      await showToast({
+        title: "Launching your workspace",
+        style: Toast.Style.Success,
+      });
+      setTimeout(() => {
+        open(`https://gitpod.io/#${repository.url}`);
+      }, 1500);
+    } catch (error) {
+      await showToast({
+        title: "Error launching workspace",
+        style: Toast.Style.Failure,
+      });
+    }
+  };
+
+  accessories.unshift(
+    {
+      text: {
+        value: repository.issues?.totalCount.toString(),
+      },
+      icon: GitpodIcons.issues_icon,
+    },
+    {
+      text: {
+        value: repository.pullRequests?.totalCount.toString(),
+      },
+      icon: GitpodIcons.pulls_icon,
+    }
+  );
+
+  return (
+    <List.Item
+      icon={owner.icon}
+      title={repository.name}
+      {...(numberOfStars > 0
+        ? {
+            subtitle: {
+              value: `${numberOfStars}`,
+              tooltip: `Number of Stars: ${numberOfStars}`,
+            },
+          }
+        : {})}
+      accessories={accessories}
+      actions={
+        <ActionPanel>
+          <Action title="Start with Gitpod" onAction={showLaunchToast} />
+          <Action
+            title="View template in GitHub"
+            onAction={() => {
+              open(repository.url);
+            }}
+          />
+          <Action
+            title="Learn more about Gitpod templates"
+            onAction={() => {
+              open("https://www.gitpod.io/docs/introduction/getting-started/quickstart");
+            }}
+          />
+          <Action
+            title="Add a template"
+            onAction={() => {
+              open("https://github.com/gitpod-samples/.github/blob/HEAD/CONTRIBUTING.md");
+            }}
+          />
+        </ActionPanel>
+      }
+    />
+  );
+}