feature: project templates with docs

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -21,6 +21,7 @@ import {
   faEnvelope,
   faInfinity,
   faInfo,
+  faInfoCircle,
   faMobile,
   faPlus,
   faQuestion,
@@ -78,6 +79,10 @@ import {
   useSelectOrganization
 } from "@app/hooks/api";
 import { INTERNAL_KMS_KEY_ID } from "@app/hooks/api/kms/types";
+import {
+  DefaultProjectTemplateIdentifier,
+  useListProjectTemplates
+} from "@app/hooks/api/projectTemplates";
 import { Workspace } from "@app/hooks/api/types";
 import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
 import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
@@ -124,7 +129,8 @@ const formSchema = yup.object({
     .trim()
     .max(64, "Too long, maximum length is 64 characters"),
   addMembers: yup.bool().required().label("Add Members"),
-  kmsKeyId: yup.string().label("KMS Key ID")
+  kmsKeyId: yup.string().label("KMS Key ID"),
+  templateId: yup.string().label("Project Template ID")
 });
 
 type TAddProjectFormData = yup.InferType<typeof formSchema>;
@@ -273,7 +279,21 @@ export const AppLayout = ({ children }: LayoutProps) => {
     putUserInOrg();
   }, [router.query.id]);
 
-  const onCreateProject = async ({ name, addMembers, kmsKeyId }: TAddProjectFormData) => {
+  const canReadProjectTemplates = permission.can(
+    OrgPermissionActions.Read,
+    OrgPermissionSubjects.ProjectTemplates
+  );
+
+  const { data: projectTemplates = [] } = useListProjectTemplates({
+    enabled: canReadProjectTemplates && subscription?.projectTemplates
+  });
+
+  const onCreateProject = async ({
+    name,
+    addMembers,
+    kmsKeyId,
+    templateId
+  }: TAddProjectFormData) => {
     // type check
     if (!currentOrg) return;
     if (!user) return;
@@ -284,7 +304,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
         }
       } = await createWs.mutateAsync({
         projectName: name,
-        kmsKeyId: kmsKeyId !== INTERNAL_KMS_KEY_ID ? kmsKeyId : undefined
+        kmsKeyId: kmsKeyId !== INTERNAL_KMS_KEY_ID ? kmsKeyId : undefined,
+        templateId: templateId === DefaultProjectTemplateIdentifier ? undefined : templateId
       });
 
       if (addMembers) {
@@ -909,20 +930,73 @@ export const AppLayout = ({ children }: LayoutProps) => {
               subTitle="This project will contain your secrets and configurations."
             >
               <form onSubmit={handleSubmit(onCreateProject)}>
-                <Controller
-                  control={control}
-                  name="name"
-                  defaultValue=""
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      label="Project Name"
-                      isError={Boolean(error)}
-                      errorText={error?.message}
-                    >
-                      <Input {...field} placeholder="Type your project name" />
-                    </FormControl>
-                  )}
-                />
+                <div className="flex gap-2">
+                  <Controller
+                    control={control}
+                    name="name"
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Project Name"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                        className="flex-1"
+                      >
+                        <Input {...field} placeholder="Type your project name" />
+                      </FormControl>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="templateId"
+                    render={({ field: { value, onChange } }) => (
+                      <OrgPermissionCan
+                        I={OrgPermissionActions.Read}
+                        a={OrgPermissionSubjects.ProjectTemplates}
+                      >
+                        {(isAllowed) => (
+                          <FormControl
+                            label="Project Template"
+                            icon={<FontAwesomeIcon icon={faInfoCircle} size="sm" />}
+                            tooltipText={
+                              <>
+                                <p>
+                                  Create this project from a template to provision it with custom
+                                  environments and roles.
+                                </p>
+                                {subscription && !subscription.projectTemplates && (
+                                  <p className="pt-2">Project templates are a paid feature.</p>
+                                )}
+                              </>
+                            }
+                          >
+                            <Select
+                              defaultValue={DefaultProjectTemplateIdentifier}
+                              placeholder={DefaultProjectTemplateIdentifier}
+                              isDisabled={!isAllowed || !subscription?.projectTemplates}
+                              value={value}
+                              onValueChange={onChange}
+                              className="w-44"
+                            >
+                              <SelectItem value={DefaultProjectTemplateIdentifier}>
+                                {DefaultProjectTemplateIdentifier}
+                              </SelectItem>
+                              {projectTemplates
+                                .filter(
+                                  (template) => template.name !== DefaultProjectTemplateIdentifier
+                                )
+                                .map((template) => (
+                                  <SelectItem key={template.id} value={template.id}>
+                                    {template.name}
+                                  </SelectItem>
+                                ))}
+                            </Select>
+                          </FormControl>
+                        )}
+                      </OrgPermissionCan>
+                    )}
+                  />
+                </div>
                 <div className="mt-4 pl-1">
                   <Controller
                     control={control}