start adding ui elements

coder · aslilac · Aug 14, 2024 · Aug 12, 2024 · Aug 13, 2024 · Aug 13, 2024
commit b414acf37aa3aa0545d8467ad4d535064552d0e5
diff --git a/coderd/database/modelqueries.go b/coderd/database/modelqueries.go
@@ -75,6 +75,7 @@ func (q *sqlQuerier) GetAuthorizedTemplates(ctx context.Context, arg GetTemplate
 	rows, err := q.db.QueryContext(ctx, query,
 		arg.Deleted,
 		arg.OrganizationID,
+		arg.OrganizationName,
 		arg.ExactName,
 		arg.FuzzyName,
 		pq.Array(arg.IDs),

diff --git a/coderd/database/queries.sql.go b/coderd/database/queries.sql.go
diff --git a/coderd/database/queries/templates.sql b/coderd/database/queries/templates.sql
@@ -22,17 +22,23 @@ WHERE
 			organization_id = @organization_id
 		ELSE true
 	END
+	-- Filter by organization_name
+	AND CASE
+		WHEN @organization_name :: text != '' THEN
+			LOWER("organization_name") = LOWER(@organization_name)
+		ELSE true
+	END
 	-- Filter by exact name
 	AND CASE
 		WHEN @exact_name :: text != '' THEN
 			LOWER("name") = LOWER(@exact_name)
 		ELSE true
 	END
-  	-- Filter by name, matching on substring
-  	AND CASE
-		  WHEN @fuzzy_name :: text != '' THEN
-			  lower(name) ILIKE '%' || lower(@fuzzy_name) || '%'
-		  ELSE true
+	-- Filter by name, matching on substring
+	AND CASE
+		WHEN @fuzzy_name :: text != '' THEN
+			lower(name) ILIKE '%' || lower(@fuzzy_name) || '%'
+		ELSE true
 	END
 	-- Filter by ids
 	AND CASE

diff --git a/coderd/searchquery/search.go b/coderd/searchquery/search.go
@@ -198,11 +198,12 @@ func Templates(ctx context.Context, db database.Store, query string) (database.G
 
 	parser := httpapi.NewQueryParamParser()
 	filter := database.GetTemplatesWithFilterParams{
-		FuzzyName:  parser.String(values, "", "name"),
-		Deleted:    parser.Boolean(values, false, "deleted"),
-		ExactName:  parser.String(values, "", "exact_name"),
-		IDs:        parser.UUIDs(values, []uuid.UUID{}, "ids"),
-		Deprecated: parser.NullableBoolean(values, sql.NullBool{}, "deprecated"),
+		Deleted:          parser.Boolean(values, false, "deleted"),
+		OrganizationName: parser.String(values, "", "organization"),
+		ExactName:        parser.String(values, "", "exact_name"),
+		FuzzyName:        parser.String(values, "", "name"),
+		IDs:              parser.UUIDs(values, []uuid.UUID{}, "ids"),
+		Deprecated:       parser.NullableBoolean(values, sql.NullBool{}, "deprecated"),
 	}
 
 	// Convert the "organization" parameter to an organization uuid. This can require

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -651,6 +651,13 @@ class ApiMethods {
     return response.data;
   };
 
+  getMyOrganizations = async (): Promise<TypesGen.Organization[]> => {
+    const response = await this.axios.get<TypesGen.Organization[]>(
+      "/api/v2/users/me/organizations",
+    );
+    return response.data;
+  };
+
   /**
    * @param organization Can be the organization's ID or name
    */

diff --git a/site/src/pages/TemplatesPage/TemplatesFilter.tsx b/site/src/pages/TemplatesPage/TemplatesFilter.tsx
@@ -0,0 +1,87 @@
+import type { FC } from "react";
+import { useSearchParams } from "react-router-dom";
+import {
+  Filter,
+  MenuSkeleton,
+  SearchFieldSkeleton,
+  useFilter,
+} from "components/Filter/filter";
+import { useFilterMenu } from "components/Filter/menu";
+import {
+  SelectFilter,
+  SelectFilterOption,
+} from "components/Filter/SelectFilter";
+import { API } from "api/api";
+import { UserAvatar } from "components/UserAvatar/UserAvatar";
+import { docs } from "utils/docs";
+import { Organization } from "api/typesGenerated";
+
+export const TemplatesFilter: FC = () => {
+  const searchParamsResult = useSearchParams();
+  const filter = useFilter({
+    fallbackFilter: "deprecated:false",
+    searchParamsResult,
+    onUpdate: () => {}, // reset pagination
+  });
+
+  const organizationMenu = useFilterMenu({
+    onChange: (option) =>
+      filter.update({ ...filter.values, template: option?.value }),
+    value: filter.values.organization,
+    id: "status",
+    getSelectedOption: async () => {
+      if (!filter.values.organization) {
+        return null;
+      }
+
+      const org = await API.getOrganization(filter.values.organization);
+      return orgOption(org);
+    },
+    getOptions: async () => {
+      const orgs = await API.getMyOrganizations();
+      return orgs.map(orgOption);
+    },
+  });
+
+  return (
+    <Filter
+      presets={[
+        { query: "", name: "All templates" },
+        { query: "deprecated", name: "Deprecated templates" },
+      ]}
+      learnMoreLink={docs("/templates#template-filtering")}
+      isLoading={false}
+      filter={filter}
+      options={
+        <>
+          <SelectFilter
+            placeholder="All organizations"
+            label="Select an organization"
+            options={organizationMenu.searchOptions}
+            selectedOption={organizationMenu.selectedOption ?? undefined}
+            onSelect={organizationMenu.selectOption}
+          />
+        </>
+      }
+      skeleton={
+        <>
+          <SearchFieldSkeleton />
+          <MenuSkeleton />
+        </>
+      }
+    />
+  );
+};
+
+const orgOption = (org: Organization): SelectFilterOption => ({
+  label: org.display_name || org.name,
+  value: org.name,
+  startIcon: (
+    <UserAvatar
+      key={org.id}
+      size="sm"
+      username={org.display_name}
+      avatarURL={org.icon}
+    />
+  ),
+});
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -46,6 +46,7 @@ import {
   formatTemplateActiveDevelopers,
 } from "utils/templates";
 import { EmptyTemplates } from "./EmptyTemplates";
+import { TemplatesFilter } from "./TemplatesFilter";
 
 export const Language = {
   developerCount: (activeCount: number): string => {
@@ -220,6 +221,8 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
         )}
       </PageHeader>
 
+      <TemplatesFilter />
+
       {error ? (
         <ErrorAlert error={error} />
       ) : (

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -6,7 +6,7 @@ import StopOutlined from "@mui/icons-material/StopOutlined";
 import LoadingButton from "@mui/lab/LoadingButton";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
-import type { ComponentProps } from "react";
+import type { ComponentProps, FC } from "react";
 import type { UseQueryResult } from "react-query";
 import { hasError, isApiValidationError } from "api/errors";
 import type { Template, Workspace } from "api/typesGenerated";
@@ -65,7 +65,7 @@ export interface WorkspacesPageViewProps {
   canChangeVersions: boolean;
 }
 
-export const WorkspacesPageView = ({
+export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
   workspaces,
   error,
   limit,
@@ -86,7 +86,7 @@ export const WorkspacesPageView = ({
   templatesFetchStatus,
   canCreateTemplate,
   canChangeVersions,
-}: WorkspacesPageViewProps) => {
+}) => {
   // Let's say the user has 5 workspaces, but tried to hit page 100, which does
   // not exist. In this case, the page is not valid and we want to show a better
   // error message.

diff --git a/site/src/pages/WorkspacesPage/filter/menus.tsx b/site/src/pages/WorkspacesPage/filter/menus.tsx
@@ -43,8 +43,7 @@ export const useTemplateFilterMenu = ({
           template.display_name.toLowerCase().includes(query.toLowerCase()),
       );
       return filteredTemplates.map((template) => ({
-        label:
-          template.display_name !== "" ? template.display_name : template.name,
+        label: template.display_name || template.name,
         value: template.name,
         startIcon: <TemplateAvatar size="xs" template={template} />,
       }));