Rest of page w/o filter and search functionality

bcgov · Jun 6, 2024 · 8ab4992 · 8ab4992
1 parent d9926a2
commit 8ab4992
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 9 deletions.
diff --git a/src/nextapp/components/namespace-manager/namespace-manager.tsx b/src/nextapp/components/namespace-manager/namespace-manager.tsx
@@ -90,10 +90,10 @@ const NamespaceManager: React.FC<NamespaceManagerProps> = ({
         <ModalContent>
           <ModalCloseButton />
           <ModalHeader pb={0}>
-            <Heading size="inherit">Export Namespace Report</Heading>
+            <Heading size="inherit">Export Gateway Report</Heading>
             <Box fontSize="md" fontWeight="normal" width="100%" mt={3}>
               <Text color="bc-component" mb={2.5}>
-                Export a detailed report of your namespace metrics and
+                Export a detailed report of your gateway metrics and
                 activities
               </Text>
               <Flex
@@ -144,9 +144,9 @@ const NamespaceManager: React.FC<NamespaceManagerProps> = ({
                     size="sm"
                     data-testid="export-report-empty-text"
                   >
-                    You have no namespaces
+                    You have no gateways
                   </Heading>
-                  <Text fontSize="sm">Create a namespace to manage.</Text>
+                  <Text fontSize="sm">Create a gateway to manage.</Text>
                 </Box>
               </Center>
             )}
@@ -181,7 +181,7 @@ const NamespaceManager: React.FC<NamespaceManagerProps> = ({
             <Box>
               {isInvalid && (
                 <Text color="bc-error" data-testid="export-report-select-error">
-                  *Please select a namespace
+                  *Please select a gateway
                 </Text>
               )}
             </Box>

diff --git a/src/nextapp/pages/manager/gateways/index.tsx b/src/nextapp/pages/manager/gateways/index.tsx
@@ -8,16 +8,35 @@ import {
   Link,
   useDisclosure,
   Button,
+  Flex,
+  Spacer,
+  Center,
+  useToast,
+  Select,
+  Input,
+  InputGroup,
+  InputRightElement,
 } from '@chakra-ui/react';
 import Head from 'next/head';
 import { gql } from 'graphql-request';
-import { FaPlus, FaLaptopCode, FaRocket } from 'react-icons/fa';
+import {
+  FaPlus,
+  FaLaptopCode,
+  FaRocket,
+  FaServer,
+  FaClock,
+  FaMinusCircle,
+  FaCheckCircle,
+  FaSearch,
+} from 'react-icons/fa';
+import { useQueryClient } from 'react-query';
 
 import PageHeader from '@/components/page-header';
 import GridLayout from '@/layouts/grid';
 import Card from '@/components/card';
-import { useApi } from '@/shared/services/api';
+import { restApi, useApi } from '@/shared/services/api';
 import NamespaceManager from '@/components/namespace-manager/namespace-manager';
+import { Namespace } from '@/shared/types/query.types';
 
 type GatewayActions = {
   title: string;
@@ -62,6 +81,36 @@ const MyGatewaysPage: React.FC = () => {
   const managerDisclosure = useDisclosure();
   const { data } = useApi('allNamespaces', { query }, { suspense: false });
 
+  const client = useQueryClient();
+  const toast = useToast();
+  const handleNamespaceChange = React.useCallback(
+    (namespace: Namespace) => async () => {
+      toast({
+        title: `Switching to  ${namespace.name} namespace`,
+        status: 'info',
+        isClosable: true,
+      });
+      try {
+        await restApi(`/admin/switch/${namespace.id}`, { method: 'PUT' });
+        toast.closeAll();
+        client.invalidateQueries();
+        toast({
+          title: `Switched to  ${namespace.name} namespace`,
+          status: 'success',
+          isClosable: true,
+        });
+      } catch (err) {
+        toast.closeAll();
+        toast({
+          title: 'Unable to switch namespaces',
+          status: 'error',
+          isClosable: true,
+        });
+      }
+    },
+    [client, toast]
+  );
+
   return (
     <>
       <Head>
@@ -86,10 +135,10 @@ const MyGatewaysPage: React.FC = () => {
             <Card>
               <Box p={4}>
                 <Heading size="sm" mb={2}>
-                  <div display="flex" alignItems="center">
+                  <Flex alignItems="center">
                     <Icon as={action.icon} mb={0.5} mr={4} boxSize={6} />
                     {action.title}
-                  </div>
+                  </Flex>
                 </Heading>
                 <Text fontSize="sm">
                   {action.description}{' '}
@@ -107,6 +156,88 @@ const MyGatewaysPage: React.FC = () => {
             </Card>
           ))}
         </GridLayout>
+        <Box bgColor="white" mb={4} px={12} py={8}>
+          <Flex mb={4}>
+            <Select placeholder="Filter by: All" w="60%" mr={4}>
+              <option value="option1">Publishing disabled</option>
+              <option value="option2">Pending publishing permission</option>
+              <option value="option3">Publishing enabled</option>
+            </Select>
+            <InputGroup>
+              <Input variant='outline' placeholder="Search by display name or ID" />
+              <InputRightElement children={<Icon as={FaSearch} color="#737373" />} />
+            </InputGroup>
+          </Flex>
+          {data && <Text mb={4}>{data.allNamespaces.length} gateways </Text>}
+          {data &&
+            data.allNamespaces.map((namespace) => (
+              <Flex
+                borderRadius={10}
+                border="1px solid"
+                borderColor="#E1E1E5"
+                minH={16}
+                px={4}
+                py={2}
+                mb={4}
+              >
+                <Box>
+                  <Icon
+                    as={FaServer}
+                    color="bc-blue"
+                    mb={0.5}
+                    mr={4}
+                    boxSize={4}
+                  />
+                  <Link
+                    fontSize="md"
+                    as="b"
+                    color="bc-blue"
+                    onClick={handleNamespaceChange(namespace)}
+                  >
+                    Display Name
+                  </Link>
+                  <Text fontSize="md" pl={8}>
+                    {namespace.name}
+                  </Text>
+                </Box>
+                <Spacer />
+                {namespace.orgEnabled === false && !namespace.orgUpdatedAt && (
+                  <Center>
+                    <Icon
+                      as={FaMinusCircle}
+                      color="#B0B0B0"
+                      mr={4}
+                      boxSize={4}
+                    />
+                    <Text fontSize="sm" w={40}>
+                      Publishing disabled
+                    </Text>
+                  </Center>
+                )}
+                {namespace.orgEnabled === false && namespace.orgUpdatedAt && (
+                  <Center>
+                    <Icon as={FaClock} color="#EE9B1F" mr={4} boxSize={4} />
+                    <Text fontSize="sm" w={40}>
+                      Pending publishing permission
+                    </Text>
+                  </Center>
+                )}
+                {namespace.orgEnabled === true && (
+                  <Center>
+                    <Icon
+                      as={FaCheckCircle}
+                      color="#2E8540"
+                      mr={4}
+                      boxSize={4}
+                    />
+                    <Text fontSize="sm" w={40}>
+                      Publishing enabled
+                    </Text>
+                  </Center>
+                )}
+              </Flex>
+            ))}
+        </Box>
       </Container>
       {data && (
         <NamespaceManager