feat: make country sections configurable at build time

Make country sections displayed by the UI when it first loads
configurable via the DEFAULT_COUNTRY_SECTIONS environment variable.

.env-example

@@ -1 +1,7 @@
-ELASTIC_URL=http://localhost:9200/indicepa_pec/_search
+# Comma separated Country-Specific sections (https://yml.publiccode.tools/country.html)
+# to display by default when the editor is loaded.
+#
+# Valid identifiers: "all", "none" or "italy"
+#
+# (default: "none")
+DEFAULT_COUNTRY_SECTIONS=none

.github/workflows/deploy.yml

@@ -14,6 +14,7 @@ jobs:
       - run: npm ci
       - run: npm run build
         env:
+          DEFAULT_COUNTRY_SECTION: italy
           ELASTIC_URL: "https://elasticsearch.developers.italia.it/indicepa_pec/_search"
           VALIDATOR_URL: "https://publiccode-validator.developers.italia.it/pc/validate"
           VALIDATOR_REMOTE_URL: "https://publiccode-validator.developers.italia.it/pc/validateURL"

.github/workflows/release.yml

@@ -21,4 +21,5 @@ jobs:
       - run: npm ci
       - run: npm run release --ci --no-increment
         env:
+          DEFAULT_COUNTRY_SECTIONS: italy
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

src/app/components/Editor.tsx

@@ -6,6 +6,7 @@ import { useAppSelector } from "../store";
 import { YamlModal } from "./YamlModal";
 import InfoBox from "./InfoBox";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Footer } from "./Foot";
 import { validator } from "../validator";
 import { set } from "lodash";
@@ -14,7 +15,9 @@ import EditorInput from "./EditorInput";
 import developmentStatus from "../contents/developmentStatus";
 import EditorBoolean from "./EditorBoolean";
 import EditorMultiselect from "./EditorMultiselect";
+import { DEFAULT_COUNTRY_SECTIONS } from "../contents/constants";
 import categories from "../contents/categories";
+import * as countrySection  from "../contents/countrySpecificSection";
 import platforms from "../contents/platforms";
 import EditorRadio from "./EditorRadio";
 import softwareTypes from "../contents/softwareTypes";
@@ -67,9 +70,11 @@ export default function Editor() {
     defaultValues,
     resolver,
   });
+  const { t } = useTranslation();
   const { getValues, handleSubmit } = methods;
 
   const languages = useAppSelector((state) => state.language.languages);
+  const configCountrySections = countrySection.parse(DEFAULT_COUNTRY_SECTIONS);
 
   const [isYamlModalVisible, setYamlModalVisibility] = useState(false);
 
@@ -215,24 +220,25 @@ export default function Editor() {
             </Col>
           </Row>
           <hr />
-          <Row>
-            <h2>Italia</h2>
-            <Col>
-              <EditorBoolean<"it.conforme.lineeGuidaDesign"> fieldName="it.conforme.lineeGuidaDesign" />
-              <EditorBoolean<"it.conforme.modelloInteroperabilita"> fieldName="it.conforme.modelloInteroperabilita" />
-              <EditorBoolean<"it.conforme.misureMinimeSicurezza"> fieldName="it.conforme.misureMinimeSicurezza" />
-              <EditorBoolean<"it.conforme.gdpr"> fieldName="it.conforme.gdpr" />
-              <EditorInput<"it.riuso.codiceIPA"> fieldName="it.riuso.codiceIPA" />
-            </Col>
-            <Col>
-              <h3>Piattaforme</h3>
-              <EditorBoolean<"it.piattaforme.spid"> fieldName="it.piattaforme.spid" />
-              <EditorBoolean<"it.piattaforme.cie"> fieldName="it.piattaforme.cie" />
-              <EditorBoolean<"it.piattaforme.anpr"> fieldName="it.piattaforme.anpr" />
-              <EditorBoolean<"it.piattaforme.pagopa"> fieldName="it.piattaforme.pagopa" />
-              <EditorBoolean<"it.piattaforme.io"> fieldName="it.piattaforme.io" />
-            </Col>
-          </Row>
+          {countrySection.isVisible(configCountrySections, "italy") && (
+            <Row>
+              <h2>{t('countrySpecificSection.italy')}</h2>
+              <Col>
+                <EditorBoolean<"it.conforme.lineeGuidaDesign"> fieldName="it.conforme.lineeGuidaDesign" />
+                <EditorBoolean<"it.conforme.modelloInteroperabilita"> fieldName="it.conforme.modelloInteroperabilita" />
+                <EditorBoolean<"it.conforme.misureMinimeSicurezza"> fieldName="it.conforme.misureMinimeSicurezza" />
+                <EditorBoolean<"it.conforme.gdpr"> fieldName="it.conforme.gdpr" />
+                <EditorInput<"it.riuso.codiceIPA"> fieldName="it.riuso.codiceIPA" />
+              </Col>
+              <Col>
+                <EditorBoolean<"it.piattaforme.spid"> fieldName="it.piattaforme.spid" />
+                <EditorBoolean<"it.piattaforme.cie"> fieldName="it.piattaforme.cie" />
+                <EditorBoolean<"it.piattaforme.anpr"> fieldName="it.piattaforme.anpr" />
+                <EditorBoolean<"it.piattaforme.pagopa"> fieldName="it.piattaforme.pagopa" />
+                <EditorBoolean<"it.piattaforme.io"> fieldName="it.piattaforme.io" />
+              </Col>
+            </Row>
+          )}
         </form>
       </FormProvider>
       <Footer

src/app/contents/constants.ts

@@ -5,13 +5,13 @@ export const {
   VALIDATOR_REMOTE_URL,
   DEFAULT_COUNTRY,
   FALLBACK_LANGUAGE = "en",
+  DEFAULT_COUNTRY_SECTIONS = "all", // TODO: switch this to 'none'
   // eslint-disable-next-line no-undef
 } = process.env;
 
 export const documentationUrl = `https://yml.publiccode.tools`;
 export const SAMPLE_YAML_URL = `https://raw.githubusercontent.com/italia/publiccode-editor/master/publiccode.yml`;
 export const elasticUrl = ELASTIC_URL || "";
-export const defaultCountry = DEFAULT_COUNTRY || "it";
 export const AUTOSAVE_TIMEOUT = 15000;
 export const DEFAULT_BRANCH = "master";
 export const defaultBranch = { branch: DEFAULT_BRANCH };

src/app/contents/countrySpecificSection.ts

@@ -0,0 +1,28 @@
+const SECTIONS = ["italy", "all", "none"] as const;
+export type CountrySpecificSection = typeof SECTIONS[number];
+
+export const parse = (input: string): CountrySpecificSection[] => {
+    const splitted = input?.split(",")?.map(s => s.trim());
+
+    const sections: CountrySpecificSection[] = [];
+    splitted.forEach(s => {
+        if (!SECTIONS.includes(s as CountrySpecificSection)) {
+            console.warn(`Unknown Country specific section: ${s}`);
+            return;
+        }
+
+        sections.push(s as CountrySpecificSection);
+    });
+
+    return sections;
+}
+
+export const isVisible = (
+  config: CountrySpecificSection[],
+  country: CountrySpecificSection,
+): boolean => {
+    if (config.includes("all")) return true;
+    if (config.includes("none")) return false;
+
+    return config.includes(country);
+}

src/i18n/locales/en.json

@@ -51,6 +51,9 @@
       "inprogress": "Validation in progress"
     }
   },
+  "countrySpecificSection": {
+    "italy": "Italy"
+  },
   "publiccodeyml": {
     "description": {
       "localisedName": {

src/i18n/locales/fr.json

@@ -48,6 +48,9 @@
       "inprogress": "Validation in progress"
     }
   },
+  "countrySpecificSection": {
+    "italy": "Italie"
+  },
   "publiccodeyml": {
     "description": {
       "localisedName": {

src/i18n/locales/it.json

@@ -51,6 +51,9 @@
   "validation": {
     "inprogress": "Validazione in corso"
   },
+  "countrySpecificSection": {
+    "italy": "Italia"
+  },
   "publiccodeyml": {
     "description": {
       "localisedName": {

webpack.config.ts

@@ -20,7 +20,7 @@ const config = (
         VALIDATOR_URL: JSON.stringify(process.env.VALIDATOR_URL),
         VALIDATOR_REMOTE_URL: JSON.stringify(process.env.VALIDATOR_REMOTE_URL),
         FALLBACK_LANGUAGE: JSON.stringify(process.env.FALLBACK_LANGUAGE),
-        DEFAULT_COUNTRY: JSON.stringify(process.env.DEFAULT_COUNTRY),
+        DEFAULT_COUNTRY_SECTIONS: JSON.stringify(process.env.DEFAULT_COUNTRY_SECTIONS),
       },
     }),
     new HtmlWebpackPlugin({