feat: archived indicators and disabled button when editing archived template (#9503)

frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx

@@ -110,11 +110,13 @@ export const EditReleasePlanTemplate = () => {
             formatApiCode={formatApiCode}
             handleSubmit={handleSubmit}
             loading={loading}
+            archived={!!template.archivedAt}
         >
             <StyledButtonContainer>
                 <UpdateButton
                     name='template'
                     permission={RELEASE_PLAN_TEMPLATE_UPDATE}
+                    disabled={!!template.archivedAt}
                 >
                     Save changes
                 </UpdateButton>

frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateForm.tsx

@@ -1,5 +1,5 @@
 import Input from 'component/common/Input/Input';
-import { styled, useTheme } from '@mui/material';
+import { Alert, styled, useTheme } from '@mui/material';
 import type { IReleasePlanMilestonePayload } from 'interfaces/releasePlans';
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
 import { TemplateFormDescription } from './TemplateFormDescription';
@@ -45,6 +45,7 @@ interface ITemplateFormProps {
     errors: { [key: string]: string };
     clearErrors: () => void;
     formTitle: string;
+    archived?: boolean;
     formatApiCode: () => string;
     handleSubmit: (e: React.FormEvent) => void;
     loading?: boolean;
@@ -61,6 +62,7 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
     errors,
     clearErrors,
     formTitle,
+    archived,
     formatApiCode,
     handleSubmit,
     children,
@@ -81,6 +83,11 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
             description={<TemplateFormDescription />}
             formatApiCode={formatApiCode}
         >
+            {archived && (
+                <Alert severity='warning'>
+                    This template has been archived and can no longer be edited.
+                </Alert>
+            )}
             <StyledForm onSubmit={handleSubmit}>
                 <StyledInput
                     label='Template name'

frontend/src/interfaces/releasePlans.ts

@@ -15,6 +15,7 @@ export interface IReleasePlanTemplate {
     createdAt: string;
     createdByUserId: number;
     milestones: IReleasePlanMilestonePayload[];
+    archivedAt?: string;
 }
 
 export interface IReleasePlan {