Merge pull request #403 from bcgov/feature/app-version

Feature/app version
bcgov · May 31, 2022 · ef09923 · ef09923
2 parents 5700360 + 13bc919
commit ef09923
Show file tree

Hide file tree

Showing 8 changed files with 272 additions and 14 deletions.
diff --git a/.github/workflows/ci-build-deploy.yaml b/.github/workflows/ci-build-deploy.yaml
@@ -223,6 +223,22 @@ jobs:
               value: 'https://api-services-portal-${{ steps.set-deploy-id.outputs.DEPLOY_ID }}.apps.silver.devops.gov.bc.ca'    
             NEXT_PUBLIC_GRAFANA_URL:
               value: 'https://grafana-apps-gov-bc-ca.dev.api.gov.bc.ca'
+            NEXT_PUBLIC_KUBE_CLUSTER:
+              value: 'feature-silver'
+            NEXT_PUBLIC_HELP_DESK_URL:
+              value: 'https://dpdd.atlassian.net/servicedesk/customer/portal/1/group/2'
+            NEXT_PUBLIC_HELP_CHAT_URL:
+              value: 'https://chat.developer.gov.bc.ca/channel/aps-ops'
+            NEXT_PUBLIC_HELP_ISSUE_URL:
+              value: 'https://github.com/bcgov/api-services-portal/issues'
+            NEXT_PUBLIC_HELP_API_DOCS_URL:
+              value: '/ds/api/v2/console/'
+            NEXT_PUBLIC_HELP_SUPPORT_URL:
+              value: 'https://bcgov.github.io/aps-infra-platform/'
+            NEXT_PUBLIC_HELP_RELEASE_URL:
+              value: 'https://bcgov.github.io/aps-infra-platform/releases/2022-may/'
+            NEXT_PUBLIC_HELP_STATUS_URL:
+              value: 'https://uptime.com/s/bcgov-dss'
             GWA_API_URL:
               value: 'https://gwa-api-gov-bc-ca.dev.api.gov.bc.ca'
             GWA_PROD_ENV_SLUG:

diff --git a/Dockerfile b/Dockerfile
@@ -1,10 +1,10 @@
 FROM node:16.14.2-alpine3.15
 
 ARG APP_VERSION
-ENV APP_VERSION=${APP_VERSION}
+ENV NEXT_PUBLIC_APP_VERSION=${APP_VERSION}
 
 ARG APP_REVISION
-ENV APP_REVISION=${APP_REVISION}
+ENV NEXT_PUBLIC_APP_REVISION=${APP_REVISION}
 
 RUN apk add curl jq
 RUN npm install -g [email protected]

diff --git a/src/nextapp/components/auth-action/auth-action.tsx b/src/nextapp/components/auth-action/auth-action.tsx
@@ -3,6 +3,7 @@ import {
   Avatar,
   Box,
   Button,
+  Flex,
   Icon,
   Menu,
   MenuButton,
@@ -16,6 +17,7 @@ import { FaChevronDown } from 'react-icons/fa';
 import { useAuth } from '@/shared/services/auth';
 import NamespaceMenu from '../namespace-menu';
 import Link from 'next/link';
+import HelpMenu from './help-menu';
 
 interface AuthActionProps {
   site: string;
@@ -30,11 +32,14 @@ const Signin: React.FC<AuthActionProps> = ({ site }) => {
 
   if (!user) {
     return (
-      <Link passHref href="/login">
-        <Button as="a" variant="secondary" data-testid="login-btn">
-          Login
-        </Button>
-      </Link>
+      <Flex align="center" gridGap={4}>
+        <HelpMenu />
+        <Link passHref href="/login">
+          <Button as="a" variant="secondary" data-testid="login-btn">
+            Login
+          </Button>
+        </Link>
+      </Flex>
     );
   }
 
@@ -46,6 +51,7 @@ const Signin: React.FC<AuthActionProps> = ({ site }) => {
       spacing={4}
     >
       {user.roles.includes('portal-user') && <NamespaceMenu user={user} />}
+      <HelpMenu />
       <Box
         as="span"
         d="flex"

diff --git a/src/nextapp/components/auth-action/help-menu.tsx b/src/nextapp/components/auth-action/help-menu.tsx
@@ -0,0 +1,211 @@
+import * as React from 'react';
+import {
+  Box,
+  Icon,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Text,
+  MenuDivider,
+  MenuGroup,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+  Button,
+  UnorderedList,
+  ListItem,
+  Link,
+} from '@chakra-ui/react';
+import { FaChevronDown } from 'react-icons/fa';
+import { BiLinkExternal } from 'react-icons/bi';
+import { useRestApi } from '@/shared/services/api';
+
+type HelpLinks = {
+  version: string;
+  revision: string;
+  cluster: string;
+  helpLinks: Record<string, string>;
+};
+
+const HelpMenu: React.FC = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { data, isSuccess, isError } = useRestApi<HelpLinks>('help', '/about', {
+    suspense: false,
+  });
+
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Support Links</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <UnorderedList
+              spacing={4}
+              sx={{
+                '& a': {
+                  textDecor: 'underline',
+                  color: 'bc-link',
+                  _hover: {
+                    textDecor: 'none',
+                  },
+                },
+              }}
+            >
+              <ListItem>
+                <Link
+                  href={data?.helpLinks.helpDeskUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Submit product and service requests using the Data Systems and
+                  Services request system
+                  <Icon as={BiLinkExternal} boxSize="4" ml={2} />
+                </Link>
+              </ListItem>
+              <ListItem>
+                <Link
+                  href={data?.helpLinks.helpChatUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Chat with us in Rocket Chat
+                  <Icon as={BiLinkExternal} boxSize="4" ml={2} />
+                </Link>
+              </ListItem>
+              <ListItem>
+                <Link
+                  href={data?.helpLinks.helpIssueUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Create an issue in Github
+                  <Icon as={BiLinkExternal} boxSize="4" ml={2} />
+                </Link>
+              </ListItem>
+            </UnorderedList>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onClick={onClose}>Close</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+      <Box
+        as="span"
+        d="flex"
+        pr={0}
+        alignItems="center"
+        position="relative"
+        zIndex={2}
+      >
+        <Menu placement="bottom-end">
+          <MenuButton
+            isDisabled={!isSuccess}
+            px={2}
+            py={1}
+            transition="all 0.2s"
+            borderRadius={4}
+            _hover={{ bg: 'bc-link' }}
+            _expanded={{ bg: 'blue.400' }}
+            _focus={{ boxShadow: 'outline' }}
+            data-testid="help-dropdown-btn"
+          >
+            Help
+            <Icon as={FaChevronDown} ml={2} aria-label="chevron down icon" />
+          </MenuButton>
+          <MenuList
+            color="bc-component"
+            sx={{
+              'p.chakra-menu__group__title': {
+                fontSize: 'md',
+                fontWeight: 'normal !important',
+                px: 1,
+              },
+            }}
+          >
+            <MenuGroup title="Documentation">
+              <MenuItem
+                as="a"
+                color="bc-blue"
+                href={data?.helpLinks.helpApiDocsUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                data-testid="help-menu-api-docs"
+              >
+                API Docs
+                <Icon as={BiLinkExternal} boxSize="4" ml={2} />
+              </MenuItem>
+              <MenuItem
+                as="a"
+                color="bc-blue"
+                href={data?.helpLinks.helpSupportUrl}
+                data-testid="help-menu-aps-support"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                APS Support
+                <Icon as={BiLinkExternal} boxSize="4" ml={2} />
+              </MenuItem>
+              <MenuItem
+                as="a"
+                color="bc-blue"
+                href={data?.helpLinks.helpReleaseUrl}
+                rel="noopener noreferrer"
+                data-testid="help-menu-release-notes"
+                target="_blank"
+              >
+                Release Notes
+                <Icon as={BiLinkExternal} boxSize="4" ml={2} />
+              </MenuItem>
+            </MenuGroup>
+            <MenuDivider />
+            <MenuGroup title="Contact Us">
+              <MenuItem
+                color="bc-blue"
+                data-testid="help-menu-support"
+                onClick={onOpen}
+              >
+                Support Links
+              </MenuItem>
+            </MenuGroup>
+            <MenuDivider />
+            <MenuGroup title="About">
+              <MenuItem
+                as="a"
+                color="bc-blue"
+                href={data?.helpLinks.helpStatusUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                data-testid="help-menu-status"
+              >
+                Status
+                <Icon as={BiLinkExternal} boxSize="4" ml={2} />
+              </MenuItem>
+              <MenuItem
+                isFocusable={false}
+                as="div"
+                flexDir="column"
+                alignItems="flex-start"
+                data-testid="help-menu-version"
+              >
+                <Text fontSize="xs">{`Version: ${
+                  data?.version
+                } revision: ${data?.revision?.slice(0, 9)}`}</Text>
+                <Text fontSize="xs">{`Cluster: ${data?.cluster}`}</Text>
+              </MenuItem>
+            </MenuGroup>
+          </MenuList>
+        </Menu>
+      </Box>
+    </>
+  );
+};
+export default HelpMenu;
diff --git a/src/nextapp/next.config.js b/src/nextapp/next.config.js
@@ -5,4 +5,5 @@ module.exports = {
   env: {
     USER_HAS_PORTFOLIO: !!process.env.IFRAMELY_API_KEY,
   },
-};
+  publicRuntimeConfig: {},
+};
diff --git a/src/nextapp/pages/_app.tsx b/src/nextapp/pages/_app.tsx
@@ -6,6 +6,7 @@ import {
   Link,
   List,
   ListItem,
+  Text,
 } from '@chakra-ui/react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -116,8 +117,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
             >
               <Container
                 d="flex"
-                justifyContent="center"
-                flexDirection="column"
+                justifyContent="space-between"
                 textAlign="center"
                 height={{ base: 'auto', md: '46px' }}
                 my={{ base: 4, md: 'none' }}
@@ -127,7 +127,6 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
                   display="flex"
                   flexDirection={{ base: 'column', md: 'row' }}
                   flexWrap={{ base: 'nowrap', md: 'wrap' }}
-                  alignItems="center"
                   color="#fff"
                   sx={{ '& li:last-child a': { border: 'none' } }}
                 >

diff --git a/src/server.ts b/src/server.ts
@@ -352,9 +352,18 @@ const configureExpress = (app: any) => {
 
   app.get('/about', (req: any, res: any) => {
     res.status(200).json({
-      version: process.env.APP_VERSION,
-      revision: process.env.APP_REVISION,
-      cluster: process.env.KUBE_CLUSTER,
+      version: process.env.NEXT_PUBLIC_APP_VERSION,
+      revision: process.env.NEXT_PUBLIC_APP_REVISION,
+      cluster: process.env.NEXT_PUBLIC_KUBE_CLUSTER,
+      helpLinks: {
+        helpDeskUrl: process.env.NEXT_PUBLIC_HELP_DESK_URL,
+        helpChatUrl: process.env.NEXT_PUBLIC_HELP_CHAT_URL,
+        helpIssueUrl: process.env.NEXT_PUBLIC_HELP_ISSUE_URL,
+        helpApiDocsUrl: process.env.NEXT_PUBLIC_HELP_API_DOCS_URL,
+        helpSupportUrl: process.env.NEXT_PUBLIC_HELP_SUPPORT_URL,
+        helpReleaseUrl: process.env.NEXT_PUBLIC_HELP_RELEASE_URL,
+        helpStatusUrl: process.env.NEXT_PUBLIC_HELP_STATUS_URL,
+      },
     });
   });
 

diff --git a/src/test/mock-server/server.js b/src/test/mock-server/server.js
@@ -538,6 +538,22 @@ app.post('/gql/api', async (req, res) => {
   res.json(response);
 });
 
+app.use('/about', (_, res) => {
+  res.json({
+    version: '1.5.5',
+    revision: '12o3i12o3i12vdjoi4jfr9j209rjfair',
+    cluster: 'feature-silver',
+    helpLinks: {
+      helpDeskUrl: 'http://url.com/helpDeskUrl',
+      helpChatUrl: 'http://url.com/helpChatUrl',
+      helpIssueUrl: 'http://url.com/helpIssueUrl',
+      helpApiDocsUrl: 'http://url.com/helpApiDocsUrl',
+      helpSupportUrl: 'http://url.com/helpSupportUrl',
+      helpReleaseUrl: 'http://url.com/helpReleaseUrl',
+      helpStatusUrl: 'http://url.com/helpStatusUrl',
+    },
+  });
+});
 app.use('/admin', adminApi);
 app.use('/ds/api', dsApi);
 app.listen(port, () => console.log(`Mock server running on port ${port}`));
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,4 +5,5 @@ module.exports = { @@
       env: {
         USER_HAS_PORTFOLIO: !!process.env.IFRAMELY_API_KEY,
       },
-    };
+      publicRuntimeConfig: {},
+    };