Sprint 61 UI Fixes

src/mocks/handlers.js

@@ -101,7 +101,7 @@ const allNamespaces = [
   },
 ];
 let namespace = personas.mark.namespace;
-let user = { ...personas.mark, namespace };
+let user = { ...personas.harley, namespace };
 
 export function resetAll() {
   consumersStore.reset();
@@ -170,7 +170,7 @@ export const handlers = [
     return res(
       ctx.status(200),
       ctx.json({
-        user: { ...personas.mark, namespace },
+        user: { ...user, namespace },
       })
     );
   }),

src/nextapp/components/login-buttons/login-buttons.tsx

@@ -83,6 +83,7 @@ const LoginButtons: React.FC<LoginButtonsProps> = ({
           href={href}
           leftIcon={icon}
           bgColor={bgColor}
+          w="100%"
           data-testid={`login-with-${kebabCase(button.text)}`}
         >
           Login with {button.text}

src/nextapp/components/login-dialog/login-dialog.tsx

@@ -11,6 +11,7 @@ import {
   useDisclosure,
   ButtonProps,
   Flex,
+  VStack,
 } from '@chakra-ui/react';
 
 import LoginButtons from '../login-buttons';
@@ -27,7 +28,6 @@ const LoginDialog: React.FC<LoginDialogProps> = ({
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { identities, identityContent } = useGlobal();
-  const size = identities.developer.length > 2 ? '2xl' : 'lg';
   const isInline = buttonVariant === 'link';
   const buttonProps = !isInline
     ? {}
@@ -43,36 +43,25 @@ const LoginDialog: React.FC<LoginDialogProps> = ({
       <Button onClick={onOpen} variant={buttonVariant} {...buttonProps}>
         {buttonText}
       </Button>
-      <Modal isOpen={isOpen} onClose={onClose} size={size}>
+      <Modal isOpen={isOpen} onClose={onClose} size="xl">
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>Login to request access</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <Text mb={7}>
-              Choose which of the options you want to authenticate with. You
-              will go to a secure website to log in and automatically return.{' '}
-            </Text>
             <Text>
-              Access to certain features of the APS portal will be based on the
-              account type that you choose.
+              You will go to a secure website to log in and automatically
+              return.
             </Text>
           </ModalBody>
 
-          <Flex
-            justifyContent="flex-start"
-            gridGap={2}
-            px={8}
-            pt={4}
-            pb={6}
-            wrap="wrap"
-          >
+          <VStack justifyContent="stretch" gridGap={2} px={8} pt={5} pb={6}>
             <LoginButtons
               identities={identities.developer}
               identityContent={identityContent}
               variant="inline"
             />
-          </Flex>
+          </VStack>
         </ModalContent>
       </Modal>
     </>

src/nextapp/components/products-list/dataset-input.tsx

@@ -91,7 +91,6 @@ const DatasetInput: React.FC<DatasetInputProps> = ({ dataset }) => {
             getLabelProps,
             getMenuProps,
             isOpen,
-            inputValue,
             highlightedIndex,
             selectedItem,
             getRootProps,
@@ -101,8 +100,9 @@ const DatasetInput: React.FC<DatasetInputProps> = ({ dataset }) => {
                 Link to BC Data Catalogue
               </FormLabel>
               <FormHelperText mb={2}>
-                This value is the slug value of a corresponding BC Data
-                Catalogue entry: https://catalogue.data.gov.bc.ca/dataset/
+                Enter an existing dataset. This value is the slug value of a
+                corresponding BCDC entry:
+                https://catalogue.data.gov.bc.ca/dataset/
                 <Text as="mark">{selected ? selected.name : '<not set>'}</Text>
               </FormHelperText>
               <Input
@@ -123,18 +123,15 @@ const DatasetInput: React.FC<DatasetInputProps> = ({ dataset }) => {
               />
               <Box
                 {...getMenuProps()}
-                border="2px solid"
-                borderColor="bc-blue"
-                borderTop="none"
-                borderBottomRightRadius={4}
-                borderBottomLeftRadius={4}
+                borderRadius={4}
+                boxShadow="lg"
                 position="absolute"
                 zIndex={2}
                 width="100%"
                 minHeight="5px"
                 maxHeight="300px"
                 overflowY="auto"
-                marginTop="-5px"
+                marginTop={0}
                 display={isOpen ? 'block' : 'none'}
               >
                 {isOpen &&
@@ -164,6 +161,13 @@ const DatasetInput: React.FC<DatasetInputProps> = ({ dataset }) => {
                       <Text fontSize="md">{d.title}</Text>
                     </Box>
                   ))}
+                {isOpen && isSuccess && !results.length && (
+                  <Box px={4} py={2} bgColor="white">
+                    <Text fontSize="md" color="bc-component">
+                      No results found
+                    </Text>
+                  </Box>
+                )}
               </Box>
             </>
           )}

src/nextapp/pages/index.tsx

@@ -4,18 +4,13 @@ import Head from 'next/head';
 import NextLink from 'next/link';
 import Card from '@/components/card';
 import GridLayout from '@/layouts/grid';
-import {
-  FaBook,
-  FaDatabase,
-  FaServer,
-  FaShieldAlt,
-  FaToolbox,
-} from 'react-icons/fa';
+import { FaBook, FaToolbox } from 'react-icons/fa';
 import { useAuth } from '@/shared/services/auth';
 
 type HomeActions = {
   title: string;
   url: string;
+  fallbackUrl?: string;
   icon: React.ComponentType;
   roles: string[];
   description: string;
@@ -31,6 +26,7 @@ const actions: HomeActions[] = [
   {
     title: 'For API Providers',
     url: '/manager/namespaces',
+    fallbackUrl: '/login?identity=provider&f=%2F',
     icon: FaToolbox,
     roles: [],
     description:
@@ -40,6 +36,7 @@ const actions: HomeActions[] = [
 
 const HomePage: React.FC = () => {
   const { user } = useAuth();
+  const isLoggedOut = !user;
 
   return (
     <>
@@ -78,7 +75,14 @@ const HomePage: React.FC = () => {
               <Card key={action.url}>
                 <Box p={4}>
                   <Heading size="md" mb={2}>
-                    <NextLink passHref href={action.url}>
+                    <NextLink
+                      passHref
+                      href={
+                        isLoggedOut && action.fallbackUrl
+                          ? action.fallbackUrl
+                          : action.url
+                      }
+                    >
                       <Link color="bc-link" display="flex" alignItems="center">
                         <Icon as={action.icon} color="bc-yellow" mr={2} />
                         {action.title}

src/nextapp/pages/manager/service-accounts/index.tsx

@@ -5,8 +5,6 @@ import {
   Button,
   Container,
   Text,
-  Divider,
-  Heading,
   Modal,
   ModalOverlay,
   ModalContent,
@@ -36,6 +34,7 @@ import { format } from 'date-fns';
 import { FaCheckCircle } from 'react-icons/fa';
 import ServiceAccountCreate from '@/components/service-account-create';
 import { useNamespaceBreadcrumbs } from '@/shared/hooks';
+import EmptyPane from '@/components/empty-pane';
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const queryKey = 'getServiceAccounts';
@@ -146,6 +145,13 @@ const ServiceAccountsPage: React.FC<
           <Table
             sortable
             data={data.allNamespaceServiceAccounts}
+            emptyView={
+              <EmptyPane
+                title="Create your first Service Account"
+                message="Service Accounts can be used to access our API for functions like publish gateway configuration."
+                action={<ServiceAccountCreate onCreate={handleCreate} />}
+              />
+            }
             columns={[
               { name: 'ID', key: 'active', sortable: true },
               { name: 'Created On', key: 'name', sortable: true },