Apply a few Michaels suggestions

BrunoQuaresma · BrunoQuaresma · commit d97dd825b9bb · 2024-08-08T17:26:09.000Z
diff --git a/site/src/api/queries/notifications.ts b/site/src/api/queries/notifications.ts
@@ -38,7 +38,7 @@ export const updateUserNotificationPreferences = (
               id,
               disabled,
               updated_at: new Date().toISOString(),
-            }) as NotificationPreference,
+            }) satisfies NotificationPreference,
         ),
       );
     },
@@ -65,7 +65,7 @@ export const systemNotificationTemplates = () => {
 export function selectTemplatesByGroup(
   data: NotificationTemplate[],
 ): Record<string, NotificationTemplate[]> {
-  return data.reduce(
+  const grouped = data.reduce(
     (acc, tpl) => {
       if (!acc[tpl.group]) {
         acc[tpl.group] = [];
@@ -75,6 +75,20 @@ export function selectTemplatesByGroup(
     },
     {} as Record<string, NotificationTemplate[]>,
   );
+
+  // Sort templates within each group
+  for (const group in grouped) {
+    grouped[group].sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  // Sort groups by name
+  const sortedGroups = Object.keys(grouped).sort((a, b) => a.localeCompare(b));
+  const sortedGrouped: Record<string, NotificationTemplate[]> = {};
+  for (const group of sortedGroups) {
+    sortedGrouped[group] = grouped[group];
+  }
+
+  return sortedGrouped;
 }
 
 export const notificationDispatchMethodsKey = [
diff --git a/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationsPage.tsx
@@ -190,7 +190,7 @@ const EventsView: FC<EventsViewProps> = ({
   deploymentValues,
 }) => {
   return (
-    <Stack spacing={3}>
+    <Stack spacing={4}>
       {availableMethods.includes("smtp") &&
         deploymentValues.notifications?.webhook.endpoint === "" && (
           <Alert severity="warning">
@@ -218,8 +218,9 @@ const EventsView: FC<EventsViewProps> = ({
               <ListItemText css={styles.listItemText} primary={group} />
             </ListItem>
 
-            {templates.map((tpl) => {
+            {templates.map((tpl, i) => {
               const value = castNotificationMethod(tpl.method || defaultMethod);
+              const isLastItem = i === templates.length - 1;
 
               return (
                 <Fragment key={tpl.id}>
@@ -234,7 +235,7 @@ const EventsView: FC<EventsViewProps> = ({
                       value={value}
                     />
                   </ListItem>
-                  <Divider css={styles.divider} />
+                  {!isLastItem && <Divider />}
                 </Fragment>
               );
             })}
@@ -281,9 +282,4 @@ const styles = {
       fontSize: "inherit",
     },
   }),
-  divider: {
-    "&:last-child": {
-      display: "none",
-    },
-  },
 } as Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
@@ -102,7 +102,7 @@ export const NotificationsPage: FC = () => {
         layout="fluid"
       >
         {ready ? (
-          <Stack spacing={3}>
+          <Stack spacing={4}>
             {Object.entries(templatesByGroup.data).map(([group, templates]) => {
               const allDisabled = templates.some((tpl) => {
                 return disabledPreferences.data[tpl.id] === true;
@@ -138,12 +138,13 @@ export const NotificationsPage: FC = () => {
                         }}
                       />
                     </ListItem>
-                    {templates.map((tmpl) => {
+                    {templates.map((tmpl, i) => {
                       const method = castNotificationMethod(
                         tmpl.method || dispatchMethods.data.default,
                       );
                       const Icon = methodIcons[method];
                       const label = methodLabels[method];
+                      const isLastItem = i === templates.length - 1;
 
                       return (
                         <Fragment key={tmpl.id}>
@@ -177,7 +178,7 @@ export const NotificationsPage: FC = () => {
                               </Tooltip>
                             </ListItemIcon>
                           </ListItem>
-                          <Divider css={styles.divider} />
+                          {!isLastItem && <Divider />}
                         </Fragment>
                       );
                     })}
@@ -230,9 +231,4 @@ const styles = {
       fontSize: "inherit",
     },
   }),
-  divider: {
-    "&:last-child": {
-      display: "none",
-    },
-  },
 } as Record<string, Interpolation<Theme>>;
