Parse and display MADR v3 front matter correctly

Signed-off-by: Brian Phillips <28457+brianphillips@users.noreply.github.com>

plugins/adr/src/components/AdrReader/AdrReader.tsx

@@ -59,6 +59,7 @@ export const AdrReader = (props: {
     const adrDecorators = decorators ?? [
       adrDecoratorFactories.createRewriteRelativeLinksDecorator(),
       adrDecoratorFactories.createRewriteRelativeEmbedsDecorator(),
+      adrDecoratorFactories.createFrontMatterFormatterDecorator(),
     ];
 
     return adrDecorators.reduce(

plugins/adr/src/components/AdrReader/decorators.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { parseMadrWithFrontmatter } from '@backstage/plugin-adr-common';
 import { AdrContentDecorator } from './types';
 
 /**
@@ -44,4 +45,23 @@ export const adrDecoratorFactories = Object.freeze({
       ),
     });
   },
+  /**
+   * Formats YAML front-matter into a table format (if any exists in the markdown document)
+   */
+  createFrontMatterFormatterDecorator(): AdrContentDecorator {
+    return ({ content }) => {
+      const parsedFrontmatter = parseMadrWithFrontmatter(content);
+      let table = '';
+      const attrs = parsedFrontmatter.attributes;
+      if (Object.keys(attrs).length > 0) {
+        const stripNewLines = (val: unknown) =>
+          String(val).replaceAll('\n', '<br/>');
+        const row = (vals: string[]) => `|${vals.join('|')}|\n`;
+        table = `${row(Object.keys(attrs))}`;
+        table += `${row(Object.keys(attrs).map(() => '---'))}`;
+        table += `${row(Object.values(attrs).map(stripNewLines))}\n\n`;
+      }
+      return { content: table + parsedFrontmatter.content };
+    };
+  },
 });