Feat/settings grouped

packages/api/src/database/migrations/07_settings_add_group.ts

@@ -0,0 +1,131 @@
+import { SettingGroup } from '@settings/types';
+import { SettingsModel } from '../../settings/entities';
+
+const overridableSettingKeys = [
+  'PRAISE_QUANTIFIERS_PER_PRAISE_RECEIVER',
+  'PRAISE_PER_QUANTIFIER',
+  'PRAISE_QUANTIFY_RECEIVER_PSEUDONYMS',
+  'PRAISE_QUANTIFY_DUPLICATE_PRAISE_PERCENTAGE',
+  'PRAISE_QUANTIFY_ALLOWED_VALUES',
+];
+
+const settings = [
+  {
+    key: 'NAME',
+    group: SettingGroup.APPLICATION,
+  },
+  {
+    key: 'DESCRIPTION',
+    group: SettingGroup.APPLICATION,
+  },
+  {
+    key: 'LOGO',
+    group: SettingGroup.APPLICATION,
+  },
+  {
+    key: 'PRAISE_QUANTIFIERS_PER_PRAISE_RECEIVER',
+    group: SettingGroup.PERIOD_DEFAULT,
+  },
+  {
+    key: 'PRAISE_PER_QUANTIFIER',
+    group: SettingGroup.PERIOD_DEFAULT,
+  },
+  {
+    key: 'PRAISE_QUANTIFY_RECEIVER_PSEUDONYMS',
+    group: SettingGroup.PERIOD_DEFAULT,
+  },
+  {
+    key: 'PRAISE_QUANTIFY_DUPLICATE_PRAISE_PERCENTAGE',
+    group: SettingGroup.PERIOD_DEFAULT,
+  },
+  {
+    key: 'PRAISE_QUANTIFY_ALLOWED_VALUES',
+    group: SettingGroup.PERIOD_DEFAULT,
+  },
+  {
+    key: 'PRAISE_GIVER_ROLE_ID',
+    group: SettingGroup.DISCORD,
+  },
+  {
+    key: 'PRAISE_SUCCESS_MESSAGE',
+    group: SettingGroup.DISCORD,
+  },
+  {
+    key: 'PRAISE_ACCOUNT_NOT_ACTIVATED_ERROR',
+    group: SettingGroup.DISCORD,
+  },
+  {
+    key: 'DM_ERROR',
+    group: SettingGroup.DISCORD,
+  },
+  {
+    key: 'PRAISE_WITHOUT_PRAISE_GIVER_ROLE_ERROR',
+    group: SettingGroup.DISCORD,
+  },
+  {
+    key: 'PRAISE_INVALID_RECEIVERS_ERROR',
+    group: SettingGroup.DISCORD,
+  },
+  {
+    key: 'PRAISE_REASON_MISSING_ERROR',
+    group: SettingGroup.DISCORD,
+  },
+  {
+    key: 'PRAISE_UNDEFINED_RECEIVERS_WARNING',
+    group: SettingGroup.DISCORD,
+  },
+  {
+    key: 'PRAISE_TO_ROLE_WARNING',
+    group: SettingGroup.DISCORD,
+  },
+  {
+    key: 'PRAISE_SUCCESS_DM',
+    group: SettingGroup.DISCORD,
+  },
+  {
+    key: 'PRAISE_ACCOUNT_NOT_ACTIVATED_ERROR_DM',
+    group: SettingGroup.DISCORD,
+  },
+  {
+    key: 'PRAISE_ACCOUNT_ALREADY_ACTIVATED_ERROR',
+    group: SettingGroup.DISCORD,
+  },
+  {
+    key: 'FORWARD_FROM_USER_WITHOUT_PRAISE_GIVER_ROLE_ERROR',
+    group: SettingGroup.DISCORD,
+  },
+  {
+    key: 'FORWARD_FROM_UNACTIVATED_GIVER_ERROR',
+    group: SettingGroup.DISCORD,
+  },
+  {
+    key: 'FORWARD_SUCCESS_MESSAGE',
+    group: SettingGroup.DISCORD,
+  },
+];
+
+const up = async (): Promise<void> => {
+  const settingUpdates = settings.map((s) => ({
+    updateOne: {
+      filter: { key: s.key },
+      update: { $set: { group: s.group }, $unset: { periodOverridable: true } },
+    },
+  }));
+
+  await SettingsModel.bulkWrite(settingUpdates);
+};
+
+const down = async (): Promise<void> => {
+  const allKeys = settings.map((s) => s.key);
+  await SettingsModel.updateMany(
+    { key: { $in: allKeys } },
+    { $unset: { group: 1 }, $set: { periodOverridable: false } }
+  );
+
+  await SettingsModel.updateMany(
+    { key: { $in: overridableSettingKeys } },
+    { $set: { periodOverridable: true } }
+  );
+};
+
+export { up, down };

packages/api/src/periodsettings/utils.ts

@@ -1,5 +1,5 @@
 import { SettingsModel } from '@settings/entities';
-import { SettingDocument } from '@settings/types';
+import { SettingDocument, SettingGroup } from '@settings/types';
 import { PeriodDocument } from '@period/types';
 import { PeriodSettingsModel } from './entities';
 import { PeriodSetting } from './types';
@@ -8,7 +8,7 @@ export const insertNewPeriodSettings = async (
   period: PeriodDocument
 ): Promise<void> => {
   let settings = await SettingsModel.find({
-    periodOverridable: true,
+    group: SettingGroup.PERIOD_DEFAULT,
   });
   if (settings && !Array.isArray(settings)) settings = [settings];
 
@@ -22,7 +22,6 @@ export const insertNewPeriodSettings = async (
       // drop unused fields
       _id: undefined,
       __v: undefined,
-      periodOverridable: undefined,
 
       // set period
       period: period._id,

packages/api/src/settings/entities.ts

@@ -1,5 +1,5 @@
 import mongoose from 'mongoose';
-import { SettingDocument } from './types';
+import { SettingDocument, SettingGroup } from './types';
 import { fieldTypeValidator } from './validators';
 
 export const genericSettingsSchema = {
@@ -21,6 +21,7 @@ export const genericSettingsSchema = {
   },
   label: { type: String, required: true },
   description: { type: String },
+  group: { type: Number, enum: SettingGroup, required: true },
 };
 
 export function getGenericSettingValueRealized(
@@ -53,7 +54,6 @@ export const valueRealizedVirtualName = 'valueRealized';
 const settingsSchema = new mongoose.Schema(
   {
     ...genericSettingsSchema,
-    periodOverridable: { type: Boolean, default: false },
   },
   {
     collection: 'settings',

packages/api/src/settings/transformers.ts

@@ -1,7 +1,9 @@
 import { SettingDocument, SettingDto } from './types';
 
 const settingDocumentToDto = (setting: SettingDocument): SettingDto => {
-  const { _id, key, value, valueRealized, type, label, description } = setting;
+  const { _id, key, value, valueRealized, type, label, description, group } =
+    setting;
+
   return {
     _id,
     key,
@@ -10,6 +12,7 @@ const settingDocumentToDto = (setting: SettingDocument): SettingDto => {
     type,
     label,
     description,
+    group,
   };
 };
 

packages/api/src/settings/types.ts

@@ -1,13 +1,19 @@
 import mongoose from 'mongoose';
 
+export enum SettingGroup {
+  APPLICATION,
+  PERIOD_DEFAULT,
+  DISCORD,
+}
+
 export interface Setting {
   key: string;
   value: string;
   valueRealized: string | boolean | number | number[];
   type: string;
   label: string;
   description?: string;
-  periodOverridable: boolean;
+  group: SettingGroup;
 }
 
 export interface SettingDocument extends Setting, mongoose.Document {}
@@ -20,6 +26,7 @@ export interface SettingDto {
   type: string;
   label: string;
   description?: string;
+  group: SettingGroup;
 }
 
 export interface SettingSetInput {

packages/frontend/src/components/form/TextareaInput.tsx

@@ -15,7 +15,8 @@ const TextareaInput = (
             id={name}
             {...input}
             autoComplete="off"
-            className="block w-full resize-y "
+            className="block w-full resize-y"
+            rows={4}
           />
           {apiResponse && (
             <FieldErrorMessage name="name" apiResponse={apiResponse} />

packages/frontend/src/navigation/Nav.tsx

@@ -65,7 +65,11 @@ export default function Nav(): JSX.Element {
               to="/eventlogs"
             />
             <AdminOnly>
-              <NavItem icon={faCog} description="Settings" to="/settings" />
+              <NavItem
+                icon={faCog}
+                description="Settings"
+                to="/settings/application"
+              />
             </AdminOnly>
           </ul>
         </div>

packages/frontend/src/navigation/NavItem.tsx

@@ -13,7 +13,7 @@ const NavItem = ({ icon, description, to }: NavProps): JSX.Element => {
     <NavLink
       to={to}
       className={(isActive): string =>
-        `relative px-4 py-1 cursor-pointer mr-[1px] no-underline flex items-center text-black ${
+        `relative px-4 py-1 cursor-pointer no-underline flex items-center text-black ${
           isActive ? ' bg-gray-200' : ' hover:bg-gray-100'
         }`
       }

packages/frontend/src/pages/Settings/SettingsPage.tsx

@@ -1,23 +1,76 @@
+import { SettingGroup } from 'api/dist/settings/types';
 import BreadCrumb from '@/components/BreadCrumb';
 import { faCogs } from '@fortawesome/free-solid-svg-icons';
 import React from 'react';
 import SettingsForm from '../../components/settings/SettingsForm';
 import { AllSettings, useSetSetting } from '@/model/settings';
 import { useRecoilValue } from 'recoil';
+import NavItem from '@/navigation/NavItem';
+import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom';
 
-const SettingsPage = (): JSX.Element => {
+const SettingsPage = (): JSX.Element | null => {
   const settings = useRecoilValue(AllSettings);
   const { setSetting } = useSetSetting();
+  const { path, url } = useRouteMatch();
+
+  if (!settings) return null;
+
+  const applicationSettings = settings.filter(
+    (s) => s.group === SettingGroup.APPLICATION
+  );
+  const periodDefaultSettings = settings.filter(
+    (s) => s.group === SettingGroup.PERIOD_DEFAULT
+  );
+  const discordSettings = settings.filter(
+    (s) => s.group === SettingGroup.DISCORD
+  );
 
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="max-w-3xl mx-auto">
       <BreadCrumb name="Settings" icon={faCogs} />
 
-      <div className="w-full praise-box">
-        <h2 className="mb-2">Settings</h2>
-        <React.Suspense fallback="Loading…">
-          <SettingsForm settings={settings} setSetting={setSetting} />
-        </React.Suspense>
+      <div className="flex space-x-4">
+        <div>
+          <div className="w-40 py-5 mb-5 break-words border rounded-lg shadow-sm bg-gray-50">
+            <nav>
+              <NavItem to={`${url}/application`} description="Application" />
+              <NavItem to={`${url}/period`} description="Period Defaults" />
+              <NavItem to={`${url}/discord`} description="Discord Bot" />
+            </nav>
+          </div>
+        </div>
+
+        <div className="w-full max-w-3xl praise-box">
+          <Switch>
+            <Route path={`${path}/application`}>
+              <React.Suspense fallback="Loading…">
+                <SettingsForm
+                  settings={applicationSettings}
+                  setSetting={setSetting}
+                />
+              </React.Suspense>
+            </Route>
+            <Route path={`${path}/period`}>
+              <React.Suspense fallback="Loading…">
+                <SettingsForm
+                  settings={periodDefaultSettings}
+                  setSetting={setSetting}
+                />
+              </React.Suspense>
+            </Route>
+            <Route path={`${path}/discord`}>
+              <React.Suspense fallback="Loading…">
+                <SettingsForm
+                  settings={discordSettings}
+                  setSetting={setSetting}
+                />
+              </React.Suspense>
+            </Route>
+            <Route path={`${path}`}>
+              <Redirect to={`${url}/application`} />
+            </Route>
+          </Switch>
+        </div>
       </div>
     </div>
   );