improvement: address requested feedback

frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/EditProjectTemplateSection.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { Button, EmptyState, Spinner } from "@app/components/v2";
 import {
-  DefaultProjectTemplateIdentifier,
+  InfisicalProjectTemplate,
   TProjectTemplate,
   useGetProjectTemplateById
 } from "@app/hooks/api/projectTemplates";
@@ -16,11 +16,13 @@ type Props = {
 };
 
 export const EditProjectTemplateSection = ({ template, onBack }: Props) => {
-  const isDefault = template.name === DefaultProjectTemplateIdentifier;
+  const isInfisicalTemplate = Object.values(InfisicalProjectTemplate).includes(
+    template.name as InfisicalProjectTemplate
+  );
 
   const { data: projectTemplate, isLoading } = useGetProjectTemplateById(template.id, {
     initialData: template,
-    enabled: !isDefault
+    enabled: !isInfisicalTemplate
   });
 
   return (
@@ -41,7 +43,7 @@ export const EditProjectTemplateSection = ({ template, onBack }: Props) => {
         </div>
       ) : projectTemplate ? (
         <EditProjectTemplate
-          isDefault={isDefault}
+          isInfisicalTemplate={isInfisicalTemplate}
           projectTemplate={projectTemplate}
           onBack={onBack}
         />

frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx

@@ -23,10 +23,10 @@ import { ProjectTemplateRolesSection } from "./ProjectTemplateRolesSection";
 type Props = {
   projectTemplate: TProjectTemplate;
   onBack: () => void;
-  isDefault: boolean;
+  isInfisicalTemplate: boolean;
 };
 
-export const EditProjectTemplate = ({ isDefault, projectTemplate, onBack }: Props) => {
+export const EditProjectTemplate = ({ isInfisicalTemplate, projectTemplate, onBack }: Props) => {
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "removeTemplate",
     "editDetails"
@@ -63,7 +63,7 @@ export const EditProjectTemplate = ({ isDefault, projectTemplate, onBack }: Prop
           <h3 className="text-xl font-semibold">{name}</h3>
           <h2 className="text-sm text-mineshaft-400">{description || "Project Template"}</h2>
         </div>
-        {!isDefault && (
+        {!isInfisicalTemplate && (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <IconButton
@@ -117,9 +117,12 @@ export const EditProjectTemplate = ({ isDefault, projectTemplate, onBack }: Prop
           </DropdownMenu>
         )}
       </div>
-      <ProjectTemplateEnvironmentsForm isDefault={isDefault} projectTemplate={projectTemplate} />
+      <ProjectTemplateEnvironmentsForm
+        isInfisicalTemplate={isInfisicalTemplate}
+        projectTemplate={projectTemplate}
+      />
       <ProjectTemplateRolesSection
-        isDefaultTemplate={isDefault}
+        isInfisicalTemplate={isInfisicalTemplate}
         projectTemplate={projectTemplate}
       />
       <ProjectTemplateDetailsModal

frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEditRoleForm.tsx

@@ -169,7 +169,7 @@ export const ProjectTemplateEditRoleForm = ({
                     label="Name"
                     className="mb-0 flex-1"
                   >
-                    <Input {...field} placeholder="Role name..." />
+                    <Input {...field} autoFocus placeholder="Role name..." />
                   </FormControl>
                 )}
               />

frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx

@@ -25,7 +25,7 @@ import { slugSchema } from "@app/lib/schemas";
 
 type Props = {
   projectTemplate: TProjectTemplate;
-  isDefault: boolean;
+  isInfisicalTemplate: boolean;
 };
 
 const formSchema = z.object({
@@ -39,7 +39,10 @@ const formSchema = z.object({
 
 type TFormSchema = z.infer<typeof formSchema>;
 
-export const ProjectTemplateEnvironmentsForm = ({ projectTemplate, isDefault }: Props) => {
+export const ProjectTemplateEnvironmentsForm = ({
+  projectTemplate,
+  isInfisicalTemplate
+}: Props) => {
   const {
     control,
     handleSubmit,
@@ -94,13 +97,13 @@ export const ProjectTemplateEnvironmentsForm = ({ projectTemplate, isDefault }:
       <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
         <div>
           <h2 className="text-lg font-semibold">Project Environments</h2>
-          {!isDefault && (
+          {!isInfisicalTemplate && (
             <p className="text-sm text-mineshaft-400">
               Add, rename, remove and reorder environments for this project template
             </p>
           )}
         </div>
-        {!isDefault && (
+        {!isInfisicalTemplate && (
           <OrgPermissionCan
             I={OrgPermissionActions.Edit}
             a={OrgPermissionSubjects.ProjectTemplates}
@@ -129,7 +132,7 @@ export const ProjectTemplateEnvironmentsForm = ({ projectTemplate, isDefault }:
             <Tr>
               <Th>Friendly Name</Th>
               <Th>Slug</Th>
-              {!isDefault && (
+              {!isInfisicalTemplate && (
                 <Th>
                   <div className="flex w-full justify-end normal-case">
                     <OrgPermissionCan
@@ -161,7 +164,7 @@ export const ProjectTemplateEnvironmentsForm = ({ projectTemplate, isDefault }:
             {environments.map(({ id, name, slug }, pos) => (
               <Tr key={id}>
                 <Td>
-                  {isDefault ? (
+                  {isInfisicalTemplate ? (
                     name
                   ) : (
                     <OrgPermissionCan
@@ -187,7 +190,7 @@ export const ProjectTemplateEnvironmentsForm = ({ projectTemplate, isDefault }:
                   )}
                 </Td>
                 <Td>
-                  {isDefault ? (
+                  {isInfisicalTemplate ? (
                     slug
                   ) : (
                     <OrgPermissionCan
@@ -212,7 +215,7 @@ export const ProjectTemplateEnvironmentsForm = ({ projectTemplate, isDefault }:
                     </OrgPermissionCan>
                   )}
                 </Td>
-                {!isDefault && (
+                {!isInfisicalTemplate && (
                   <Td className="flex items-center justify-end">
                     <OrgPermissionCan
                       I={OrgPermissionActions.Edit}

frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateRolesSection.tsx

@@ -27,10 +27,10 @@ import { ProjectTemplateEditRoleForm } from "./ProjectTemplateEditRoleForm";
 
 type Props = {
   projectTemplate: TProjectTemplate;
-  isDefaultTemplate: boolean;
+  isInfisicalTemplate: boolean;
 };
 
-export const ProjectTemplateRolesSection = ({ projectTemplate, isDefaultTemplate }: Props) => {
+export const ProjectTemplateRolesSection = ({ projectTemplate, isInfisicalTemplate }: Props) => {
   const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
     "removeRole",
     "editRole"
@@ -108,12 +108,12 @@ export const ProjectTemplateRolesSection = ({ projectTemplate, isDefaultTemplate
                 <div>
                   <h2 className="text-lg font-semibold">Project Roles</h2>
                   <p className="text-sm text-mineshaft-400">
-                    {isDefaultTemplate
+                    {isInfisicalTemplate
                       ? "Click a role to view the associated permissions"
                       : "Add, edit and remove roles for this project template"}
                   </p>
                 </div>
-                {!isDefaultTemplate && (
+                {!isInfisicalTemplate && (
                   <OrgPermissionCan
                     I={OrgPermissionActions.Edit}
                     a={OrgPermissionSubjects.ProjectTemplates}