WIP: Refactor Voter application layout

backend/vaa-strapi/src/api/app-customization/routes/app-customization.ts

@@ -3,24 +3,14 @@
  */
 
 import {factories} from '@strapi/strapi';
-import {restrictPopulate, restrictFilters} from '../../../util/acl';
+import {restrictFilters} from '../../../util/acl';
 
 export default factories.createCoreRouter('api::app-customization.app-customization', {
   only: ['find'],
   config: {
     find: {
       policies: [
-        // Disable populate by default to avoid accidentally leaking data through relations
-        restrictPopulate([
-          'translationOverrides',
-          'candidateAppFAQ',
-          'publisherLogo',
-          'publisherLogoDark',
-          'poster',
-          'posterDark',
-          'candPoster',
-          'candPosterDark',
-        ]),
+        // No populate restrictions for appCustomization are needed
         // Disable filters by default to avoid accidentally leaking data of relations
         restrictFilters([])
       ]

backend/vaa-strapi/src/api/app-setting/content-types/app-setting/schema.json

@@ -66,6 +66,11 @@
       "repeatable": false,
       "component": "settings.entities",
       "required": true
+    },
+    "headerStyle": {
+      "type": "component",
+      "repeatable": false,
+      "component": "settings.header-style"
     }
   }
 }

backend/vaa-strapi/src/api/app-setting/controllers/app-setting.ts

@@ -9,23 +9,27 @@ import {getCardContentsFromStrapi} from '../../../functions/utils/appSettings';
 export default factories.createCoreController(API.AppSettings, () => ({
   async findOne(ctx) {
     const result = await super.find(ctx);
-
-    for (const [i, val] of result.data.entries()) {
-      const cardContents = await getCardContentsFromStrapi(val.id);
-      result.data[i].attributes.results.cardContents = cardContents;
+    if (result?.data) {
+      for (const [i, val] of result.data.entries()) {
+        const cardContents = await getCardContentsFromStrapi(val.id);
+        if (!cardContents) continue;
+        result.data[i].attributes.results ??= {};
+        result.data[i].attributes.results.cardContents = cardContents;
+      }
     }
-
     return result;
   },
 
   async find(ctx) {
     const {data, meta} = await super.find(ctx);
-
-    for (const [i, val] of data.entries()) {
-      const cardContents = await getCardContentsFromStrapi(val.id);
-      data[i].attributes.results.cardContents = cardContents;
+    if (data) {
+      for (const [i, val] of data.entries()) {
+        const cardContents = await getCardContentsFromStrapi(val.id);
+        if (!cardContents) continue;
+        data[i].attributes.results ??= {};
+        data[i].attributes.results.cardContents = cardContents;
+      }
     }
-
     return {data, meta};
   }
 }));

backend/vaa-strapi/src/api/app-setting/routes/app-setting.ts

@@ -3,51 +3,21 @@
  */
 
 import {factories} from '@strapi/strapi';
-import {restrictPopulate, restrictFilters} from '../../../util/acl';
+import {restrictFilters} from '../../../util/acl';
 
 export default factories.createCoreRouter('api::app-setting.app-setting', {
   only: ['find', 'findOne'], // Explicitly disabled create and delete
   config: {
     find: {
       policies: [
-        // Disable populate by default to avoid accidentally leaking data through relations
-        restrictPopulate([
-          'entities',
-          'header',
-          'matching',
-          'survey',
-          'entityDetails',
-          'contents',
-          'showMissingElectionSymbol',
-          'showMissingAnswers',
-          'questions',
-          'categoryIntros',
-          'questionsIntro',
-          'results',
-          'cardContents'
-        ]),
+        // No populate restrictions for appSettings are needed
         // Disable filters by default to avoid accidentally leaking data of relations
         restrictFilters([])
       ]
     },
     findOne: {
       policies: [
-        // Disable populate by default to avoid accidentally leaking data through relations
-        restrictPopulate([
-          'entities',
-          'header',
-          'matching',
-          'survey',
-          'entityDetails',
-          'contents',
-          'showMissingElectionSymbol',
-          'showMissingAnswers',
-          'questions',
-          'categoryIntros',
-          'questionsIntro',
-          'results',
-          'cardContents'
-        ]),
+        // No populate restrictions for appSettings are needed
         // Disable filters by default to avoid accidentally leaking data of relations
         restrictFilters([])
       ]

backend/vaa-strapi/src/components/settings/header-style-dark.json

@@ -0,0 +1,15 @@
+{
+  "collectionName": "components_settings_header_style_darks",
+  "info": {
+    "displayName": "Header Style - Dark"
+  },
+  "options": {},
+  "attributes": {
+    "bgColor": {
+      "type": "string"
+    },
+    "overImgBgColor": {
+      "type": "string"
+    }
+  }
+}

backend/vaa-strapi/src/components/settings/header-style-light.json

@@ -0,0 +1,15 @@
+{
+  "collectionName": "components_settings_header_style_lights",
+  "info": {
+    "displayName": "Header Style - Light"
+  },
+  "options": {},
+  "attributes": {
+    "bgColor": {
+      "type": "string"
+    },
+    "overImgBgColor": {
+      "type": "string"
+    }
+  }
+}

backend/vaa-strapi/src/components/settings/header-style.json

@@ -0,0 +1,27 @@
+{
+  "collectionName": "components_settings_header_styles",
+  "info": {
+    "displayName": "Header Style"
+  },
+  "options": {},
+  "attributes": {
+    "dark": {
+      "displayName": "Header Style - Dark",
+      "type": "component",
+      "repeatable": false,
+      "component": "settings.header-style-dark"
+    },
+    "light": {
+      "displayName": "Header Style - Light",
+      "type": "component",
+      "repeatable": false,
+      "component": "settings.header-style-light"
+    },
+    "imgSize": {
+      "type": "string"
+    },
+    "imgPosition": {
+      "type": "string"
+    }
+  }
+}

backend/vaa-strapi/src/extensions/documentation/documentation/1.0.0/full_documentation.json

@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2024-10-08T10:22:54.399Z"
+    "x-generation-date": "2024-10-20T07:50:50.713Z"
   },
   "x-strapi-config": {
     "path": "/documentation",
@@ -3948,6 +3948,9 @@
           "entities": {
             "$ref": "#/components/schemas/SettingsEntitiesComponent"
           },
+          "headerStyle": {
+            "$ref": "#/components/schemas/SettingsHeaderStyleComponent"
+          },
           "createdAt": {
             "type": "string",
             "format": "date-time"
@@ -4497,6 +4500,48 @@
           }
         }
       },
+      "SettingsHeaderStyleComponent": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "number"
+          },
+          "dark": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "number"
+              },
+              "bgColor": {
+                "type": "string"
+              },
+              "overImgBgColor": {
+                "type": "string"
+              }
+            }
+          },
+          "light": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "number"
+              },
+              "bgColor": {
+                "type": "string"
+              },
+              "overImgBgColor": {
+                "type": "string"
+              }
+            }
+          },
+          "imgSize": {
+            "type": "string"
+          },
+          "imgPosition": {
+            "type": "string"
+          }
+        }
+      },
       "CandidateRequest": {
         "type": "object",
         "required": [

backend/vaa-strapi/src/functions/utils/appSettings.ts

@@ -1,10 +1,36 @@
-import {type DynamicSettings, dynamicSettings} from 'vaa-shared';
+import {type DynamicSettings, dynamicSettings, QuestionInCardContent} from 'vaa-shared';
 import {API} from './api';
 
 /**
  * Gets `results.cardContents` from `dynamicSettings.ts` and returns them in format used in Strapi
  */
-export function getCardContentsFromFile() {
+export function getCardContentsFromFile(): {
+  candidateCardContents: Array<
+    | {
+        content: 'submatches';
+      }
+    | {
+        content: 'question';
+        question_id: QuestionInCardContent['question'];
+        question_hideLabel?: QuestionInCardContent['hideLabel'];
+        question_format?: QuestionInCardContent['format'];
+      }
+  >;
+  partyCardContents: Array<
+    | {
+        content: 'submatches';
+      }
+    | {
+        content: 'candidates';
+      }
+    | {
+        content: 'question';
+        question_id: QuestionInCardContent['question'];
+        question_hideLabel?: QuestionInCardContent['hideLabel'];
+        question_format?: QuestionInCardContent['format'];
+      }
+  >;
+} {
   const candidateCardContents = [];
   dynamicSettings.results.cardContents.candidate.forEach((item) => {
     if (item === 'submatches') {
@@ -36,15 +62,21 @@ export function getCardContentsFromFile() {
 }
 
 /**
- * Gets `cardContents` from Strapi and returns them in format used in `DynamicSettings`
+ * Gets `cardContents` from Strapi and returns them in format used in `DynamicSettings`. The returned values are `null` if not defined.
  */
-export async function getCardContentsFromStrapi(id: number) {
+export async function getCardContentsFromStrapi(id: number): Promise<{
+  candidate: DynamicSettings['results']['cardContents']['candidate'] | null;
+  party: DynamicSettings['results']['cardContents']['party'] | null;
+} | null> {
   const appSettings = await strapi.entityService.findOne(API.AppSettings, id, {
     populate: ['results', 'results.candidateCardContents', 'results.partyCardContents']
   });
 
-  const candidateCardContents: DynamicSettings['results']['cardContents']['candidate'] = [];
-  appSettings.results.candidateCardContents.forEach((item) => {
+  if (!appSettings?.results) return null;
+
+  let candidateCardContents: DynamicSettings['results']['cardContents']['candidate'] | null = null;
+  appSettings.results?.candidateCardContents?.forEach((item) => {
+    candidateCardContents ??= [];
     if (item.content === 'submatches') {
       candidateCardContents.push(item.content);
     } else {
@@ -56,8 +88,9 @@ export async function getCardContentsFromStrapi(id: number) {
     }
   });
 
-  const partyCardContents: DynamicSettings['results']['cardContents']['party'] = [];
-  appSettings.results.partyCardContents.forEach((item) => {
+  let partyCardContents: DynamicSettings['results']['cardContents']['party'] | null = null;
+  appSettings.results?.partyCardContents?.forEach((item) => {
+    partyCardContents ??= [];
     if (item.content === 'submatches' || item.content === 'candidates') {
       partyCardContents.push(item.content);
     } else {

docs/settings-and-customization.md

@@ -22,13 +22,12 @@ In case of dynamic settings:
 3. Edit the settings components in Strapi:
    1. If the new setting is a top-level one, create a new component for the setting and add it to the `App Settings` content-type.
    2. If the new setting is a subsetting of a top-level item, edit that setting.
-4. Edit the populate restrictions for the [app-settings route](backend/vaa-strapi/src/api/app-setting/routes/app-setting.ts) so that the new component is allowed to be populated both for `find` and `findOne`.
-5. Update the Strapi data types for `StrapiAppSettingsData` in [strapiDataProvider.type.ts](../frontend/src/lib/api/dataProvider/strapi/strapiDataProvider.type.ts)
-6. Add the necessary `populate` query params to the `getAppSettings` method in [strapiDataProvider.ts](../frontend/src/lib/api/dataProvider/strapi/strapiDataProvider.ts), because components need to be explicitly populated.
-7. If the data type for the setting does not match the one in the `DynamicSettings` type:
+4. Update the Strapi data types for `StrapiAppSettingsData` in [strapiDataProvider.type.ts](../frontend/src/lib/api/dataProvider/strapi/strapiDataProvider.type.ts)
+5. Add the necessary `populate` query params to the `getAppSettings` method in [strapiDataProvider.ts](../frontend/src/lib/api/dataProvider/strapi/strapiDataProvider.ts), because components need to be explicitly populated. Note that if the components have subcomponents, you need to explicitly populate all the way down.
+6. If the data type for the setting does not match the one in the `DynamicSettings` type:
    1. Edit the `getAppSettings` method in [strapiDataProvider.ts](../frontend/src/lib/api/dataProvider/strapi/strapiDataProvider.ts) so that it returns the setting in the correct format.
    2. Edit the [loadDefaultAppSettings](backend/vaa-strapi/src/functions/loadDefaultAppSettings.ts) utility so that it converts the  default settings to a format suitable for Strapi.
-8. Repeat steps 3–5 for all other `DataProvider` implementations that support `getAppSettings`.
+7. Repeat applicable steps for all other `DataProvider` implementations that support `getAppSettings`.
 
 # App Customization
 

frontend/src/lib/api/dataProvider/strapi/strapiDataProvider.ts

@@ -65,12 +65,13 @@ function getData<T extends object>(
   return fetch(url)
     .then((response) => {
       return response.json().then((parsed: StrapiResponse<T> | StrapiError) => {
-        if ('error' in parsed) throw new Error(`Error with getData: ${parsed?.error?.message}`);
+        if ('error' in parsed)
+          throw new Error(`Error with getData: ${parsed?.error?.message} • ${url}`);
         return parsed.data;
       });
     })
     .catch((e) => {
-      throw new Error(`Error with getData: ${e?.message}`);
+      throw new Error(`Error with getData: ${e?.message} • ${url}`);
     });
 }
 
@@ -85,16 +86,18 @@ function getData<T extends object>(
  */
 function getAppSettings(): Promise<Partial<AppSettings> | undefined> {
   const params = new URLSearchParams({
-    'populate[header]': 'true',
-    'populate[matching]': 'true',
-    'populate[survey]': 'true',
     'populate[entities][populate][hideIfMissingAnswers]': 'true',
     'populate[entityDetails][populate][contents]': 'true',
-    'populate[entityDetails][populate][showMissingElectionSymbol]': 'true',
     'populate[entityDetails][populate][showMissingAnswers]': 'true',
+    'populate[entityDetails][populate][showMissingElectionSymbol]': 'true',
+    'populate[header]': 'true',
+    'populate[headerStyle][populate][dark]': 'true',
+    'populate[headerStyle][populate][light]': 'true',
+    'populate[matching]': 'true',
     'populate[questions][populate][categoryIntros]': 'true',
     'populate[questions][populate][questionsIntro]': 'true',
-    'populate[results][populate][cardContents]': 'true'
+    'populate[results][populate][cardContents]': 'true',
+    'populate[survey]': 'true'
   });
   return getData<StrapiAppSettingsData[]>('api/app-settings', params)
     .then((result) => {