From cba376719586c35275e4d102b3e7d725e83cba56 Mon Sep 17 00:00:00 2001
From: Tom Clift <tom.clift@papercut.com>
Date: Fri, 26 Nov 2021 16:39:26 +1100
Subject: [PATCH] feat: config.json option to show empty rings

The `showEmptyRings` option in `config.ts` can now be set via
`config.json`. This enables display of headers for rings that contain no
items.
---
 CHANGELOG.md                                       | 6 ++++++
 README.md                                          | 7 +++++--
 public/config.json                                 | 5 +++--
 src/components/QuadrantSection/QuadrantSection.tsx | 7 ++++---
 src/config.ts                                      | 5 ++---
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ac60d9..add71c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 All notable changes to this project will be documented in this file.
 
 ## Unreleased
+### Features
+- Added `showEmptyRings` option to `config.json`, which enables display of headers for rings containing no items.
+
+## 3.1.1
+
+## 3.1.0
 ### Bug Fixes
 - Fixed dependent projects failing to build without dependency `@types/sanitize-html`.
 
diff --git a/README.md b/README.md
index 3a008f1..7c78b46 100644
--- a/README.md
+++ b/README.md
@@ -112,6 +112,8 @@ For reference have a look at [public/logo.svg](./public/logo.svg).
 
 ### Change the rings and quadrants config
 To change the default rings and quadrants of the radar, you can place a custom `config.json` file within the `public` folder.
+The `showEmptyRings` option can be enabled to display the header for a ring even when it contains no items (helpful to
+reinforce the order of the rings).
 The content should look as follows:
 
 ```json
@@ -119,10 +121,11 @@ The content should look as follows:
   "quadrants": {
     "languages-and-frameworks": "Languages & Frameworks",
     "methods-and-patterns": "Methods & Patterns",
-    "platforms-and-aoe-services": "Platforms & Operations",
+    "platforms-and-operations": "Platforms & Operations",
     "tools": "Tools"
   },
-  "rings":["all", "adopt", "trial", "assess", "hold"]
+  "rings":["all", "adopt", "trial", "assess", "hold"],
+  "showEmptyRings": true
 }
 ```
 
diff --git a/public/config.json b/public/config.json
index 1116f72..3f42d8a 100644
--- a/public/config.json
+++ b/public/config.json
@@ -5,5 +5,6 @@
     "platforms-and-aoe-services": "Platforms & Operations",
     "tools": "Tools"
   },
-  "rings":["all", "adopt", "trial", "assess", "hold"]
-}
\ No newline at end of file
+  "rings":["all", "adopt", "trial", "assess", "hold"],
+  "showEmptyRings": false
+}
diff --git a/src/components/QuadrantSection/QuadrantSection.tsx b/src/components/QuadrantSection/QuadrantSection.tsx
index 13025e9..3cd6dca 100644
--- a/src/components/QuadrantSection/QuadrantSection.tsx
+++ b/src/components/QuadrantSection/QuadrantSection.tsx
@@ -1,4 +1,4 @@
-import { translate, showEmptyRings, ConfigData } from "../../config";
+import { translate, ConfigData } from "../../config";
 import Badge from "../Badge/Badge";
 import Link from "../Link/Link";
 import ItemList from "../ItemList/ItemList";
@@ -44,10 +44,11 @@ const renderRing = (
   ringName: string,
   quadrantName: string,
   groups: Group,
+  renderIfEmpty: boolean,
   big: boolean
 ) => {
   if (
-    !showEmptyRings &&
+    !renderIfEmpty &&
     (!groups[quadrantName] ||
       !groups[quadrantName][ringName] ||
       groups[quadrantName][ringName].length === 0)
@@ -91,7 +92,7 @@ export default function QuadrantSection({
       </div>
       <div className="quadrant-section__rings">
         {config.rings.map((ringName: string) =>
-          renderRing(ringName, quadrantName, groups, big)
+          renderRing(ringName, quadrantName, groups, config.showEmptyRings, big)
         )}
       </div>
     </div>
diff --git a/src/config.ts b/src/config.ts
index 7474465..f1d357d 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -3,6 +3,7 @@ import { Item } from "./model";
 export interface ConfigData {
   quadrants: { [key: string]: string };
   rings: string[];
+  showEmptyRings: boolean;
 }
 
 export const radarName =
@@ -12,8 +13,6 @@ export const radarNameShort = radarName;
 export const getItemPageNames = (items: Item[]) =>
   items.map((item) => `${item.quadrant}/${item.name}`);
 
-export const showEmptyRings = false;
-
 export function isMobileViewport() {
   // return false for server side rendering
   if (typeof window == "undefined") return false;
@@ -31,4 +30,4 @@ export function assetUrl(file: string) {
 
 export function translate(config: ConfigData, key: string) {
   return config.quadrants[key] || "-";
-}
\ No newline at end of file
+}