fixed PR comments

odigos-io · Jul 30, 2023 · 1882fb8 · 1882fb8
1 parent 1adfa52
commit 1882fb8
Show file tree

Hide file tree

Showing 16 changed files with 141 additions and 86 deletions.
diff --git a/frontend/webapp/assets/icons/close-modal.svg b/frontend/webapp/assets/icons/close-modal.svg
diff --git a/frontend/webapp/assets/icons/design.system/eye-close.svg b/frontend/webapp/assets/icons/design.system/eye-close.svg
diff --git a/frontend/webapp/assets/icons/design.system/eye-open.svg b/frontend/webapp/assets/icons/design.system/eye-open.svg
diff --git a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
@@ -33,7 +33,7 @@ export const CardWrapper = styled.div`
   flex-direction: column;
   cursor: pointer;
   &:hover {
-    background: ${({ theme }) => theme.colors.light_dark};
+    background: var(--dark-mode-dark-1, #07111a81);
   }
 `;
 
@@ -49,3 +49,11 @@ export const ApplicationNameWrapper = styled.div`
   margin-top: 12px;
   margin-bottom: 20px;
 `;
+
+export const EmptyListWrapper = styled.div`
+  width: 100%;
+  margin-top: 130px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/...tend/webapp/components/overview/destination/destination.list/destination.managed.card.tsx b/...tend/webapp/components/overview/destination/destination.list/destination.managed.card.tsx
@@ -35,7 +35,7 @@ export default function DestinationManagedCard({
 
       return acc;
     }, []);
-  }, [JSON.stringify(supported_signals)]);
+  }, [JSON.stringify(signals)]);
 
   return (
     <CardWrapper onClick={onClick}>

diff --git a/...end/webapp/components/overview/destination/destination.list/destinations.managed.list.tsx b/...end/webapp/components/overview/destination/destination.list/destinations.managed.list.tsx
@@ -2,11 +2,15 @@ import React from "react";
 import DestinationManagedCard from "./destination.managed.card";
 import { KeyvalText, KeyvalButton } from "@/design.system";
 import { Plus } from "@/assets/icons/overview";
-import { OVERVIEW, SETUP } from "@/utils/constants";
+import { OVERVIEW } from "@/utils/constants";
 import theme from "@/styles/palette";
-import { MenuWrapper, ManagedListWrapper } from "./destination.list.styled";
+import {
+  MenuWrapper,
+  ManagedListWrapper,
+  EmptyListWrapper,
+} from "./destination.list.styled";
 import { Destination } from "@/types/destinations";
-
+import Empty from "@/assets/images/empty-list.svg";
 const BUTTON_STYLES = { gap: 10, width: 224, height: 40 };
 interface DestinationsManagedListProps {
   data: Destination[];
@@ -40,7 +44,15 @@ export function DestinationsManagedList({
           </KeyvalText>
         </KeyvalButton>
       </MenuWrapper>
-      <ManagedListWrapper>{renderDestinations()}</ManagedListWrapper>
+      <ManagedListWrapper>
+        {data?.length === 0 ? (
+          <EmptyListWrapper>
+            <Empty />
+          </EmptyListWrapper>
+        ) : (
+          renderDestinations()
+        )}
+      </ManagedListWrapper>
     </>
   );
 }
diff --git a/frontend/webapp/components/overview/destination/manage.destination/form.danger.zone.tsx b/frontend/webapp/components/overview/destination/manage.destination/form.danger.zone.tsx
@@ -47,18 +47,20 @@ export default function FormDangerZone({
           onClick={() => setShowModal(true)}
         />
       </FieldWrapper>
-      <KeyvalModal
-        show={showModal}
-        setShow={() => setShowModal(false)}
-        config={modalConfig}
-      >
-        <br />
-        <ConnectionsIcons icon={data?.image_url} imageStyle={IMAGE_STYLE} />
-        <br />
-        <KeyvalText color={theme.text.primary} size={20} weight={600}>
-          {`${OVERVIEW.DELETE} ${data?.name}`}
-        </KeyvalText>
-      </KeyvalModal>
+      {showModal && (
+        <KeyvalModal
+          show={showModal}
+          closeModal={() => setShowModal(false)}
+          config={modalConfig}
+        >
+          <br />
+          <ConnectionsIcons icon={data?.image_url} imageStyle={IMAGE_STYLE} />
+          <br />
+          <KeyvalText color={theme.text.primary} size={20} weight={600}>
+            {`${OVERVIEW.DELETE} ${data?.name}`}
+          </KeyvalText>
+        </KeyvalModal>
+      )}
     </>
   );
 }
diff --git a/...tend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx b/...tend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
@@ -130,7 +130,9 @@ export function CreateConnectionForm({
   return (
     <div>
       <KeyvalText size={18} weight={600}>
-        {SETUP.CREATE_CONNECTION}
+        {dynamicFieldsValues
+          ? SETUP.UPDATE_CONNECTION
+          : SETUP.CREATE_CONNECTION}
       </KeyvalText>
       <ConnectionMonitorsWrapper>
         <KeyvalText size={14}>{SETUP.CONNECTION_MONITORS}</KeyvalText>

diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
@@ -38,7 +38,7 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
     };
 
     mutate(destination, {
-      onSuccess,
+      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
       onError,
     });
   }

diff --git a/frontend/webapp/design.system/input/input.styled.tsx b/frontend/webapp/design.system/input/input.styled.tsx
@@ -6,6 +6,7 @@ interface ActiveProps {
 }
 
 export const StyledInputContainer = styled.div<ActiveProps>`
+  position: relative;
   display: flex;
   width: 100%;
   padding-left: 13px;
@@ -46,3 +47,9 @@ export const LabelWrapper = styled.div`
 export const ErrorWrapper = styled.div`
   margin-top: 4px;
 `;
+
+export const DisplayIconsWrapper = styled.div`
+  position: absolute;
+  right: 10px;
+  cursor: pointer;
+`;
diff --git a/frontend/webapp/design.system/input/input.tsx b/frontend/webapp/design.system/input/input.tsx
@@ -1,12 +1,14 @@
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, useState } from "react";
 import {
   StyledInputContainer,
   StyledInput,
   ErrorWrapper,
   LabelWrapper,
+  DisplayIconsWrapper,
 } from "./input.styled";
 import { KeyvalText } from "../text/text";
-
+import EyeOpenIcon from "@/assets/icons/design.system/eye-open.svg";
+import EyeCloseIcon from "@/assets/icons/design.system/eye-close.svg";
 interface InputProps {
   label?: string;
   value: string;
@@ -24,6 +26,8 @@ export function KeyvalInput({
   error,
   style = {},
 }: InputProps): JSX.Element {
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+
   function handleChange(event: ChangeEvent<HTMLInputElement>): void {
     onChange(event.target.value);
   }
@@ -43,11 +47,20 @@ export function KeyvalInput({
         style={{ ...style }}
       >
         <StyledInput
-          type={type}
+          type={showPassword ? "text" : type}
           value={value}
           onChange={handleChange}
           autoComplete="off"
         />
+        {type === "password" && (
+          <DisplayIconsWrapper onClick={() => setShowPassword(!showPassword)}>
+            {!showPassword ? (
+              <EyeOpenIcon width={16} height={16} />
+            ) : (
+              <EyeCloseIcon width={16} height={16} />
+            )}
+          </DisplayIconsWrapper>
+        )}
       </StyledInputContainer>
       {error && (
         <ErrorWrapper>

diff --git a/frontend/webapp/design.system/modal/modal.styled.tsx b/frontend/webapp/design.system/modal/modal.styled.tsx
@@ -5,7 +5,6 @@ interface PropsOverlay {
   showOverlay: boolean;
   positionX: ModalPositionX;
   positionY: ModalPositionY;
-  show: boolean;
 }
 interface PropsModalContainer {
   padding: string;

diff --git a/frontend/webapp/design.system/modal/modal.tsx b/frontend/webapp/design.system/modal/modal.tsx
@@ -5,81 +5,67 @@ import { Props } from "./types";
 import { KeyvalText } from "../text/text";
 import theme from "@/styles/palette";
 import { useOnClickOutside } from "@/hooks";
-
-export function KeyvalModal({ children, show, setShow, config }: Props) {
+import CloseIcon from "@/assets/icons/close-modal.svg";
+export function KeyvalModal({ children, closeModal, config }: Props) {
   const modalRef = useRef<HTMLDivElement>(null);
 
   // handle what happens on click outside of modal
-  const handleClickOutside = () => setShow(false);
+  const handleClickOutside = () => closeModal();
 
   // handle what happens on key press
   const handleKeyPress = useCallback((event: KeyboardEvent) => {
-    if (event.key === "Escape") setShow(false);
+    if (event.key === "Escape") closeModal();
   }, []);
 
   useOnClickOutside(modalRef, handleClickOutside);
 
   useEffect(() => {
-    if (show) {
-      // attach the event listener if the modal is shown
-      document.addEventListener("keydown", handleKeyPress);
-      // remove the event listener
-      return () => {
-        document.removeEventListener("keydown", handleKeyPress);
-      };
-    }
-  }, [handleKeyPress, show]);
+    // attach the event listener if the modal is shown
+    document.addEventListener("keydown", handleKeyPress);
+    // remove the event listener
+    return () => {
+      document.removeEventListener("keydown", handleKeyPress);
+    };
+  }, [handleKeyPress]);
 
   return (
     <>
-      {show && (
-        <PortalModal wrapperId="modal-portal">
-          <S.Overlay
-            showOverlay={config.showOverlay}
-            positionX={config.positionX}
-            positionY={config.positionY}
-            show={show}
-            style={{
-              animationDuration: "400ms",
-              animationDelay: "0",
-            }}
-          >
-            <S.ModalContainer padding={config.padding} ref={modalRef}>
-              {config.showHeader && (
-                <S.ModalHeader>
-                  <KeyvalText weight={500} color={theme.text.dark_button}>
-                    {config.title}
-                  </KeyvalText>
-                </S.ModalHeader>
-              )}
+      <PortalModal wrapperId="modal-portal">
+        <S.Overlay
+          showOverlay={config.showOverlay}
+          positionX={config.positionX}
+          positionY={config.positionY}
+          style={{
+            animationDuration: "400ms",
+            animationDelay: "0",
+          }}
+        >
+          <S.ModalContainer padding={config.padding} ref={modalRef}>
+            {config.showHeader && (
+              <S.ModalHeader>
+                <KeyvalText weight={500} color={theme.text.dark_button}>
+                  {config.title}
+                </KeyvalText>
+              </S.ModalHeader>
+            )}
 
-              <S.Close onClick={() => setShow(!show)}>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  fill="currentColor"
-                  className="bi bi-x"
-                  viewBox="0 0 16 16"
-                >
-                  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
-                </svg>
-              </S.Close>
+            <S.Close onClick={closeModal}>
+              <CloseIcon />
+            </S.Close>
 
-              <S.Content>{children}</S.Content>
-              {config?.footer && (
-                <S.ModalFooter>
-                  <S.PrimaryButton onClick={config.footer.primaryBtnAction}>
-                    <KeyvalText size={14} weight={500} color={"#5c5c5c"}>
-                      {config.footer.primaryBtnText}
-                    </KeyvalText>
-                  </S.PrimaryButton>
-                </S.ModalFooter>
-              )}
-            </S.ModalContainer>
-          </S.Overlay>
-        </PortalModal>
-      )}
+            <S.Content>{children}</S.Content>
+            {config?.footer && (
+              <S.ModalFooter>
+                <S.PrimaryButton onClick={config.footer.primaryBtnAction}>
+                  <KeyvalText size={14} weight={500} color={"#5c5c5c"}>
+                    {config.footer.primaryBtnText}
+                  </KeyvalText>
+                </S.PrimaryButton>
+              </S.ModalFooter>
+            )}
+          </S.ModalContainer>
+        </S.Overlay>
+      </PortalModal>
     </>
   );
 }
diff --git a/frontend/webapp/design.system/modal/types.tsx b/frontend/webapp/design.system/modal/types.tsx
@@ -28,6 +28,6 @@ export interface ModalConfig {
 export interface Props {
   show: boolean;
   config: ModalConfig;
-  setShow: (value: boolean) => void;
+  closeModal: () => void;
   children: JSX.Element | JSX.Element[];
 }
diff --git a/frontend/webapp/hooks/useOnClickOutside.tsx b/frontend/webapp/hooks/useOnClickOutside.tsx
@@ -9,7 +9,7 @@ export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
   useEffect(() => {
     const listener = (event: Event) => {
       const el = ref?.current;
-      if (!el || el.contains((event?.target as Node) || null)) return null;
+      if (el?.contains(event?.target as Node)) return null;
 
       // Call the handler only if the click is outside of the element passed.
       handler(event);

diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
@@ -23,7 +23,7 @@ export const SETUP = {
     SELECT_ALL: "Select All",
     FUTURE_APPLY: "Apply for any future apps",
     TOOLTIP: "Automatically connect any future apps in this namespace",
-    SEARCH_PLACEHOLDER: "Search - default",
+    SEARCH_PLACEHOLDER: "Search",
     TYPE: "Type",
     MONITORING: "I want to monitor",
   },
@@ -36,6 +36,7 @@ export const SETUP = {
   SELECTED: "Selected",
   MANAGED: "Managed",
   CREATE_CONNECTION: "Create Connection",
+  UPDATE_CONNECTION: "Update Connection",
   CONNECTION_MONITORS: "This connection will monitor:",
   MONITORS: {
     LOGS: "Logs",
@@ -63,6 +64,7 @@ export const OVERVIEW = {
   },
   ADD_NEW_DESTINATION: "Add New Destination",
   DESTINATION_UPDATE_SUCCESS: "Destination updated successfully",
+  DESTINATION_CREATED_SUCCESS: "Destination created successfully",
   DESTINATION_DELETED_SUCCESS: "Destination deleted successfully",
   MANAGE: "Manage",
   DELETE: "Delete",