Feature/custom link to wiki (#37)

Url for wiki can be now dynamically specified in app.config:

```yaml
scorecards:
  wikiLinkTemplate: https://link-to-wiki/{id}
```

![image](https://user-images.githubusercontent.com/16001792/191766246-e8489df7-897f-4542-bf9f-77bdf1c2c59f.png)

#### ✔️ Checklist

- [x] Added tests for new functionality and regression tests for bug fixes
- [x] Added changeset (run `yarn changeset` in the root)
- [x] Screenshots of before and after attached (for UI changes)
- [x] Added or updated documentation (if applicable)

Author: jvilimek

.changeset/ninety-phones-juggle.md

@@ -0,0 +1,5 @@
+---
+'@oriflame/backstage-plugin-score-card': minor
+---
+
+New config [wikiLinkTemplate]

app-config.yaml

@@ -47,6 +47,7 @@ scaffolder:
 
 scorecards:
   jsonDataUrl: http://localhost:8090/plugins/score-card/sample-data/ #this is being served via http-server
+  wikiLinkTemplate: https://link-to-wiki/{id}
 
 catalog:
   rules:

packages/app/cypress/integration/scoreboard.ts

@@ -77,7 +77,7 @@ describe('score-card', () => {
         .should(
           'have.attr',
           'href',
-          'https://TBD/XXX/_wiki/wikis/XXX.wiki/2157',
+          'https://link-to-wiki/2157',
         );
     });
   });

plugins/score-card/README.md

@@ -33,6 +33,13 @@ scorecards:
 
 In the above location it expects data in a format see [scoring data](https://github.com/backstage/backstage/tree/master/plugins/score-card/sample-data).
 
+### Configuration
+
+All configuration options:
+
+- `jsonDataUrl`[optional]: url for the JSON data client, see [ScoringDataJsonClient](#scoringdatajsonclient).
+- `wikiLinkTemplate`: the template for the link to the wiki. You may use any existing properties from the `SystemScoreEntry`, e.g. `"https://TBD/XXX/_wiki/wikis/XXX.wiki/{id}"`.
+
 ### How to use the plugin
 
 1. Add Score board to `packages/app/src/App.tsx`:

plugins/score-card/config.d.ts

@@ -24,5 +24,10 @@ export interface Config {
      * @visibility frontend
      */
     jsonDataUrl?: string;
+    /**
+     * The template for the link to the wiki, e.g. "https://TBD/XXX/_wiki/wikis/XXX.wiki/{id}"
+     * @visibility frontend
+     */
+     wikiLinkTemplate?: string;
   };
 }

plugins/score-card/src/components/ScoreCard/ScoreCard.test.tsx

@@ -20,10 +20,16 @@ import { TestApiProvider } from '@backstage/test-utils';
 import { ScoringDataApi, scoringDataApiRef } from '../../api';
 import { Entity } from '@backstage/catalog-model';
 import { SystemScoreExtended } from '../../api/types';
-import { errorApiRef } from '@backstage/core-plugin-api';
+import { configApiRef, errorApiRef } from '@backstage/core-plugin-api';
 import { lightTheme } from '@backstage/theme';
 import { ThemeProvider } from '@material-ui/core';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
+import { ConfigReader } from '@backstage/core-app-api';
+
+const sharedConfigApiMock = new ConfigReader({
+  scorecards: { wikiLinkTemplate: 'https://mocked-wiki-url/{id}/{title}' },
+});
+const sharedErrorApi = { post: () => {} };
 
 describe('ScoreCard-EmptyData', () => {
   class MockClient implements ScoringDataApi {
@@ -40,7 +46,6 @@ describe('ScoreCard-EmptyData', () => {
       throw new Error('Method not implemented.');
     }
   }
-
   const mockClient = new MockClient();
 
   const entity: Entity = {
@@ -54,13 +59,13 @@ describe('ScoreCard-EmptyData', () => {
   it('should render a progress bar', async () => {
     jest.useFakeTimers();
 
-    const errorApi = { post: () => {} };
     const { getByTestId, findByTestId } = render(
       <ThemeProvider theme={lightTheme}>
         <TestApiProvider
           apis={[
-            [errorApiRef, errorApi],
+            [errorApiRef, sharedErrorApi],
             [scoringDataApiRef, mockClient],
+            [configApiRef, sharedConfigApiMock],
           ]}
         >
           <EntityProvider entity={entity}>
@@ -110,13 +115,13 @@ describe('ScoreCard-TestWithData', () => {
   it('should render a progress bar', async () => {
     jest.useFakeTimers();
 
-    const errorApi = { post: () => {} };
     const { getByTestId, findByTestId } = render(
       <ThemeProvider theme={lightTheme}>
         <TestApiProvider
           apis={[
-            [errorApiRef, errorApi],
+            [errorApiRef, sharedErrorApi],
             [scoringDataApiRef, mockClient],
+            [configApiRef, sharedConfigApiMock],
           ]}
         >
           <EntityProvider entity={entity}>

plugins/score-card/src/components/ScoreCard/ScoreCard.tsx

@@ -29,7 +29,7 @@ import {
   Table,
   TableColumn,
 } from '@backstage/core-components';
-import { errorApiRef, useApi } from '@backstage/core-plugin-api';
+import { configApiRef, errorApiRef, useApi } from '@backstage/core-plugin-api';
 import { scoreToColorConverter } from '../../helpers/scoreToColorConverter';
 import { getWarningPanel } from '../../helpers/getWarningPanel';
 import {
@@ -63,6 +63,7 @@ const useStyles = makeStyles(theme => ({
 const useScoringDataLoader = () => {
   const errorApi = useApi(errorApiRef);
   const scorigDataApi = useApi(scoringDataApiRef);
+  const config = useApi(configApiRef);
   const { entity } = useEntity();
 
   const { error, value, loading } = useAsync(
@@ -76,7 +77,11 @@ const useScoringDataLoader = () => {
     }
   }, [error, errorApi]);
 
-  return { loading, value, error };
+  const wikiLinkTemplate =
+    config.getOptionalString('scorecards.wikiLinkTemplate') ??
+    'https://TBD/XXX/_wiki/wikis/XXX.wiki/{id}';
+
+  return { loading, value, wikiLinkTemplate, error };
 };
 
 export const ScoreCard = ({
@@ -85,9 +90,13 @@ export const ScoreCard = ({
   entity?: Entity;
   variant?: InfoCardVariants;
 }) => {
-  const { loading, error, value: data } = useScoringDataLoader();
-
-  // let's load the entity data from url defined in config
+  // let's load the entity data from url defined in config etc
+  const {
+    loading,
+    error,
+    value: data,
+    wikiLinkTemplate,
+  } = useScoringDataLoader();
 
   const classes = useStyles();
 
@@ -105,7 +114,7 @@ export const ScoreCard = ({
   // let's define the main table columns
   const columns: TableColumn<SystemScoreTableEntry>[] = [
     areaColumn(data),
-    titleColumn,
+    titleColumn(wikiLinkTemplate),
     detailsColumn,
     scorePercentColumn,
   ];

plugins/score-card/src/components/ScoreCard/columns/titleColumn.tsx

@@ -18,22 +18,27 @@ import { TableColumn } from '@backstage/core-components';
 import { Link } from '@material-ui/core';
 import React from 'react';
 import { SystemScoreTableEntry } from '../helpers/getScoreTableEntries';
+import { getWikiUrl } from '../helpers/getWikiUrl';
 
-export const titleColumn: TableColumn<SystemScoreTableEntry> = {
-  title: <div style={{ minWidth: '7rem' }}>Requirement</div>,
-  field: 'title',
-  grouping: false,
-  width: '1%',
-  render: systemScoreEntry => (
-    <span>
-      <Link
-        href={`https://TBD/XXX/_wiki/wikis/XXX.wiki/${systemScoreEntry.id}`}
-        target="_blank"
-        data-id={systemScoreEntry.id}
-      >
-        {systemScoreEntry.title}
-      </Link>
-      {systemScoreEntry.isOptional ? ' (Optional)' : null}
-    </span>
-  ),
-};
+export function titleColumn(
+  wikiLinkTemplate: string,
+): TableColumn<SystemScoreTableEntry> {
+  return {
+    title: <div style={{ minWidth: '7rem' }}>Requirement</div>,
+    field: 'title',
+    grouping: false,
+    width: '1%',
+    render: systemScoreEntry => (
+      <span>
+        <Link
+          href={getWikiUrl(wikiLinkTemplate, systemScoreEntry)}
+          target="_blank"
+          data-id={systemScoreEntry.id}
+        >
+          {systemScoreEntry.title}
+        </Link>
+        {systemScoreEntry.isOptional ? ' (Optional)' : null}
+      </span>
+    ),
+  };
+}

plugins/score-card/src/components/ScoreCard/helpers/getWikiUrl.test.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2022 Oriflame
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { getWikiUrl } from './getWikiUrl';
+import { ScoreSuccessEnum, SystemScoreEntry } from '../../../api/types';
+
+describe('helper-getWikiUrl', () => {
+  const entry: SystemScoreEntry = {
+    id: 123,
+    title: 'some-score-title',
+    isOptional: false,
+    scorePercent: 50,
+    scoreSuccess: ScoreSuccessEnum.Partial,
+    scoreHints: 'score hints',
+    details: 'lorem ipsum details',
+  };
+
+  it('should replace known params', () => {
+    const url: string = getWikiUrl('http://someurl/{id}/{title}', entry);
+    expect(url).toEqual('http://someurl/123/some-score-title');
+  });
+
+  it('should handle null', () => {
+    const url: string = getWikiUrl('http://someurl/{id}/{title}', null);
+    expect(url).toEqual('http://someurl//');
+  });
+
+  it('should handle undefined', () => {
+    const url: string = getWikiUrl('http://someurl/{id}/{title}', undefined);
+    expect(url).toEqual('http://someurl//');
+  });
+});

plugins/score-card/src/components/ScoreCard/helpers/getWikiUrl.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2022 Oriflame
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SystemScoreEntry } from '../../../api/types';
+
+export function getWikiUrl(
+  wikiLinkTemplate: string,
+  entry: SystemScoreEntry | null | undefined,
+): string {
+  if (!entry) return wikiLinkTemplate.replace(/\{[^\}]+\}/g, '');
+  return wikiLinkTemplate.replace(/\{[^\}]+\}/g, matched => {
+    const keyName = matched.substring(1, matched.length - 1);
+    const value = entry[keyName as keyof SystemScoreEntry];
+    return !value ? '' : value.toString();
+  });
+}