[GEN-1683]: warning modal - warn again

frontend/webapp/components/modals/delete-warning/index.tsx

@@ -1,21 +1,28 @@
 import React from 'react';
 import { WarningModal } from '@/reuseable-components';
+import { NotificationType } from '@/types';
 
 interface Props {
   isOpen: boolean;
   noOverlay?: boolean;
   name?: string;
+  note?: {
+    type: NotificationType;
+    title: string;
+    message: string;
+  };
   onApprove: () => void;
   onDeny: () => void;
 }
 
-const DeleteWarning: React.FC<Props> = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {
+const DeleteWarning: React.FC<Props> = ({ isOpen, noOverlay, name, note, onApprove, onDeny }) => {
   return (
     <WarningModal
       isOpen={isOpen}
       noOverlay={noOverlay}
       title={`Delete${name ? ` ${name}` : ''}`}
-      description='Are you sure you want to delete this?'
+      description='Are you sure you want to delete?'
+      note={note}
       approveButton={{
         text: 'Delete',
         variant: 'danger',

frontend/webapp/containers/main/overview/multi-source-control/index.tsx

@@ -24,7 +24,7 @@ const Container = styled.div`
 `;
 
 const MultiSourceControl = () => {
-  const { deleteSources } = useSourceCRUD();
+  const { sources, deleteSources } = useSourceCRUD();
   const { configuredSources, setConfiguredSources } = useAppStore((state) => state);
   const [isWarnModalOpen, setIsWarnModalOpen] = useState(false);
 
@@ -70,7 +70,21 @@ const MultiSourceControl = () => {
         </Button>
       </Transition>
 
-      <DeleteWarning isOpen={isWarnModalOpen} name={`${totalSelected} sources`} onApprove={onDelete} onDeny={() => setIsWarnModalOpen(false)} />
+      <DeleteWarning
+        isOpen={isWarnModalOpen}
+        name={`${totalSelected} sources`}
+        note={
+          totalSelected === sources.length
+            ? {
+                type: 'warning',
+                title: "You're about to delete the last source",
+                message: 'This will break your pipeline!',
+              }
+            : undefined
+        }
+        onApprove={onDelete}
+        onDeny={() => setIsWarnModalOpen(false)}
+      />
     </>
   );
 };

frontend/webapp/containers/main/overview/overview-drawer/index.tsx

@@ -5,8 +5,11 @@ import DrawerFooter from './drawer-footer';
 import { Drawer } from '@/reuseable-components';
 import DrawerHeader, { DrawerHeaderRef } from './drawer-header';
 import { CancelWarning, DeleteWarning } from '@/components/modals';
+import { OVERVIEW_ENTITY_TYPES } from '@/types';
+import { useDestinationCRUD, useSourceCRUD } from '@/hooks';
 
-const DRAWER_WIDTH = '640px';
+// + 64 because of padding
+const DRAWER_WIDTH = `${640 + 64}px`;
 
 interface Props {
   title: string;
@@ -32,6 +35,8 @@ const ContentArea = styled.div`
 `;
 
 const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({ children, title, imageUri, isEdit, isFormDirty, onEdit, onSave, onDelete, onCancel }) => {
+  const { sources } = useSourceCRUD();
+  const { destinations } = useDestinationCRUD();
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
   const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
 
@@ -80,6 +85,15 @@ const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({ children, title,
     onSave(titleRef.current?.getTitle() || '');
   };
 
+  const isLastItem = () => {
+    let isLast = false;
+
+    if (selectedItem?.type === OVERVIEW_ENTITY_TYPES.SOURCE) isLast = sources.length === 1;
+    if (selectedItem?.type === OVERVIEW_ENTITY_TYPES.DESTINATION) isLast = destinations.length === 1;
+
+    return isLast;
+  };
+
   return (
     <>
       <Drawer isOpen onClose={isEdit ? clickCancel : closeDrawer} width={DRAWER_WIDTH} closeOnEscape={!isDeleteModalOpen && !isCancelModalOpen}>
@@ -90,7 +104,22 @@ const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({ children, title,
         </DrawerContent>
       </Drawer>
 
-      <DeleteWarning isOpen={isDeleteModalOpen} noOverlay name={`${selectedItem?.type}${title ? ` (${title})` : ''}`} onApprove={handleDelete} onDeny={closeWarningModals} />
+      <DeleteWarning
+        isOpen={isDeleteModalOpen}
+        noOverlay
+        name={`${selectedItem?.type}${title ? ` (${title})` : ''}`}
+        note={
+          isLastItem()
+            ? {
+                type: 'warning',
+                title: `You're about to delete the last ${selectedItem?.type}`,
+                message: 'This will break your pipeline!',
+              }
+            : undefined
+        }
+        onApprove={handleDelete}
+        onDeny={closeWarningModals}
+      />
       <CancelWarning isOpen={isCancelModalOpen} noOverlay name='edit mode' onApprove={handleCancel} onDeny={closeWarningModals} />
     </>
   );

frontend/webapp/reuseable-components/divider/index.tsx

@@ -19,7 +19,7 @@ const StyledDivider = styled.div<{
   width: ${({ $orientation, $thickness, $length }) => ($orientation === 'vertical' ? `${$thickness}px` : $length || '100%')};
   height: ${({ $orientation, $thickness, $length }) => ($orientation === 'horizontal' ? `${$thickness}px` : $length || '100%')};
   margin: ${({ $orientation, $margin }) => $margin || ($orientation === 'horizontal' ? '8px 0' : '0 8px')};
-  background-color: ${({ color, theme }) => color || theme.colors.border};
+  background-color: ${({ $color, theme }) => $color || theme.colors.border};
 `;
 
 const Divider: React.FC<Props> = ({ orientation = 'horizontal', thickness = 1, length, color, margin }) => {

frontend/webapp/reuseable-components/modal/warning-modal/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import styled from 'styled-components';
-import { Button, ButtonProps, Modal, Text } from '@/reuseable-components';
 import { useKeyDown } from '@/hooks';
+import styled from 'styled-components';
+import type { NotificationType } from '@/types';
+import { Button, ButtonProps, Modal, NotificationNote, Text } from '@/reuseable-components';
 
 interface ButtonParams {
   text: string;
@@ -14,6 +15,11 @@ interface Props {
   noOverlay?: boolean;
   title: string;
   description: string;
+  note?: {
+    type: NotificationType;
+    title: string;
+    message: string;
+  };
   approveButton: ButtonParams;
   denyButton: ButtonParams;
 }
@@ -46,32 +52,39 @@ const Footer = styled.div`
 `;
 
 const FooterButton = styled(Button)`
-  width: 224px;
+  width: 250px;
 `;
 
-export const WarningModal: React.FC<Props> = ({ isOpen, noOverlay, title = '', description = '', approveButton, denyButton }) => {
-  useKeyDown(
-    {
-      key: 'Enter',
-      active: isOpen,
-    },
-    () => approveButton.onClick()
-  );
+const NoteWrapper = styled.div`
+  margin-bottom: 12px;
+`;
+
+export const WarningModal: React.FC<Props> = ({ isOpen, noOverlay, title = '', description = '', note, approveButton, denyButton }) => {
+  useKeyDown({ key: 'Enter', active: isOpen }, () => approveButton.onClick());
+
+  const onApprove = () => approveButton.onClick();
+  const onDeny = () => denyButton.onClick();
 
   return (
-    <Modal isOpen={isOpen} noOverlay={noOverlay} onClose={denyButton.onClick}>
+    <Modal isOpen={isOpen} noOverlay={noOverlay} onClose={onDeny}>
       <Container>
         <Title>{title}</Title>
 
         <Content>
           <Description>{description}</Description>
         </Content>
 
+        {!!note && (
+          <NoteWrapper>
+            <NotificationNote type={note.type} title={note.title} message={note.message} />
+          </NoteWrapper>
+        )}
+
         <Footer>
-          <FooterButton variant={approveButton.variant || 'primary'} onClick={approveButton.onClick}>
+          <FooterButton variant={approveButton.variant || 'primary'} onClick={onApprove}>
             {approveButton.text}
           </FooterButton>
-          <FooterButton variant={denyButton.variant || 'secondary'} onClick={denyButton.onClick}>
+          <FooterButton variant={denyButton.variant || 'secondary'} onClick={onDeny}>
             {denyButton.text}
           </FooterButton>
         </Footer>

frontend/webapp/reuseable-components/transition/index.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import type { IStyledComponentBase, Keyframes, Substitute } from 'styled-components/dist/types';
 
@@ -26,6 +26,8 @@ export const Transition: React.FC<PropsWithChildren<Props>> = ({ container: Cont
     if (enter) setIsEntered(true);
   }, [enter]);
 
+  if (!enter && !isEntered) return null;
+
   return (
     <AnimatedContainer $isEntering={enter} $isLeaving={isEntered && !enter} $animateIn={animateIn} $animateOut={animateOut}>
       {children}

frontend/webapp/styles/styled.tsx

@@ -24,7 +24,7 @@ export const Overlay = styled.div`
 export const ModalBody = styled.div`
   width: 640px;
   height: calc(100vh - 300px);
-  margin: 0 15vw;
+  margin: 0 7vw;
   padding-top: 64px;
   overflow-y: scroll;
 `;

frontend/webapp/utils/functions/icons.ts

@@ -11,7 +11,7 @@ export const getStatusIcon = (status?: NotificationType) => {
     case 'error':
       return '/icons/notification/error-icon2.svg';
     case 'warning':
-      return '/icons/notification/warning-icon.svg';
+      return '/icons/notification/warning-icon2.svg';
     case 'info':
       return '/icons/common/info.svg';
     default: