providing client version in info page

Author: thefringeninja

Dockerfile

@@ -19,7 +19,9 @@ RUN yarn --frozen-lockfile
 
 COPY . .
 
-RUN yarn build && \
+COPY --from=version /src/.version ./
+
+RUN REACT_APP_CLIENT_VERSION=$(cat .version) yarn build && \
     yarn build:dist && \
     yarn cache clean
 
@@ -30,15 +32,14 @@ RUN test -z "$MYGET_API_KEY" || \
     yarn publish --new-version $(cat .version) && \
     echo "No API key found, skipping publishing..."
 
-COPY --from=version /src/.version /app/build
-
 FROM nginx:1.15.5-alpine AS runtime
 
 COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
 
 COPY ./nginx/mime.types /etc/nginx/mime.types
 
 COPY --from=build /app/build/ /var/www/
+COPY --from=version /src/.version /var/www
 
 EXPOSE 80
 

src/stream-store/Viewer/HalViewer/Home.tsx

@@ -6,19 +6,47 @@ import { Observable as obs } from 'rxjs';
 import rels from 'stream-store/rels';
 import store from 'stream-store/store';
 import { HalResource } from 'types';
+import { clientVersion } from 'utils';
 import { HalViewerProps } from './types';
 
 const provider$ = store.hal$.body$.map(({ provider }) => provider);
 
 const versions$ = store.hal$.body$.map(({ versions }) => versions);
 
+const info$ = provider$.zip(versions$).map(([provider, versions]) =>
+    [
+        {
+            id: 'Provider',
+            value: inflector.camel2words(
+                inflector.underscore(provider),
+            ) as string,
+        },
+    ]
+        .concat(
+            Object.keys(versions).map(key => ({
+                id: `${inflector.camel2words(
+                    inflector.underscore(key),
+                )} Version`,
+                value: versions[key] as string,
+            })),
+        )
+        .concat({
+            id: 'Client Version',
+            value: clientVersion as string,
+        }),
+);
+
 interface RecentState {
     recent: HalResource[];
 }
 
+interface InfoLineProps {
+    id: string;
+    value: string;
+}
+
 interface InfoState {
-    provider: string;
-    versions: { [key: string]: string };
+    info: InfoLineProps[];
 }
 
 interface IndexState extends RecentState, InfoState {}
@@ -29,50 +57,39 @@ const recent$ = store.hal$.body$.map(
 
 const state$ = createState<IndexState>(
     obs.merge(
-        provider$.map(provider => ['provider', () => provider]),
-        versions$.map(versions => ['versions', () => versions]),
+        info$.map(info => ['info', () => info]),
         recent$.map(recent => ['recent', () => recent]),
     ),
-    obs.of<IndexState>({ recent: [], provider: '', versions: {} }),
+    obs.of<IndexState>({ recent: [], info: [] }),
 );
 
-const Info: StatelessComponent<InfoState> = ({ provider, versions }) => (
+const InfoLine: StatelessComponent<InfoLineProps> = ({ id, value }) => (
+    <Table.Row>
+        <Table.Cell>
+            <strong>{id}</strong>
+        </Table.Cell>
+        <Table.Cell>{value}</Table.Cell>
+    </Table.Row>
+);
+
+const Info: StatelessComponent<InfoState> = ({ info }) => (
     <Table>
         <Table.Head>
             <Table.Row>
                 <Table.Cell colSpan={2}>{'Server Information'}</Table.Cell>
             </Table.Row>
         </Table.Head>
         <Table.Body>
-            <Table.Row>
-                <Table.Cell>
-                    <strong>{'Provider'}</strong>
-                </Table.Cell>
-                <Table.Cell>
-                    {inflector.camel2words(inflector.underscore(provider))}
-                </Table.Cell>
-            </Table.Row>
-            {Object.keys(versions).map(key => (
-                <Table.Row key={key}>
-                    <Table.Cell>
-                        <strong>
-                            {inflector.camel2words(inflector.underscore(key))}{' '}
-                            {'Version'}
-                        </strong>
-                    </Table.Cell>
-                    <Table.Cell>{versions[key]}</Table.Cell>
-                </Table.Row>
+            {info.map(({ id, value }) => (
+                <InfoLine key={id} id={id} value={value} />
             ))}
         </Table.Body>
     </Table>
 );
 
-const Index: ComponentType<IndexState & HalViewerProps> = ({
-    provider,
-    versions,
-}) => (
+const Index: ComponentType<IndexState & HalViewerProps> = ({ info }) => (
     <section>
-        <Info provider={provider} versions={versions} />
+        <Info info={info} />
     </section>
 );
 

src/utils/clientVersion.ts

@@ -0,0 +1,3 @@
+const clientVersion: string | undefined = process.env.REACT_APP_CLIENT_VERSION;
+
+export default clientVersion;

src/utils/index.ts

@@ -9,3 +9,5 @@ export { default as mediaTypes } from './mediaTypes';
 export { default as hal } from './hal';
 
 export { default as reactJsonTheme } from './reactJsonTheme';
+
+export { default as clientVersion } from './clientVersion';