style edit display name

bcgov · Jun 3, 2024 · 56be561 · 56be561
1 parent 1bdca86
commit 56be561
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 12 deletions.
diff --git a/src/nextapp/components/edit-display-name/edit-display-name.tsx b/src/nextapp/components/edit-display-name/edit-display-name.tsx
@@ -13,6 +13,7 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Text,
   useDisclosure,
   useToast,
 } from '@chakra-ui/react';
@@ -35,10 +36,29 @@ const EditNamespaceDisplayName: React.FC<EditNamespaceDisplayNameProps> = ({
   const { isOpen, onOpen, onClose } = useDisclosure();
   const queryClient = useQueryClient();
   const mutate = useApiMutation<NamespaceInput>(mutation);
+  // console.log(data)
+  const [inputValue, setInputValue] = React.useState(data?.name || '');
+  const [charCount, setCharCount] = React.useState(data?.name?.length || 0);
+  const charLimit = 30;
+  const handleInputChange = (event) => {
+    const { value } = event.target;
+    setInputValue(value);
+    setCharCount(value.length);
+  };
   const form = React.useRef<HTMLFormElement>();
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    updateNamespaceDisplayName();
+    if (charCount <= charLimit) {
+      // updateNamespaceDisplayName();
+      submitTheForm();
+    }
+  };
+  const submitTheForm = async () => {
+    toast({
+      title: 'Submitted it!',
+      status: 'success',
+      isClosable: true,
+    })
   };
   const updateNamespaceDisplayName = async () => {
     if (form.current) {
@@ -84,38 +104,60 @@ const EditNamespaceDisplayName: React.FC<EditNamespaceDisplayNameProps> = ({
       >
         Edit
       </Button>
-      <Modal closeOnOverlayClick={false} isOpen={isOpen} onClose={onClose}>
+      <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
-        <ModalContent borderRadius="4px">
-          <ModalHeader>Edit display name</ModalHeader>
-          <ModalBody>
+        <ModalContent borderRadius="4px" px={11}>
+          <ModalHeader pt={10}>Edit display name</ModalHeader>
+          <ModalBody pt={0} pb={10}>
             <form ref={form} onSubmit={handleSubmit}>
               <FormControl isRequired>
                 <FormLabel></FormLabel>
-                <FormHelperText>
-                  A meaningful display name makes it easy for anyone to identify and distinguish this gateway from others.
+                <FormHelperText pb={4} fontSize={"16px"}>
+                  A meaningful display name makes it easy for anyone to identify and distinguish this Gateway from others.
                 </FormHelperText>
+                <Text
+                  fontSize={"12px"}
+                  color={charCount > charLimit ? 'bc-error' : 'gray.500'}
+                  mt={2}
+                  textAlign="right"
+                >
+                  {charCount}/{charLimit}
+                </Text>
                 <Input
+                  value={inputValue}
                   // defaultValue={data?.displayName}
-                  defaultValue={data?.name}
+                  // defaultValue={data?.name}
+                  onChange={handleInputChange}
                   name="displayName"
                   variant="bc-input"
+                  isInvalid={charCount > charLimit}
                   data-testid="edit-display-name-input"
                 />
+                {charCount > charLimit && (
+                  <Text color="bc-error" mt={2} mb={-8}>
+                    You have reached the character limit
+                  </Text>
+                )}
               </FormControl>
             </form>
           </ModalBody>
-          <ModalFooter>
+          <ModalFooter pt={7} pb={7}>
             <ButtonGroup>
               <Button
+                px={7}
                 onClick={onClose}
                 variant="secondary"
                 data-testid="edit-display-name-cancel-btn"
               >
                 Cancel
               </Button>
-              <Button onClick={handleSaveClick} data-testid="edit-display-name-submit-btn">
-                Update
+              <Button
+                type="submit"
+                onClick={handleSubmit}
+                data-testid="edit-display-name-submit-btn"
+                isDisabled={charCount > charLimit}
+              >
+                Save
               </Button>
             </ButtonGroup>
           </ModalFooter>

diff --git a/src/nextapp/components/namespace-menu/namespace-menu.tsx b/src/nextapp/components/namespace-menu/namespace-menu.tsx
@@ -215,7 +215,7 @@ const NamespaceMenu: React.FC<NamespaceMenuProps> = ({
                       >
                         <Box display="flex" alignItems="center">
                           <Icon as={FaServer} />
-                          <Text ml={2}>{n.displayName ? n.displayName : 'Display name here'}</Text>
+                          <Text ml={2}>{n.displayName ? n.displayName : `Gateway ${n.name}`}</Text>
                         </Box>
                         <Text ml={6} color='text'>{n.name}</Text>
                       </MenuItem>