From 95b7e2ab50bbb964d9a17f2b8514bed24ab6239d Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Sun, 30 Jul 2023 10:50:52 +0300 Subject: [PATCH 01/93] WIP --- frontend/webapp/app/overview/sources/page.tsx | 7 ++- frontend/webapp/containers/overview/index.tsx | 1 + .../overview/sources/sources.styled.tsx | 7 +++ .../containers/overview/sources/sources.tsx | 51 +++++++++++++++++++ 4 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 frontend/webapp/containers/overview/sources/sources.styled.tsx create mode 100644 frontend/webapp/containers/overview/sources/sources.tsx diff --git a/frontend/webapp/app/overview/sources/page.tsx b/frontend/webapp/app/overview/sources/page.tsx index 42e001585..454db1e18 100644 --- a/frontend/webapp/app/overview/sources/page.tsx +++ b/frontend/webapp/app/overview/sources/page.tsx @@ -1,6 +1,11 @@ "use client"; +import { SourcesContainer } from "@/containers/overview"; import React from "react"; export default function SourcesOverviewPage() { - return
SourcesOverviewPage
; + return ( + <> + + + ); } diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx index 0bd20bd08..2a26e3504 100644 --- a/frontend/webapp/containers/overview/index.tsx +++ b/frontend/webapp/containers/overview/index.tsx @@ -1,2 +1,3 @@ export { OverviewContainer } from "./overview/overview"; export { DestinationContainer } from "./destination/destination"; +export { SourcesContainer } from "./sources/sources"; diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx new file mode 100644 index 000000000..4c8ff6466 --- /dev/null +++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx @@ -0,0 +1,7 @@ +import styled from "styled-components"; + +export const SourcesContainerWrapper = styled.div` + height: 100vh; + width: 100%; + overflow-y: scroll; +`; diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx new file mode 100644 index 000000000..7124c8208 --- /dev/null +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -0,0 +1,51 @@ +"use client"; +import React, { useEffect, useState } from "react"; +import { KeyvalLoader } from "@/design.system"; +import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import { useQuery } from "react-query"; +import { getSources } from "@/services"; +import { OverviewHeader } from "@/components/overview"; +import { useNotification } from "@/hooks"; +import { SourcesContainerWrapper } from "./sources.styled"; + +export function SourcesContainer() { + const { show, Notification } = useNotification(); + + const { + data: sources, + refetch, + isLoading, + } = useQuery([QUERIES.API_SOURCES], getSources); + + useEffect(() => { + console.log({ sources }); + }, [sources]); + + function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { + refetch(); + + show({ + type: NOTIFICATION.SUCCESS, + message, + }); + } + + function onError({ response }) { + const message = response?.data?.message; + show({ + type: NOTIFICATION.ERROR, + message, + }); + } + + if (isLoading) { + return ; + } + + return ( + + + + + ); +} From 3f0700a90cdd81b24a269cde73c8f6c401765944 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Sun, 30 Jul 2023 12:38:53 +0300 Subject: [PATCH 02/93] WIP --- .../containers/overview/sources/sources.tsx | 29 ++----------------- 1 file changed, 2 insertions(+), 27 deletions(-) diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index 7124c8208..541fb8d21 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -1,43 +1,19 @@ "use client"; -import React, { useEffect, useState } from "react"; +import React from "react"; import { KeyvalLoader } from "@/design.system"; -import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import { OVERVIEW, QUERIES } from "@/utils/constants"; import { useQuery } from "react-query"; import { getSources } from "@/services"; import { OverviewHeader } from "@/components/overview"; -import { useNotification } from "@/hooks"; import { SourcesContainerWrapper } from "./sources.styled"; export function SourcesContainer() { - const { show, Notification } = useNotification(); - const { data: sources, refetch, isLoading, } = useQuery([QUERIES.API_SOURCES], getSources); - useEffect(() => { - console.log({ sources }); - }, [sources]); - - function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { - refetch(); - - show({ - type: NOTIFICATION.SUCCESS, - message, - }); - } - - function onError({ response }) { - const message = response?.data?.message; - show({ - type: NOTIFICATION.ERROR, - message, - }); - } - if (isLoading) { return ; } @@ -45,7 +21,6 @@ export function SourcesContainer() { return ( - ); } From 9e4a5ace4946cc0f8ff97a066461f18285321c39 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Sun, 30 Jul 2023 13:46:02 +0300 Subject: [PATCH 03/93] source manage card --- frontend/webapp/assets/images/index.tsx | 1 + .../images/sources.card/sources.card.tsx | 6 +++ frontend/webapp/components/overview/index.tsx | 1 + .../sources.manage.card.tsx | 49 +++++++++++++++++++ .../sources.manage.list.tsx | 24 +++++++++ .../sources.manage.styled.tsx | 38 ++++++++++++++ .../setup/sources/source.card/source.card.tsx | 6 +-- .../containers/overview/sources/sources.tsx | 4 +- frontend/webapp/styles/global.tsx | 5 ++ frontend/webapp/types/sources.tsx | 11 +++++ 10 files changed, 139 insertions(+), 6 deletions(-) create mode 100644 frontend/webapp/assets/images/index.tsx create mode 100644 frontend/webapp/assets/images/sources.card/sources.card.tsx create mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx create mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx create mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx create mode 100644 frontend/webapp/styles/global.tsx create mode 100644 frontend/webapp/types/sources.tsx diff --git a/frontend/webapp/assets/images/index.tsx b/frontend/webapp/assets/images/index.tsx new file mode 100644 index 000000000..9e85a0357 --- /dev/null +++ b/frontend/webapp/assets/images/index.tsx @@ -0,0 +1 @@ +export { SOURCES_LOGOS } from "./sources.card/sources.card"; diff --git a/frontend/webapp/assets/images/sources.card/sources.card.tsx b/frontend/webapp/assets/images/sources.card/sources.card.tsx new file mode 100644 index 000000000..d2f593fb7 --- /dev/null +++ b/frontend/webapp/assets/images/sources.card/sources.card.tsx @@ -0,0 +1,6 @@ +export const SOURCES_LOGOS = { + java: "https://odigos-sources.s3.amazonaws.com/java.svg", + go: "https://odigos-sources.s3.amazonaws.com/go.svg", + javascript: "https://odigos-sources.s3.amazonaws.com/nodejs.svg", + python: "https://odigos-sources.s3.amazonaws.com/python.svg", +}; diff --git a/frontend/webapp/components/overview/index.tsx b/frontend/webapp/components/overview/index.tsx index 8e1f401d6..799574495 100644 --- a/frontend/webapp/components/overview/index.tsx +++ b/frontend/webapp/components/overview/index.tsx @@ -1,3 +1,4 @@ export { OverviewHeader } from "./overview.header/overview.header"; export { ManageDestination } from "./destination/manage.destination/manage.destination"; export { DestinationsManagedList } from "./destination/destination.list/destinations.managed.list"; +export { SourcesManagedList } from "./sources/sources.manage.list/sources.manage.list"; diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx new file mode 100644 index 000000000..dbd8fe628 --- /dev/null +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import { KeyvalImage, KeyvalTag, KeyvalText } from "@/design.system"; +import { CardWrapper } from "./sources.manage.styled"; +import theme from "@/styles/palette"; +import { KIND_COLORS } from "@/styles/global"; +import { SOURCES_LOGOS } from "@/assets/images"; +import { ManagedSource } from "@/types/sources"; + +const TEXT_STYLE: React.CSSProperties = { + textOverflow: "ellipsis", + whiteSpace: "nowrap", + overflow: "hidden", + width: 224, + textAlign: "center", +}; +const LOGO_STYLE: React.CSSProperties = { + padding: 4, + backgroundColor: theme.colors.white, +}; + +interface SourceManagedCardProps { + item: ManagedSource | null; +} +const DEPLOYMENT = "Deployment"; +export default function SourceManagedCard({ + item = null, +}: SourceManagedCardProps) { + return ( + + + + {item?.name} + + + + {item?.namespace} + + + ); +} diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx new file mode 100644 index 000000000..9d7b4bded --- /dev/null +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { ManagedListWrapper, EmptyListWrapper } from "./sources.manage.styled"; +import Empty from "@/assets/images/empty-list.svg"; +import SourceManagedCard from "./sources.manage.card"; + +export function SourcesManagedList({ data = [1, 1, 1, 1] }) { + function renderDestinations() { + return data.map((source: any) => ); + } + + return ( + <> + + {data?.length === 0 ? ( + + + + ) : ( + renderDestinations() + )} + + + ); +} diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx new file mode 100644 index 000000000..cb4f81c3a --- /dev/null +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx @@ -0,0 +1,38 @@ +import { styled } from "styled-components"; + +export const CardWrapper = styled.div` + display: flex; + width: 272px; + height: 152px; + padding-top: 32px; + padding-bottom: 24px; + border-radius: 24px; + border: 1px solid var(--dark-mode-dark-3, #203548); + background: var(--dark-mode-dark-1, #07111a); + align-items: center; + flex-direction: column; + gap: 10px; + cursor: pointer; + &:hover { + background: var(--dark-mode-dark-1, #07111a81); + } +`; + +export const EmptyListWrapper = styled.div` + width: 100%; + margin-top: 130px; + display: flex; + justify-content: center; + align-items: center; +`; + +export const ManagedListWrapper = styled.div` + width: 100%; + display: flex; + flex-wrap: wrap; + gap: 24px; + overflow-y: scroll; + padding: 0px 36px; + padding-bottom: 50px; + margin-top: 88px; +`; diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.tsx index 7f36f2877..2aa3dc664 100644 --- a/frontend/webapp/components/setup/sources/source.card/source.card.tsx +++ b/frontend/webapp/components/setup/sources/source.card/source.card.tsx @@ -12,11 +12,7 @@ import { } from "./source.card.styled"; import Logo from "assets/logos/code-sandbox-logo.svg"; import { SETUP } from "@/utils/constants"; - -const KIND_COLORS = { - deployment: "#203548", - DaemonSet: "#033869", -}; +import { KIND_COLORS } from "@/styles/global"; const TEXT_STYLE = { textOverflow: "ellipsis", diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index 541fb8d21..9164e2704 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -4,7 +4,7 @@ import { KeyvalLoader } from "@/design.system"; import { OVERVIEW, QUERIES } from "@/utils/constants"; import { useQuery } from "react-query"; import { getSources } from "@/services"; -import { OverviewHeader } from "@/components/overview"; +import { OverviewHeader, SourcesManagedList } from "@/components/overview"; import { SourcesContainerWrapper } from "./sources.styled"; export function SourcesContainer() { @@ -17,10 +17,12 @@ export function SourcesContainer() { if (isLoading) { return ; } + console.log({ sources }); return ( + ); } diff --git a/frontend/webapp/styles/global.tsx b/frontend/webapp/styles/global.tsx new file mode 100644 index 000000000..67bd1e72b --- /dev/null +++ b/frontend/webapp/styles/global.tsx @@ -0,0 +1,5 @@ +export const KIND_COLORS = { + deployment: "#203548", + Deployment: "#203548", + DaemonSet: "#033869", +}; diff --git a/frontend/webapp/types/sources.tsx b/frontend/webapp/types/sources.tsx new file mode 100644 index 000000000..53f44fe6e --- /dev/null +++ b/frontend/webapp/types/sources.tsx @@ -0,0 +1,11 @@ +export interface ManagedSource { + kind: string; + name: string; + namespace: string; + languages: [ + { + container_name: string; + language: string; + } + ]; +} From 0c4b42edc4b76f289d7d2c7851ebc38576c6deb1 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Sun, 30 Jul 2023 13:57:20 +0300 Subject: [PATCH 04/93] fixed pr comments --- frontend/webapp/assets/images/sources.card/sources.card.tsx | 1 + .../sources/sources.manage.list/sources.manage.card.tsx | 4 ++-- .../components/setup/sources/source.card/source.card.tsx | 5 ++++- frontend/webapp/styles/global.tsx | 4 ++-- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/frontend/webapp/assets/images/sources.card/sources.card.tsx b/frontend/webapp/assets/images/sources.card/sources.card.tsx index d2f593fb7..2316a3529 100644 --- a/frontend/webapp/assets/images/sources.card/sources.card.tsx +++ b/frontend/webapp/assets/images/sources.card/sources.card.tsx @@ -3,4 +3,5 @@ export const SOURCES_LOGOS = { go: "https://odigos-sources.s3.amazonaws.com/go.svg", javascript: "https://odigos-sources.s3.amazonaws.com/nodejs.svg", python: "https://odigos-sources.s3.amazonaws.com/python.svg", + dotnet: "https://odigos-sources.s3.amazonaws.com/dotnet.svg", }; diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx index dbd8fe628..d22c3e18e 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx @@ -21,7 +21,7 @@ const LOGO_STYLE: React.CSSProperties = { interface SourceManagedCardProps { item: ManagedSource | null; } -const DEPLOYMENT = "Deployment"; +const DEPLOYMENT = "deployment"; export default function SourceManagedCard({ item = null, }: SourceManagedCardProps) { @@ -39,7 +39,7 @@ export default function SourceManagedCard({ {item?.namespace} diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.tsx index 2aa3dc664..e61fb01c6 100644 --- a/frontend/webapp/components/setup/sources/source.card/source.card.tsx +++ b/frontend/webapp/components/setup/sources/source.card/source.card.tsx @@ -33,7 +33,10 @@ export function SourceCard({ item, onClick, focus }: any) { {item.name} - + {`${item?.instances} ${SETUP.RUNNING_INSTANCES}`} diff --git a/frontend/webapp/styles/global.tsx b/frontend/webapp/styles/global.tsx index 67bd1e72b..74df89a53 100644 --- a/frontend/webapp/styles/global.tsx +++ b/frontend/webapp/styles/global.tsx @@ -1,5 +1,5 @@ export const KIND_COLORS = { deployment: "#203548", - Deployment: "#203548", - DaemonSet: "#033869", + daemonSet: "#033869", + statefulset: "#0F2C3F", }; From d5fe6309cc3c1cc944629ddff242bd21eac54034 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Sun, 30 Jul 2023 14:00:43 +0300 Subject: [PATCH 05/93] fixed pr comments --- .../sources/sources.manage.list/sources.manage.card.tsx | 6 +++--- frontend/webapp/containers/overview/sources/sources.tsx | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx index d22c3e18e..c59ebf307 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx @@ -19,11 +19,11 @@ const LOGO_STYLE: React.CSSProperties = { }; interface SourceManagedCardProps { - item: ManagedSource | null; + item: ManagedSource; } const DEPLOYMENT = "deployment"; export default function SourceManagedCard({ - item = null, + item = {} as ManagedSource, }: SourceManagedCardProps) { return ( @@ -38,7 +38,7 @@ export default function SourceManagedCard({ {item?.name} diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index 9164e2704..146e2849c 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -17,7 +17,6 @@ export function SourcesContainer() { if (isLoading) { return ; } - console.log({ sources }); return ( From 55043486a3dec9bcf2fba8d26e9e3be7eea1192c Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Sun, 30 Jul 2023 14:33:49 +0300 Subject: [PATCH 06/93] sources list display --- .../sources.manage.card.tsx | 4 +- .../sources.manage.list.tsx | 43 ++++++++++++------- .../sources.manage.styled.tsx | 15 ++++--- .../overview/sources/sources.styled.tsx | 2 +- .../containers/overview/sources/sources.tsx | 2 +- 5 files changed, 41 insertions(+), 25 deletions(-) diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx index c59ebf307..09327bf95 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx @@ -28,7 +28,7 @@ export default function SourceManagedCard({ return ( {item?.namespace} diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx index 9d7b4bded..143798d1d 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx @@ -1,24 +1,35 @@ import React from "react"; -import { ManagedListWrapper, EmptyListWrapper } from "./sources.manage.styled"; +import { + ManagedListWrapper, + EmptyListWrapper, + ManagedContainer, +} from "./sources.manage.styled"; import Empty from "@/assets/images/empty-list.svg"; import SourceManagedCard from "./sources.manage.card"; +import { ManagedSource } from "@/types/sources"; +import { KeyvalText } from "@/design.system"; +import { OVERVIEW } from "@/utils/constants"; -export function SourcesManagedList({ data = [1, 1, 1, 1] }) { - function renderDestinations() { - return data.map((source: any) => ); +interface SourcesManagedListProps { + data: ManagedSource[]; +} + +export function SourcesManagedList({ data = [] }: SourcesManagedListProps) { + function renderSources() { + return data.map((source: ManagedSource) => ( + + )); } - return ( - <> - - {data?.length === 0 ? ( - - - - ) : ( - renderDestinations() - )} - - + return data?.length === 0 ? ( + + + + ) : ( + + {`${data.length} ${OVERVIEW.MENU.SOURCES}`} +
+ {renderSources()} + ); } diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx index cb4f81c3a..12350c2a4 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx @@ -12,10 +12,10 @@ export const CardWrapper = styled.div` align-items: center; flex-direction: column; gap: 10px; - cursor: pointer; + /* cursor: pointer; &:hover { background: var(--dark-mode-dark-1, #07111a81); - } + } */ `; export const EmptyListWrapper = styled.div` @@ -27,12 +27,17 @@ export const EmptyListWrapper = styled.div` `; export const ManagedListWrapper = styled.div` - width: 100%; + height: 80%; display: flex; flex-wrap: wrap; gap: 24px; + padding: 0 36px 0 0; overflow-y: scroll; +`; + +export const ManagedContainer = styled.div` + width: 100%; + height: 100%; + margin-top: 120px; padding: 0px 36px; - padding-bottom: 50px; - margin-top: 88px; `; diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx index 4c8ff6466..c361682ec 100644 --- a/frontend/webapp/containers/overview/sources/sources.styled.tsx +++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx @@ -3,5 +3,5 @@ import styled from "styled-components"; export const SourcesContainerWrapper = styled.div` height: 100vh; width: 100%; - overflow-y: scroll; + overflow: hidden; `; diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index 146e2849c..784be7026 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -21,7 +21,7 @@ export function SourcesContainer() { return ( - + ); } From ae80c0a3abf1c0cf597ea4ef49898ac2dd0055ac Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Sun, 30 Jul 2023 14:54:49 +0300 Subject: [PATCH 07/93] change image url to cloud front --- .../assets/images/sources.card/sources.card.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/frontend/webapp/assets/images/sources.card/sources.card.tsx b/frontend/webapp/assets/images/sources.card/sources.card.tsx index 2316a3529..6cbc10d4c 100644 --- a/frontend/webapp/assets/images/sources.card/sources.card.tsx +++ b/frontend/webapp/assets/images/sources.card/sources.card.tsx @@ -1,7 +1,9 @@ +const BASE_URL = "https://d1n7d4xz7fr8b4.cloudfront.net/"; + export const SOURCES_LOGOS = { - java: "https://odigos-sources.s3.amazonaws.com/java.svg", - go: "https://odigos-sources.s3.amazonaws.com/go.svg", - javascript: "https://odigos-sources.s3.amazonaws.com/nodejs.svg", - python: "https://odigos-sources.s3.amazonaws.com/python.svg", - dotnet: "https://odigos-sources.s3.amazonaws.com/dotnet.svg", + java: `${BASE_URL}java.svg`, + go: `${BASE_URL}go.svg`, + javascript: `${BASE_URL}nodejs.svg`, + python: `${BASE_URL}python.svg`, + dotnet: `${BASE_URL}dotnet.svg`, }; From 79f2c537aff57792f29c1d74ee3b51253c7950d8 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Sun, 30 Jul 2023 15:24:09 +0300 Subject: [PATCH 08/93] fixed pr comments --- frontend/webapp/assets/images/index.tsx | 2 +- frontend/webapp/assets/images/sources.card/sources.card.tsx | 2 +- .../sources/sources.manage.list/sources.manage.card.tsx | 4 ++-- .../sources/sources.manage.list/sources.manage.list.tsx | 2 +- .../components/setup/sources/source.card/source.card.tsx | 2 +- frontend/webapp/styles/global.tsx | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/webapp/assets/images/index.tsx b/frontend/webapp/assets/images/index.tsx index 9e85a0357..7f87c490b 100644 --- a/frontend/webapp/assets/images/index.tsx +++ b/frontend/webapp/assets/images/index.tsx @@ -1 +1 @@ -export { SOURCES_LOGOS } from "./sources.card/sources.card"; +export { LANGUAGES_LOGOS } from "./sources.card/sources.card"; diff --git a/frontend/webapp/assets/images/sources.card/sources.card.tsx b/frontend/webapp/assets/images/sources.card/sources.card.tsx index 6cbc10d4c..ac83faf6f 100644 --- a/frontend/webapp/assets/images/sources.card/sources.card.tsx +++ b/frontend/webapp/assets/images/sources.card/sources.card.tsx @@ -1,6 +1,6 @@ const BASE_URL = "https://d1n7d4xz7fr8b4.cloudfront.net/"; -export const SOURCES_LOGOS = { +export const LANGUAGES_LOGOS = { java: `${BASE_URL}java.svg`, go: `${BASE_URL}go.svg`, javascript: `${BASE_URL}nodejs.svg`, diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx index 09327bf95..1aa8f559b 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx @@ -3,7 +3,7 @@ import { KeyvalImage, KeyvalTag, KeyvalText } from "@/design.system"; import { CardWrapper } from "./sources.manage.styled"; import theme from "@/styles/palette"; import { KIND_COLORS } from "@/styles/global"; -import { SOURCES_LOGOS } from "@/assets/images"; +import { LANGUAGES_LOGOS } from "@/assets/images"; import { ManagedSource } from "@/types/sources"; const TEXT_STYLE: React.CSSProperties = { @@ -28,7 +28,7 @@ export default function SourceManagedCard({ return ( diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.tsx index e61fb01c6..44e56dd19 100644 --- a/frontend/webapp/components/setup/sources/source.card/source.card.tsx +++ b/frontend/webapp/components/setup/sources/source.card/source.card.tsx @@ -35,7 +35,7 @@ export function SourceCard({ item, onClick, focus }: any) { {`${item?.instances} ${SETUP.RUNNING_INSTANCES}`} diff --git a/frontend/webapp/styles/global.tsx b/frontend/webapp/styles/global.tsx index 74df89a53..1f138e123 100644 --- a/frontend/webapp/styles/global.tsx +++ b/frontend/webapp/styles/global.tsx @@ -1,5 +1,5 @@ export const KIND_COLORS = { deployment: "#203548", - daemonSet: "#033869", + daemonset: "#033869", statefulset: "#0F2C3F", }; From 5fffc40d44a40588873cc390eb8cca6099cfb3bb Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Sun, 30 Jul 2023 16:03:56 +0300 Subject: [PATCH 09/93] add new action menu --- frontend/webapp/components/overview/index.tsx | 1 + .../sources.action.menu.styled.tsx | 12 +++++++++ .../action.menu/sources.action.menu.tsx | 25 +++++++++++++++++++ .../sources.manage.styled.tsx | 3 +-- .../overview/sources/sources.styled.tsx | 4 +++ .../containers/overview/sources/sources.tsx | 12 +++++++-- frontend/webapp/utils/constants/string.tsx | 1 + 7 files changed, 54 insertions(+), 4 deletions(-) create mode 100644 frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx create mode 100644 frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx diff --git a/frontend/webapp/components/overview/index.tsx b/frontend/webapp/components/overview/index.tsx index 799574495..d6c9f8384 100644 --- a/frontend/webapp/components/overview/index.tsx +++ b/frontend/webapp/components/overview/index.tsx @@ -2,3 +2,4 @@ export { OverviewHeader } from "./overview.header/overview.header"; export { ManageDestination } from "./destination/manage.destination/manage.destination"; export { DestinationsManagedList } from "./destination/destination.list/destinations.managed.list"; export { SourcesManagedList } from "./sources/sources.manage.list/sources.manage.list"; +export { SourcesActionMenu } from "./sources/action.menu/sources.action.menu"; diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx new file mode 100644 index 000000000..9d6007d42 --- /dev/null +++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx @@ -0,0 +1,12 @@ +import styled from "styled-components"; + +export const SourcesMenuWrapper = styled.div` + width: 100%; + height: 68px; + padding-top: 88px; + display: flex; + align-items: center; + justify-content: space-between; +`; + +export const InputsWrapper = styled.div``; diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx new file mode 100644 index 000000000..2f373f499 --- /dev/null +++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { + InputsWrapper, + SourcesMenuWrapper, +} from "./sources.action.menu.styled"; +import { KeyvalButton, KeyvalText } from "@/design.system"; +import { Plus } from "@/assets/icons/overview"; +import { OVERVIEW } from "@/utils/constants"; +import theme from "@/styles/palette"; +const BUTTON_STYLES = { gap: 10, height: 40 }; +export function SourcesActionMenu() { + return ( + + + + + + + + {OVERVIEW.ADD_NEW_SOURCE} + + + + ); +} diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx index 12350c2a4..ffbdffed2 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx @@ -27,7 +27,7 @@ export const EmptyListWrapper = styled.div` `; export const ManagedListWrapper = styled.div` - height: 80%; + height: 75%; display: flex; flex-wrap: wrap; gap: 24px; @@ -38,6 +38,5 @@ export const ManagedListWrapper = styled.div` export const ManagedContainer = styled.div` width: 100%; height: 100%; - margin-top: 120px; padding: 0px 36px; `; diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx index c361682ec..d65459093 100644 --- a/frontend/webapp/containers/overview/sources/sources.styled.tsx +++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx @@ -5,3 +5,7 @@ export const SourcesContainerWrapper = styled.div` width: 100%; overflow: hidden; `; + +export const MenuWrapper = styled.div` + padding: 0 32px; +`; diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index 784be7026..256c57981 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -4,8 +4,12 @@ import { KeyvalLoader } from "@/design.system"; import { OVERVIEW, QUERIES } from "@/utils/constants"; import { useQuery } from "react-query"; import { getSources } from "@/services"; -import { OverviewHeader, SourcesManagedList } from "@/components/overview"; -import { SourcesContainerWrapper } from "./sources.styled"; +import { + OverviewHeader, + SourcesActionMenu, + SourcesManagedList, +} from "@/components/overview"; +import { SourcesContainerWrapper, MenuWrapper } from "./sources.styled"; export function SourcesContainer() { const { @@ -21,6 +25,10 @@ export function SourcesContainer() { return ( + + + + ); diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx index b16b6a9eb..8591b7e1a 100644 --- a/frontend/webapp/utils/constants/string.tsx +++ b/frontend/webapp/utils/constants/string.tsx @@ -62,6 +62,7 @@ export const OVERVIEW = { SOURCES: "Sources", DESTINATIONS: "Destinations", }, + ADD_NEW_SOURCE: "Add New Source", ADD_NEW_DESTINATION: "Add New Destination", DESTINATION_UPDATE_SUCCESS: "Destination updated successfully", DESTINATION_CREATED_SUCCESS: "Destination created successfully", From 18cd5c427a5c29f2d22d0cfaf08e0e9f770203d2 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Sun, 30 Jul 2023 17:25:10 +0300 Subject: [PATCH 10/93] on add btn click --- .../sources.action.menu.styled.tsx | 3 +-- .../action.menu/sources.action.menu.tsx | 12 ++++----- .../overview/sources/new.source.flow.tsx | 27 +++++++++++++++++++ .../overview/sources/sources.styled.tsx | 14 ++++++++++ .../containers/overview/sources/sources.tsx | 24 ++++++++++++----- 5 files changed, 66 insertions(+), 14 deletions(-) create mode 100644 frontend/webapp/containers/overview/sources/new.source.flow.tsx diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx index 9d6007d42..610dedddb 100644 --- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx +++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx @@ -2,10 +2,9 @@ import styled from "styled-components"; export const SourcesMenuWrapper = styled.div` width: 100%; - height: 68px; + margin-top: 32px; padding-top: 88px; display: flex; - align-items: center; justify-content: space-between; `; diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx index 2f373f499..7d13296f9 100644 --- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx +++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx @@ -7,14 +7,14 @@ import { KeyvalButton, KeyvalText } from "@/design.system"; import { Plus } from "@/assets/icons/overview"; import { OVERVIEW } from "@/utils/constants"; import theme from "@/styles/palette"; -const BUTTON_STYLES = { gap: 10, height: 40 }; -export function SourcesActionMenu() { + +const BUTTON_STYLES = { gap: 10, height: 36 }; + +export function SourcesActionMenu({ onAddClick }) { return ( - - - - + + {OVERVIEW.ADD_NEW_SOURCE} diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx new file mode 100644 index 000000000..79657962d --- /dev/null +++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { useSectionData } from "@/hooks"; +import { SourcesSectionWrapper, ButtonWrapper } from "./sources.styled"; +import { SourcesSection } from "@/containers/setup/sources/sources.section"; +import { KeyvalButton, KeyvalText } from "@/design.system"; +import theme from "@/styles/palette"; +import { SETUP } from "@/utils/constants"; + +export function NewSourceFlow() { + const { sectionData, setSectionData, totalSelected } = useSectionData({}); + return ( + + + {`${totalSelected} ${SETUP.SELECTED}`} + + + Connect + + + + + + ); +} diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx index d65459093..c3fa07df0 100644 --- a/frontend/webapp/containers/overview/sources/sources.styled.tsx +++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx @@ -9,3 +9,17 @@ export const SourcesContainerWrapper = styled.div` export const MenuWrapper = styled.div` padding: 0 32px; `; + +export const SourcesSectionWrapper = styled(MenuWrapper)` + margin-top: 88px; + position: relative; +`; + +export const ButtonWrapper = styled.div` + position: absolute; + display: flex; + align-items: center; + gap: 16px; + right: 32px; + top: 40px; +`; diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index 256c57981..1849c2c33 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -1,5 +1,5 @@ "use client"; -import React from "react"; +import React, { useState } from "react"; import { KeyvalLoader } from "@/design.system"; import { OVERVIEW, QUERIES } from "@/utils/constants"; import { useQuery } from "react-query"; @@ -10,14 +10,21 @@ import { SourcesManagedList, } from "@/components/overview"; import { SourcesContainerWrapper, MenuWrapper } from "./sources.styled"; +import { NewSourceFlow } from "./new.source.flow"; export function SourcesContainer() { + const [newFlow, setNewFlow] = useState(false); + const { data: sources, refetch, isLoading, } = useQuery([QUERIES.API_SOURCES], getSources); + function renderNewSourceFlow() { + return ; + } + if (isLoading) { return ; } @@ -25,11 +32,16 @@ export function SourcesContainer() { return ( - - - - - + {newFlow ? ( + renderNewSourceFlow() + ) : ( + <> + + setNewFlow(true)} /> + + + + )} ); } From ab642bdbe3c4b4eeed1ac9442365f2ed0a56a81d Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Sun, 30 Jul 2023 17:30:19 +0300 Subject: [PATCH 11/93] WIP --- .../overview/sources/new.source.flow.tsx | 1 + .../containers/overview/sources/sources.tsx | 24 ++++++++++--------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx index 79657962d..c77035124 100644 --- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx +++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx @@ -8,6 +8,7 @@ import { SETUP } from "@/utils/constants"; export function NewSourceFlow() { const { sectionData, setSectionData, totalSelected } = useSectionData({}); + return ( diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index 1849c2c33..2d3af77cb 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -13,7 +13,7 @@ import { SourcesContainerWrapper, MenuWrapper } from "./sources.styled"; import { NewSourceFlow } from "./new.source.flow"; export function SourcesContainer() { - const [newFlow, setNewFlow] = useState(false); + const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState(false); const { data: sources, @@ -25,6 +25,17 @@ export function SourcesContainer() { return ; } + function renderSources() { + return ( + <> + + setDisplayNewSourceFlow(true)} /> + + + + ); + } + if (isLoading) { return ; } @@ -32,16 +43,7 @@ export function SourcesContainer() { return ( - {newFlow ? ( - renderNewSourceFlow() - ) : ( - <> - - setNewFlow(true)} /> - - - - )} + {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()} ); } From 64c31c44236c0a8b9e0c0e9c88761fbc0cab26db Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 31 Jul 2023 10:04:00 +0300 Subject: [PATCH 12/93] restructe source filter option --- .../action.sources.options.tsx | 45 +++++++++++ .../filter.sources.options.tsx | 32 ++++++++ .../sources.option.menu.styled.tsx | 4 + .../sources.option.menu.tsx | 76 ++++--------------- .../overview/sources/new.source.flow.tsx | 27 ++++++- 5 files changed, 120 insertions(+), 64 deletions(-) create mode 100644 frontend/webapp/components/setup/sources/sources.option.menu/action.sources.options.tsx create mode 100644 frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/action.sources.options.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/action.sources.options.tsx new file mode 100644 index 000000000..41df23b50 --- /dev/null +++ b/frontend/webapp/components/setup/sources/sources.option.menu/action.sources.options.tsx @@ -0,0 +1,45 @@ +import React, { useEffect, useState } from "react"; +import { CheckboxWrapper, SwitcherWrapper } from "./sources.option.menu.styled"; +import { KeyvalCheckbox, KeyvalSwitch, KeyvalTooltip } from "@/design.system"; +import { SETUP } from "@/utils/constants"; + +export function ActionSourcesOptions({ + onSelectAllChange, + selectedApplications, + currentNamespace, + onFutureApplyChange, +}: any) { + const [checked, setChecked] = useState(false); + const [toggle, setToggle] = useState(false); + + useEffect(() => { + setToggle(selectedApplications[currentNamespace?.name]?.selected_all); + setChecked(selectedApplications[currentNamespace?.name]?.future_selected); + }, [currentNamespace, selectedApplications]); + + const handleToggleChange = () => { + onSelectAllChange(!toggle); + setToggle(!toggle); + }; + + return ( + <> + + + + + onFutureApplyChange(!checked)} + disabled={!toggle} + /> + + + + ); +} diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx new file mode 100644 index 000000000..d39fa2e7a --- /dev/null +++ b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { DropdownWrapper } from "./sources.option.menu.styled"; +import { KeyvalDropDown, KeyvalSearchInput, KeyvalText } from "@/design.system"; +import { SETUP } from "@/utils/constants"; + +export function FilterSourcesOptions({ + setCurrentItem, + data, + searchFilter, + setSearchFilter, +}: any) { + function handleDropDownChange(item: any) { + setCurrentItem({ id: item?.id, name: item.label }); + } + + return ( + <> + setSearchFilter(e.target.value)} + /> + + {SETUP.MENU.NAMESPACES} + + + + ); +} diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx index ea3d424b1..8add463bc 100644 --- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx +++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx @@ -5,6 +5,10 @@ export const SourcesOptionMenuWrapper = styled.section` align-items: center; gap: 24px; padding: 40px 0 0 0; + @media screen and (max-width: 1400px) { + flex-wrap: wrap; + width: 90%; + } `; export const DropdownWrapper = styled.div` diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.tsx index 090e3b7e8..978a69c40 100644 --- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.tsx +++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.tsx @@ -1,19 +1,7 @@ -import React, { useEffect, useState } from "react"; -import { - DropdownWrapper, - SourcesOptionMenuWrapper, - CheckboxWrapper, - SwitcherWrapper, -} from "./sources.option.menu.styled"; -import { - KeyvalCheckbox, - KeyvalDropDown, - KeyvalSearchInput, - KeyvalSwitch, - KeyvalText, - KeyvalTooltip, -} from "@/design.system"; -import { SETUP } from "@/utils/constants"; +import React from "react"; +import { SourcesOptionMenuWrapper } from "./sources.option.menu.styled"; +import { FilterSourcesOptions } from "./filter.sources.options"; +import { ActionSourcesOptions } from "./action.sources.options"; export function SourcesOptionMenu({ setCurrentItem, @@ -25,54 +13,20 @@ export function SourcesOptionMenu({ currentNamespace, onFutureApplyChange, }: any) { - const [checked, setChecked] = useState(false); - const [toggle, setToggle] = useState(false); - - useEffect(() => { - setToggle(selectedApplications[currentNamespace?.name]?.selected_all); - setChecked(selectedApplications[currentNamespace?.name]?.future_selected); - }, [currentNamespace, selectedApplications]); - - const handleToggleChange = () => { - onSelectAllChange(!toggle); - setToggle(!toggle); - }; - - function handleDropDownChange(item: any) { - setCurrentItem({ id: item?.id, name: item.label }); - } - return ( - setSearchFilter(e.target.value)} + + - - - {SETUP.MENU.NAMESPACES} - - - - - - - onFutureApplyChange(!checked)} - disabled={!toggle} - /> - - ); } diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx index c77035124..a43290b5e 100644 --- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx +++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx @@ -1,19 +1,39 @@ import React from "react"; -import { useSectionData } from "@/hooks"; +import { useNotification, useSectionData } from "@/hooks"; import { SourcesSectionWrapper, ButtonWrapper } from "./sources.styled"; import { SourcesSection } from "@/containers/setup/sources/sources.section"; import { KeyvalButton, KeyvalText } from "@/design.system"; import theme from "@/styles/palette"; -import { SETUP } from "@/utils/constants"; +import { NOTIFICATION, SETUP } from "@/utils/constants"; +import { useMutation } from "react-query"; +import { setNamespaces } from "@/services"; export function NewSourceFlow() { const { sectionData, setSectionData, totalSelected } = useSectionData({}); + const { mutate } = useMutation((body) => setNamespaces(body)); + const { show, Notification } = useNotification(); + + function handleNewSource() { + mutate(sectionData, { + onSuccess: () => { + setSectionData({}); + }, + onError: ({ response }) => { + const message = response?.data?.message || SETUP.ERROR; + console.log({ response }); + show({ + type: NOTIFICATION.ERROR, + message, + }); + }, + }); + } return ( {`${totalSelected} ${SETUP.SELECTED}`} - + Connect @@ -23,6 +43,7 @@ export function NewSourceFlow() { sectionData={sectionData} setSectionData={setSectionData} /> + ); } From 419228952ded21b560939783bef3419e44296a52 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 31 Jul 2023 11:19:08 +0300 Subject: [PATCH 13/93] filters --- .../sources.action.menu.styled.tsx | 7 +- .../action.menu/sources.action.menu.tsx | 18 ++++- .../filter.sources.options.tsx | 9 ++- .../sources.option.menu.styled.tsx | 7 ++ .../overview/sources/manage.sources.tsx | 78 +++++++++++++++++++ .../containers/overview/sources/sources.tsx | 33 ++------ .../design.system/drop.down/drop.down.tsx | 4 + 7 files changed, 121 insertions(+), 35 deletions(-) create mode 100644 frontend/webapp/containers/overview/sources/manage.sources.tsx diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx index 610dedddb..dbf2e0d97 100644 --- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx +++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx @@ -2,10 +2,13 @@ import styled from "styled-components"; export const SourcesMenuWrapper = styled.div` width: 100%; - margin-top: 32px; + margin: 32px 0; padding-top: 88px; display: flex; justify-content: space-between; `; -export const InputsWrapper = styled.div``; +export const InputsWrapper = styled.div` + display: flex; + gap: 16px; +`; diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx index 7d13296f9..bc1b0faa8 100644 --- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx +++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx @@ -7,13 +7,27 @@ import { KeyvalButton, KeyvalText } from "@/design.system"; import { Plus } from "@/assets/icons/overview"; import { OVERVIEW } from "@/utils/constants"; import theme from "@/styles/palette"; +import { FilterSourcesOptions } from "@/components/setup/sources/sources.option.menu/filter.sources.options"; const BUTTON_STYLES = { gap: 10, height: 36 }; -export function SourcesActionMenu({ onAddClick }) { +export function SourcesActionMenu({ + onAddClick, + setCurrentItem, + data = [], + searchFilter, + setSearchFilter, +}) { return ( - + + + diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx index d39fa2e7a..9b5934c2b 100644 --- a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx +++ b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx @@ -1,5 +1,8 @@ import React from "react"; -import { DropdownWrapper } from "./sources.option.menu.styled"; +import { + DropdownWrapper, + FilterMenuWrapper, +} from "./sources.option.menu.styled"; import { KeyvalDropDown, KeyvalSearchInput, KeyvalText } from "@/design.system"; import { SETUP } from "@/utils/constants"; @@ -14,7 +17,7 @@ export function FilterSourcesOptions({ } return ( - <> + setSearchFilter(e.target.value)} @@ -27,6 +30,6 @@ export function FilterSourcesOptions({ onChange={handleDropDownChange} /> - + ); } diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx index 8add463bc..33ae15b5f 100644 --- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx +++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx @@ -5,6 +5,13 @@ export const SourcesOptionMenuWrapper = styled.section` align-items: center; gap: 24px; padding: 40px 0 0 0; +`; + +export const FilterMenuWrapper = styled.div` + display: flex; + gap: 16px; + align-items: center; + @media screen and (max-width: 1400px) { flex-wrap: wrap; width: 90%; diff --git a/frontend/webapp/containers/overview/sources/manage.sources.tsx b/frontend/webapp/containers/overview/sources/manage.sources.tsx new file mode 100644 index 000000000..85fbef48e --- /dev/null +++ b/frontend/webapp/containers/overview/sources/manage.sources.tsx @@ -0,0 +1,78 @@ +"use client"; +import React, { useEffect, useMemo, useState } from "react"; +import { KeyvalLoader } from "@/design.system"; +import { QUERIES } from "@/utils/constants"; +import { useQuery } from "react-query"; +import { getNamespaces, getSources } from "@/services"; +import { SourcesActionMenu, SourcesManagedList } from "@/components/overview"; +import { MenuWrapper } from "./sources.styled"; +import { ManagedSource } from "@/types/sources"; + +export function ManageSources({ setDisplayNewSourceFlow }) { + const [searchFilter, setSearchFilter] = useState(""); + const [currentNamespace, setCurrentNamespace] = useState(null); + + const { data: namespaces } = useQuery( + [QUERIES.API_NAMESPACES], + getNamespaces + ); + + useEffect(() => { + setSearchFilter(""); + }, [currentNamespace]); + + const namespacesList = useMemo( + () => + namespaces?.namespaces?.map((item: any, index: number) => ({ + id: index, + label: item.name, + })), + [namespaces] + ); + + const { + data: sources, + refetch, + isLoading, + } = useQuery([QUERIES.API_SOURCES], getSources); + + function filterByNamespace() { + return currentNamespace + ? sources?.filter( + (item: ManagedSource) => item.namespace === currentNamespace.name + ) + : sources; + } + + function filterBySearchQuery(data) { + return searchFilter + ? data?.filter((item: ManagedSource) => + item.name.toLowerCase().includes(searchFilter.toLowerCase()) + ) + : data; + } + + function filterSources() { + let data = filterByNamespace(); + return filterBySearchQuery(data); + } + + if (isLoading) { + return ; + } + + return ( + <> + + setDisplayNewSourceFlow(true)} + setCurrentItem={setCurrentNamespace} + /> + + + + ); +} diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index 2d3af77cb..d48cacf72 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -1,43 +1,20 @@ "use client"; import React, { useState } from "react"; -import { KeyvalLoader } from "@/design.system"; -import { OVERVIEW, QUERIES } from "@/utils/constants"; -import { useQuery } from "react-query"; -import { getSources } from "@/services"; -import { - OverviewHeader, - SourcesActionMenu, - SourcesManagedList, -} from "@/components/overview"; -import { SourcesContainerWrapper, MenuWrapper } from "./sources.styled"; +import { OVERVIEW } from "@/utils/constants"; +import { OverviewHeader } from "@/components/overview"; +import { SourcesContainerWrapper } from "./sources.styled"; import { NewSourceFlow } from "./new.source.flow"; +import { ManageSources } from "./manage.sources"; export function SourcesContainer() { const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState(false); - const { - data: sources, - refetch, - isLoading, - } = useQuery([QUERIES.API_SOURCES], getSources); - function renderNewSourceFlow() { return ; } function renderSources() { - return ( - <> - - setDisplayNewSourceFlow(true)} /> - - - - ); - } - - if (isLoading) { - return ; + return ; } return ( diff --git a/frontend/webapp/design.system/drop.down/drop.down.tsx b/frontend/webapp/design.system/drop.down/drop.down.tsx index 78cf1bb68..201b176b4 100644 --- a/frontend/webapp/design.system/drop.down/drop.down.tsx +++ b/frontend/webapp/design.system/drop.down/drop.down.tsx @@ -44,6 +44,10 @@ export function KeyvalDropDown({ const containerRef = useRef(null); + useEffect(() => { + value && setSelectedItem(value); + }, [value]); + useEffect(() => { document.addEventListener("click", handleClickOutside, true); return () => { From 1006d4436a6f5ea65e293a1066baff3bf5bdf04b Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 31 Jul 2023 11:50:14 +0300 Subject: [PATCH 14/93] WIP --- .../destination.list.styled.tsx | 1 - .../overview.header/overview.header.tsx | 27 ++++++++++++++----- .../sources.action.menu.styled.tsx | 1 - .../destination/destination.styled.tsx | 1 - .../overview/overview/overview.styled.tsx | 1 - .../overview/sources/new.source.flow.tsx | 4 +-- .../overview/sources/sources.styled.tsx | 1 - frontend/webapp/utils/constants/string.tsx | 1 + 8 files changed, 24 insertions(+), 13 deletions(-) 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 index 2ed90d51b..c06fdca16 100644 --- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx @@ -15,7 +15,6 @@ export const MenuWrapper = styled.div` justify-content: space-between; align-items: center; padding: 20px 36px; - margin-top: 88px; `; export const CardWrapper = styled.div` diff --git a/frontend/webapp/components/overview/overview.header/overview.header.tsx b/frontend/webapp/components/overview/overview.header/overview.header.tsx index aa0f9d3ff..a515ec21f 100644 --- a/frontend/webapp/components/overview/overview.header/overview.header.tsx +++ b/frontend/webapp/components/overview/overview.header/overview.header.tsx @@ -1,27 +1,42 @@ import React from "react"; import styled from "styled-components"; import { KeyvalText } from "@/design.system"; +import { Back } from "@/assets/icons/overview"; +import { SETUP } from "@/utils/constants"; export interface OverviewHeaderProps { title?: string; - onClick?: any; + onBackClick?: any; isDisabled?: boolean; } const OverviewHeaderContainer = styled.div` - position: fixed; display: flex; + flex-direction: column; width: 100%; - height: 88px; - align-items: center; - padding: 0 24px; + padding: 24px; border-bottom: 2px solid rgba(255, 255, 255, 0.08); background: ${({ theme }) => theme.colors.light_dark}; `; -export function OverviewHeader({ title }: OverviewHeaderProps) { +const BackButtonWrapper = styled.div` + display: flex; + margin-bottom: 8px; + cursor: pointer; + p { + cursor: pointer !important; + } +`; + +export function OverviewHeader({ title, onBackClick }: OverviewHeaderProps) { return ( + {onBackClick && ( + + + {SETUP.BACK} + + )} {title} diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx index dbf2e0d97..ee4c046ad 100644 --- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx +++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx @@ -3,7 +3,6 @@ import styled from "styled-components"; export const SourcesMenuWrapper = styled.div` width: 100%; margin: 32px 0; - padding-top: 88px; display: flex; justify-content: space-between; `; diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destination/destination.styled.tsx index 7933933c5..fd3764d16 100644 --- a/frontend/webapp/containers/overview/destination/destination.styled.tsx +++ b/frontend/webapp/containers/overview/destination/destination.styled.tsx @@ -8,7 +8,6 @@ export const DestinationContainerWrapper = styled.div` export const NewDestinationContainer = styled.div` padding: 20px 36px; - margin-top: 88px; `; export const ManageDestinationWrapper = styled.div` diff --git a/frontend/webapp/containers/overview/overview/overview.styled.tsx b/frontend/webapp/containers/overview/overview/overview.styled.tsx index 59d7a09d1..c152e7642 100644 --- a/frontend/webapp/containers/overview/overview/overview.styled.tsx +++ b/frontend/webapp/containers/overview/overview/overview.styled.tsx @@ -3,5 +3,4 @@ import styled from "styled-components"; export const OverviewDataFlowWrapper = styled.div` width: 100%; height: 100%; - margin-top: 88px; `; diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx index a43290b5e..77f763455 100644 --- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx +++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx @@ -4,7 +4,7 @@ import { SourcesSectionWrapper, ButtonWrapper } from "./sources.styled"; import { SourcesSection } from "@/containers/setup/sources/sources.section"; import { KeyvalButton, KeyvalText } from "@/design.system"; import theme from "@/styles/palette"; -import { NOTIFICATION, SETUP } from "@/utils/constants"; +import { NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants"; import { useMutation } from "react-query"; import { setNamespaces } from "@/services"; @@ -35,7 +35,7 @@ export function NewSourceFlow() { {`${totalSelected} ${SETUP.SELECTED}`} - Connect + {OVERVIEW.CONNECT} diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx index c3fa07df0..d07f83647 100644 --- a/frontend/webapp/containers/overview/sources/sources.styled.tsx +++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx @@ -11,7 +11,6 @@ export const MenuWrapper = styled.div` `; export const SourcesSectionWrapper = styled(MenuWrapper)` - margin-top: 88px; position: relative; `; diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx index 8591b7e1a..eb57020dd 100644 --- a/frontend/webapp/utils/constants/string.tsx +++ b/frontend/webapp/utils/constants/string.tsx @@ -74,6 +74,7 @@ export const OVERVIEW = { DELETE_MODAL_SUBTITLE: "This action cannot be undone. This will permanently delete the destination and all associated data.", DELETE_BUTTON: "I want to delete this destination", + CONNECT: "Connect", }; export const NOTIFICATION = { From 537aa7528d89a41c57f6bf53d2f72de720c1931f Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 31 Jul 2023 13:08:58 +0300 Subject: [PATCH 15/93] new back button --- .../manage.destination/manage.destination.tsx | 12 ++++++----- .../destination/new.destination.flow.tsx | 20 ++++++++++--------- .../containers/overview/sources/sources.tsx | 7 ++++++- 3 files changed, 24 insertions(+), 15 deletions(-) diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx index 6a1c0ecdd..d129dea5f 100644 --- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx +++ b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx @@ -11,7 +11,7 @@ import FormDangerZone from "./form.danger.zone"; interface ManageDestinationProps { destinationType: DestinationType; selectedDestination: any; - onBackClick: () => void; + onBackClick?: () => void; onSubmit: (data: any) => void; onDelete?: () => void; } @@ -34,10 +34,12 @@ export function ManageDestination({ }: ManageDestinationProps) { return ( <> - - - {SETUP.BACK} - + {onBackClick && ( + + + {SETUP.BACK} + + )} { - setManaged(false); - setSectionData(null); - }} /> ); } @@ -60,10 +56,6 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) { function renderSelectNewDestination() { return ( <> - - - {SETUP.BACK} - { @@ -77,7 +69,17 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) { return ( <> - + { + setManaged(false); + setSectionData(null); + } + : onBackClick + } + /> {managed && sectionData ? renderNewDestinationForm() diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index d48cacf72..58bc728b3 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -19,7 +19,12 @@ export function SourcesContainer() { return ( - + setDisplayNewSourceFlow(false) : null + } + /> {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()} ); From ab32b46a5db9e8662c4dc012fd475117fa04fa07 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 31 Jul 2023 13:13:30 +0300 Subject: [PATCH 16/93] WIP --- .../destination/new.destination.flow.tsx | 31 +++++++------------ 1 file changed, 11 insertions(+), 20 deletions(-) diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx index a2f674271..7a75a32c0 100644 --- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx @@ -1,24 +1,13 @@ "use client"; import React, { useState } from "react"; -import { KeyvalText } from "@/design.system"; -import { OVERVIEW, QUERIES, SETUP } from "@/utils/constants"; +import { OVERVIEW, QUERIES } from "@/utils/constants"; import { useMutation, useQuery } from "react-query"; import { getDestination, setDestination } from "@/services"; import { ManageDestination, OverviewHeader } from "@/components/overview"; import { useSectionData } from "@/hooks"; import { DestinationSection } from "@/containers/setup/destination/destination.section"; import { NewDestinationContainer } from "./destination.styled"; -import { Back } from "@/assets/icons/overview"; -import { styled } from "styled-components"; -const BackButtonWrapper = styled.div` - display: flex; - align-items: center; - cursor: pointer; - p { - cursor: pointer !important; - } -`; export function NewDestinationFlow({ onBackClick, onSuccess, onError }) { const { sectionData, setSectionData } = useSectionData(null); const [managed, setManaged] = useState(null); @@ -43,6 +32,15 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) { }); } + function handleBackPress() { + if (managed && sectionData) { + setManaged(false); + setSectionData(null); + return; + } + onBackClick(); + } + function renderNewDestinationForm() { return ( { - setManaged(false); - setSectionData(null); - } - : onBackClick - } + onBackClick={handleBackPress} /> {managed && sectionData From 0d97d64ce65629635b2778d553c8b91beced8431 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 31 Jul 2023 13:52:09 +0300 Subject: [PATCH 17/93] filter instromented apps --- .../overview/sources/new.source.flow.tsx | 1 - .../setup/sources/sources.section.tsx | 20 ++++++++++++------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx index 77f763455..eddcbbe8b 100644 --- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx +++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx @@ -20,7 +20,6 @@ export function NewSourceFlow() { }, onError: ({ response }) => { const message = response?.data?.message || SETUP.ERROR; - console.log({ response }); show({ type: NOTIFICATION.ERROR, message, diff --git a/frontend/webapp/containers/setup/sources/sources.section.tsx b/frontend/webapp/containers/setup/sources/sources.section.tsx index b765fd13c..2328b61c2 100644 --- a/frontend/webapp/containers/setup/sources/sources.section.tsx +++ b/frontend/webapp/containers/setup/sources/sources.section.tsx @@ -37,19 +37,25 @@ export function SourcesSection({ sectionData, setSectionData }: any) { }); }, [isError]); - const namespacesList = useMemo(() => { - return data?.namespaces?.map((item: any, index: number) => { - return { id: index, label: item.name }; - }); - }, [data]); + const namespacesList = useMemo( + () => + data?.namespaces?.map((item: any, index: number) => ({ + id: index, + label: item.name, + })), + [data] + ); const sourceData = useMemo(() => { - const namespace = sectionData[currentNamespace?.name]; - return searchFilter + let namespace = sectionData[currentNamespace?.name]; + //filter by search query + namespace = searchFilter ? namespace?.objects.filter((item: any) => item.name.toLowerCase().includes(searchFilter.toLowerCase()) ) : namespace?.objects; + //remove instrumented applications + return namespace?.filter((item: any) => !item.instrumentation_effective); }, [searchFilter, currentNamespace, sectionData]); async function onNameSpaceChange() { From f38568b3cacbbbb2b551ce27028fe990d107097b Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 31 Jul 2023 14:43:05 +0300 Subject: [PATCH 18/93] WIP --- frontend/webapp/app/page.tsx | 3 +-- .../overview/sources/new.source.flow.tsx | 6 ++---- .../webapp/containers/overview/sources/sources.tsx | 14 ++++++++++++-- frontend/webapp/utils/constants/string.tsx | 3 +++ 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx index 1b259b2ed..20d26031b 100644 --- a/frontend/webapp/app/page.tsx +++ b/frontend/webapp/app/page.tsx @@ -4,7 +4,6 @@ import { useEffect } from "react"; import { getConfig } from "@/services/config"; import { useRouter } from "next/navigation"; import { ROUTES, CONFIG, QUERIES } from "@/utils/constants"; -import { KeyvalLoader } from "@/design.system"; export default function App() { const router = useRouter(); @@ -16,7 +15,6 @@ export default function App() { function renderCurrentPage() { const { installation } = data; - const state = installation === CONFIG.APPS_SELECTED ? `?state=${CONFIG.APPS_SELECTED}` @@ -25,6 +23,7 @@ export default function App() { case CONFIG.NEW: case CONFIG.APPS_SELECTED: router.push(`${ROUTES.SETUP}${state}`); + break; case CONFIG.FINISHED: router.push(ROUTES.OVERVIEW); } diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx index eddcbbe8b..dfaacb325 100644 --- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx +++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx @@ -8,16 +8,14 @@ import { NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants"; import { useMutation } from "react-query"; import { setNamespaces } from "@/services"; -export function NewSourceFlow() { +export function NewSourceFlow({ onSuccess }) { const { sectionData, setSectionData, totalSelected } = useSectionData({}); const { mutate } = useMutation((body) => setNamespaces(body)); const { show, Notification } = useNotification(); function handleNewSource() { mutate(sectionData, { - onSuccess: () => { - setSectionData({}); - }, + onSuccess, onError: ({ response }) => { const message = response?.data?.message || SETUP.ERROR; show({ diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index 58bc728b3..7b90707b0 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -1,16 +1,25 @@ "use client"; import React, { useState } from "react"; -import { OVERVIEW } from "@/utils/constants"; +import { NOTIFICATION, OVERVIEW } from "@/utils/constants"; import { OverviewHeader } from "@/components/overview"; import { SourcesContainerWrapper } from "./sources.styled"; import { NewSourceFlow } from "./new.source.flow"; import { ManageSources } from "./manage.sources"; +import { useNotification } from "@/hooks"; export function SourcesContainer() { const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState(false); + const { show, Notification } = useNotification(); + function onNewSourceSuccess() { + setDisplayNewSourceFlow(false); + show({ + type: NOTIFICATION.SUCCESS, + message: OVERVIEW.SOURCE_CREATED_SUCCESS, + }); + } function renderNewSourceFlow() { - return ; + return ; } function renderSources() { @@ -26,6 +35,7 @@ export function SourcesContainer() { } /> {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()} + ); } diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx index eb57020dd..53903e8c5 100644 --- a/frontend/webapp/utils/constants/string.tsx +++ b/frontend/webapp/utils/constants/string.tsx @@ -67,6 +67,9 @@ export const OVERVIEW = { DESTINATION_UPDATE_SUCCESS: "Destination updated successfully", DESTINATION_CREATED_SUCCESS: "Destination created successfully", DESTINATION_DELETED_SUCCESS: "Destination deleted successfully", + SOURCE_UPDATE_SUCCESS: "Source updated successfully", + SOURCE_CREATED_SUCCESS: "Source created successfully", + SOURCE_DELETED_SUCCESS: "Source deleted successfully", MANAGE: "Manage", DELETE: "Delete", DELETE_DESTINATION: "Delete Destination", From d57d024c149a2056393f97eb705e9ecde0208f4c Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 31 Jul 2023 16:07:12 +0300 Subject: [PATCH 19/93] WIP --- .../overview/sources/manage.sources.tsx | 23 ++++++++++--------- .../overview/sources/new.source.flow.tsx | 23 ++++++++++++++++--- .../containers/overview/sources/sources.tsx | 19 ++++++++++++--- .../setup/setup.section/setup.section.tsx | 5 +++- frontend/webapp/services/sources.tsx | 3 ++- frontend/webapp/types/sources.tsx | 16 +++++++++++++ 6 files changed, 70 insertions(+), 19 deletions(-) diff --git a/frontend/webapp/containers/overview/sources/manage.sources.tsx b/frontend/webapp/containers/overview/sources/manage.sources.tsx index 85fbef48e..affc022ba 100644 --- a/frontend/webapp/containers/overview/sources/manage.sources.tsx +++ b/frontend/webapp/containers/overview/sources/manage.sources.tsx @@ -8,15 +8,22 @@ import { SourcesActionMenu, SourcesManagedList } from "@/components/overview"; import { MenuWrapper } from "./sources.styled"; import { ManagedSource } from "@/types/sources"; -export function ManageSources({ setDisplayNewSourceFlow }) { +const DEFAULT_FILTER = { name: "default" }; + +export function ManageSources({ setDisplayNewSourceFlow, sources }) { const [searchFilter, setSearchFilter] = useState(""); - const [currentNamespace, setCurrentNamespace] = useState(null); + const [currentNamespace, setCurrentNamespace] = useState(DEFAULT_FILTER); const { data: namespaces } = useQuery( [QUERIES.API_NAMESPACES], getNamespaces ); + // const { data: sources, isLoading } = useQuery( + // [QUERIES.API_SOURCES], + // getSources + // ); + // console.log({ sources }); useEffect(() => { setSearchFilter(""); }, [currentNamespace]); @@ -30,12 +37,6 @@ export function ManageSources({ setDisplayNewSourceFlow }) { [namespaces] ); - const { - data: sources, - refetch, - isLoading, - } = useQuery([QUERIES.API_SOURCES], getSources); - function filterByNamespace() { return currentNamespace ? sources?.filter( @@ -57,9 +58,9 @@ export function ManageSources({ setDisplayNewSourceFlow }) { return filterBySearchQuery(data); } - if (isLoading) { - return ; - } + // if (isLoading) { + // return ; + // } return ( <> diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx index dfaacb325..4e1212738 100644 --- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx +++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx @@ -7,14 +7,31 @@ import theme from "@/styles/palette"; import { NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants"; import { useMutation } from "react-query"; import { setNamespaces } from "@/services"; +import { SelectedSources } from "@/types/sources"; -export function NewSourceFlow({ onSuccess }) { +export function NewSourceFlow({ onSuccess, sources }) { const { sectionData, setSectionData, totalSelected } = useSectionData({}); - const { mutate } = useMutation((body) => setNamespaces(body)); + const { mutate } = useMutation((body: SelectedSources) => + setNamespaces(body) + ); const { show, Notification } = useNotification(); function handleNewSource() { - mutate(sectionData, { + const newData: SelectedSources = {}; + + for (const key in sectionData) { + newData[key] = { + ...sectionData[key], + objects: sectionData[key].objects.map((item) => ({ + ...item, + selected: + item?.selected || + sources.some((source) => source.name === item.name), + })), + }; + } + + mutate(newData, { onSuccess, onError: ({ response }) => { const message = response?.data?.message || SETUP.ERROR; diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index 7b90707b0..ff89b21c1 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -1,15 +1,23 @@ "use client"; import React, { useState } from "react"; -import { NOTIFICATION, OVERVIEW } from "@/utils/constants"; +import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; import { OverviewHeader } from "@/components/overview"; import { SourcesContainerWrapper } from "./sources.styled"; import { NewSourceFlow } from "./new.source.flow"; import { ManageSources } from "./manage.sources"; import { useNotification } from "@/hooks"; +import { useQuery } from "react-query"; +import { getSources } from "@/services"; export function SourcesContainer() { const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState(false); const { show, Notification } = useNotification(); + + const { data: sources, isLoading } = useQuery( + [QUERIES.API_SOURCES], + getSources + ); + function onNewSourceSuccess() { setDisplayNewSourceFlow(false); show({ @@ -19,11 +27,16 @@ export function SourcesContainer() { } function renderNewSourceFlow() { - return ; + return ; } function renderSources() { - return ; + return ( + + ); } return ( diff --git a/frontend/webapp/containers/setup/setup.section/setup.section.tsx b/frontend/webapp/containers/setup/setup.section/setup.section.tsx index c50a2581f..53da583c3 100644 --- a/frontend/webapp/containers/setup/setup.section/setup.section.tsx +++ b/frontend/webapp/containers/setup/setup.section/setup.section.tsx @@ -18,6 +18,7 @@ import { STEPS, Step } from "./utils"; import { setNamespaces } from "@/services"; import { useSearchParams } from "next/navigation"; import { useMutation } from "react-query"; +import { SelectedSources } from "@/types/sources"; const STATE = "state"; @@ -30,7 +31,9 @@ const sectionComponents = { export function SetupSection() { const [currentStep, setCurrentStep] = useState(STEPS[0]); const { sectionData, setSectionData, totalSelected } = useSectionData({}); - const { mutate } = useMutation((body) => setNamespaces(body)); + const { mutate } = useMutation((body: SelectedSources) => + setNamespaces(body) + ); const { show, Notification } = useNotification(); const searchParams = useSearchParams(); diff --git a/frontend/webapp/services/sources.tsx b/frontend/webapp/services/sources.tsx index 3f6f32148..eb50b72a2 100644 --- a/frontend/webapp/services/sources.tsx +++ b/frontend/webapp/services/sources.tsx @@ -1,5 +1,6 @@ import { API } from "@/utils/constants"; import { get, post } from "./api"; +import { SelectedSources } from "@/types/sources"; export async function getNamespaces() { return await get(API.NAMESPACES); @@ -9,7 +10,7 @@ export async function getApplication(id: string) { return await get(`${API.APPLICATIONS}/${id}`); } -export async function setNamespaces(body: any) { +export async function setNamespaces(body: SelectedSources): Promise { return await post(API.NAMESPACES, body); } diff --git a/frontend/webapp/types/sources.tsx b/frontend/webapp/types/sources.tsx index 53f44fe6e..dac37b7eb 100644 --- a/frontend/webapp/types/sources.tsx +++ b/frontend/webapp/types/sources.tsx @@ -9,3 +9,19 @@ export interface ManagedSource { } ]; } + +export interface SelectedSources { + [key: string]: { + objects: { + name: string; + selected: boolean; + kind: string; + app_instrumentation_labeled: boolean | null; + ns_instrumentation_labeled: boolean | null; + instrumentation_effective: boolean | null; + instances: number; + }; + selected_all: boolean; + future_selected: boolean; + }; +} From 6b1a81268633fe59112bd458f41d83521a102ff1 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 31 Jul 2023 16:14:26 +0300 Subject: [PATCH 20/93] WIP --- .../overview/sources/manage.sources.tsx | 23 ++++++------------- frontend/webapp/types/sources.tsx | 6 +++++ 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/frontend/webapp/containers/overview/sources/manage.sources.tsx b/frontend/webapp/containers/overview/sources/manage.sources.tsx index affc022ba..af0e0daa9 100644 --- a/frontend/webapp/containers/overview/sources/manage.sources.tsx +++ b/frontend/webapp/containers/overview/sources/manage.sources.tsx @@ -1,36 +1,31 @@ "use client"; import React, { useEffect, useMemo, useState } from "react"; -import { KeyvalLoader } from "@/design.system"; import { QUERIES } from "@/utils/constants"; import { useQuery } from "react-query"; -import { getNamespaces, getSources } from "@/services"; +import { getNamespaces } from "@/services"; import { SourcesActionMenu, SourcesManagedList } from "@/components/overview"; import { MenuWrapper } from "./sources.styled"; -import { ManagedSource } from "@/types/sources"; +import { ManagedSource, Namespace } from "@/types/sources"; -const DEFAULT_FILTER = { name: "default" }; +const DEFAULT_FILTER = { name: "default", selected: false, totalApps: 0 }; export function ManageSources({ setDisplayNewSourceFlow, sources }) { const [searchFilter, setSearchFilter] = useState(""); - const [currentNamespace, setCurrentNamespace] = useState(DEFAULT_FILTER); + const [currentNamespace, setCurrentNamespace] = + useState(DEFAULT_FILTER); const { data: namespaces } = useQuery( [QUERIES.API_NAMESPACES], getNamespaces ); - // const { data: sources, isLoading } = useQuery( - // [QUERIES.API_SOURCES], - // getSources - // ); - // console.log({ sources }); useEffect(() => { setSearchFilter(""); }, [currentNamespace]); const namespacesList = useMemo( () => - namespaces?.namespaces?.map((item: any, index: number) => ({ + namespaces?.namespaces?.map((item: Namespace, index: number) => ({ id: index, label: item.name, })), @@ -45,7 +40,7 @@ export function ManageSources({ setDisplayNewSourceFlow, sources }) { : sources; } - function filterBySearchQuery(data) { + function filterBySearchQuery(data: ManagedSource[]) { return searchFilter ? data?.filter((item: ManagedSource) => item.name.toLowerCase().includes(searchFilter.toLowerCase()) @@ -58,10 +53,6 @@ export function ManageSources({ setDisplayNewSourceFlow, sources }) { return filterBySearchQuery(data); } - // if (isLoading) { - // return ; - // } - return ( <> diff --git a/frontend/webapp/types/sources.tsx b/frontend/webapp/types/sources.tsx index dac37b7eb..7906c4733 100644 --- a/frontend/webapp/types/sources.tsx +++ b/frontend/webapp/types/sources.tsx @@ -10,6 +10,12 @@ export interface ManagedSource { ]; } +export interface Namespace { + name: string; + selected: boolean; + totalApps: number; +} + export interface SelectedSources { [key: string]: { objects: { From d6e9f6fc570c4c42bce8f4ddf2974c6ac2274e0e Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 31 Jul 2023 16:21:58 +0300 Subject: [PATCH 21/93] WIP --- .../sources.option.menu/filter.sources.options.tsx | 4 ++-- .../sources.option.menu/sources.option.menu.styled.tsx | 9 ++++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx index 9b5934c2b..def2c8da1 100644 --- a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx +++ b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx @@ -17,7 +17,7 @@ export function FilterSourcesOptions({ } return ( - + <> setSearchFilter(e.target.value)} @@ -30,6 +30,6 @@ export function FilterSourcesOptions({ onChange={handleDropDownChange} /> - + ); } diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx index 33ae15b5f..7befad872 100644 --- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx +++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx @@ -5,17 +5,16 @@ export const SourcesOptionMenuWrapper = styled.section` align-items: center; gap: 24px; padding: 40px 0 0 0; + @media screen and (max-width: 1500px) { + flex-wrap: wrap; + width: 70%; + } `; export const FilterMenuWrapper = styled.div` display: flex; gap: 16px; align-items: center; - - @media screen and (max-width: 1400px) { - flex-wrap: wrap; - width: 90%; - } `; export const DropdownWrapper = styled.div` From 7c655a0eb479abd92d7334aaf15d46ff98f31ea4 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 31 Jul 2023 16:24:36 +0300 Subject: [PATCH 22/93] WIP --- .../sources/sources.manage.list/sources.manage.styled.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx index ffbdffed2..3fd4cad8d 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx @@ -27,7 +27,7 @@ export const EmptyListWrapper = styled.div` `; export const ManagedListWrapper = styled.div` - height: 75%; + max-height: 72%; display: flex; flex-wrap: wrap; gap: 24px; From fbe55040b8a88c25de699b78865802963603a4f7 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Tue, 1 Aug 2023 11:37:34 +0300 Subject: [PATCH 23/93] WIP --- frontend/webapp/app/layout.tsx | 17 +++++++------ .../sources.manage.list.tsx | 2 +- .../filter.sources.options.tsx | 5 +--- .../sources.option.menu.styled.tsx | 6 ----- .../containers/overview/sources/sources.tsx | 24 ++++++++++++++++--- frontend/webapp/design.system/image/image.tsx | 2 ++ 6 files changed, 33 insertions(+), 23 deletions(-) diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx index efe4c8326..3b6d45a7a 100644 --- a/frontend/webapp/app/layout.tsx +++ b/frontend/webapp/app/layout.tsx @@ -11,21 +11,20 @@ const LAYOUT_STYLE: React.CSSProperties = { width: "100vw", height: "100vh", }; +export const queryClient = new QueryClient({ + defaultOptions: { + queries: { + staleTime: 10000, + refetchOnWindowFocus: false, + }, + }, +}); export default function RootLayout({ children, }: { children: React.ReactNode; }) { - const queryClient = new QueryClient({ - defaultOptions: { - queries: { - staleTime: 10000, - refetchOnWindowFocus: false, - }, - }, - }); - return ( diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx index fa63eda5a..b5a82fad5 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx @@ -17,7 +17,7 @@ interface SourcesManagedListProps { export function SourcesManagedList({ data = [] }: SourcesManagedListProps) { function renderSources() { return data.map((source: ManagedSource) => ( - + )); } diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx index def2c8da1..d39fa2e7a 100644 --- a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx +++ b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx @@ -1,8 +1,5 @@ import React from "react"; -import { - DropdownWrapper, - FilterMenuWrapper, -} from "./sources.option.menu.styled"; +import { DropdownWrapper } from "./sources.option.menu.styled"; import { KeyvalDropDown, KeyvalSearchInput, KeyvalText } from "@/design.system"; import { SETUP } from "@/utils/constants"; diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx index 7befad872..256d9c55e 100644 --- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx +++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx @@ -11,12 +11,6 @@ export const SourcesOptionMenuWrapper = styled.section` } `; -export const FilterMenuWrapper = styled.div` - display: flex; - gap: 16px; - align-items: center; -`; - export const DropdownWrapper = styled.div` display: flex; position: inherit; diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index ff89b21c1..c23a8447d 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -1,5 +1,5 @@ "use client"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; import { OverviewHeader } from "@/components/overview"; import { SourcesContainerWrapper } from "./sources.styled"; @@ -10,14 +10,32 @@ import { useQuery } from "react-query"; import { getSources } from "@/services"; export function SourcesContainer() { - const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState(false); + const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState< + boolean | null + >(null); const { show, Notification } = useNotification(); - const { data: sources, isLoading } = useQuery( + const { data: sources, refetch } = useQuery( [QUERIES.API_SOURCES], getSources ); + useEffect(() => { + refetchSources(); + }, [displayNewSourceFlow]); + + useEffect(() => { + console.log({ sources }); + }, [sources]); + + async function refetchSources() { + if (displayNewSourceFlow !== null && displayNewSourceFlow === false) { + setTimeout(async () => { + refetch(); + }, 1000); + } + } + function onNewSourceSuccess() { setDisplayNewSourceFlow(false); show({ diff --git a/frontend/webapp/design.system/image/image.tsx b/frontend/webapp/design.system/image/image.tsx index 1a7b30cf7..31be01ccf 100644 --- a/frontend/webapp/design.system/image/image.tsx +++ b/frontend/webapp/design.system/image/image.tsx @@ -27,6 +27,8 @@ export function KeyvalImage({ width={width} height={height} style={{ ...IMAGE_STYLE, ...style }} + placeholder={"empty"} + blurDataURL={src} /> ); } From 8a93e8a72ffe9c18ded5a4c7e3bd636cf6699955 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Tue, 1 Aug 2023 11:47:14 +0300 Subject: [PATCH 24/93] fixed pr comments --- frontend/webapp/app/layout.tsx | 17 +++++++++-------- .../containers/overview/sources/sources.tsx | 4 ---- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx index 3b6d45a7a..efe4c8326 100644 --- a/frontend/webapp/app/layout.tsx +++ b/frontend/webapp/app/layout.tsx @@ -11,20 +11,21 @@ const LAYOUT_STYLE: React.CSSProperties = { width: "100vw", height: "100vh", }; -export const queryClient = new QueryClient({ - defaultOptions: { - queries: { - staleTime: 10000, - refetchOnWindowFocus: false, - }, - }, -}); export default function RootLayout({ children, }: { children: React.ReactNode; }) { + const queryClient = new QueryClient({ + defaultOptions: { + queries: { + staleTime: 10000, + refetchOnWindowFocus: false, + }, + }, + }); + return ( diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index c23a8447d..b78b57200 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -24,10 +24,6 @@ export function SourcesContainer() { refetchSources(); }, [displayNewSourceFlow]); - useEffect(() => { - console.log({ sources }); - }, [sources]); - async function refetchSources() { if (displayNewSourceFlow !== null && displayNewSourceFlow === false) { setTimeout(async () => { From d9958c808f1936243d22b1057c0d3ac040ee6224 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Tue, 1 Aug 2023 13:02:56 +0300 Subject: [PATCH 25/93] fixed pr comments --- .../sources.option.menu.styled.tsx | 5 ++-- .../overview/sources/new.source.flow.tsx | 29 +++++++++++-------- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx index 256d9c55e..88d0a54b4 100644 --- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx +++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx @@ -5,9 +5,9 @@ export const SourcesOptionMenuWrapper = styled.section` align-items: center; gap: 24px; padding: 40px 0 0 0; - @media screen and (max-width: 1500px) { + @media screen and (max-width: 1600px) { flex-wrap: wrap; - width: 70%; + width: 74%; } `; @@ -27,5 +27,4 @@ export const CheckboxWrapper = styled.div` export const SwitcherWrapper = styled.div` min-width: 90px; - margin-left: 24px; `; diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx index 4e1212738..5152767ba 100644 --- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx +++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx @@ -16,22 +16,24 @@ export function NewSourceFlow({ onSuccess, sources }) { ); const { show, Notification } = useNotification(); - function handleNewSource() { - const newData: SelectedSources = {}; + function updateSectionDataWithSources() { + const sourceNamesSet = new Set(sources.map((source) => source.name)); + const updatedSectionData: SelectedSources = {}; for (const key in sectionData) { - newData[key] = { - ...sectionData[key], - objects: sectionData[key].objects.map((item) => ({ - ...item, - selected: - item?.selected || - sources.some((source) => source.name === item.name), - })), + const { objects, ...rest } = sectionData[key]; + const updatedObjects = objects.map((item) => ({ + ...item, + selected: item?.selected || sourceNamesSet.has(item.name), + })); + + updatedSectionData[key] = { + ...rest, + objects: updatedObjects, }; } - mutate(newData, { + mutate(updatedSectionData, { onSuccess, onError: ({ response }) => { const message = response?.data?.message || SETUP.ERROR; @@ -47,7 +49,10 @@ export function NewSourceFlow({ onSuccess, sources }) { {`${totalSelected} ${SETUP.SELECTED}`} - + {OVERVIEW.CONNECT} From 89dc8ae6d3d155ccbea13f7b42d3c8436bcb70b8 Mon Sep 17 00:00:00 2001 From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com> Date: Tue, 1 Aug 2023 13:06:37 +0300 Subject: [PATCH 26/93] Task 158 back button (#360) --- .../destination.list.styled.tsx | 1 - .../manage.destination/manage.destination.tsx | 12 ++++--- .../overview.header/overview.header.tsx | 27 ++++++++++---- .../sources.action.menu.styled.tsx | 1 - .../destination/destination.styled.tsx | 1 - .../destination/new.destination.flow.tsx | 35 ++++++++----------- .../overview/overview/overview.styled.tsx | 1 - .../overview/sources/new.source.flow.tsx | 4 +-- .../overview/sources/sources.styled.tsx | 1 - .../containers/overview/sources/sources.tsx | 7 +++- frontend/webapp/utils/constants/string.tsx | 1 + 11 files changed, 51 insertions(+), 40 deletions(-) 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 index 2ed90d51b..c06fdca16 100644 --- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx @@ -15,7 +15,6 @@ export const MenuWrapper = styled.div` justify-content: space-between; align-items: center; padding: 20px 36px; - margin-top: 88px; `; export const CardWrapper = styled.div` diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx index 6a1c0ecdd..d129dea5f 100644 --- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx +++ b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx @@ -11,7 +11,7 @@ import FormDangerZone from "./form.danger.zone"; interface ManageDestinationProps { destinationType: DestinationType; selectedDestination: any; - onBackClick: () => void; + onBackClick?: () => void; onSubmit: (data: any) => void; onDelete?: () => void; } @@ -34,10 +34,12 @@ export function ManageDestination({ }: ManageDestinationProps) { return ( <> - - - {SETUP.BACK} - + {onBackClick && ( + + + {SETUP.BACK} + + )} theme.colors.light_dark}; `; -export function OverviewHeader({ title }: OverviewHeaderProps) { +const BackButtonWrapper = styled.div` + display: flex; + margin-bottom: 8px; + cursor: pointer; + p { + cursor: pointer !important; + } +`; + +export function OverviewHeader({ title, onBackClick }: OverviewHeaderProps) { return ( + {onBackClick && ( + + + {SETUP.BACK} + + )} {title} diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx index dbf2e0d97..ee4c046ad 100644 --- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx +++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx @@ -3,7 +3,6 @@ import styled from "styled-components"; export const SourcesMenuWrapper = styled.div` width: 100%; margin: 32px 0; - padding-top: 88px; display: flex; justify-content: space-between; `; diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destination/destination.styled.tsx index 7933933c5..fd3764d16 100644 --- a/frontend/webapp/containers/overview/destination/destination.styled.tsx +++ b/frontend/webapp/containers/overview/destination/destination.styled.tsx @@ -8,7 +8,6 @@ export const DestinationContainerWrapper = styled.div` export const NewDestinationContainer = styled.div` padding: 20px 36px; - margin-top: 88px; `; export const ManageDestinationWrapper = styled.div` diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx index 6a213f539..7a75a32c0 100644 --- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx @@ -1,24 +1,13 @@ "use client"; import React, { useState } from "react"; -import { KeyvalText } from "@/design.system"; -import { OVERVIEW, QUERIES, SETUP } from "@/utils/constants"; +import { OVERVIEW, QUERIES } from "@/utils/constants"; import { useMutation, useQuery } from "react-query"; import { getDestination, setDestination } from "@/services"; import { ManageDestination, OverviewHeader } from "@/components/overview"; import { useSectionData } from "@/hooks"; import { DestinationSection } from "@/containers/setup/destination/destination.section"; import { NewDestinationContainer } from "./destination.styled"; -import { Back } from "@/assets/icons/overview"; -import { styled } from "styled-components"; -const BackButtonWrapper = styled.div` - display: flex; - align-items: center; - cursor: pointer; - p { - cursor: pointer !important; - } -`; export function NewDestinationFlow({ onBackClick, onSuccess, onError }) { const { sectionData, setSectionData } = useSectionData(null); const [managed, setManaged] = useState(null); @@ -43,16 +32,21 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) { }); } + function handleBackPress() { + if (managed && sectionData) { + setManaged(false); + setSectionData(null); + return; + } + onBackClick(); + } + function renderNewDestinationForm() { return ( { - setManaged(false); - setSectionData(null); - }} /> ); } @@ -60,10 +54,6 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) { function renderSelectNewDestination() { return ( <> - - - {SETUP.BACK} - { @@ -77,7 +67,10 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) { return ( <> - + {managed && sectionData ? renderNewDestinationForm() diff --git a/frontend/webapp/containers/overview/overview/overview.styled.tsx b/frontend/webapp/containers/overview/overview/overview.styled.tsx index 59d7a09d1..c152e7642 100644 --- a/frontend/webapp/containers/overview/overview/overview.styled.tsx +++ b/frontend/webapp/containers/overview/overview/overview.styled.tsx @@ -3,5 +3,4 @@ import styled from "styled-components"; export const OverviewDataFlowWrapper = styled.div` width: 100%; height: 100%; - margin-top: 88px; `; diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx index a43290b5e..77f763455 100644 --- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx +++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx @@ -4,7 +4,7 @@ import { SourcesSectionWrapper, ButtonWrapper } from "./sources.styled"; import { SourcesSection } from "@/containers/setup/sources/sources.section"; import { KeyvalButton, KeyvalText } from "@/design.system"; import theme from "@/styles/palette"; -import { NOTIFICATION, SETUP } from "@/utils/constants"; +import { NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants"; import { useMutation } from "react-query"; import { setNamespaces } from "@/services"; @@ -35,7 +35,7 @@ export function NewSourceFlow() { {`${totalSelected} ${SETUP.SELECTED}`} - Connect + {OVERVIEW.CONNECT} diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx index c3fa07df0..d07f83647 100644 --- a/frontend/webapp/containers/overview/sources/sources.styled.tsx +++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx @@ -11,7 +11,6 @@ export const MenuWrapper = styled.div` `; export const SourcesSectionWrapper = styled(MenuWrapper)` - margin-top: 88px; position: relative; `; diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index d48cacf72..58bc728b3 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -19,7 +19,12 @@ export function SourcesContainer() { return ( - + setDisplayNewSourceFlow(false) : null + } + /> {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()} ); diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx index 8591b7e1a..eb57020dd 100644 --- a/frontend/webapp/utils/constants/string.tsx +++ b/frontend/webapp/utils/constants/string.tsx @@ -74,6 +74,7 @@ export const OVERVIEW = { DELETE_MODAL_SUBTITLE: "This action cannot be undone. This will permanently delete the destination and all associated data.", DELETE_BUTTON: "I want to delete this destination", + CONNECT: "Connect", }; export const NOTIFICATION = { From 5d5bf9be22cb878886b6cc8b714542961fd2d8e6 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Tue, 1 Aug 2023 13:08:08 +0300 Subject: [PATCH 27/93] fixed pr comments --- frontend/webapp/containers/setup/sources/sources.section.tsx | 4 ++-- frontend/webapp/design.system/image/image.tsx | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/webapp/containers/setup/sources/sources.section.tsx b/frontend/webapp/containers/setup/sources/sources.section.tsx index 2328b61c2..6eb6af810 100644 --- a/frontend/webapp/containers/setup/sources/sources.section.tsx +++ b/frontend/webapp/containers/setup/sources/sources.section.tsx @@ -3,7 +3,7 @@ import { SourcesList, SourcesOptionMenu } from "@/components/setup"; import { getApplication, getNamespaces } from "@/services"; import { LoaderWrapper } from "./sources.section.styled"; import { useQuery } from "react-query"; -import { QUERIES } from "@/utils/constants"; +import { NOTIFICATION, QUERIES } from "@/utils/constants"; import { KeyvalLoader } from "@/design.system"; import { useNotification } from "@/hooks"; @@ -32,7 +32,7 @@ export function SourcesSection({ sectionData, setSectionData }: any) { useEffect(() => { isError && show({ - type: "error", + type: NOTIFICATION.ERROR, message: error, }); }, [isError]); diff --git a/frontend/webapp/design.system/image/image.tsx b/frontend/webapp/design.system/image/image.tsx index 31be01ccf..1a7b30cf7 100644 --- a/frontend/webapp/design.system/image/image.tsx +++ b/frontend/webapp/design.system/image/image.tsx @@ -27,8 +27,6 @@ export function KeyvalImage({ width={width} height={height} style={{ ...IMAGE_STYLE, ...style }} - placeholder={"empty"} - blurDataURL={src} /> ); } From a13161436c53eb03b734c190919b0fc6255c5ac1 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Tue, 1 Aug 2023 14:02:08 +0300 Subject: [PATCH 28/93] fixed pr comments --- .../overview/sources/action.menu/sources.action.menu.styled.tsx | 1 + frontend/webapp/containers/overview/sources/sources.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx index ee4c046ad..146df0a97 100644 --- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx +++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx @@ -4,6 +4,7 @@ export const SourcesMenuWrapper = styled.div` width: 100%; margin: 32px 0; display: flex; + align-items: center; justify-content: space-between; `; diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index b78b57200..fa2191caf 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -25,7 +25,7 @@ export function SourcesContainer() { }, [displayNewSourceFlow]); async function refetchSources() { - if (displayNewSourceFlow !== null && displayNewSourceFlow === false) { + if (displayNewSourceFlow === false) { setTimeout(async () => { refetch(); }, 1000); From 180fd5de2c348f212d4ece09f7c03da39c545b0b Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Tue, 1 Aug 2023 14:13:48 +0300 Subject: [PATCH 29/93] hide checkboxs --- .../create.connection.form.tsx | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx index c5cfd3bc7..fb3bf5bf3 100644 --- a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx +++ b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx @@ -134,19 +134,21 @@ export function CreateConnectionForm({ ? SETUP.UPDATE_CONNECTION : SETUP.CREATE_CONNECTION} - - {SETUP.CONNECTION_MONITORS} - - {selectedMonitors.map((checkbox) => ( - handleCheckboxChange(checkbox?.id)} - label={checkbox?.label} - /> - ))} - - + {selectedMonitors?.length > 1 && ( + + {SETUP.CONNECTION_MONITORS} + + {selectedMonitors.map((checkbox) => ( + handleCheckboxChange(checkbox?.id)} + label={checkbox?.label} + /> + ))} + + + )} Date: Tue, 1 Aug 2023 16:38:09 +0300 Subject: [PATCH 30/93] WIP --- .../manage.destination.header.tsx | 6 +----- .../create.connection.form.tsx | 13 +++++++++---- .../sources/source.card/source.card.styled.tsx | 9 ++++++--- .../setup/sources/source.card/source.card.tsx | 12 +++++++----- 4 files changed, 23 insertions(+), 17 deletions(-) diff --git a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx index e38dff4e7..59bc496cd 100644 --- a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx +++ b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx @@ -26,9 +26,7 @@ const IMAGE_STYLE: React.CSSProperties = { marginLeft: 16, }; -export function ManageDestinationHeader({ - data: { image_url, display_name, type }, -}) { +export function ManageDestinationHeader({ data: { image_url, display_name } }) { return ( @@ -36,8 +34,6 @@ export function ManageDestinationHeader({ {display_name} - - {type} ); diff --git a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx index fb3bf5bf3..107063fd8 100644 --- a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx +++ b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx @@ -105,11 +105,16 @@ export function CreateConnectionForm({ } function isFormValid() { - const dynamicFieldsValues = Object.values(dynamicFields); + const areDynamicFieldsFilled = Object.values(dynamicFields).every( + (field) => field + ); + + const isFieldLengthMatching = + (fields?.length ?? 0) === + (dynamicFields ? Object.keys(dynamicFields).length : 0); + const isValid = - !!destinationName && - dynamicFieldsValues.every((field: Field) => field) && - dynamicFieldsValues.length === fields?.length; + !!destinationName && areDynamicFieldsFilled && isFieldLengthMatching; setIsCreateButtonDisabled(!isValid); } diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx index 5ea1ad3e9..9ef556c81 100644 --- a/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx +++ b/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx @@ -11,7 +11,7 @@ export const SourceCardWrapper = styled.div` display: flex; align-items: center; flex-direction: column; - gap: 14px; + /* gap: 14px; */ cursor: pointer; .p { cursor: pointer !important; @@ -19,7 +19,10 @@ export const SourceCardWrapper = styled.div` `; export const ApplicationNameWrapper = styled.div` - display: inline-block; - text-overflow: ellipsis; + display: flex; + text-align: center; + justify-content: center; + align-items: center; + height: 60px; max-width: 224px; `; diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.tsx index 44e56dd19..f5628250c 100644 --- a/frontend/webapp/components/setup/sources/source.card/source.card.tsx +++ b/frontend/webapp/components/setup/sources/source.card/source.card.tsx @@ -15,9 +15,7 @@ import { SETUP } from "@/utils/constants"; import { KIND_COLORS } from "@/styles/global"; const TEXT_STYLE = { - textOverflow: "ellipsis", - whiteSpace: "nowrap", - overflow: "hidden", + overflowWrap: "break-word", }; export function SourceCard({ item, onClick, focus }: any) { @@ -29,8 +27,12 @@ export function SourceCard({ item, onClick, focus }: any) { - - {item.name} + 20 ? 16 : 20} + weight={700} + style={TEXT_STYLE} + > + {item?.name} Date: Tue, 1 Aug 2023 16:43:31 +0300 Subject: [PATCH 31/93] WIP --- .../destination.card/destination.card.styled.tsx | 4 +++- .../destination.card/destination.card.tsx | 5 ++--- .../setup/sources/source.card/source.card.styled.tsx | 9 +++------ .../setup/sources/source.card/source.card.tsx | 12 +++++------- 4 files changed, 13 insertions(+), 17 deletions(-) diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx index a2854b3bd..17e6a2a89 100644 --- a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx +++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx @@ -10,7 +10,9 @@ export const DestinationCardWrapper = styled.div` `; export const ApplicationNameWrapper = styled.div` - display: inline-block; + display: flex; + align-items: center; text-overflow: ellipsis; max-width: 224px; + height: 40px; `; diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx index b36bf93f5..316f81939 100644 --- a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx +++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx @@ -8,9 +8,8 @@ import { } from "./destination.card.styled"; const TEXT_STYLE: React.CSSProperties = { - textOverflow: "ellipsis", - whiteSpace: "nowrap", - overflow: "hidden", + overflowWrap: "break-word", + textAlign: "center", }; const LOGO_STYLE: React.CSSProperties = { padding: 4, backgroundColor: "#fff" }; const TAP_STYLE: React.CSSProperties = { padding: "4px 8px", gap: 4 }; diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx index 9ef556c81..5ea1ad3e9 100644 --- a/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx +++ b/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx @@ -11,7 +11,7 @@ export const SourceCardWrapper = styled.div` display: flex; align-items: center; flex-direction: column; - /* gap: 14px; */ + gap: 14px; cursor: pointer; .p { cursor: pointer !important; @@ -19,10 +19,7 @@ export const SourceCardWrapper = styled.div` `; export const ApplicationNameWrapper = styled.div` - display: flex; - text-align: center; - justify-content: center; - align-items: center; - height: 60px; + display: inline-block; + text-overflow: ellipsis; max-width: 224px; `; diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.tsx index f5628250c..44e56dd19 100644 --- a/frontend/webapp/components/setup/sources/source.card/source.card.tsx +++ b/frontend/webapp/components/setup/sources/source.card/source.card.tsx @@ -15,7 +15,9 @@ import { SETUP } from "@/utils/constants"; import { KIND_COLORS } from "@/styles/global"; const TEXT_STYLE = { - overflowWrap: "break-word", + textOverflow: "ellipsis", + whiteSpace: "nowrap", + overflow: "hidden", }; export function SourceCard({ item, onClick, focus }: any) { @@ -27,12 +29,8 @@ export function SourceCard({ item, onClick, focus }: any) { - 20 ? 16 : 20} - weight={700} - style={TEXT_STYLE} - > - {item?.name} + + {item.name} Date: Tue, 1 Aug 2023 16:58:10 +0300 Subject: [PATCH 32/93] fixed pr comments --- .../sources.option.menu/sources.option.menu.styled.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx index 88d0a54b4..0c05c9c59 100644 --- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx +++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx @@ -5,9 +5,9 @@ export const SourcesOptionMenuWrapper = styled.section` align-items: center; gap: 24px; padding: 40px 0 0 0; - @media screen and (max-width: 1600px) { - flex-wrap: wrap; - width: 74%; + flex-wrap: wrap; + @media screen and (max-width: 1650px) { + width: 85%; } `; From b1f12e7626d63998d651d5fb40c865cefa63038e Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Tue, 1 Aug 2023 17:39:13 +0300 Subject: [PATCH 33/93] remove scrollbars --- .../destination.list.styled.tsx | 1 - .../overview.header/overview.header.tsx | 18 +++++++++++++----- .../destination.list.styled.tsx | 6 +++++- .../destination/destination.styled.tsx | 9 +++++++-- .../destination/destination.section.styled.tsx | 1 - 5 files changed, 25 insertions(+), 10 deletions(-) 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 index c06fdca16..006130e5d 100644 --- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx @@ -5,7 +5,6 @@ export const ManagedListWrapper = styled.div` display: flex; flex-wrap: wrap; gap: 24px; - overflow-y: scroll; padding: 0px 36px; padding-bottom: 50px; `; diff --git a/frontend/webapp/components/overview/overview.header/overview.header.tsx b/frontend/webapp/components/overview/overview.header/overview.header.tsx index a515ec21f..c492495c2 100644 --- a/frontend/webapp/components/overview/overview.header/overview.header.tsx +++ b/frontend/webapp/components/overview/overview.header/overview.header.tsx @@ -14,20 +14,26 @@ const OverviewHeaderContainer = styled.div` display: flex; flex-direction: column; width: 100%; - padding: 24px; border-bottom: 2px solid rgba(255, 255, 255, 0.08); background: ${({ theme }) => theme.colors.light_dark}; `; const BackButtonWrapper = styled.div` display: flex; - margin-bottom: 8px; + margin: 24px; + margin-bottom: 0; cursor: pointer; p { cursor: pointer !important; } `; +const TextWrapper = styled.div` + margin-top: 24px; + margin-left: 24px; + margin-bottom: 24px; +`; + export function OverviewHeader({ title, onBackClick }: OverviewHeaderProps) { return ( @@ -37,9 +43,11 @@ export function OverviewHeader({ title, onBackClick }: OverviewHeaderProps) { {SETUP.BACK} )} - - {title} - + + + {title} + + ); } diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx index 5895538c2..5657d2d96 100644 --- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx @@ -13,7 +13,11 @@ export const DestinationListWrapper = styled.div` display: flex; flex-wrap: wrap; gap: 24px; - overflow-y: scroll; + ::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ `; export const EmptyListWrapper = styled.div` diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destination/destination.styled.tsx index fd3764d16..2c038975e 100644 --- a/frontend/webapp/containers/overview/destination/destination.styled.tsx +++ b/frontend/webapp/containers/overview/destination/destination.styled.tsx @@ -2,8 +2,13 @@ import styled from "styled-components"; export const DestinationContainerWrapper = styled.div` height: 100vh; - width: 100%; - overflow-y: scroll; + /* width: 100%; */ + overflow-y: hidden; + ::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ `; export const NewDestinationContainer = styled.div` diff --git a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx index 78f97cbdd..000d3870c 100644 --- a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx +++ b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx @@ -6,7 +6,6 @@ export const DestinationListContainer = styled.div` padding-bottom: 300px; margin-top: 24px; overflow: scroll; - scrollbar-width: none; `; export const EmptyListWrapper = styled.div` From f81d618aec261934f1d77de7cbee0deaf962a9bc Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Tue, 1 Aug 2023 17:43:08 +0300 Subject: [PATCH 34/93] WIP --- .../destination/destination.list/destination.list.styled.tsx | 1 - 1 file changed, 1 deletion(-) 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 index 006130e5d..f172a32f9 100644 --- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx @@ -1,7 +1,6 @@ import { styled } from "styled-components"; export const ManagedListWrapper = styled.div` - width: 100%; display: flex; flex-wrap: wrap; gap: 24px; From 5e68cdd9895b34406c38a7530d79c8e5eb70243e Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 2 Aug 2023 09:49:00 +0300 Subject: [PATCH 35/93] added quick help --- .../manage.destination/manage.destination.tsx | 50 ++++++++++++++----- 1 file changed, 37 insertions(+), 13 deletions(-) diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx index d129dea5f..51fd8d3cb 100644 --- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx +++ b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx @@ -1,7 +1,7 @@ -import React from "react"; +import React, { useMemo } from "react"; import { styled } from "styled-components"; import { Back } from "@/assets/icons/overview"; -import { CreateConnectionForm } from "@/components/setup"; +import { CreateConnectionForm, QuickHelp } from "@/components/setup"; import { KeyvalText } from "@/design.system"; import { SETUP } from "@/utils/constants"; import { ManageDestinationHeader } from "../manage.destination.header/manage.destination.header"; @@ -25,6 +25,13 @@ const BackButtonWrapper = styled.div` } `; +const CreateConnectionWrapper = styled.div` + display: flex; + gap: 200px; + overflow: scroll; + scrollbar-width: none; +`; + export function ManageDestination({ destinationType, selectedDestination, @@ -32,6 +39,18 @@ export function ManageDestination({ onSubmit, onDelete, }: ManageDestinationProps) { + const videoList = useMemo( + () => + destinationType?.fields + ?.filter((field) => field?.video_url) + ?.map((field) => ({ + name: field.display_name, + src: field.video_url, + thumbnail_url: field.thumbnail_url, + })), + [destinationType] + ); + return ( <> {onBackClick && ( @@ -41,17 +60,22 @@ export function ManageDestination({ )} - onSubmit(data)} - /> - {onDelete && ( - - )} + +
+ onSubmit(data)} + /> + {onDelete && ( + + )} +
+ {videoList?.length > 0 && } + ); } From 32bec3d7a30429404ff3d737ae65ed5fd7fc40de Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 2 Aug 2023 09:56:41 +0300 Subject: [PATCH 36/93] WIP --- .../destination/destination.list/destination.list.styled.tsx | 4 ++-- .../containers/overview/destination/destination.styled.tsx | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx index 5657d2d96..1515a8416 100644 --- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx @@ -16,8 +16,8 @@ export const DestinationListWrapper = styled.div` ::-webkit-scrollbar { display: none; } - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; + scrollbar-width: none; `; export const EmptyListWrapper = styled.div` diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destination/destination.styled.tsx index 2c038975e..cac5196dd 100644 --- a/frontend/webapp/containers/overview/destination/destination.styled.tsx +++ b/frontend/webapp/containers/overview/destination/destination.styled.tsx @@ -2,13 +2,12 @@ import styled from "styled-components"; export const DestinationContainerWrapper = styled.div` height: 100vh; - /* width: 100%; */ overflow-y: hidden; ::-webkit-scrollbar { display: none; } - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; + scrollbar-width: none; `; export const NewDestinationContainer = styled.div` From f91d3576199f6494faf9e2d11e736dace2be9c0f Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 2 Aug 2023 10:54:12 +0300 Subject: [PATCH 37/93] create destinaion flow match url --- .../app/overview/destinations/create/page.tsx | 36 +++++++++++++++++++ .../manage.destination/manage.destination.tsx | 1 + .../webapp/components/side.menu/menu/menu.tsx | 3 +- .../overview/destination/destination.tsx | 27 ++++---------- 4 files changed, 46 insertions(+), 21 deletions(-) create mode 100644 frontend/webapp/app/overview/destinations/create/page.tsx diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx new file mode 100644 index 000000000..3a0cf9a91 --- /dev/null +++ b/frontend/webapp/app/overview/destinations/create/page.tsx @@ -0,0 +1,36 @@ +"use client"; +import React from "react"; +import { NOTIFICATION, OVERVIEW } from "@/utils/constants"; +import { useNotification } from "@/hooks"; +import { NewDestinationFlow } from "@/containers/overview/destination/new.destination.flow"; +import { useRouter } from "next/navigation"; + +export default function CreateDestinationPage() { + const { show, Notification } = useNotification(); + const router = useRouter(); + function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { + show({ + type: NOTIFICATION.SUCCESS, + message, + }); + } + + function onError({ response }) { + const message = response?.data?.message; + show({ + type: NOTIFICATION.ERROR, + message, + }); + } + + return ( +
+ router.back()} + /> + +
+ ); +} diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx index 51fd8d3cb..32e3321de 100644 --- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx +++ b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx @@ -28,6 +28,7 @@ const BackButtonWrapper = styled.div` const CreateConnectionWrapper = styled.div` display: flex; gap: 200px; + height: 530px; overflow: scroll; scrollbar-width: none; `; diff --git a/frontend/webapp/components/side.menu/menu/menu.tsx b/frontend/webapp/components/side.menu/menu/menu.tsx index 8f83912ec..e17eb8022 100644 --- a/frontend/webapp/components/side.menu/menu/menu.tsx +++ b/frontend/webapp/components/side.menu/menu/menu.tsx @@ -35,8 +35,9 @@ export function Menu() { } function handleMenuItemClick(item) { + if (!item) return; setCurrentMenuItem(item); - router.push(item?.navigate); + router?.push(item?.navigate); } function renderMenuItemsList() { diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx index 162b174a6..3dbf5ed33 100644 --- a/frontend/webapp/containers/overview/destination/destination.tsx +++ b/frontend/webapp/containers/overview/destination/destination.tsx @@ -6,14 +6,13 @@ import { useQuery } from "react-query"; import { getDestinations } from "@/services"; import { OverviewHeader, DestinationsManagedList } from "@/components/overview"; import { DestinationContainerWrapper } from "./destination.styled"; -import { NewDestinationFlow } from "./new.destination.flow"; import { UpdateDestinationFlow } from "./update.destination.flow"; import { useNotification } from "@/hooks"; +import { useRouter } from "next/navigation"; export function DestinationContainer() { const [selectedDestination, setSelectedDestination] = useState(null); - const [displayNewDestination, setDisplayNewDestination] = - useState(false); + const { show, Notification } = useNotification(); const { isLoading: destinationLoading, @@ -21,10 +20,12 @@ export function DestinationContainer() { refetch, } = useQuery([QUERIES.API_DESTINATIONS], getDestinations); + const router = useRouter(); + function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { refetch(); setSelectedDestination(null); - setDisplayNewDestination(false); + router.push("destinations"); show({ type: NOTIFICATION.SUCCESS, message, @@ -39,18 +40,6 @@ export function DestinationContainer() { }); } - function renderNewDestinationFlow() { - return ( - { - setDisplayNewDestination(false); - }} - /> - ); - } - function renderUpdateDestinationFlow() { return ( setDisplayNewDestination(true)} + onMenuButtonClick={() => router.push("destinations/create")} /> ); @@ -81,9 +70,7 @@ export function DestinationContainer() { return ( - {displayNewDestination - ? renderNewDestinationFlow() - : selectedDestination + {selectedDestination ? renderUpdateDestinationFlow() : renderDestinationList()} From f0e6d64791921a76a5488c67679cda32b281e260 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 2 Aug 2023 11:49:53 +0300 Subject: [PATCH 38/93] new dest flow --- .../destinations/create/[id]/page.tsx | 87 +++++++++++++++++++ .../app/overview/destinations/create/page.tsx | 10 +-- .../app/overview/destinations/manage/page.tsx | 43 +++++++++ .../webapp/app/overview/destinations/page.tsx | 15 +++- .../destination/destination.styled.tsx | 10 --- .../overview/destination/destination.tsx | 28 ++---- .../destination/new.destination.flow.tsx | 59 ++++--------- 7 files changed, 168 insertions(+), 84 deletions(-) create mode 100644 frontend/webapp/app/overview/destinations/create/[id]/page.tsx create mode 100644 frontend/webapp/app/overview/destinations/manage/page.tsx diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx new file mode 100644 index 000000000..db9aa3786 --- /dev/null +++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx @@ -0,0 +1,87 @@ +"use client"; +import React, { useEffect, useState } from "react"; +import { OVERVIEW, QUERIES } from "@/utils/constants"; +import { useMutation, useQuery } from "react-query"; +import { + getDestination, + getDestinationsTypes, + setDestination, +} from "@/services"; +import { ManageDestination, OverviewHeader } from "@/components/overview"; +import { useSectionData } from "@/hooks"; +import { useRouter, useSearchParams } from "next/navigation"; +import { styled } from "styled-components"; + +const NewDestinationContainer = styled.div` + padding: 20px 36px; +`; + +export default function NewDestinationFlow({ onSuccess, onError }) { + const { sectionData, setSectionData } = useSectionData(null); + const searchParams = useSearchParams(); + const { data: destinationType } = useQuery( + [QUERIES.API_DESTINATION_TYPE, sectionData?.type], + () => getDestination(sectionData?.type), + { + enabled: !!sectionData, + } + ); + + const { isLoading, data } = useQuery( + [QUERIES.API_DESTINATION_TYPES], + getDestinationsTypes + ); + + const { mutate } = useMutation((body) => setDestination(body)); + const router = useRouter(); + + useEffect(() => { + const search = searchParams.get("dest"); + let currentData = null; + data?.categories.forEach((item) => { + const filterItem = item.items.filter((dest) => dest?.type === search); + if (filterItem.length) { + currentData = filterItem[0]; + } + }); + setSectionData(currentData); + }, [data]); + + function onSubmit(newDestination) { + const destination = { + ...newDestination, + type: sectionData.type, + }; + + mutate(destination, { + onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS), + onError, + }); + } + + function handleBackPress() { + router.back(); + } + + if (isLoading) { + return; + } + + return ( + <> + + {destinationType && sectionData && ( + + + + )} + + ); +} diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx index 3a0cf9a91..a6e4964b5 100644 --- a/frontend/webapp/app/overview/destinations/create/page.tsx +++ b/frontend/webapp/app/overview/destinations/create/page.tsx @@ -24,13 +24,9 @@ export default function CreateDestinationPage() { } return ( -
- router.back()} - /> + <> + -
+ ); } diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx new file mode 100644 index 000000000..1fb2b1cc7 --- /dev/null +++ b/frontend/webapp/app/overview/destinations/manage/page.tsx @@ -0,0 +1,43 @@ +"use client"; +import React, { useState } from "react"; +import { NOTIFICATION, OVERVIEW } from "@/utils/constants"; +import { useNotification } from "@/hooks"; +import { useRouter } from "next/navigation"; +import { UpdateDestinationFlow } from "@/containers/overview/destination/update.destination.flow"; + +export function ManageDestinationPage() { + const [selectedDestination, setSelectedDestination] = useState(null); + + const { show, Notification } = useNotification(); + + const router = useRouter(); + + function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { + setSelectedDestination(null); + router.push("destinations"); + show({ + type: NOTIFICATION.SUCCESS, + message, + }); + } + + function onError({ response }) { + const message = response?.data?.message; + show({ + type: NOTIFICATION.ERROR, + message, + }); + } + + return ( + <> + + + + ); +} diff --git a/frontend/webapp/app/overview/destinations/page.tsx b/frontend/webapp/app/overview/destinations/page.tsx index 7056885ed..bb83b2d78 100644 --- a/frontend/webapp/app/overview/destinations/page.tsx +++ b/frontend/webapp/app/overview/destinations/page.tsx @@ -1,11 +1,22 @@ "use client"; import { DestinationContainer } from "@/containers/overview"; import React from "react"; +import { styled } from "styled-components"; + +const DestinationContainerWrapper = styled.div` + height: 100vh; + overflow-y: hidden; + ::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; + scrollbar-width: none; +`; export default function DestinationDashboardPage() { return ( - <> + - + ); } diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destination/destination.styled.tsx index cac5196dd..008ad16f7 100644 --- a/frontend/webapp/containers/overview/destination/destination.styled.tsx +++ b/frontend/webapp/containers/overview/destination/destination.styled.tsx @@ -1,15 +1,5 @@ import styled from "styled-components"; -export const DestinationContainerWrapper = styled.div` - height: 100vh; - overflow-y: hidden; - ::-webkit-scrollbar { - display: none; - } - -ms-overflow-style: none; - scrollbar-width: none; -`; - export const NewDestinationContainer = styled.div` padding: 20px 36px; `; diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx index 3dbf5ed33..4b86c417d 100644 --- a/frontend/webapp/containers/overview/destination/destination.tsx +++ b/frontend/webapp/containers/overview/destination/destination.tsx @@ -1,18 +1,14 @@ "use client"; -import React, { useState } from "react"; +import React from "react"; import { KeyvalLoader } from "@/design.system"; import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; import { useQuery } from "react-query"; import { getDestinations } from "@/services"; import { OverviewHeader, DestinationsManagedList } from "@/components/overview"; -import { DestinationContainerWrapper } from "./destination.styled"; -import { UpdateDestinationFlow } from "./update.destination.flow"; import { useNotification } from "@/hooks"; import { useRouter } from "next/navigation"; export function DestinationContainer() { - const [selectedDestination, setSelectedDestination] = useState(null); - const { show, Notification } = useNotification(); const { isLoading: destinationLoading, @@ -24,7 +20,6 @@ export function DestinationContainer() { function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { refetch(); - setSelectedDestination(null); router.push("destinations"); show({ type: NOTIFICATION.SUCCESS, @@ -40,24 +35,13 @@ export function DestinationContainer() { }); } - function renderUpdateDestinationFlow() { - return ( - - ); - } - function renderDestinationList() { return ( <> {}} onMenuButtonClick={() => router.push("destinations/create")} /> @@ -69,11 +53,9 @@ export function DestinationContainer() { } return ( - - {selectedDestination - ? renderUpdateDestinationFlow() - : renderDestinationList()} + <> + {renderDestinationList()} - + ); } diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx index 7a75a32c0..a8e1315cd 100644 --- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx @@ -1,24 +1,19 @@ "use client"; -import React, { useState } from "react"; -import { OVERVIEW, QUERIES } from "@/utils/constants"; -import { useMutation, useQuery } from "react-query"; -import { getDestination, setDestination } from "@/services"; -import { ManageDestination, OverviewHeader } from "@/components/overview"; +import React from "react"; +import { OVERVIEW } from "@/utils/constants"; +import { useMutation } from "react-query"; +import { setDestination } from "@/services"; +import { OverviewHeader } from "@/components/overview"; import { useSectionData } from "@/hooks"; import { DestinationSection } from "@/containers/setup/destination/destination.section"; import { NewDestinationContainer } from "./destination.styled"; +import { useRouter } from "next/navigation"; -export function NewDestinationFlow({ onBackClick, onSuccess, onError }) { +export function NewDestinationFlow({ onSuccess, onError }) { const { sectionData, setSectionData } = useSectionData(null); - const [managed, setManaged] = useState(null); - const { data: destinationType } = useQuery( - [QUERIES.API_DESTINATION_TYPE, sectionData?.type], - () => getDestination(sectionData?.type), - { - enabled: !!sectionData, - } - ); + const { mutate } = useMutation((body) => setDestination(body)); + const router = useRouter(); function onSubmit(newDestination) { const destination = { @@ -33,35 +28,17 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) { } function handleBackPress() { - if (managed && sectionData) { - setManaged(false); - setSectionData(null); - return; - } - onBackClick(); - } - - function renderNewDestinationForm() { - return ( - - ); + router.back(); } function renderSelectNewDestination() { return ( - <> - { - setSectionData(data); - setManaged(true); - }} - /> - + { + router.push(`/overview/destinations/create/manage?dest=${data.type}`); + }} + /> ); } @@ -72,9 +49,7 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) { onBackClick={handleBackPress} /> - {managed && sectionData - ? renderNewDestinationForm() - : renderSelectNewDestination()} + {renderSelectNewDestination()} ); From 0a30a2330c762e380639e8e67e3ad5156948d4e2 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 2 Aug 2023 13:36:47 +0300 Subject: [PATCH 39/93] manage dest flow --- .../app/overview/destinations/create/page.tsx | 3 +- .../app/overview/destinations/manage/page.tsx | 56 +++++++++++++------ .../overview/destination/destination.tsx | 30 +++------- .../destination/new.destination.flow.tsx | 20 +++---- .../destination/update.destination.flow.tsx | 8 ++- .../notification/notification.tsx | 21 ++++--- .../notification/portal.notification.tsx | 46 +++++++++++++++ 7 files changed, 121 insertions(+), 63 deletions(-) create mode 100644 frontend/webapp/design.system/notification/portal.notification.tsx diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx index a6e4964b5..83b9316b3 100644 --- a/frontend/webapp/app/overview/destinations/create/page.tsx +++ b/frontend/webapp/app/overview/destinations/create/page.tsx @@ -1,5 +1,5 @@ "use client"; -import React from "react"; +import React, { useEffect } from "react"; import { NOTIFICATION, OVERVIEW } from "@/utils/constants"; import { useNotification } from "@/hooks"; import { NewDestinationFlow } from "@/containers/overview/destination/new.destination.flow"; @@ -8,6 +8,7 @@ import { useRouter } from "next/navigation"; export default function CreateDestinationPage() { const { show, Notification } = useNotification(); const router = useRouter(); + function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { show({ type: NOTIFICATION.SUCCESS, diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx index 1fb2b1cc7..6f0456d9b 100644 --- a/frontend/webapp/app/overview/destinations/manage/page.tsx +++ b/frontend/webapp/app/overview/destinations/manage/page.tsx @@ -1,20 +1,37 @@ "use client"; -import React, { useState } from "react"; -import { NOTIFICATION, OVERVIEW } from "@/utils/constants"; +import React, { useEffect, useState } from "react"; +import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; import { useNotification } from "@/hooks"; -import { useRouter } from "next/navigation"; -import { UpdateDestinationFlow } from "@/containers/overview/destination/update.destination.flow"; +import { useRouter, useSearchParams } from "next/navigation"; +import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow"; +import { getDestinations } from "@/services"; +import { useQuery } from "react-query"; -export function ManageDestinationPage() { +export default function ManageDestinationPage() { const [selectedDestination, setSelectedDestination] = useState(null); const { show, Notification } = useNotification(); - + const { + isLoading: destinationLoading, + data: destinationList, + refetch, + } = useQuery([QUERIES.API_DESTINATIONS], getDestinations); const router = useRouter(); + const searchParams = useSearchParams(); + + useEffect(() => { + const search = searchParams.get("dest"); + const currentDestination = destinationList?.filter( + (item) => item?.id === search + ); + if (currentDestination?.length) { + setSelectedDestination(currentDestination[0]); + } + }, [searchParams, destinationList]); function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { - setSelectedDestination(null); - router.push("destinations"); + router.back(); + refetch(); show({ type: NOTIFICATION.SUCCESS, message, @@ -29,15 +46,20 @@ export function ManageDestinationPage() { }); } + if (destinationLoading) { + return; + } + return ( - <> - - - + selectedDestination && ( + <> + + + + ) ); } diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx index 4b86c417d..946c0ba33 100644 --- a/frontend/webapp/containers/overview/destination/destination.tsx +++ b/frontend/webapp/containers/overview/destination/destination.tsx @@ -10,38 +10,22 @@ import { useRouter } from "next/navigation"; export function DestinationContainer() { const { show, Notification } = useNotification(); - const { - isLoading: destinationLoading, - data: destinationList, - refetch, - } = useQuery([QUERIES.API_DESTINATIONS], getDestinations); + const { isLoading: destinationLoading, data: destinationList } = useQuery( + [QUERIES.API_DESTINATIONS], + getDestinations + ); const router = useRouter(); - function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { - refetch(); - router.push("destinations"); - show({ - type: NOTIFICATION.SUCCESS, - message, - }); - } - - function onError({ response }) { - const message = response?.data?.message; - show({ - type: NOTIFICATION.ERROR, - message, - }); - } - function renderDestinationList() { return ( <> {}} + onItemClick={({ id }) => + router.push(`destinations/manage?dest=${id}`) + } onMenuButtonClick={() => router.push("destinations/create")} /> diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx index a8e1315cd..cb89ac339 100644 --- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx @@ -15,17 +15,17 @@ export function NewDestinationFlow({ onSuccess, onError }) { const { mutate } = useMutation((body) => setDestination(body)); const router = useRouter(); - function onSubmit(newDestination) { - const destination = { - ...newDestination, - type: sectionData.type, - }; + // function onSubmit(newDestination) { + // const destination = { + // ...newDestination, + // type: sectionData.type, + // }; - mutate(destination, { - onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS), - onError, - }); - } + // mutate(destination, { + // onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS), + // onError, + // }); + // } function handleBackPress() { router.back(); diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx index 8eb710a29..d95fe7ac4 100644 --- a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx @@ -7,13 +7,15 @@ import { getDestination, updateDestination } from "@/services"; import { ManageDestination } from "@/components/overview"; import { deleteDestination } from "@/services/destinations"; import { ManageDestinationWrapper } from "./destination.styled"; +import { useRouter } from "next/navigation"; -export function UpdateDestinationFlow({ +export default function UpdateDestinationFlow({ selectedDestination, - setSelectedDestination, onSuccess, onError, }) { + const router = useRouter(); + const manageData = useMemo(() => { return { ...selectedDestination, @@ -60,7 +62,7 @@ export function UpdateDestinationFlow({ ) : ( setSelectedDestination(null)} + onBackClick={() => router.back()} destinationType={destinationType} selectedDestination={manageData} onSubmit={onSubmit} diff --git a/frontend/webapp/design.system/notification/notification.tsx b/frontend/webapp/design.system/notification/notification.tsx index a8d53e169..bd8af8ad0 100644 --- a/frontend/webapp/design.system/notification/notification.tsx +++ b/frontend/webapp/design.system/notification/notification.tsx @@ -7,6 +7,7 @@ import { KeyvalText } from "../text/text"; import CloseIcon from "@/assets/icons/X-blue.svg"; import SuccessIcon from "@/assets/icons/success-notification.svg"; import ErrorIcon from "@/assets/icons/error-notification.svg"; +import PortalNotification from "./portal.notification"; interface KeyvalNotificationProps { type: "success" | "error" | "warning" | "info"; message: string; @@ -47,14 +48,16 @@ export function KeyvalNotification({ } return ( - - - {getIcon()} - - {message} - - - - + + + + {getIcon()} + + {message} + + + + + ); } diff --git a/frontend/webapp/design.system/notification/portal.notification.tsx b/frontend/webapp/design.system/notification/portal.notification.tsx new file mode 100644 index 000000000..d220c0fa8 --- /dev/null +++ b/frontend/webapp/design.system/notification/portal.notification.tsx @@ -0,0 +1,46 @@ +import { useState, useLayoutEffect } from "react"; +import { createPortal } from "react-dom"; + +interface Props { + children: JSX.Element; + wrapperId: string; +} + +const PortalNotification = ({ children, wrapperId }: Props) => { + const [portalElement, setPortalElement] = useState(null); + + useLayoutEffect(() => { + let element = document.getElementById(wrapperId) as HTMLElement; + let portalCreated = false; + // if element is not found with wrapperId or wrapperId is not provided, + // create and append to body + if (!element) { + element = createWrapperAndAppendToBody(wrapperId); + portalCreated = true; + } + + setPortalElement(element); + + // cleaning up the portal element + return () => { + // delete the programatically created element + if (portalCreated && element.parentNode) { + element.parentNode.removeChild(element); + } + }; + }, [wrapperId]); + + const createWrapperAndAppendToBody = (elementId: string) => { + const element = document.createElement("div"); + element.setAttribute("id", elementId); + document.body.appendChild(element); + return element; + }; + + // portalElement state will be null on the very first render. + if (!portalElement) return null; + + return createPortal(children, portalElement); +}; + +export default PortalNotification; From 71e52b79f47ec88503c3395612d7c7f15ec971de Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 2 Aug 2023 13:47:25 +0300 Subject: [PATCH 40/93] fixed pr comments --- .../destinations/create/[id]/page.tsx | 26 ++++++++++++++---- .../app/overview/destinations/create/page.tsx | 26 ++---------------- .../app/overview/destinations/manage/page.tsx | 5 ++-- .../overview/destination/destination.tsx | 27 +++++-------------- .../destination/new.destination.flow.tsx | 16 +---------- 5 files changed, 33 insertions(+), 67 deletions(-) diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx index db9aa3786..beea208f5 100644 --- a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx +++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useEffect, useState } from "react"; -import { OVERVIEW, QUERIES } from "@/utils/constants"; +import React, { useEffect } from "react"; +import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; import { useMutation, useQuery } from "react-query"; import { getDestination, @@ -8,7 +8,7 @@ import { setDestination, } from "@/services"; import { ManageDestination, OverviewHeader } from "@/components/overview"; -import { useSectionData } from "@/hooks"; +import { useNotification, useSectionData } from "@/hooks"; import { useRouter, useSearchParams } from "next/navigation"; import { styled } from "styled-components"; @@ -16,7 +16,7 @@ const NewDestinationContainer = styled.div` padding: 20px 36px; `; -export default function NewDestinationFlow({ onSuccess, onError }) { +export default function NewDestinationFlow() { const { sectionData, setSectionData } = useSectionData(null); const searchParams = useSearchParams(); const { data: destinationType } = useQuery( @@ -31,7 +31,7 @@ export default function NewDestinationFlow({ onSuccess, onError }) { [QUERIES.API_DESTINATION_TYPES], getDestinationsTypes ); - + const { show, Notification } = useNotification(); const { mutate } = useMutation((body) => setDestination(body)); const router = useRouter(); @@ -47,6 +47,21 @@ export default function NewDestinationFlow({ onSuccess, onError }) { setSectionData(currentData); }, [data]); + function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { + show({ + type: NOTIFICATION.SUCCESS, + message, + }); + } + + function onError({ response }) { + const message = response?.data?.message; + show({ + type: NOTIFICATION.ERROR, + message, + }); + } + function onSubmit(newDestination) { const destination = { ...newDestination, @@ -82,6 +97,7 @@ export default function NewDestinationFlow({ onSuccess, onError }) { /> )} + ); } diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx index 83b9316b3..c50719655 100644 --- a/frontend/webapp/app/overview/destinations/create/page.tsx +++ b/frontend/webapp/app/overview/destinations/create/page.tsx @@ -1,33 +1,11 @@ "use client"; -import React, { useEffect } from "react"; -import { NOTIFICATION, OVERVIEW } from "@/utils/constants"; -import { useNotification } from "@/hooks"; +import React from "react"; import { NewDestinationFlow } from "@/containers/overview/destination/new.destination.flow"; -import { useRouter } from "next/navigation"; export default function CreateDestinationPage() { - const { show, Notification } = useNotification(); - const router = useRouter(); - - function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { - show({ - type: NOTIFICATION.SUCCESS, - message, - }); - } - - function onError({ response }) { - const message = response?.data?.message; - show({ - type: NOTIFICATION.ERROR, - message, - }); - } - return ( <> - - + ); } diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx index 6f0456d9b..1a1b99b7b 100644 --- a/frontend/webapp/app/overview/destinations/manage/page.tsx +++ b/frontend/webapp/app/overview/destinations/manage/page.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; import { useNotification } from "@/hooks"; -import { useRouter, useSearchParams } from "next/navigation"; +import { useSearchParams } from "next/navigation"; import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow"; import { getDestinations } from "@/services"; import { useQuery } from "react-query"; @@ -16,7 +16,7 @@ export default function ManageDestinationPage() { data: destinationList, refetch, } = useQuery([QUERIES.API_DESTINATIONS], getDestinations); - const router = useRouter(); + const searchParams = useSearchParams(); useEffect(() => { @@ -30,7 +30,6 @@ export default function ManageDestinationPage() { }, [searchParams, destinationList]); function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { - router.back(); refetch(); show({ type: NOTIFICATION.SUCCESS, diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx index 946c0ba33..1b0361712 100644 --- a/frontend/webapp/containers/overview/destination/destination.tsx +++ b/frontend/webapp/containers/overview/destination/destination.tsx @@ -1,15 +1,13 @@ "use client"; import React from "react"; import { KeyvalLoader } from "@/design.system"; -import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import { OVERVIEW, QUERIES } from "@/utils/constants"; import { useQuery } from "react-query"; import { getDestinations } from "@/services"; import { OverviewHeader, DestinationsManagedList } from "@/components/overview"; -import { useNotification } from "@/hooks"; import { useRouter } from "next/navigation"; export function DestinationContainer() { - const { show, Notification } = useNotification(); const { isLoading: destinationLoading, data: destinationList } = useQuery( [QUERIES.API_DESTINATIONS], getDestinations @@ -17,29 +15,18 @@ export function DestinationContainer() { const router = useRouter(); - function renderDestinationList() { - return ( - <> - - - router.push(`destinations/manage?dest=${id}`) - } - onMenuButtonClick={() => router.push("destinations/create")} - /> - - ); - } - if (destinationLoading) { return ; } return ( <> - {renderDestinationList()} - + + router.push(`destinations/manage?dest=${id}`)} + onMenuButtonClick={() => router.push("destinations/create")} + /> ); } diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx index cb89ac339..2f48b1a05 100644 --- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx @@ -9,24 +9,10 @@ import { DestinationSection } from "@/containers/setup/destination/destination.s import { NewDestinationContainer } from "./destination.styled"; import { useRouter } from "next/navigation"; -export function NewDestinationFlow({ onSuccess, onError }) { +export function NewDestinationFlow() { const { sectionData, setSectionData } = useSectionData(null); - - const { mutate } = useMutation((body) => setDestination(body)); const router = useRouter(); - // function onSubmit(newDestination) { - // const destination = { - // ...newDestination, - // type: sectionData.type, - // }; - - // mutate(destination, { - // onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS), - // onError, - // }); - // } - function handleBackPress() { router.back(); } From 55cae09ab350ae6f8220e7d8f409c91152784e9f Mon Sep 17 00:00:00 2001 From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com> Date: Wed, 2 Aug 2023 13:47:47 +0300 Subject: [PATCH 41/93] Overview sources (#364) --- frontend/webapp/app/page.tsx | 3 +- .../destination.list.styled.tsx | 2 - .../manage.destination.header.tsx | 6 +-- .../manage.destination/manage.destination.tsx | 50 ++++++++++++++----- .../overview.header/overview.header.tsx | 18 +++++-- .../sources.action.menu.styled.tsx | 1 + .../sources.manage.list.tsx | 2 +- .../sources.manage.styled.tsx | 2 +- .../create.connection.form.tsx | 41 ++++++++------- .../destination.card.styled.tsx | 4 +- .../destination.card/destination.card.tsx | 5 +- .../destination.list.styled.tsx | 6 ++- .../filter.sources.options.tsx | 9 ++-- .../sources.option.menu.styled.tsx | 14 ++---- .../destination/destination.styled.tsx | 8 ++- .../overview/sources/manage.sources.tsx | 26 ++++------ .../overview/sources/new.source.flow.tsx | 37 ++++++++++---- .../containers/overview/sources/sources.tsx | 47 +++++++++++++++-- .../destination.section.styled.tsx | 1 - .../setup/setup.section/setup.section.tsx | 5 +- .../setup/sources/sources.section.tsx | 24 +++++---- frontend/webapp/services/sources.tsx | 3 +- frontend/webapp/types/sources.tsx | 22 ++++++++ frontend/webapp/utils/constants/string.tsx | 3 ++ 24 files changed, 226 insertions(+), 113 deletions(-) diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx index 1b259b2ed..20d26031b 100644 --- a/frontend/webapp/app/page.tsx +++ b/frontend/webapp/app/page.tsx @@ -4,7 +4,6 @@ import { useEffect } from "react"; import { getConfig } from "@/services/config"; import { useRouter } from "next/navigation"; import { ROUTES, CONFIG, QUERIES } from "@/utils/constants"; -import { KeyvalLoader } from "@/design.system"; export default function App() { const router = useRouter(); @@ -16,7 +15,6 @@ export default function App() { function renderCurrentPage() { const { installation } = data; - const state = installation === CONFIG.APPS_SELECTED ? `?state=${CONFIG.APPS_SELECTED}` @@ -25,6 +23,7 @@ export default function App() { case CONFIG.NEW: case CONFIG.APPS_SELECTED: router.push(`${ROUTES.SETUP}${state}`); + break; case CONFIG.FINISHED: router.push(ROUTES.OVERVIEW); } 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 index c06fdca16..f172a32f9 100644 --- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx @@ -1,11 +1,9 @@ import { styled } from "styled-components"; export const ManagedListWrapper = styled.div` - width: 100%; display: flex; flex-wrap: wrap; gap: 24px; - overflow-y: scroll; padding: 0px 36px; padding-bottom: 50px; `; diff --git a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx index e38dff4e7..59bc496cd 100644 --- a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx +++ b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx @@ -26,9 +26,7 @@ const IMAGE_STYLE: React.CSSProperties = { marginLeft: 16, }; -export function ManageDestinationHeader({ - data: { image_url, display_name, type }, -}) { +export function ManageDestinationHeader({ data: { image_url, display_name } }) { return ( @@ -36,8 +34,6 @@ export function ManageDestinationHeader({ {display_name} - - {type} ); diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx index d129dea5f..51fd8d3cb 100644 --- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx +++ b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx @@ -1,7 +1,7 @@ -import React from "react"; +import React, { useMemo } from "react"; import { styled } from "styled-components"; import { Back } from "@/assets/icons/overview"; -import { CreateConnectionForm } from "@/components/setup"; +import { CreateConnectionForm, QuickHelp } from "@/components/setup"; import { KeyvalText } from "@/design.system"; import { SETUP } from "@/utils/constants"; import { ManageDestinationHeader } from "../manage.destination.header/manage.destination.header"; @@ -25,6 +25,13 @@ const BackButtonWrapper = styled.div` } `; +const CreateConnectionWrapper = styled.div` + display: flex; + gap: 200px; + overflow: scroll; + scrollbar-width: none; +`; + export function ManageDestination({ destinationType, selectedDestination, @@ -32,6 +39,18 @@ export function ManageDestination({ onSubmit, onDelete, }: ManageDestinationProps) { + const videoList = useMemo( + () => + destinationType?.fields + ?.filter((field) => field?.video_url) + ?.map((field) => ({ + name: field.display_name, + src: field.video_url, + thumbnail_url: field.thumbnail_url, + })), + [destinationType] + ); + return ( <> {onBackClick && ( @@ -41,17 +60,22 @@ export function ManageDestination({ )} - onSubmit(data)} - /> - {onDelete && ( - - )} + +
+ onSubmit(data)} + /> + {onDelete && ( + + )} +
+ {videoList?.length > 0 && } + ); } diff --git a/frontend/webapp/components/overview/overview.header/overview.header.tsx b/frontend/webapp/components/overview/overview.header/overview.header.tsx index a515ec21f..c492495c2 100644 --- a/frontend/webapp/components/overview/overview.header/overview.header.tsx +++ b/frontend/webapp/components/overview/overview.header/overview.header.tsx @@ -14,20 +14,26 @@ const OverviewHeaderContainer = styled.div` display: flex; flex-direction: column; width: 100%; - padding: 24px; border-bottom: 2px solid rgba(255, 255, 255, 0.08); background: ${({ theme }) => theme.colors.light_dark}; `; const BackButtonWrapper = styled.div` display: flex; - margin-bottom: 8px; + margin: 24px; + margin-bottom: 0; cursor: pointer; p { cursor: pointer !important; } `; +const TextWrapper = styled.div` + margin-top: 24px; + margin-left: 24px; + margin-bottom: 24px; +`; + export function OverviewHeader({ title, onBackClick }: OverviewHeaderProps) { return ( @@ -37,9 +43,11 @@ export function OverviewHeader({ title, onBackClick }: OverviewHeaderProps) { {SETUP.BACK} )} - - {title} - + + + {title} + + ); } diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx index ee4c046ad..146df0a97 100644 --- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx +++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx @@ -4,6 +4,7 @@ export const SourcesMenuWrapper = styled.div` width: 100%; margin: 32px 0; display: flex; + align-items: center; justify-content: space-between; `; diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx index fa63eda5a..b5a82fad5 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx @@ -17,7 +17,7 @@ interface SourcesManagedListProps { export function SourcesManagedList({ data = [] }: SourcesManagedListProps) { function renderSources() { return data.map((source: ManagedSource) => ( - + )); } diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx index ffbdffed2..3fd4cad8d 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx @@ -27,7 +27,7 @@ export const EmptyListWrapper = styled.div` `; export const ManagedListWrapper = styled.div` - height: 75%; + max-height: 72%; display: flex; flex-wrap: wrap; gap: 24px; diff --git a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx index c5cfd3bc7..107063fd8 100644 --- a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx +++ b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx @@ -105,11 +105,16 @@ export function CreateConnectionForm({ } function isFormValid() { - const dynamicFieldsValues = Object.values(dynamicFields); + const areDynamicFieldsFilled = Object.values(dynamicFields).every( + (field) => field + ); + + const isFieldLengthMatching = + (fields?.length ?? 0) === + (dynamicFields ? Object.keys(dynamicFields).length : 0); + const isValid = - !!destinationName && - dynamicFieldsValues.every((field: Field) => field) && - dynamicFieldsValues.length === fields?.length; + !!destinationName && areDynamicFieldsFilled && isFieldLengthMatching; setIsCreateButtonDisabled(!isValid); } @@ -134,19 +139,21 @@ export function CreateConnectionForm({ ? SETUP.UPDATE_CONNECTION : SETUP.CREATE_CONNECTION} - - {SETUP.CONNECTION_MONITORS} - - {selectedMonitors.map((checkbox) => ( - handleCheckboxChange(checkbox?.id)} - label={checkbox?.label} - /> - ))} - - + {selectedMonitors?.length > 1 && ( + + {SETUP.CONNECTION_MONITORS} + + {selectedMonitors.map((checkbox) => ( + handleCheckboxChange(checkbox?.id)} + label={checkbox?.label} + /> + ))} + + + )} + <> setSearchFilter(e.target.value)} @@ -30,6 +27,6 @@ export function FilterSourcesOptions({ onChange={handleDropDownChange} /> - + ); } diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx index 33ae15b5f..0c05c9c59 100644 --- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx +++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx @@ -5,16 +5,9 @@ export const SourcesOptionMenuWrapper = styled.section` align-items: center; gap: 24px; padding: 40px 0 0 0; -`; - -export const FilterMenuWrapper = styled.div` - display: flex; - gap: 16px; - align-items: center; - - @media screen and (max-width: 1400px) { - flex-wrap: wrap; - width: 90%; + flex-wrap: wrap; + @media screen and (max-width: 1650px) { + width: 85%; } `; @@ -34,5 +27,4 @@ export const CheckboxWrapper = styled.div` export const SwitcherWrapper = styled.div` min-width: 90px; - margin-left: 24px; `; diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destination/destination.styled.tsx index fd3764d16..cac5196dd 100644 --- a/frontend/webapp/containers/overview/destination/destination.styled.tsx +++ b/frontend/webapp/containers/overview/destination/destination.styled.tsx @@ -2,8 +2,12 @@ import styled from "styled-components"; export const DestinationContainerWrapper = styled.div` height: 100vh; - width: 100%; - overflow-y: scroll; + overflow-y: hidden; + ::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; + scrollbar-width: none; `; export const NewDestinationContainer = styled.div` diff --git a/frontend/webapp/containers/overview/sources/manage.sources.tsx b/frontend/webapp/containers/overview/sources/manage.sources.tsx index 85fbef48e..af0e0daa9 100644 --- a/frontend/webapp/containers/overview/sources/manage.sources.tsx +++ b/frontend/webapp/containers/overview/sources/manage.sources.tsx @@ -1,16 +1,18 @@ "use client"; import React, { useEffect, useMemo, useState } from "react"; -import { KeyvalLoader } from "@/design.system"; import { QUERIES } from "@/utils/constants"; import { useQuery } from "react-query"; -import { getNamespaces, getSources } from "@/services"; +import { getNamespaces } from "@/services"; import { SourcesActionMenu, SourcesManagedList } from "@/components/overview"; import { MenuWrapper } from "./sources.styled"; -import { ManagedSource } from "@/types/sources"; +import { ManagedSource, Namespace } from "@/types/sources"; -export function ManageSources({ setDisplayNewSourceFlow }) { +const DEFAULT_FILTER = { name: "default", selected: false, totalApps: 0 }; + +export function ManageSources({ setDisplayNewSourceFlow, sources }) { const [searchFilter, setSearchFilter] = useState(""); - const [currentNamespace, setCurrentNamespace] = useState(null); + const [currentNamespace, setCurrentNamespace] = + useState(DEFAULT_FILTER); const { data: namespaces } = useQuery( [QUERIES.API_NAMESPACES], @@ -23,19 +25,13 @@ export function ManageSources({ setDisplayNewSourceFlow }) { const namespacesList = useMemo( () => - namespaces?.namespaces?.map((item: any, index: number) => ({ + namespaces?.namespaces?.map((item: Namespace, index: number) => ({ id: index, label: item.name, })), [namespaces] ); - const { - data: sources, - refetch, - isLoading, - } = useQuery([QUERIES.API_SOURCES], getSources); - function filterByNamespace() { return currentNamespace ? sources?.filter( @@ -44,7 +40,7 @@ export function ManageSources({ setDisplayNewSourceFlow }) { : sources; } - function filterBySearchQuery(data) { + function filterBySearchQuery(data: ManagedSource[]) { return searchFilter ? data?.filter((item: ManagedSource) => item.name.toLowerCase().includes(searchFilter.toLowerCase()) @@ -57,10 +53,6 @@ export function ManageSources({ setDisplayNewSourceFlow }) { return filterBySearchQuery(data); } - if (isLoading) { - return ; - } - return ( <> diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx index 77f763455..5152767ba 100644 --- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx +++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx @@ -7,20 +7,36 @@ import theme from "@/styles/palette"; import { NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants"; import { useMutation } from "react-query"; import { setNamespaces } from "@/services"; +import { SelectedSources } from "@/types/sources"; -export function NewSourceFlow() { +export function NewSourceFlow({ onSuccess, sources }) { const { sectionData, setSectionData, totalSelected } = useSectionData({}); - const { mutate } = useMutation((body) => setNamespaces(body)); + const { mutate } = useMutation((body: SelectedSources) => + setNamespaces(body) + ); const { show, Notification } = useNotification(); - function handleNewSource() { - mutate(sectionData, { - onSuccess: () => { - setSectionData({}); - }, + function updateSectionDataWithSources() { + const sourceNamesSet = new Set(sources.map((source) => source.name)); + const updatedSectionData: SelectedSources = {}; + + for (const key in sectionData) { + const { objects, ...rest } = sectionData[key]; + const updatedObjects = objects.map((item) => ({ + ...item, + selected: item?.selected || sourceNamesSet.has(item.name), + })); + + updatedSectionData[key] = { + ...rest, + objects: updatedObjects, + }; + } + + mutate(updatedSectionData, { + onSuccess, onError: ({ response }) => { const message = response?.data?.message || SETUP.ERROR; - console.log({ response }); show({ type: NOTIFICATION.ERROR, message, @@ -33,7 +49,10 @@ export function NewSourceFlow() { {`${totalSelected} ${SETUP.SELECTED}`} - + {OVERVIEW.CONNECT} diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index 58bc728b3..fa2191caf 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -1,20 +1,56 @@ "use client"; -import React, { useState } from "react"; -import { OVERVIEW } from "@/utils/constants"; +import React, { useEffect, useState } from "react"; +import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; import { OverviewHeader } from "@/components/overview"; import { SourcesContainerWrapper } from "./sources.styled"; import { NewSourceFlow } from "./new.source.flow"; import { ManageSources } from "./manage.sources"; +import { useNotification } from "@/hooks"; +import { useQuery } from "react-query"; +import { getSources } from "@/services"; export function SourcesContainer() { - const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState(false); + const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState< + boolean | null + >(null); + const { show, Notification } = useNotification(); + + const { data: sources, refetch } = useQuery( + [QUERIES.API_SOURCES], + getSources + ); + + useEffect(() => { + refetchSources(); + }, [displayNewSourceFlow]); + + async function refetchSources() { + if (displayNewSourceFlow === false) { + setTimeout(async () => { + refetch(); + }, 1000); + } + } + + function onNewSourceSuccess() { + setDisplayNewSourceFlow(false); + show({ + type: NOTIFICATION.SUCCESS, + message: OVERVIEW.SOURCE_CREATED_SUCCESS, + }); + } function renderNewSourceFlow() { - return ; + return ; } function renderSources() { - return ; + return ( + + ); } return ( @@ -26,6 +62,7 @@ export function SourcesContainer() { } /> {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()} + ); } diff --git a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx index 78f97cbdd..000d3870c 100644 --- a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx +++ b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx @@ -6,7 +6,6 @@ export const DestinationListContainer = styled.div` padding-bottom: 300px; margin-top: 24px; overflow: scroll; - scrollbar-width: none; `; export const EmptyListWrapper = styled.div` diff --git a/frontend/webapp/containers/setup/setup.section/setup.section.tsx b/frontend/webapp/containers/setup/setup.section/setup.section.tsx index c50a2581f..53da583c3 100644 --- a/frontend/webapp/containers/setup/setup.section/setup.section.tsx +++ b/frontend/webapp/containers/setup/setup.section/setup.section.tsx @@ -18,6 +18,7 @@ import { STEPS, Step } from "./utils"; import { setNamespaces } from "@/services"; import { useSearchParams } from "next/navigation"; import { useMutation } from "react-query"; +import { SelectedSources } from "@/types/sources"; const STATE = "state"; @@ -30,7 +31,9 @@ const sectionComponents = { export function SetupSection() { const [currentStep, setCurrentStep] = useState(STEPS[0]); const { sectionData, setSectionData, totalSelected } = useSectionData({}); - const { mutate } = useMutation((body) => setNamespaces(body)); + const { mutate } = useMutation((body: SelectedSources) => + setNamespaces(body) + ); const { show, Notification } = useNotification(); const searchParams = useSearchParams(); diff --git a/frontend/webapp/containers/setup/sources/sources.section.tsx b/frontend/webapp/containers/setup/sources/sources.section.tsx index b765fd13c..6eb6af810 100644 --- a/frontend/webapp/containers/setup/sources/sources.section.tsx +++ b/frontend/webapp/containers/setup/sources/sources.section.tsx @@ -3,7 +3,7 @@ import { SourcesList, SourcesOptionMenu } from "@/components/setup"; import { getApplication, getNamespaces } from "@/services"; import { LoaderWrapper } from "./sources.section.styled"; import { useQuery } from "react-query"; -import { QUERIES } from "@/utils/constants"; +import { NOTIFICATION, QUERIES } from "@/utils/constants"; import { KeyvalLoader } from "@/design.system"; import { useNotification } from "@/hooks"; @@ -32,24 +32,30 @@ export function SourcesSection({ sectionData, setSectionData }: any) { useEffect(() => { isError && show({ - type: "error", + type: NOTIFICATION.ERROR, message: error, }); }, [isError]); - const namespacesList = useMemo(() => { - return data?.namespaces?.map((item: any, index: number) => { - return { id: index, label: item.name }; - }); - }, [data]); + const namespacesList = useMemo( + () => + data?.namespaces?.map((item: any, index: number) => ({ + id: index, + label: item.name, + })), + [data] + ); const sourceData = useMemo(() => { - const namespace = sectionData[currentNamespace?.name]; - return searchFilter + let namespace = sectionData[currentNamespace?.name]; + //filter by search query + namespace = searchFilter ? namespace?.objects.filter((item: any) => item.name.toLowerCase().includes(searchFilter.toLowerCase()) ) : namespace?.objects; + //remove instrumented applications + return namespace?.filter((item: any) => !item.instrumentation_effective); }, [searchFilter, currentNamespace, sectionData]); async function onNameSpaceChange() { diff --git a/frontend/webapp/services/sources.tsx b/frontend/webapp/services/sources.tsx index 3f6f32148..eb50b72a2 100644 --- a/frontend/webapp/services/sources.tsx +++ b/frontend/webapp/services/sources.tsx @@ -1,5 +1,6 @@ import { API } from "@/utils/constants"; import { get, post } from "./api"; +import { SelectedSources } from "@/types/sources"; export async function getNamespaces() { return await get(API.NAMESPACES); @@ -9,7 +10,7 @@ export async function getApplication(id: string) { return await get(`${API.APPLICATIONS}/${id}`); } -export async function setNamespaces(body: any) { +export async function setNamespaces(body: SelectedSources): Promise { return await post(API.NAMESPACES, body); } diff --git a/frontend/webapp/types/sources.tsx b/frontend/webapp/types/sources.tsx index 53f44fe6e..7906c4733 100644 --- a/frontend/webapp/types/sources.tsx +++ b/frontend/webapp/types/sources.tsx @@ -9,3 +9,25 @@ export interface ManagedSource { } ]; } + +export interface Namespace { + name: string; + selected: boolean; + totalApps: number; +} + +export interface SelectedSources { + [key: string]: { + objects: { + name: string; + selected: boolean; + kind: string; + app_instrumentation_labeled: boolean | null; + ns_instrumentation_labeled: boolean | null; + instrumentation_effective: boolean | null; + instances: number; + }; + selected_all: boolean; + future_selected: boolean; + }; +} diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx index eb57020dd..53903e8c5 100644 --- a/frontend/webapp/utils/constants/string.tsx +++ b/frontend/webapp/utils/constants/string.tsx @@ -67,6 +67,9 @@ export const OVERVIEW = { DESTINATION_UPDATE_SUCCESS: "Destination updated successfully", DESTINATION_CREATED_SUCCESS: "Destination created successfully", DESTINATION_DELETED_SUCCESS: "Destination deleted successfully", + SOURCE_UPDATE_SUCCESS: "Source updated successfully", + SOURCE_CREATED_SUCCESS: "Source created successfully", + SOURCE_DELETED_SUCCESS: "Source deleted successfully", MANAGE: "Manage", DELETE: "Delete", DELETE_DESTINATION: "Delete Destination", From 60a61ee0fbf8b5d4898fda3c7bdeb9f3d2b1c99c Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 2 Aug 2023 14:26:19 +0300 Subject: [PATCH 42/93] WIP --- .../destinations/create/[id]/page.tsx | 10 ++++-- .../app/overview/destinations/manage/page.tsx | 34 ++++++++++--------- .../manage.destination/manage.destination.tsx | 6 ++-- .../overview/destination/destination.tsx | 8 +++-- .../destination/new.destination.flow.tsx | 29 ++++------------ .../setup/destination/destination.section.tsx | 7 ++-- frontend/webapp/utils/constants/routes.tsx | 3 ++ 7 files changed, 45 insertions(+), 52 deletions(-) diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx index beea208f5..9a0269686 100644 --- a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx +++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx @@ -12,6 +12,8 @@ import { useNotification, useSectionData } from "@/hooks"; import { useRouter, useSearchParams } from "next/navigation"; import { styled } from "styled-components"; +const DEST = "dest"; + const NewDestinationContainer = styled.div` padding: 20px 36px; `; @@ -35,8 +37,10 @@ export default function NewDestinationFlow() { const { mutate } = useMutation((body) => setDestination(body)); const router = useRouter(); - useEffect(() => { - const search = searchParams.get("dest"); + useEffect(onPageLoad, [data]); + + function onPageLoad() { + const search = searchParams.get(DEST); let currentData = null; data?.categories.forEach((item) => { const filterItem = item.items.filter((dest) => dest?.type === search); @@ -45,7 +49,7 @@ export default function NewDestinationFlow() { } }); setSectionData(currentData); - }, [data]); + } function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { show({ diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx index 1a1b99b7b..2b20da8cd 100644 --- a/frontend/webapp/app/overview/destinations/manage/page.tsx +++ b/frontend/webapp/app/overview/destinations/manage/page.tsx @@ -7,10 +7,12 @@ import UpdateDestinationFlow from "@/containers/overview/destination/update.dest import { getDestinations } from "@/services"; import { useQuery } from "react-query"; +const DEST = "dest"; + export default function ManageDestinationPage() { const [selectedDestination, setSelectedDestination] = useState(null); - const { show, Notification } = useNotification(); + const { isLoading: destinationLoading, data: destinationList, @@ -19,15 +21,17 @@ export default function ManageDestinationPage() { const searchParams = useSearchParams(); - useEffect(() => { - const search = searchParams.get("dest"); + useEffect(onPageLoad, [searchParams, destinationList]); + + function onPageLoad() { + const search = searchParams.get(DEST); const currentDestination = destinationList?.filter( - (item) => item?.id === search + ({ id }) => id === search ); if (currentDestination?.length) { setSelectedDestination(currentDestination[0]); } - }, [searchParams, destinationList]); + } function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { refetch(); @@ -45,20 +49,18 @@ export default function ManageDestinationPage() { }); } - if (destinationLoading) { + if (destinationLoading || !selectedDestination) { return; } return ( - selectedDestination && ( - <> - - - - ) + <> + + + ); } diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx index 32e3321de..839e5e635 100644 --- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx +++ b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx @@ -25,10 +25,10 @@ const BackButtonWrapper = styled.div` } `; -const CreateConnectionWrapper = styled.div` +const CreateConnectionWrapper = styled.div<{ expand: boolean | undefined }>` display: flex; gap: 200px; - height: 530px; + height: ${({ expand }) => (expand ? 630 : 530)}px; overflow: scroll; scrollbar-width: none; `; @@ -61,7 +61,7 @@ export function ManageDestination({ )} - +
router.push(`destinations/manage?dest=${id}`)} - onMenuButtonClick={() => router.push("destinations/create")} + onItemClick={({ id }) => + router.push(`${ROUTES.UPDATE_DESTINATION}${id}`) + } + onMenuButtonClick={() => router.push(ROUTES.CREATE_DESTINATION)} /> ); diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx index 2f48b1a05..27c0dddc7 100644 --- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx @@ -1,41 +1,26 @@ "use client"; import React from "react"; -import { OVERVIEW } from "@/utils/constants"; -import { useMutation } from "react-query"; -import { setDestination } from "@/services"; +import { OVERVIEW, ROUTES } from "@/utils/constants"; import { OverviewHeader } from "@/components/overview"; -import { useSectionData } from "@/hooks"; import { DestinationSection } from "@/containers/setup/destination/destination.section"; import { NewDestinationContainer } from "./destination.styled"; import { useRouter } from "next/navigation"; export function NewDestinationFlow() { - const { sectionData, setSectionData } = useSectionData(null); const router = useRouter(); - function handleBackPress() { - router.back(); - } - - function renderSelectNewDestination() { - return ( - { - router.push(`/overview/destinations/create/manage?dest=${data.type}`); - }} - /> - ); - } - return ( <> router.back()} /> - {renderSelectNewDestination()} + { + router.push(`${ROUTES.MANAGE_DESTINATION}${data.type}`); + }} + /> ); diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx index e8dd0a051..a7e4440c6 100644 --- a/frontend/webapp/containers/setup/destination/destination.section.tsx +++ b/frontend/webapp/containers/setup/destination/destination.section.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import { useQuery } from "react-query"; -import { QUERIES, SETUP } from "@/utils/constants"; +import { NOTIFICATION, QUERIES, SETUP } from "@/utils/constants"; import { MONITORING_OPTIONS } from "@/components/setup/destination/utils"; import { DestinationList, DestinationOptionMenu } from "@/components/setup"; import Empty from "@/assets/images/empty-list.svg"; @@ -20,12 +20,10 @@ import { useNotification } from "@/hooks"; import { getDestinationsTypes } from "@/services"; type DestinationSectionProps = { - sectionData: any; setSectionData: (data: any) => void; }; export function DestinationSection({ - sectionData, setSectionData, }: DestinationSectionProps) { const [searchFilter, setSearchFilter] = useState(""); @@ -42,7 +40,7 @@ export function DestinationSection({ useEffect(() => { isError && show({ - type: "error", + type: NOTIFICATION.ERROR, message: error, }); }, [isError]); @@ -72,7 +70,6 @@ export function DestinationSection({ setSectionData(item)} /> ) diff --git a/frontend/webapp/utils/constants/routes.tsx b/frontend/webapp/utils/constants/routes.tsx index a27e3f561..571975b38 100644 --- a/frontend/webapp/utils/constants/routes.tsx +++ b/frontend/webapp/utils/constants/routes.tsx @@ -4,4 +4,7 @@ export const ROUTES = { SOURCES: "/overview/sources", DESTINATIONS: "/overview/destinations", NEW_DESTINATION: "/setup?state=destinations", + MANAGE_DESTINATION: "/overview/destinations/create/manage?dest=", + UPDATE_DESTINATION: "destinations/manage?dest=", + CREATE_DESTINATION: "destinations/create", }; From c44837e17f314678bdd4d146cc9720717f4ad890 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 2 Aug 2023 14:35:39 +0300 Subject: [PATCH 43/93] WIP --- .../webapp/components/side.menu/menu/menu.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/frontend/webapp/components/side.menu/menu/menu.tsx b/frontend/webapp/components/side.menu/menu/menu.tsx index e17eb8022..bbef40e4b 100644 --- a/frontend/webapp/components/side.menu/menu/menu.tsx +++ b/frontend/webapp/components/side.menu/menu/menu.tsx @@ -4,7 +4,7 @@ import { MenuContainer, LogoWrapper, MenuItemsWrapper } from "./menu.styled"; import { KeyvalText } from "@/design.system"; import MenuItem from "../menu.item/menu.item"; import { useRouter } from "next/navigation"; -import { OVERVIEW } from "@/utils/constants"; +import { OVERVIEW, ROUTES } from "@/utils/constants"; import { MENU_ITEMS } from "./items"; export interface MenuItem { @@ -26,12 +26,13 @@ export function Menu() { useEffect(onLoad, []); function onLoad() { - const currentItem = MENU_ITEMS.find((item) => { - return item.navigate === window.location.pathname; - }); - if (currentItem?.id !== currentMenuItem.id) { - handleMenuItemClick(currentItem); - } + const currentItem = MENU_ITEMS.find( + ({ navigate }) => + navigate !== ROUTES.OVERVIEW && + window.location.pathname.includes(navigate) + ); + + currentItem && setCurrentMenuItem(currentItem); } function handleMenuItemClick(item) { From 924cee2c18d612f7348f49b3511e1977e3e4a642 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 2 Aug 2023 15:27:34 +0300 Subject: [PATCH 44/93] fixed pr comments --- .../destinations/create/[id]/page.tsx | 28 ++++++----- .../app/overview/destinations/create/page.tsx | 8 +--- .../app/overview/destinations/manage/page.tsx | 3 +- .../webapp/components/side.menu/menu/menu.tsx | 3 +- frontend/webapp/containers/overview/index.tsx | 1 + .../notification/notification.tsx | 22 ++++----- .../notification/portal.notification.tsx | 46 ------------------- 7 files changed, 32 insertions(+), 79 deletions(-) delete mode 100644 frontend/webapp/design.system/notification/portal.notification.tsx diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx index 9a0269686..f4082de12 100644 --- a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx +++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx @@ -20,7 +20,11 @@ const NewDestinationContainer = styled.div` export default function NewDestinationFlow() { const { sectionData, setSectionData } = useSectionData(null); + const { show, Notification } = useNotification(); + const { mutate } = useMutation((body) => setDestination(body)); const searchParams = useSearchParams(); + const router = useRouter(); + const { data: destinationType } = useQuery( [QUERIES.API_DESTINATION_TYPE, sectionData?.type], () => getDestination(sectionData?.type), @@ -29,25 +33,29 @@ export default function NewDestinationFlow() { } ); - const { isLoading, data } = useQuery( + const { data: destinationsList } = useQuery( [QUERIES.API_DESTINATION_TYPES], getDestinationsTypes ); - const { show, Notification } = useNotification(); - const { mutate } = useMutation((body) => setDestination(body)); - const router = useRouter(); - useEffect(onPageLoad, [data]); + useEffect(onPageLoad, [destinationsList]); function onPageLoad() { const search = searchParams.get(DEST); + if (!destinationsList || !search) return; + let currentData = null; - data?.categories.forEach((item) => { - const filterItem = item.items.filter((dest) => dest?.type === search); + + for (const category of destinationsList.categories) { + if (currentData) { + break; + } + const filterItem = category.items.filter(({ type }) => type === search); if (filterItem.length) { currentData = filterItem[0]; } - }); + } + setSectionData(currentData); } @@ -82,10 +90,6 @@ export default function NewDestinationFlow() { router.back(); } - if (isLoading) { - return; - } - return ( <> - - - ); + return ; } diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx index 2b20da8cd..cd92c828f 100644 --- a/frontend/webapp/app/overview/destinations/manage/page.tsx +++ b/frontend/webapp/app/overview/destinations/manage/page.tsx @@ -6,6 +6,7 @@ import { useSearchParams } from "next/navigation"; import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow"; import { getDestinations } from "@/services"; import { useQuery } from "react-query"; +import { KeyvalLoader } from "@/design.system"; const DEST = "dest"; @@ -50,7 +51,7 @@ export default function ManageDestinationPage() { } if (destinationLoading || !selectedDestination) { - return; + return ; } return ( diff --git a/frontend/webapp/components/side.menu/menu/menu.tsx b/frontend/webapp/components/side.menu/menu/menu.tsx index bbef40e4b..814885343 100644 --- a/frontend/webapp/components/side.menu/menu/menu.tsx +++ b/frontend/webapp/components/side.menu/menu/menu.tsx @@ -36,9 +36,8 @@ export function Menu() { } function handleMenuItemClick(item) { - if (!item) return; setCurrentMenuItem(item); - router?.push(item?.navigate); + router.push(item?.navigate); } function renderMenuItemsList() { diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx index 2a26e3504..e7895d4e4 100644 --- a/frontend/webapp/containers/overview/index.tsx +++ b/frontend/webapp/containers/overview/index.tsx @@ -1,3 +1,4 @@ export { OverviewContainer } from "./overview/overview"; export { DestinationContainer } from "./destination/destination"; export { SourcesContainer } from "./sources/sources"; +export { NewDestinationFlow } from "./destination/new.destination.flow"; diff --git a/frontend/webapp/design.system/notification/notification.tsx b/frontend/webapp/design.system/notification/notification.tsx index bd8af8ad0..c0352b40e 100644 --- a/frontend/webapp/design.system/notification/notification.tsx +++ b/frontend/webapp/design.system/notification/notification.tsx @@ -7,7 +7,7 @@ import { KeyvalText } from "../text/text"; import CloseIcon from "@/assets/icons/X-blue.svg"; import SuccessIcon from "@/assets/icons/success-notification.svg"; import ErrorIcon from "@/assets/icons/error-notification.svg"; -import PortalNotification from "./portal.notification"; + interface KeyvalNotificationProps { type: "success" | "error" | "warning" | "info"; message: string; @@ -48,16 +48,14 @@ export function KeyvalNotification({ } return ( - - - - {getIcon()} - - {message} - - - - - + + + {getIcon()} + + {message} + + + + ); } diff --git a/frontend/webapp/design.system/notification/portal.notification.tsx b/frontend/webapp/design.system/notification/portal.notification.tsx deleted file mode 100644 index d220c0fa8..000000000 --- a/frontend/webapp/design.system/notification/portal.notification.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useState, useLayoutEffect } from "react"; -import { createPortal } from "react-dom"; - -interface Props { - children: JSX.Element; - wrapperId: string; -} - -const PortalNotification = ({ children, wrapperId }: Props) => { - const [portalElement, setPortalElement] = useState(null); - - useLayoutEffect(() => { - let element = document.getElementById(wrapperId) as HTMLElement; - let portalCreated = false; - // if element is not found with wrapperId or wrapperId is not provided, - // create and append to body - if (!element) { - element = createWrapperAndAppendToBody(wrapperId); - portalCreated = true; - } - - setPortalElement(element); - - // cleaning up the portal element - return () => { - // delete the programatically created element - if (portalCreated && element.parentNode) { - element.parentNode.removeChild(element); - } - }; - }, [wrapperId]); - - const createWrapperAndAppendToBody = (elementId: string) => { - const element = document.createElement("div"); - element.setAttribute("id", elementId); - document.body.appendChild(element); - return element; - }; - - // portalElement state will be null on the very first render. - if (!portalElement) return null; - - return createPortal(children, portalElement); -}; - -export default PortalNotification; From 004ca63fbd8fddeaf9ac5de0a23dab7e1af714ac Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 2 Aug 2023 16:25:12 +0300 Subject: [PATCH 45/93] restruce file system --- .../app/overview/sources/create/page.tsx | 33 ++++++++++ .../app/overview/sources/manage/page.tsx | 10 +++ frontend/webapp/app/overview/sources/page.tsx | 6 +- .../overview/sources/manage.sources.tsx | 4 +- .../containers/overview/sources/sources.tsx | 62 +++---------------- frontend/webapp/utils/constants/routes.tsx | 1 + 6 files changed, 56 insertions(+), 60 deletions(-) create mode 100644 frontend/webapp/app/overview/sources/create/page.tsx create mode 100644 frontend/webapp/app/overview/sources/manage/page.tsx diff --git a/frontend/webapp/app/overview/sources/create/page.tsx b/frontend/webapp/app/overview/sources/create/page.tsx new file mode 100644 index 000000000..617b81251 --- /dev/null +++ b/frontend/webapp/app/overview/sources/create/page.tsx @@ -0,0 +1,33 @@ +"use client"; +import React from "react"; +import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import { OverviewHeader } from "@/components/overview"; +import { useNotification } from "@/hooks"; +import { useQuery } from "react-query"; +import { getSources } from "@/services"; +import { NewSourceFlow } from "@/containers/overview/sources/new.source.flow"; +import { useRouter } from "next/navigation"; + +export default function CreateNewSourcesPage() { + const { show, Notification } = useNotification(); + const router = useRouter(); + const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources); + + function onNewSourceSuccess() { + show({ + type: NOTIFICATION.SUCCESS, + message: OVERVIEW.SOURCE_CREATED_SUCCESS, + }); + } + + return ( + <> + router.back()} + /> + + + + ); +} diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx new file mode 100644 index 000000000..7eef5dc57 --- /dev/null +++ b/frontend/webapp/app/overview/sources/manage/page.tsx @@ -0,0 +1,10 @@ +"use client"; +import React from "react"; + +export default function ManageSourcePage() { + return ( + <> +
ManageSourcePage
+ + ); +} diff --git a/frontend/webapp/app/overview/sources/page.tsx b/frontend/webapp/app/overview/sources/page.tsx index 454db1e18..77d0c32f2 100644 --- a/frontend/webapp/app/overview/sources/page.tsx +++ b/frontend/webapp/app/overview/sources/page.tsx @@ -3,9 +3,5 @@ import { SourcesContainer } from "@/containers/overview"; import React from "react"; export default function SourcesOverviewPage() { - return ( - <> - - - ); + return ; } diff --git a/frontend/webapp/containers/overview/sources/manage.sources.tsx b/frontend/webapp/containers/overview/sources/manage.sources.tsx index af0e0daa9..1b3339cac 100644 --- a/frontend/webapp/containers/overview/sources/manage.sources.tsx +++ b/frontend/webapp/containers/overview/sources/manage.sources.tsx @@ -9,7 +9,7 @@ import { ManagedSource, Namespace } from "@/types/sources"; const DEFAULT_FILTER = { name: "default", selected: false, totalApps: 0 }; -export function ManageSources({ setDisplayNewSourceFlow, sources }) { +export function ManageSources({ onAddClick, sources }) { const [searchFilter, setSearchFilter] = useState(""); const [currentNamespace, setCurrentNamespace] = useState(DEFAULT_FILTER); @@ -60,7 +60,7 @@ export function ManageSources({ setDisplayNewSourceFlow, sources }) { searchFilter={searchFilter} setSearchFilter={setSearchFilter} data={namespacesList} - onAddClick={() => setDisplayNewSourceFlow(true)} + onAddClick={onAddClick} setCurrentItem={setCurrentNamespace} /> diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx index fa2191caf..1eed8288a 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -1,68 +1,24 @@ "use client"; -import React, { useEffect, useState } from "react"; -import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import React from "react"; +import { OVERVIEW, QUERIES, ROUTES } from "@/utils/constants"; import { OverviewHeader } from "@/components/overview"; import { SourcesContainerWrapper } from "./sources.styled"; -import { NewSourceFlow } from "./new.source.flow"; import { ManageSources } from "./manage.sources"; -import { useNotification } from "@/hooks"; import { useQuery } from "react-query"; import { getSources } from "@/services"; +import { useRouter } from "next/navigation"; export function SourcesContainer() { - const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState< - boolean | null - >(null); - const { show, Notification } = useNotification(); - - const { data: sources, refetch } = useQuery( - [QUERIES.API_SOURCES], - getSources - ); - - useEffect(() => { - refetchSources(); - }, [displayNewSourceFlow]); - - async function refetchSources() { - if (displayNewSourceFlow === false) { - setTimeout(async () => { - refetch(); - }, 1000); - } - } - - function onNewSourceSuccess() { - setDisplayNewSourceFlow(false); - show({ - type: NOTIFICATION.SUCCESS, - message: OVERVIEW.SOURCE_CREATED_SUCCESS, - }); - } - - function renderNewSourceFlow() { - return ; - } - - function renderSources() { - return ( - - ); - } + const router = useRouter(); + const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources); return ( - setDisplayNewSourceFlow(false) : null - } + + router.push(ROUTES.CREATE_SOURCE)} + sources={sources} /> - {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()} - ); } diff --git a/frontend/webapp/utils/constants/routes.tsx b/frontend/webapp/utils/constants/routes.tsx index 571975b38..b51803d47 100644 --- a/frontend/webapp/utils/constants/routes.tsx +++ b/frontend/webapp/utils/constants/routes.tsx @@ -7,4 +7,5 @@ export const ROUTES = { MANAGE_DESTINATION: "/overview/destinations/create/manage?dest=", UPDATE_DESTINATION: "destinations/manage?dest=", CREATE_DESTINATION: "destinations/create", + CREATE_SOURCE: "/overview/sources/create", }; From cf77635bdb6725fe41ee49050c93bdf26f723166 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 2 Aug 2023 16:36:49 +0300 Subject: [PATCH 46/93] wip --- .../app/overview/sources/manage/page.tsx | 22 +++++++++++++++++-- .../sources.manage.card.tsx | 4 +++- .../sources.manage.list.tsx | 12 ++++++++-- .../sources.manage.styled.tsx | 4 ++-- frontend/webapp/utils/constants/routes.tsx | 1 + 5 files changed, 36 insertions(+), 7 deletions(-) diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx index 7eef5dc57..39a5e7dc4 100644 --- a/frontend/webapp/app/overview/sources/manage/page.tsx +++ b/frontend/webapp/app/overview/sources/manage/page.tsx @@ -1,10 +1,28 @@ "use client"; -import React from "react"; +import { getSources } from "@/services"; +import { QUERIES } from "@/utils/constants"; +import { useSearchParams } from "next/navigation"; +import React, { useEffect, useState } from "react"; +import { useQuery } from "react-query"; + +const SOURCE = "source"; export default function ManageSourcePage() { + const [currentSource, setCurrentSource] = useState(null); + const searchParams = useSearchParams(); + + const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources); + + useEffect(onPageLoad, [sources]); + function onPageLoad() { + const search = searchParams.get(SOURCE); + const source = sources?.find((item) => item.name === search); + source && setCurrentSource(source); + } + return ( <> -
ManageSourcePage
+
{currentSource?.name}
); } diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx index 1aa8f559b..a2a695f41 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx @@ -20,13 +20,15 @@ const LOGO_STYLE: React.CSSProperties = { interface SourceManagedCardProps { item: ManagedSource; + onClick?: () => void; } const DEPLOYMENT = "deployment"; export default function SourceManagedCard({ item = {} as ManagedSource, + onClick, }: SourceManagedCardProps) { return ( - + ( - + + router.push(`${ROUTES.MANAGE_SOURCE}?source=${source?.name}`) + } + /> )); } diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx index 3fd4cad8d..9a36b4efa 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx @@ -12,10 +12,10 @@ export const CardWrapper = styled.div` align-items: center; flex-direction: column; gap: 10px; - /* cursor: pointer; + cursor: pointer; &:hover { background: var(--dark-mode-dark-1, #07111a81); - } */ + } `; export const EmptyListWrapper = styled.div` diff --git a/frontend/webapp/utils/constants/routes.tsx b/frontend/webapp/utils/constants/routes.tsx index b51803d47..6a074d899 100644 --- a/frontend/webapp/utils/constants/routes.tsx +++ b/frontend/webapp/utils/constants/routes.tsx @@ -8,4 +8,5 @@ export const ROUTES = { UPDATE_DESTINATION: "destinations/manage?dest=", CREATE_DESTINATION: "destinations/create", CREATE_SOURCE: "/overview/sources/create", + MANAGE_SOURCE: "/overview/sources/manage", }; From 4616dcfa419eaf7dab69778f04d536a5883afeab Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 2 Aug 2023 17:55:36 +0300 Subject: [PATCH 47/93] add pen icon and danger zone --- .../app/overview/sources/manage/page.tsx | 42 ++++++++++-- .../app/overview/sources/manage/styled.tsx | 14 ++++ .../webapp/assets/icons/overview/index.tsx | 3 +- frontend/webapp/assets/icons/overview/pen.svg | 3 + frontend/webapp/components/overview/index.tsx | 1 + .../sources/delete.source/delete.source.tsx | 67 +++++++++++++++++++ .../manage.source.header.tsx | 61 +++++++++++++++++ frontend/webapp/utils/constants/string.tsx | 5 ++ 8 files changed, 188 insertions(+), 8 deletions(-) create mode 100644 frontend/webapp/app/overview/sources/manage/styled.tsx create mode 100644 frontend/webapp/assets/icons/overview/pen.svg create mode 100644 frontend/webapp/components/overview/sources/delete.source/delete.source.tsx create mode 100644 frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx index 39a5e7dc4..66ade9994 100644 --- a/frontend/webapp/app/overview/sources/manage/page.tsx +++ b/frontend/webapp/app/overview/sources/manage/page.tsx @@ -1,19 +1,29 @@ "use client"; +import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header"; import { getSources } from "@/services"; -import { QUERIES } from "@/utils/constants"; -import { useSearchParams } from "next/navigation"; +import { QUERIES, SETUP } from "@/utils/constants"; +import { useRouter, useSearchParams } from "next/navigation"; import React, { useEffect, useState } from "react"; import { useQuery } from "react-query"; +import { ManageSourcePageContainer, BackButtonWrapper } from "./styled"; +import { LANGUAGES_LOGOS } from "@/assets/images"; +import { Back } from "@/assets/icons/overview"; +import { KeyvalText } from "@/design.system"; +import { ManagedSource } from "@/types/sources"; +import { DeleteSource } from "@/components/overview"; const SOURCE = "source"; export default function ManageSourcePage() { - const [currentSource, setCurrentSource] = useState(null); + const [currentSource, setCurrentSource] = useState( + null + ); const searchParams = useSearchParams(); - + const router = useRouter(); const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources); useEffect(onPageLoad, [sources]); + function onPageLoad() { const search = searchParams.get(SOURCE); const source = sources?.find((item) => item.name === search); @@ -21,8 +31,26 @@ export default function ManageSourcePage() { } return ( - <> -
{currentSource?.name}
- + + router.back()}> + + {SETUP.BACK} + + {currentSource && ( + + )} + {}} + name={currentSource?.name} + image_url={ + LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""] + } + /> + ); } diff --git a/frontend/webapp/app/overview/sources/manage/styled.tsx b/frontend/webapp/app/overview/sources/manage/styled.tsx new file mode 100644 index 000000000..0f67fc4e6 --- /dev/null +++ b/frontend/webapp/app/overview/sources/manage/styled.tsx @@ -0,0 +1,14 @@ +import styled from "styled-components"; + +export const ManageSourcePageContainer = styled.div` + padding: 32px; +`; + +export const BackButtonWrapper = styled.div` + display: flex; + align-items: center; + cursor: pointer; + p { + cursor: pointer !important; + } +`; diff --git a/frontend/webapp/assets/icons/overview/index.tsx b/frontend/webapp/assets/icons/overview/index.tsx index f9254c49d..68481e5ca 100644 --- a/frontend/webapp/assets/icons/overview/index.tsx +++ b/frontend/webapp/assets/icons/overview/index.tsx @@ -1,6 +1,7 @@ import KeyvalMiddleware from "./middleware.svg"; import Folder from "./folder.svg"; import Plus from "./plus.svg"; +import Pen from "./pen.svg"; import Back from "./back.svg"; -export { KeyvalMiddleware, Folder, Plus, Back }; +export { KeyvalMiddleware, Folder, Plus, Back, Pen }; diff --git a/frontend/webapp/assets/icons/overview/pen.svg b/frontend/webapp/assets/icons/overview/pen.svg new file mode 100644 index 000000000..03494bea2 --- /dev/null +++ b/frontend/webapp/assets/icons/overview/pen.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/webapp/components/overview/index.tsx b/frontend/webapp/components/overview/index.tsx index d6c9f8384..d231bd943 100644 --- a/frontend/webapp/components/overview/index.tsx +++ b/frontend/webapp/components/overview/index.tsx @@ -3,3 +3,4 @@ export { ManageDestination } from "./destination/manage.destination/manage.desti export { DestinationsManagedList } from "./destination/destination.list/destinations.managed.list"; export { SourcesManagedList } from "./sources/sources.manage.list/sources.manage.list"; export { SourcesActionMenu } from "./sources/action.menu/sources.action.menu"; +export { DeleteSource } from "./sources/delete.source/delete.source"; diff --git a/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx b/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx new file mode 100644 index 000000000..173a17bde --- /dev/null +++ b/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx @@ -0,0 +1,67 @@ +import React, { useState } from "react"; +import { styled } from "styled-components"; +import { ConnectionsIcons } from "@/components/setup"; +import { DangerZone, KeyvalModal, KeyvalText } from "@/design.system"; +import { ModalPositionX, ModalPositionY } from "@/design.system/modal/types"; +import theme from "@/styles/palette"; +import { OVERVIEW } from "@/utils/constants"; + +const FieldWrapper = styled.div` + margin-top: 32px; + width: 348px; +`; + +const IMAGE_STYLE = { border: "solid 1px #ededed" }; +export function DeleteSource({ + onDelete, + name, + image_url, +}: { + onDelete: () => void; + name: string | undefined; + image_url: string; +}) { + const [showModal, setShowModal] = useState(false); + + const modalConfig = { + title: OVERVIEW.DELETE_SOURCE, + showHeader: true, + showOverlay: true, + positionX: ModalPositionX.center, + positionY: ModalPositionY.center, + padding: "20px", + footer: { + primaryBtnText: OVERVIEW.CONFIRM_SOURCE_DELETE, + primaryBtnAction: () => { + setShowModal(false); + }, + }, + }; + + return ( + <> + + setShowModal(true)} + /> + + {showModal && ( + setShowModal(false)} + config={modalConfig} + > +
+ +
+ + {`${OVERVIEW.DELETE} ${name}`} + + + )} + + ); +} diff --git a/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx new file mode 100644 index 000000000..136f44552 --- /dev/null +++ b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx @@ -0,0 +1,61 @@ +import React, { useState } from "react"; +import styled from "styled-components"; +import { KeyvalImage, KeyvalText, KeyvalTooltip } from "@/design.system"; +import { Pen } from "@/assets/icons/overview"; + +const ManageSourceHeaderWrapper = styled.div` + display: flex; + width: 100%; + height: 104px; + align-items: center; + border-radius: 25px; + margin: 24px 0; + background: radial-gradient( + 78.09% 72.18% at 100% -0%, + rgba(150, 242, 255, 0.4) 0%, + rgba(150, 242, 255, 0) 61.91% + ), + linear-gradient(180deg, #2e4c55 0%, #303355 100%); +`; + +const TextWrapper = styled.div` + margin-left: 12px; + margin-right: 12px; +`; + +const EditIconWrapper = styled.div` + width: 20px; + height: 40px; + display: flex; + align-items: center; + + :hover { + cursor: pointer; + fill: ${({ theme }) => theme.colors.secondary}; + } +`; +const IMAGE_STYLE: React.CSSProperties = { + backgroundColor: "#fff", + padding: 4, + marginRight: 16, + marginLeft: 16, +}; + +export function ManageSourceHeader({ image_url, display_name }) { + const [showEditInput, setShowEditInput] = useState(true); + return ( + + + + + {display_name} + + + {showEditInput ? ( + setShowEditInput(false)}> + + + ) : null} + + ); +} diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx index 53903e8c5..b2537973d 100644 --- a/frontend/webapp/utils/constants/string.tsx +++ b/frontend/webapp/utils/constants/string.tsx @@ -73,10 +73,15 @@ export const OVERVIEW = { MANAGE: "Manage", DELETE: "Delete", DELETE_DESTINATION: "Delete Destination", + DELETE_SOURCE: "Delete Source", + SOURCE_DANGER_ZONE_TITLE: "Delete this source", + SOURCE_DANGER_ZONE_SUBTITLE: + "This action cannot be undone. This will permanently delete the source and all associated data.", DELETE_MODAL_TITLE: "Delete this destination", DELETE_MODAL_SUBTITLE: "This action cannot be undone. This will permanently delete the destination and all associated data.", DELETE_BUTTON: "I want to delete this destination", + CONFIRM_SOURCE_DELETE: "I want to delete this source", CONNECT: "Connect", }; From 5d85d7cc6ba50666ac47472f09cd980f1e224bf4 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 3 Aug 2023 10:57:52 +0300 Subject: [PATCH 48/93] manage delete source --- .../app/overview/sources/create/page.tsx | 9 +++- .../app/overview/sources/manage/page.tsx | 53 +++++++++++++++++-- .../sources/delete.source/delete.source.tsx | 1 + .../overview/sources/new.source.flow.tsx | 6 ++- frontend/webapp/services/sources.tsx | 12 ++++- 5 files changed, 73 insertions(+), 8 deletions(-) diff --git a/frontend/webapp/app/overview/sources/create/page.tsx b/frontend/webapp/app/overview/sources/create/page.tsx index 617b81251..9c83bfc82 100644 --- a/frontend/webapp/app/overview/sources/create/page.tsx +++ b/frontend/webapp/app/overview/sources/create/page.tsx @@ -11,9 +11,16 @@ import { useRouter } from "next/navigation"; export default function CreateNewSourcesPage() { const { show, Notification } = useNotification(); const router = useRouter(); - const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources); + const { data: sources, refetch } = useQuery( + [QUERIES.API_SOURCES], + getSources + ); function onNewSourceSuccess() { + setTimeout(() => { + router.back(); + refetch(); + }, 1000); show({ type: NOTIFICATION.SUCCESS, message: OVERVIEW.SOURCE_CREATED_SUCCESS, diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx index 66ade9994..cd5eef166 100644 --- a/frontend/webapp/app/overview/sources/manage/page.tsx +++ b/frontend/webapp/app/overview/sources/manage/page.tsx @@ -1,16 +1,24 @@ "use client"; import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header"; import { getSources } from "@/services"; -import { QUERIES, SETUP } from "@/utils/constants"; +import { + NOTIFICATION, + OVERVIEW, + QUERIES, + ROUTES, + SETUP, +} from "@/utils/constants"; import { useRouter, useSearchParams } from "next/navigation"; import React, { useEffect, useState } from "react"; -import { useQuery } from "react-query"; +import { useMutation, useQuery } from "react-query"; import { ManageSourcePageContainer, BackButtonWrapper } from "./styled"; import { LANGUAGES_LOGOS } from "@/assets/images"; import { Back } from "@/assets/icons/overview"; import { KeyvalText } from "@/design.system"; import { ManagedSource } from "@/types/sources"; import { DeleteSource } from "@/components/overview"; +import { deleteSource } from "@/services/sources"; +import { useNotification } from "@/hooks"; const SOURCE = "source"; @@ -20,8 +28,18 @@ export default function ManageSourcePage() { ); const searchParams = useSearchParams(); const router = useRouter(); - const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources); - + const { data: sources, refetch } = useQuery( + [QUERIES.API_SOURCES], + getSources + ); + const { show, Notification } = useNotification(); + const { mutate } = useMutation(() => + deleteSource( + currentSource?.namespace || "", + currentSource?.kind || "", + currentSource?.name || "" + ) + ); useEffect(onPageLoad, [sources]); function onPageLoad() { @@ -29,6 +47,30 @@ export default function ManageSourcePage() { const source = sources?.find((item) => item.name === search); source && setCurrentSource(source); } + function onError({ response }) { + const message = response?.data?.message; + show({ + type: NOTIFICATION.ERROR, + message, + }); + } + + function onSuccess() { + setTimeout(() => { + router.back(); + refetch(); + }, 1000); + show({ + type: NOTIFICATION.SUCCESS, + message: OVERVIEW.SOURCE_DELETED_SUCCESS, + }); + } + function onDelete() { + mutate(undefined, { + onSuccess, + onError, + }); + } return ( @@ -45,12 +87,13 @@ export default function ManageSourcePage() { /> )} {}} + onDelete={onDelete} name={currentSource?.name} image_url={ LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""] } /> + ); } diff --git a/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx b/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx index 173a17bde..2520989cd 100644 --- a/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx +++ b/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx @@ -34,6 +34,7 @@ export function DeleteSource({ primaryBtnText: OVERVIEW.CONFIRM_SOURCE_DELETE, primaryBtnAction: () => { setShowModal(false); + onDelete(); }, }, }; diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx index 5152767ba..3b5468b9a 100644 --- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx +++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx @@ -17,7 +17,9 @@ export function NewSourceFlow({ onSuccess, sources }) { const { show, Notification } = useNotification(); function updateSectionDataWithSources() { - const sourceNamesSet = new Set(sources.map((source) => source.name)); + const sourceNamesSet = new Set( + sources.map((source: SelectedSources) => source.name) + ); const updatedSectionData: SelectedSources = {}; for (const key in sectionData) { @@ -50,6 +52,7 @@ export function NewSourceFlow({ onSuccess, sources }) { {`${totalSelected} ${SETUP.SELECTED}`} @@ -58,6 +61,7 @@ export function NewSourceFlow({ onSuccess, sources }) { + { export async function getSources() { return await get(API.SOURCES); } + +export async function deleteSource( + namespace: string, + kind: string, + name: string +) { + return await httpDelete( + `${API.SOURCES}/namespace/${namespace}/kind/${kind}/name/${name}` + ); +} From b655e1842d534da9a28138d449dcc51734d50f46 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 3 Aug 2023 13:50:08 +0300 Subject: [PATCH 49/93] WIP --- .../app/overview/sources/manage/page.tsx | 6 +- .../app/overview/sources/manage/styled.tsx | 1 + .../manage.source.header.tsx | 67 +++++++++++++++---- .../setup/destination/destination.section.tsx | 3 + frontend/webapp/design.system/index.tsx | 1 + .../design.system/input/action.input.tsx | 42 ++++++++++++ .../design.system/input/input.styled.tsx | 19 ++++++ frontend/webapp/utils/constants/index.tsx | 2 +- frontend/webapp/utils/constants/string.tsx | 4 ++ 9 files changed, 130 insertions(+), 15 deletions(-) create mode 100644 frontend/webapp/design.system/input/action.input.tsx diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx index cd5eef166..a8de98f08 100644 --- a/frontend/webapp/app/overview/sources/manage/page.tsx +++ b/frontend/webapp/app/overview/sources/manage/page.tsx @@ -42,6 +42,10 @@ export default function ManageSourcePage() { ); useEffect(onPageLoad, [sources]); + useEffect(() => { + console.log({ currentSource }); + }, [currentSource]); + function onPageLoad() { const search = searchParams.get(SOURCE); const source = sources?.find((item) => item.name === search); @@ -80,7 +84,7 @@ export default function ManageSourcePage() { {currentSource && ( theme.colors.secondary}; } `; + +const ActionInputWrapper = styled.div` + width: 80%; + height: 49px; +`; + const IMAGE_STYLE: React.CSSProperties = { backgroundColor: "#fff", padding: 4, @@ -41,21 +54,49 @@ const IMAGE_STYLE: React.CSSProperties = { marginLeft: 16, }; -export function ManageSourceHeader({ image_url, display_name }) { +export function ManageSourceHeader({ image_url, name }) { const [showEditInput, setShowEditInput] = useState(true); + const [inputValue, setInputValue] = useState(name); + const containerRef = useRef(null); + const handleClickOutside = () => { + !showEditInput && handleSave(); + }; + + useOnClickOutside(containerRef, handleClickOutside); + + function handleSave() { + setShowEditInput(true); + } + + function handleInputChange(value) { + setInputValue(value); + } + return ( - + - - - {display_name} - - + {showEditInput ? ( - setShowEditInput(false)}> - - - ) : null} + <> + + + {name} + + + + setShowEditInput(false)}> + + + + ) : ( + + handleInputChange(e)} + onAction={handleSave} + /> + + )} ); } diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx index a7e4440c6..854edd779 100644 --- a/frontend/webapp/containers/setup/destination/destination.section.tsx +++ b/frontend/webapp/containers/setup/destination/destination.section.tsx @@ -20,10 +20,12 @@ import { useNotification } from "@/hooks"; import { getDestinationsTypes } from "@/services"; type DestinationSectionProps = { + sectionData?: any; setSectionData: (data: any) => void; }; export function DestinationSection({ + sectionData, setSectionData, }: DestinationSectionProps) { const [searchFilter, setSearchFilter] = useState(""); @@ -68,6 +70,7 @@ export function DestinationSection({ return ( displayItem && ( setSectionData(item)} diff --git a/frontend/webapp/design.system/index.tsx b/frontend/webapp/design.system/index.tsx index 7885d1a19..c1b3be3ce 100644 --- a/frontend/webapp/design.system/index.tsx +++ b/frontend/webapp/design.system/index.tsx @@ -15,6 +15,7 @@ export { KeyvalLink } from "./link/link"; export { KeyvalTooltip } from "./tooltip/tooltip"; export { KeyvalImage } from "./image/image"; export { KeyvalInput } from "./input/input"; +export { KeyvalActionInput } from "./input/action.input"; export { KeyvalVideo } from "./video/video"; export { KeyvalLoader } from "./loader/loader"; export { KeyvalNotification } from "./notification/notification"; diff --git a/frontend/webapp/design.system/input/action.input.tsx b/frontend/webapp/design.system/input/action.input.tsx new file mode 100644 index 000000000..4bede03d6 --- /dev/null +++ b/frontend/webapp/design.system/input/action.input.tsx @@ -0,0 +1,42 @@ +import React, { ChangeEvent } from "react"; +import { StyledActionInputContainer, StyledActionInput } from "./input.styled"; +import { KeyvalButton } from "../button/button"; +import { KeyvalText } from "../text/text"; +import theme from "@/styles/palette"; +import { ACTION } from "@/utils/constants"; + +interface InputProps { + value: string; + onAction: () => void; + onChange: (value: string) => void; + type?: string; + style?: React.CSSProperties; +} + +export function KeyvalActionInput({ + value, + onChange, + style = {}, +}: InputProps): JSX.Element { + function handleChange(event: ChangeEvent): void { + onChange(event.target.value); + } + + return ( + <> + + + + + + {ACTION.SAVE} + + + + + ); +} diff --git a/frontend/webapp/design.system/input/input.styled.tsx b/frontend/webapp/design.system/input/input.styled.tsx index 25b200005..bff06430f 100644 --- a/frontend/webapp/design.system/input/input.styled.tsx +++ b/frontend/webapp/design.system/input/input.styled.tsx @@ -32,6 +32,19 @@ export const StyledInputContainer = styled.div` } `; +export const StyledActionInputContainer = styled.div` + position: relative; + display: flex; + width: 100%; + padding: 0px 12px; + height: 100%; + align-items: center; + justify-content: space-between; + gap: 10px; + border-radius: 4px; + border: ${({ theme }) => `1px solid ${theme.colors.secondary}`}; +`; + export const StyledInput = styled.input` background: transparent; border: none; @@ -40,6 +53,12 @@ export const StyledInput = styled.input` color: ${({ theme }) => theme.text.white}; `; +export const StyledActionInput = styled(StyledInput)` + color: var(--dark-mode-white, #fff); + font-family: Inter; + font-size: 24px; +`; + export const LabelWrapper = styled.div` margin-bottom: 8px; `; diff --git a/frontend/webapp/utils/constants/index.tsx b/frontend/webapp/utils/constants/index.tsx index 11dd91a8d..90fdf2c71 100644 --- a/frontend/webapp/utils/constants/index.tsx +++ b/frontend/webapp/utils/constants/index.tsx @@ -1,4 +1,4 @@ export { ROUTES } from "./routes"; export { CONFIG } from "./config"; -export { SETUP, OVERVIEW, NOTIFICATION } from "./string"; +export { SETUP, OVERVIEW, NOTIFICATION, ACTION } from "./string"; export { API, QUERIES } from "./urls"; diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx index b2537973d..3227c2b95 100644 --- a/frontend/webapp/utils/constants/string.tsx +++ b/frontend/webapp/utils/constants/string.tsx @@ -85,6 +85,10 @@ export const OVERVIEW = { CONNECT: "Connect", }; +export const ACTION = { + SAVE: "Save", +}; + export const NOTIFICATION = { ERROR: "error", SUCCESS: "success", From 592be7e741cc8cf6fd4750a4322512cad0f896e9 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 3 Aug 2023 13:55:35 +0300 Subject: [PATCH 50/93] WIP --- .../sources/action.menu/sources.action.menu.styled.tsx | 1 + .../overview/sources/action.menu/sources.action.menu.tsx | 2 +- .../sources/manage.source.header/manage.source.header.tsx | 8 +------- 3 files changed, 3 insertions(+), 8 deletions(-) diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx index 146df0a97..3c0c8b9bb 100644 --- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx +++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx @@ -10,5 +10,6 @@ export const SourcesMenuWrapper = styled.div` export const InputsWrapper = styled.div` display: flex; + flex-wrap: wrap; gap: 16px; `; diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx index bc1b0faa8..947f13c33 100644 --- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx +++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx @@ -9,7 +9,7 @@ import { OVERVIEW } from "@/utils/constants"; import theme from "@/styles/palette"; import { FilterSourcesOptions } from "@/components/setup/sources/sources.option.menu/filter.sources.options"; -const BUTTON_STYLES = { gap: 10, height: 36 }; +const BUTTON_STYLES = { gap: 10, height: 36, width: 200 }; export function SourcesActionMenu({ onAddClick, diff --git a/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx index a8cbcbfec..5fbcec042 100644 --- a/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx +++ b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx @@ -1,11 +1,6 @@ import React, { useRef, useState } from "react"; import styled from "styled-components"; -import { - KeyvalActionInput, - KeyvalImage, - KeyvalText, - KeyvalTooltip, -} from "@/design.system"; +import { KeyvalActionInput, KeyvalImage, KeyvalText } from "@/design.system"; import { Pen } from "@/assets/icons/overview"; import { useOnClickOutside } from "@/hooks"; @@ -75,7 +70,6 @@ export function ManageSourceHeader({ image_url, name }) { return ( - {showEditInput ? ( <> From ef93cc648ee98979ac4b4f747c10fbf713692bd4 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 3 Aug 2023 15:32:56 +0300 Subject: [PATCH 51/93] WIP --- frontend/webapp/app/layout.tsx | 4 ++++ frontend/webapp/app/overview/layout.tsx | 6 +++++- frontend/webapp/assets/logos/logo.png | Bin 0 -> 3528 bytes .../webapp/design.system/text/text.styled.tsx | 2 +- 4 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 frontend/webapp/assets/logos/logo.png diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx index efe4c8326..050b0c95c 100644 --- a/frontend/webapp/app/layout.tsx +++ b/frontend/webapp/app/layout.tsx @@ -3,6 +3,7 @@ import React from "react"; import { ThemeProvider } from "styled-components"; import theme from "@/styles/palette"; import { QueryClient, QueryClientProvider } from "react-query"; +import Head from "next/head"; const LAYOUT_STYLE: React.CSSProperties = { margin: 0, @@ -30,6 +31,9 @@ export default function RootLayout({ + + Odigos + {children} diff --git a/frontend/webapp/app/overview/layout.tsx b/frontend/webapp/app/overview/layout.tsx index dc76e1c7f..2159907df 100644 --- a/frontend/webapp/app/overview/layout.tsx +++ b/frontend/webapp/app/overview/layout.tsx @@ -1,6 +1,7 @@ -"use client"; +// "use client"; import { Menu } from "@/components/side.menu"; import theme from "@/styles/palette"; +import { Metadata } from "next"; import React from "react"; const LAYOUT_STYLE = { @@ -14,6 +15,9 @@ const CHILDREN_STYLE = { width: "100%", height: "93%", }; +export const metadata: Metadata = { + title: "Odigos", +}; export default function Layout({ children }: { children: React.ReactNode }) { return ( diff --git a/frontend/webapp/assets/logos/logo.png b/frontend/webapp/assets/logos/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..5caa468e0ebc565ab66104a95d8f4b649015dd52 GIT binary patch literal 3528 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 literal 0 HcmV?d00001 diff --git a/frontend/webapp/design.system/text/text.styled.tsx b/frontend/webapp/design.system/text/text.styled.tsx index f400cfe94..a68573fc4 100644 --- a/frontend/webapp/design.system/text/text.styled.tsx +++ b/frontend/webapp/design.system/text/text.styled.tsx @@ -3,7 +3,7 @@ import styled from "styled-components"; export const TextWrapper = styled.p` color: ${({ theme }) => theme.text.white}; margin: 0; - font-family: ${({ theme }) => theme.font_family.primary}; + font-family: ${({ theme }) => theme.font_family.primary}, sans-serif; font-size: 16px; font-weight: 400; `; From 9e322bf127d10dc67479184aac94982ef6f20ab9 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 3 Aug 2023 15:33:13 +0300 Subject: [PATCH 52/93] WIP --- frontend/webapp/assets/logos/logo.png | Bin 3528 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 frontend/webapp/assets/logos/logo.png diff --git a/frontend/webapp/assets/logos/logo.png b/frontend/webapp/assets/logos/logo.png deleted file mode 100644 index 5caa468e0ebc565ab66104a95d8f4b649015dd52..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3528 zcmd6qX*k>I7Ql5{s+J)#LbYnW%t#|*TD@aQTVkuC1`)BRMeMXCYHhVNiM_Q}F^$qC zg6O|eJDr3<%fwPjEVYZRK@nBC>2p8d`|&>a!+Xwo&UxPV{cz6to%bbOv9pwxP?8W4 z5s|jGLj5ixatJ0|dg5Y2&oot=D)eVsqb@o{A6gxEAbJpr+jxo2?#YjUw`(l`>FcNg zD_++0*Ky<1ZsAx7(`36y&_<2j1LQTjqOF>h>QY8d=n+T%c=6L8E_+K#zD}3jdh*XZ zx0A|Ax9aG9IId$Ump^WOIavSKg$d4$h5dtt%{$lWy#Ua>6DwE{2ucO@3kR`;1SgRP zyQo7}DB!jeO47>w|5G8I#ezF~k9Ko7Ya5@-WYRquVUy^(Nk+()M11&{=AE7)>UzFS zepOD-y5}znXn4i}Cu{tMpxNlW&S5zRET^^lblhs81E5+&9B~UPfeSXdOBcn0_1KSM z;|Tn1g7CyA5dVa|82*8c_EGt2ZkfCWbw&^g7!Rja{(&|l4{M+Qy7aZhMMpmWwqQpf zaBJBrPt?8g%Hw_0%D$t0PS7y&=lmjm^&@AaenWOz6+~tYs(0pm;CzFpaa`r#%LY7a zZpyxQe}p4{H|m9JKwQkhNA_P-1LxHNvUhXDTBSE4I-*{&G+BwU?j%p!%>;sm%|tPh z!}jO|_drKm0QaL!%~Tl6xsz93R<7mzE`X);>BU@rkLL8F^HqYxgL!^!OgtkZeN$u> zoF9e2lHoI*k9LheR{m(m<+Btl#?%9|kXSm^L|2lqq8LVqy%$jL>g$S(#6GoBo0yUG zO7vR|%{Vr(?iCkZMc#?oi^n3ilnK-E<@^pl*QLcFfuG9gxv!FdQN1hPo9yLrdf^c@ z33HR|fN?A3znjcW-0f^t`4$@W!V-(| zmX{DSV~=%4gbO5-%+KP$0q>mCuX6e>tCTATq#JeXzonpOGTt04-LZ7+3laKQJpB;X z$vkfds$xX**$(%i={p<-Ll|h@Y#c&Ee~#Gxd%!CpYD?lZc@@Mf#J@U>L`u>h6gYQh zqurJ2JT}rDgqs`LkdizXFz;hmoQPjHezh>DmE|+{+R$LI-48eEGgkjH0%;cia3gKE zj+DFa7nad5#=@g*R{W|eW~jgU*J?g{R`cJgq(l2 zt-h8B3-!GYD&5u4UC8q^{KzFtr#9FE+xs>X+34QiXnC8iu6E&R{A6(M_+a5yVxXTnJ7C9TfXwEka0xz~*e=Dqx+2rD5)d3~lIweT+595t4pL;dG zu>+YYy#@_wE@|`INQ2234K=A;e6Ie7V_8qA(X5lB?ZS#W_lm5*Da7Y?x%e?9{p^8? z3r*fps30;^vOycGEDK-Ez(-m&dGDcu#F&y5mVlpC)6^R214I^H@E9MW#!KRn&@w~? zKpShK?kT*ID|CG!p)*Me96LZx7XHQ>kORSGX*tYPH871SlyWo)qJo(^RvrXTxd7;B zdJbL&bhJDNtpKqLP0vYqX=1d)VYZSgPyJW6k{(Z8gKgR*B-$>Nr+%0{Z7^+KN`frQ z!S}3yk(_9@HpM(>+FXSQxeA8YJ-{OnJRFn=A=ow*{DX}PWTv{x!Yb^V79Zf*$9WV< ziunRFH9!vLXVFw3#>UMvQybN=!N++xISMNe4DV3GZly%CQ}Aq~X_f^lbwUolh5{B% zc++T#xze<`EUX_??E{AO%T@cx!TQ0~J|NgjHP1g)u}+pvTrI4VO%qoW>tx@=RmV!D zL=RmA6i@QHZ2`s8yl!hi(U{k54oo#5JC{da%SZ&FB#{-FyoRl{+_y^Xq)1fLL`!(+ zmZ9xK<}z#jB(xF)8)@5K9qSgdqHH)I=tQ-KZA}^w+VF4SKj6=lCQfn}kb-(RuvcG~ zXp*x0*Qcw#{Gowz8>1-WD?h6I=5#99Q{#bZ*+-a?V}mC5J#3Kr6K-cEGR_k2h4)_s`FmBP{UDi+uaIuy~T>i!<_sNWT|ogZ|jk3~-x%uv_s*K6$4fGQ&nlbe3S-|~~(>1mVCvyS#@r@}$i zTlev2AuZeQ77N_oJdD=Kgx4O((rO_vjQx?G*r(@F)XMk1?G}C!7RIYYNEUg>4DSQ! z0}-FOCT_O1=$~W60x`#*m3KHyq2Yo&e7lyq>Vlzh^BJ7HTgcj$=JM{1h?i9}ZDH4M ziJu^Pvk)AQ#~>9tIk#&B&EtrHztL+$CcbD1({(e_B5n*bu493#jJPGP0;ZGep9Y+t zy;j!K_8!yRWc@wS9bB;@w=g-FSalzLI*P*bCOO+tSW`sjP@zq9Rz{_ANzNXq)IgGR zvCt+uj|*+$kRB1TL>j6gLIOxbdL+maaj1p_2_VW}6qX|WdntyIY!8jIL4u%Co_bvz<3nOeSRs)lal!Jw8ptlO~JQtj~7$q5#O~y+X zV6wCE(pi}7LSeIFzBj7~ouWl?M$jo16lXO$#gF0)qT|F-)E{uHEFv0*W66@xrb3&9 zR>z4_a+5Iawv?f(I8g?ec1jM4DaC&wV%q0X)T2y^Q7{driPl51M}NSHJ_OT_%R%47 zQqCU6i4JIBmF1uXNH+I2<|5%cqa=ika#Tg@8BvDbM6KSfjsIGwuS-w*2&Q$E6RLCS zI|+<~Tl6HF1~y&%Z_bSWxo`DVIQjX~7|LU8!Yv9&MXF0%qD&li7BRXgNc=v`RXmPB zEil@784?h{`)TBOKk1?G-0R_VmU?)%Kgch0G0UFycOAjt-`??4_6H_O{BM(rG=d_2$i0|$e;SVVhq zd$+w;m@+P9DR}c#z}4Zh)e0q?jwbb`B{p_`biH}>60dJ_AM&m|+pIFUG~hVR65E^U z8E+5xaZP)kTwjUro~HTbZlucerF*6~5O>)~1OwobAf<8q5dxm7z`g$=)#|3HL%3g-pKl~!f;>Q|wdcUp2b)60Y^1MvO z_xxuDkK~gEbtcAU9!u%>`ajF;w^;7rUUG{ttJUy&{@!%61c~U#MY%t@)^bLwbbsa9 z`d3eDuFU(^{bYpcPj0H}QLX$hVUpJrG%8&Z!s99@NkdC3Zh^mBLR%2HA8J>1r#@E; z>KMi&`*x@KqcY|eW9wsRPyYJM+~17t%rCKs?m#02j{goPalJS55)Q#W=v_y5da9*O zu^i4o{XOlQjS4;yF|f7Cb8K>S(`4zv#;YZ`wAmg$xq!MSoS?qH(wB*;n?QT>>+SqgBu_yR*@QG6)$oN@Zw7cp<;vnN-leKZzCBZ2W9RirT z4|Hm@;g+HwOFz%D4OaRleBmL8jV3R#CLF630?A)V_l+Qne3L)8*`jnA2qi|dGNwl= z7Y@C+_7fqTS$wkRnVrlA8fZ6PMuTW0!}6P+ybHH?CtXXX%)Y5xMG!2SItF@Y+;@iN vBNrLP(uUXz$Pzv2{|xp22K@h7Eb&ky`=OYt{R?T~4^70{+zwS`>Yem2(BH`^ From 5ad8d1d33948a7f52620530bfb75a532086dee74 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 3 Aug 2023 15:46:00 +0300 Subject: [PATCH 53/93] WIP --- frontend/webapp/design.system/drop.down/drop.down.styled.tsx | 2 +- frontend/webapp/design.system/input/input.styled.tsx | 2 +- .../webapp/design.system/search.input/search.input.styled.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/webapp/design.system/drop.down/drop.down.styled.tsx b/frontend/webapp/design.system/drop.down/drop.down.styled.tsx index fccd64123..49282f3d6 100644 --- a/frontend/webapp/design.system/drop.down/drop.down.styled.tsx +++ b/frontend/webapp/design.system/drop.down/drop.down.styled.tsx @@ -32,7 +32,7 @@ export const DropdownHeader = styled.div` align-items: center; color: ${({ theme }) => theme.text.white}; font-size: 14px; - font-family: ${({ theme }) => theme.font_family.primary}; + font-family: ${({ theme }) => theme.font_family.primary}, sans-serif; font-weight: 400; `; diff --git a/frontend/webapp/design.system/input/input.styled.tsx b/frontend/webapp/design.system/input/input.styled.tsx index bff06430f..808fdeffe 100644 --- a/frontend/webapp/design.system/input/input.styled.tsx +++ b/frontend/webapp/design.system/input/input.styled.tsx @@ -55,7 +55,7 @@ export const StyledInput = styled.input` export const StyledActionInput = styled(StyledInput)` color: var(--dark-mode-white, #fff); - font-family: Inter; + font-family: Inter, sans-serif; font-size: 24px; `; diff --git a/frontend/webapp/design.system/search.input/search.input.styled.tsx b/frontend/webapp/design.system/search.input/search.input.styled.tsx index f99e986d9..39ee4f362 100644 --- a/frontend/webapp/design.system/search.input/search.input.styled.tsx +++ b/frontend/webapp/design.system/search.input/search.input.styled.tsx @@ -29,7 +29,7 @@ export const StyledSearchInput = styled.input` color: ${({ active, theme }) => `${active ? theme.colors.white : theme.text.grey}`}; font-size: 14px; - font-family: ${({ theme }) => theme.font_family.primary}; + font-family: ${({ theme }) => theme.font_family.primary}, sans-serif; font-weight: 400; &:focus { color: ${({ theme }) => `solid 1px ${theme.colors.white}`}; From 26033f71afd6e313c722132a58a22aa99f78ae9e Mon Sep 17 00:00:00 2001 From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com> Date: Thu, 3 Aug 2023 15:52:44 +0300 Subject: [PATCH 54/93] Task 165 manage source (#368) --- frontend/webapp/app/layout.tsx | 4 + .../destinations/create/[id]/page.tsx | 111 ++++++++++++++++++ .../app/overview/destinations/create/page.tsx | 7 ++ .../app/overview/destinations/manage/page.tsx | 67 +++++++++++ .../webapp/app/overview/destinations/page.tsx | 15 ++- frontend/webapp/app/overview/layout.tsx | 6 +- .../app/overview/sources/create/page.tsx | 40 +++++++ .../app/overview/sources/manage/page.tsx | 103 ++++++++++++++++ .../app/overview/sources/manage/styled.tsx | 15 +++ frontend/webapp/app/overview/sources/page.tsx | 6 +- .../webapp/assets/icons/overview/index.tsx | 3 +- frontend/webapp/assets/icons/overview/pen.svg | 3 + .../manage.destination/manage.destination.tsx | 6 +- frontend/webapp/components/overview/index.tsx | 1 + .../sources.action.menu.styled.tsx | 1 + .../action.menu/sources.action.menu.tsx | 2 +- .../sources/delete.source/delete.source.tsx | 68 +++++++++++ .../manage.source.header.tsx | 96 +++++++++++++++ .../sources.manage.card.tsx | 4 +- .../sources.manage.list.tsx | 12 +- .../sources.manage.styled.tsx | 4 +- .../webapp/components/side.menu/menu/menu.tsx | 15 +-- .../destination/destination.styled.tsx | 10 -- .../overview/destination/destination.tsx | 94 +++------------ .../destination/new.destination.flow.tsx | 78 ++---------- .../destination/update.destination.flow.tsx | 8 +- frontend/webapp/containers/overview/index.tsx | 1 + .../overview/sources/manage.sources.tsx | 4 +- .../overview/sources/new.source.flow.tsx | 6 +- .../containers/overview/sources/sources.tsx | 62 ++-------- .../setup/destination/destination.section.tsx | 8 +- .../drop.down/drop.down.styled.tsx | 2 +- frontend/webapp/design.system/index.tsx | 1 + .../design.system/input/action.input.tsx | 42 +++++++ .../design.system/input/input.styled.tsx | 19 +++ .../notification/notification.tsx | 1 + .../search.input/search.input.styled.tsx | 2 +- .../webapp/design.system/text/text.styled.tsx | 2 +- frontend/webapp/services/sources.tsx | 12 +- frontend/webapp/utils/constants/index.tsx | 2 +- frontend/webapp/utils/constants/routes.tsx | 5 + frontend/webapp/utils/constants/string.tsx | 9 ++ 42 files changed, 713 insertions(+), 244 deletions(-) create mode 100644 frontend/webapp/app/overview/destinations/create/[id]/page.tsx create mode 100644 frontend/webapp/app/overview/destinations/create/page.tsx create mode 100644 frontend/webapp/app/overview/destinations/manage/page.tsx create mode 100644 frontend/webapp/app/overview/sources/create/page.tsx create mode 100644 frontend/webapp/app/overview/sources/manage/page.tsx create mode 100644 frontend/webapp/app/overview/sources/manage/styled.tsx create mode 100644 frontend/webapp/assets/icons/overview/pen.svg create mode 100644 frontend/webapp/components/overview/sources/delete.source/delete.source.tsx create mode 100644 frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx create mode 100644 frontend/webapp/design.system/input/action.input.tsx diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx index efe4c8326..050b0c95c 100644 --- a/frontend/webapp/app/layout.tsx +++ b/frontend/webapp/app/layout.tsx @@ -3,6 +3,7 @@ import React from "react"; import { ThemeProvider } from "styled-components"; import theme from "@/styles/palette"; import { QueryClient, QueryClientProvider } from "react-query"; +import Head from "next/head"; const LAYOUT_STYLE: React.CSSProperties = { margin: 0, @@ -30,6 +31,9 @@ export default function RootLayout({ + + Odigos + {children} diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx new file mode 100644 index 000000000..f4082de12 --- /dev/null +++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx @@ -0,0 +1,111 @@ +"use client"; +import React, { useEffect } from "react"; +import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import { useMutation, useQuery } from "react-query"; +import { + getDestination, + getDestinationsTypes, + setDestination, +} from "@/services"; +import { ManageDestination, OverviewHeader } from "@/components/overview"; +import { useNotification, useSectionData } from "@/hooks"; +import { useRouter, useSearchParams } from "next/navigation"; +import { styled } from "styled-components"; + +const DEST = "dest"; + +const NewDestinationContainer = styled.div` + padding: 20px 36px; +`; + +export default function NewDestinationFlow() { + const { sectionData, setSectionData } = useSectionData(null); + const { show, Notification } = useNotification(); + const { mutate } = useMutation((body) => setDestination(body)); + const searchParams = useSearchParams(); + const router = useRouter(); + + const { data: destinationType } = useQuery( + [QUERIES.API_DESTINATION_TYPE, sectionData?.type], + () => getDestination(sectionData?.type), + { + enabled: !!sectionData, + } + ); + + const { data: destinationsList } = useQuery( + [QUERIES.API_DESTINATION_TYPES], + getDestinationsTypes + ); + + useEffect(onPageLoad, [destinationsList]); + + function onPageLoad() { + const search = searchParams.get(DEST); + if (!destinationsList || !search) return; + + let currentData = null; + + for (const category of destinationsList.categories) { + if (currentData) { + break; + } + const filterItem = category.items.filter(({ type }) => type === search); + if (filterItem.length) { + currentData = filterItem[0]; + } + } + + setSectionData(currentData); + } + + function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { + show({ + type: NOTIFICATION.SUCCESS, + message, + }); + } + + function onError({ response }) { + const message = response?.data?.message; + show({ + type: NOTIFICATION.ERROR, + message, + }); + } + + function onSubmit(newDestination) { + const destination = { + ...newDestination, + type: sectionData.type, + }; + + mutate(destination, { + onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS), + onError, + }); + } + + function handleBackPress() { + router.back(); + } + + return ( + <> + + {destinationType && sectionData && ( + + + + )} + + + ); +} diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx new file mode 100644 index 000000000..3b9a92b41 --- /dev/null +++ b/frontend/webapp/app/overview/destinations/create/page.tsx @@ -0,0 +1,7 @@ +"use client"; +import React from "react"; +import { NewDestinationFlow } from "@/containers/overview"; + +export default function CreateDestinationPage() { + return ; +} diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx new file mode 100644 index 000000000..cd92c828f --- /dev/null +++ b/frontend/webapp/app/overview/destinations/manage/page.tsx @@ -0,0 +1,67 @@ +"use client"; +import React, { useEffect, useState } from "react"; +import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import { useNotification } from "@/hooks"; +import { useSearchParams } from "next/navigation"; +import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow"; +import { getDestinations } from "@/services"; +import { useQuery } from "react-query"; +import { KeyvalLoader } from "@/design.system"; + +const DEST = "dest"; + +export default function ManageDestinationPage() { + const [selectedDestination, setSelectedDestination] = useState(null); + const { show, Notification } = useNotification(); + + const { + isLoading: destinationLoading, + data: destinationList, + refetch, + } = useQuery([QUERIES.API_DESTINATIONS], getDestinations); + + const searchParams = useSearchParams(); + + useEffect(onPageLoad, [searchParams, destinationList]); + + function onPageLoad() { + const search = searchParams.get(DEST); + const currentDestination = destinationList?.filter( + ({ id }) => id === search + ); + if (currentDestination?.length) { + setSelectedDestination(currentDestination[0]); + } + } + + function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { + refetch(); + show({ + type: NOTIFICATION.SUCCESS, + message, + }); + } + + function onError({ response }) { + const message = response?.data?.message; + show({ + type: NOTIFICATION.ERROR, + message, + }); + } + + if (destinationLoading || !selectedDestination) { + return ; + } + + return ( + <> + + + + ); +} diff --git a/frontend/webapp/app/overview/destinations/page.tsx b/frontend/webapp/app/overview/destinations/page.tsx index 7056885ed..bb83b2d78 100644 --- a/frontend/webapp/app/overview/destinations/page.tsx +++ b/frontend/webapp/app/overview/destinations/page.tsx @@ -1,11 +1,22 @@ "use client"; import { DestinationContainer } from "@/containers/overview"; import React from "react"; +import { styled } from "styled-components"; + +const DestinationContainerWrapper = styled.div` + height: 100vh; + overflow-y: hidden; + ::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; + scrollbar-width: none; +`; export default function DestinationDashboardPage() { return ( - <> + - + ); } diff --git a/frontend/webapp/app/overview/layout.tsx b/frontend/webapp/app/overview/layout.tsx index dc76e1c7f..2159907df 100644 --- a/frontend/webapp/app/overview/layout.tsx +++ b/frontend/webapp/app/overview/layout.tsx @@ -1,6 +1,7 @@ -"use client"; +// "use client"; import { Menu } from "@/components/side.menu"; import theme from "@/styles/palette"; +import { Metadata } from "next"; import React from "react"; const LAYOUT_STYLE = { @@ -14,6 +15,9 @@ const CHILDREN_STYLE = { width: "100%", height: "93%", }; +export const metadata: Metadata = { + title: "Odigos", +}; export default function Layout({ children }: { children: React.ReactNode }) { return ( diff --git a/frontend/webapp/app/overview/sources/create/page.tsx b/frontend/webapp/app/overview/sources/create/page.tsx new file mode 100644 index 000000000..9c83bfc82 --- /dev/null +++ b/frontend/webapp/app/overview/sources/create/page.tsx @@ -0,0 +1,40 @@ +"use client"; +import React from "react"; +import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import { OverviewHeader } from "@/components/overview"; +import { useNotification } from "@/hooks"; +import { useQuery } from "react-query"; +import { getSources } from "@/services"; +import { NewSourceFlow } from "@/containers/overview/sources/new.source.flow"; +import { useRouter } from "next/navigation"; + +export default function CreateNewSourcesPage() { + const { show, Notification } = useNotification(); + const router = useRouter(); + const { data: sources, refetch } = useQuery( + [QUERIES.API_SOURCES], + getSources + ); + + function onNewSourceSuccess() { + setTimeout(() => { + router.back(); + refetch(); + }, 1000); + show({ + type: NOTIFICATION.SUCCESS, + message: OVERVIEW.SOURCE_CREATED_SUCCESS, + }); + } + + return ( + <> + router.back()} + /> + + + + ); +} diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx new file mode 100644 index 000000000..a8de98f08 --- /dev/null +++ b/frontend/webapp/app/overview/sources/manage/page.tsx @@ -0,0 +1,103 @@ +"use client"; +import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header"; +import { getSources } from "@/services"; +import { + NOTIFICATION, + OVERVIEW, + QUERIES, + ROUTES, + SETUP, +} from "@/utils/constants"; +import { useRouter, useSearchParams } from "next/navigation"; +import React, { useEffect, useState } from "react"; +import { useMutation, useQuery } from "react-query"; +import { ManageSourcePageContainer, BackButtonWrapper } from "./styled"; +import { LANGUAGES_LOGOS } from "@/assets/images"; +import { Back } from "@/assets/icons/overview"; +import { KeyvalText } from "@/design.system"; +import { ManagedSource } from "@/types/sources"; +import { DeleteSource } from "@/components/overview"; +import { deleteSource } from "@/services/sources"; +import { useNotification } from "@/hooks"; + +const SOURCE = "source"; + +export default function ManageSourcePage() { + const [currentSource, setCurrentSource] = useState( + null + ); + const searchParams = useSearchParams(); + const router = useRouter(); + const { data: sources, refetch } = useQuery( + [QUERIES.API_SOURCES], + getSources + ); + const { show, Notification } = useNotification(); + const { mutate } = useMutation(() => + deleteSource( + currentSource?.namespace || "", + currentSource?.kind || "", + currentSource?.name || "" + ) + ); + useEffect(onPageLoad, [sources]); + + useEffect(() => { + console.log({ currentSource }); + }, [currentSource]); + + function onPageLoad() { + const search = searchParams.get(SOURCE); + const source = sources?.find((item) => item.name === search); + source && setCurrentSource(source); + } + function onError({ response }) { + const message = response?.data?.message; + show({ + type: NOTIFICATION.ERROR, + message, + }); + } + + function onSuccess() { + setTimeout(() => { + router.back(); + refetch(); + }, 1000); + show({ + type: NOTIFICATION.SUCCESS, + message: OVERVIEW.SOURCE_DELETED_SUCCESS, + }); + } + function onDelete() { + mutate(undefined, { + onSuccess, + onError, + }); + } + + return ( + + router.back()}> + + {SETUP.BACK} + + {currentSource && ( + + )} + + + + ); +} diff --git a/frontend/webapp/app/overview/sources/manage/styled.tsx b/frontend/webapp/app/overview/sources/manage/styled.tsx new file mode 100644 index 000000000..4face21f0 --- /dev/null +++ b/frontend/webapp/app/overview/sources/manage/styled.tsx @@ -0,0 +1,15 @@ +import styled from "styled-components"; + +export const ManageSourcePageContainer = styled.div` + padding: 32px; +`; + +export const BackButtonWrapper = styled.div` + display: flex; + width: fit-content; + align-items: center; + cursor: pointer; + p { + cursor: pointer !important; + } +`; diff --git a/frontend/webapp/app/overview/sources/page.tsx b/frontend/webapp/app/overview/sources/page.tsx index 454db1e18..77d0c32f2 100644 --- a/frontend/webapp/app/overview/sources/page.tsx +++ b/frontend/webapp/app/overview/sources/page.tsx @@ -3,9 +3,5 @@ import { SourcesContainer } from "@/containers/overview"; import React from "react"; export default function SourcesOverviewPage() { - return ( - <> - - - ); + return ; } diff --git a/frontend/webapp/assets/icons/overview/index.tsx b/frontend/webapp/assets/icons/overview/index.tsx index f9254c49d..68481e5ca 100644 --- a/frontend/webapp/assets/icons/overview/index.tsx +++ b/frontend/webapp/assets/icons/overview/index.tsx @@ -1,6 +1,7 @@ import KeyvalMiddleware from "./middleware.svg"; import Folder from "./folder.svg"; import Plus from "./plus.svg"; +import Pen from "./pen.svg"; import Back from "./back.svg"; -export { KeyvalMiddleware, Folder, Plus, Back }; +export { KeyvalMiddleware, Folder, Plus, Back, Pen }; diff --git a/frontend/webapp/assets/icons/overview/pen.svg b/frontend/webapp/assets/icons/overview/pen.svg new file mode 100644 index 000000000..03494bea2 --- /dev/null +++ b/frontend/webapp/assets/icons/overview/pen.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx index 51fd8d3cb..5dc79074a 100644 --- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx +++ b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx @@ -25,9 +25,10 @@ const BackButtonWrapper = styled.div` } `; -const CreateConnectionWrapper = styled.div` +const CreateConnectionWrapper = styled.div<{ expand: boolean | undefined }>` display: flex; gap: 200px; + height: ${({ expand }) => (expand ? 630 : 530)}px; overflow: scroll; scrollbar-width: none; `; @@ -60,7 +61,8 @@ export function ManageDestination({ )} - + +
void; + name: string | undefined; + image_url: string; +}) { + const [showModal, setShowModal] = useState(false); + + const modalConfig = { + title: OVERVIEW.DELETE_SOURCE, + showHeader: true, + showOverlay: true, + positionX: ModalPositionX.center, + positionY: ModalPositionY.center, + padding: "20px", + footer: { + primaryBtnText: OVERVIEW.CONFIRM_SOURCE_DELETE, + primaryBtnAction: () => { + setShowModal(false); + onDelete(); + }, + }, + }; + + return ( + <> + + setShowModal(true)} + /> + + {showModal && ( + setShowModal(false)} + config={modalConfig} + > +
+ +
+ + {`${OVERVIEW.DELETE} ${name}`} + + + )} + + ); +} diff --git a/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx new file mode 100644 index 000000000..5fbcec042 --- /dev/null +++ b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx @@ -0,0 +1,96 @@ +import React, { useRef, useState } from "react"; +import styled from "styled-components"; +import { KeyvalActionInput, KeyvalImage, KeyvalText } from "@/design.system"; +import { Pen } from "@/assets/icons/overview"; +import { useOnClickOutside } from "@/hooks"; + +const ManageSourceHeaderWrapper = styled.div` + display: flex; + width: 100%; + min-width: 686px; + height: 104px; + align-items: center; + border-radius: 25px; + margin: 24px 0; + background: radial-gradient( + 78.09% 72.18% at 100% -0%, + rgba(150, 242, 255, 0.4) 0%, + rgba(150, 242, 255, 0) 61.91% + ), + linear-gradient(180deg, #2e4c55 0%, #303355 100%); +`; + +const TextWrapper = styled.div` + margin-left: 12px; + margin-right: 12px; +`; + +const EditIconWrapper = styled.div` + width: 20px; + height: 40px; + display: flex; + align-items: center; + + :hover { + cursor: pointer; + fill: ${({ theme }) => theme.colors.secondary}; + } +`; + +const ActionInputWrapper = styled.div` + width: 80%; + height: 49px; +`; + +const IMAGE_STYLE: React.CSSProperties = { + backgroundColor: "#fff", + padding: 4, + marginRight: 16, + marginLeft: 16, +}; + +export function ManageSourceHeader({ image_url, name }) { + const [showEditInput, setShowEditInput] = useState(true); + const [inputValue, setInputValue] = useState(name); + const containerRef = useRef(null); + const handleClickOutside = () => { + !showEditInput && handleSave(); + }; + + useOnClickOutside(containerRef, handleClickOutside); + + function handleSave() { + setShowEditInput(true); + } + + function handleInputChange(value) { + setInputValue(value); + } + + return ( + + + {showEditInput ? ( + <> + + + {name} + + + + setShowEditInput(false)}> + + + + ) : ( + + handleInputChange(e)} + onAction={handleSave} + /> + + )} + + ); +} diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx index 1aa8f559b..a2a695f41 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx @@ -20,13 +20,15 @@ const LOGO_STYLE: React.CSSProperties = { interface SourceManagedCardProps { item: ManagedSource; + onClick?: () => void; } const DEPLOYMENT = "deployment"; export default function SourceManagedCard({ item = {} as ManagedSource, + onClick, }: SourceManagedCardProps) { return ( - + ( - + + router.push(`${ROUTES.MANAGE_SOURCE}?source=${source?.name}`) + } + /> )); } diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx index 3fd4cad8d..9a36b4efa 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx @@ -12,10 +12,10 @@ export const CardWrapper = styled.div` align-items: center; flex-direction: column; gap: 10px; - /* cursor: pointer; + cursor: pointer; &:hover { background: var(--dark-mode-dark-1, #07111a81); - } */ + } `; export const EmptyListWrapper = styled.div` diff --git a/frontend/webapp/components/side.menu/menu/menu.tsx b/frontend/webapp/components/side.menu/menu/menu.tsx index 8f83912ec..814885343 100644 --- a/frontend/webapp/components/side.menu/menu/menu.tsx +++ b/frontend/webapp/components/side.menu/menu/menu.tsx @@ -4,7 +4,7 @@ import { MenuContainer, LogoWrapper, MenuItemsWrapper } from "./menu.styled"; import { KeyvalText } from "@/design.system"; import MenuItem from "../menu.item/menu.item"; import { useRouter } from "next/navigation"; -import { OVERVIEW } from "@/utils/constants"; +import { OVERVIEW, ROUTES } from "@/utils/constants"; import { MENU_ITEMS } from "./items"; export interface MenuItem { @@ -26,12 +26,13 @@ export function Menu() { useEffect(onLoad, []); function onLoad() { - const currentItem = MENU_ITEMS.find((item) => { - return item.navigate === window.location.pathname; - }); - if (currentItem?.id !== currentMenuItem.id) { - handleMenuItemClick(currentItem); - } + const currentItem = MENU_ITEMS.find( + ({ navigate }) => + navigate !== ROUTES.OVERVIEW && + window.location.pathname.includes(navigate) + ); + + currentItem && setCurrentMenuItem(currentItem); } function handleMenuItemClick(item) { diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destination/destination.styled.tsx index cac5196dd..008ad16f7 100644 --- a/frontend/webapp/containers/overview/destination/destination.styled.tsx +++ b/frontend/webapp/containers/overview/destination/destination.styled.tsx @@ -1,15 +1,5 @@ import styled from "styled-components"; -export const DestinationContainerWrapper = styled.div` - height: 100vh; - overflow-y: hidden; - ::-webkit-scrollbar { - display: none; - } - -ms-overflow-style: none; - scrollbar-width: none; -`; - export const NewDestinationContainer = styled.div` padding: 20px 36px; `; diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx index 162b174a6..8ed985640 100644 --- a/frontend/webapp/containers/overview/destination/destination.tsx +++ b/frontend/webapp/containers/overview/destination/destination.tsx @@ -1,92 +1,34 @@ "use client"; -import React, { useState } from "react"; +import React from "react"; import { KeyvalLoader } from "@/design.system"; -import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import { OVERVIEW, QUERIES, ROUTES } from "@/utils/constants"; import { useQuery } from "react-query"; import { getDestinations } from "@/services"; import { OverviewHeader, DestinationsManagedList } from "@/components/overview"; -import { DestinationContainerWrapper } from "./destination.styled"; -import { NewDestinationFlow } from "./new.destination.flow"; -import { UpdateDestinationFlow } from "./update.destination.flow"; -import { useNotification } from "@/hooks"; +import { useRouter } from "next/navigation"; export function DestinationContainer() { - const [selectedDestination, setSelectedDestination] = useState(null); - const [displayNewDestination, setDisplayNewDestination] = - useState(false); - const { show, Notification } = useNotification(); - const { - isLoading: destinationLoading, - data: destinationList, - refetch, - } = useQuery([QUERIES.API_DESTINATIONS], getDestinations); - - function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { - refetch(); - setSelectedDestination(null); - setDisplayNewDestination(false); - show({ - type: NOTIFICATION.SUCCESS, - message, - }); - } - - function onError({ response }) { - const message = response?.data?.message; - show({ - type: NOTIFICATION.ERROR, - message, - }); - } - - function renderNewDestinationFlow() { - return ( - { - setDisplayNewDestination(false); - }} - /> - ); - } - - function renderUpdateDestinationFlow() { - return ( - - ); - } + const { isLoading: destinationLoading, data: destinationList } = useQuery( + [QUERIES.API_DESTINATIONS], + getDestinations + ); - function renderDestinationList() { - return ( - <> - - setDisplayNewDestination(true)} - /> - - ); - } + const router = useRouter(); if (destinationLoading) { return ; } return ( - - {displayNewDestination - ? renderNewDestinationFlow() - : selectedDestination - ? renderUpdateDestinationFlow() - : renderDestinationList()} - - + <> + + + router.push(`${ROUTES.UPDATE_DESTINATION}${id}`) + } + onMenuButtonClick={() => router.push(ROUTES.CREATE_DESTINATION)} + /> + ); } diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx index 7a75a32c0..27c0dddc7 100644 --- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx @@ -1,80 +1,26 @@ "use client"; -import React, { useState } from "react"; -import { OVERVIEW, QUERIES } from "@/utils/constants"; -import { useMutation, useQuery } from "react-query"; -import { getDestination, setDestination } from "@/services"; -import { ManageDestination, OverviewHeader } from "@/components/overview"; -import { useSectionData } from "@/hooks"; +import React from "react"; +import { OVERVIEW, ROUTES } from "@/utils/constants"; +import { OverviewHeader } from "@/components/overview"; import { DestinationSection } from "@/containers/setup/destination/destination.section"; import { NewDestinationContainer } from "./destination.styled"; +import { useRouter } from "next/navigation"; -export function NewDestinationFlow({ onBackClick, onSuccess, onError }) { - const { sectionData, setSectionData } = useSectionData(null); - const [managed, setManaged] = useState(null); - const { data: destinationType } = useQuery( - [QUERIES.API_DESTINATION_TYPE, sectionData?.type], - () => getDestination(sectionData?.type), - { - enabled: !!sectionData, - } - ); - const { mutate } = useMutation((body) => setDestination(body)); - - function onSubmit(newDestination) { - const destination = { - ...newDestination, - type: sectionData.type, - }; - - mutate(destination, { - onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS), - onError, - }); - } - - function handleBackPress() { - if (managed && sectionData) { - setManaged(false); - setSectionData(null); - return; - } - onBackClick(); - } - - function renderNewDestinationForm() { - return ( - - ); - } - - function renderSelectNewDestination() { - return ( - <> - { - setSectionData(data); - setManaged(true); - }} - /> - - ); - } +export function NewDestinationFlow() { + const router = useRouter(); return ( <> router.back()} /> - {managed && sectionData - ? renderNewDestinationForm() - : renderSelectNewDestination()} + { + router.push(`${ROUTES.MANAGE_DESTINATION}${data.type}`); + }} + /> ); diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx index 8eb710a29..d95fe7ac4 100644 --- a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx @@ -7,13 +7,15 @@ import { getDestination, updateDestination } from "@/services"; import { ManageDestination } from "@/components/overview"; import { deleteDestination } from "@/services/destinations"; import { ManageDestinationWrapper } from "./destination.styled"; +import { useRouter } from "next/navigation"; -export function UpdateDestinationFlow({ +export default function UpdateDestinationFlow({ selectedDestination, - setSelectedDestination, onSuccess, onError, }) { + const router = useRouter(); + const manageData = useMemo(() => { return { ...selectedDestination, @@ -60,7 +62,7 @@ export function UpdateDestinationFlow({ ) : ( setSelectedDestination(null)} + onBackClick={() => router.back()} destinationType={destinationType} selectedDestination={manageData} onSubmit={onSubmit} diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx index 2a26e3504..e7895d4e4 100644 --- a/frontend/webapp/containers/overview/index.tsx +++ b/frontend/webapp/containers/overview/index.tsx @@ -1,3 +1,4 @@ export { OverviewContainer } from "./overview/overview"; export { DestinationContainer } from "./destination/destination"; export { SourcesContainer } from "./sources/sources"; +export { NewDestinationFlow } from "./destination/new.destination.flow"; diff --git a/frontend/webapp/containers/overview/sources/manage.sources.tsx b/frontend/webapp/containers/overview/sources/manage.sources.tsx index af0e0daa9..1b3339cac 100644 --- a/frontend/webapp/containers/overview/sources/manage.sources.tsx +++ b/frontend/webapp/containers/overview/sources/manage.sources.tsx @@ -9,7 +9,7 @@ import { ManagedSource, Namespace } from "@/types/sources"; const DEFAULT_FILTER = { name: "default", selected: false, totalApps: 0 }; -export function ManageSources({ setDisplayNewSourceFlow, sources }) { +export function ManageSources({ onAddClick, sources }) { const [searchFilter, setSearchFilter] = useState(""); const [currentNamespace, setCurrentNamespace] = useState(DEFAULT_FILTER); @@ -60,7 +60,7 @@ export function ManageSources({ setDisplayNewSourceFlow, sources }) { searchFilter={searchFilter} setSearchFilter={setSearchFilter} data={namespacesList} - onAddClick={() => setDisplayNewSourceFlow(true)} + onAddClick={onAddClick} setCurrentItem={setCurrentNamespace} /> diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx index 5152767ba..3b5468b9a 100644 --- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx +++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx @@ -17,7 +17,9 @@ export function NewSourceFlow({ onSuccess, sources }) { const { show, Notification } = useNotification(); function updateSectionDataWithSources() { - const sourceNamesSet = new Set(sources.map((source) => source.name)); + const sourceNamesSet = new Set( + sources.map((source: SelectedSources) => source.name) + ); const updatedSectionData: SelectedSources = {}; for (const key in sectionData) { @@ -50,6 +52,7 @@ export function NewSourceFlow({ onSuccess, sources }) { {`${totalSelected} ${SETUP.SELECTED}`} @@ -58,6 +61,7 @@ export function NewSourceFlow({ onSuccess, sources }) { + (null); - const { show, Notification } = useNotification(); - - const { data: sources, refetch } = useQuery( - [QUERIES.API_SOURCES], - getSources - ); - - useEffect(() => { - refetchSources(); - }, [displayNewSourceFlow]); - - async function refetchSources() { - if (displayNewSourceFlow === false) { - setTimeout(async () => { - refetch(); - }, 1000); - } - } - - function onNewSourceSuccess() { - setDisplayNewSourceFlow(false); - show({ - type: NOTIFICATION.SUCCESS, - message: OVERVIEW.SOURCE_CREATED_SUCCESS, - }); - } - - function renderNewSourceFlow() { - return ; - } - - function renderSources() { - return ( - - ); - } + const router = useRouter(); + const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources); return ( - setDisplayNewSourceFlow(false) : null - } + + router.push(ROUTES.CREATE_SOURCE)} + sources={sources} /> - {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()} - ); } diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx index e8dd0a051..854edd779 100644 --- a/frontend/webapp/containers/setup/destination/destination.section.tsx +++ b/frontend/webapp/containers/setup/destination/destination.section.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import { useQuery } from "react-query"; -import { QUERIES, SETUP } from "@/utils/constants"; +import { NOTIFICATION, QUERIES, SETUP } from "@/utils/constants"; import { MONITORING_OPTIONS } from "@/components/setup/destination/utils"; import { DestinationList, DestinationOptionMenu } from "@/components/setup"; import Empty from "@/assets/images/empty-list.svg"; @@ -20,7 +20,7 @@ import { useNotification } from "@/hooks"; import { getDestinationsTypes } from "@/services"; type DestinationSectionProps = { - sectionData: any; + sectionData?: any; setSectionData: (data: any) => void; }; @@ -42,7 +42,7 @@ export function DestinationSection({ useEffect(() => { isError && show({ - type: "error", + type: NOTIFICATION.ERROR, message: error, }); }, [isError]); @@ -70,9 +70,9 @@ export function DestinationSection({ return ( displayItem && ( setSectionData(item)} /> ) diff --git a/frontend/webapp/design.system/drop.down/drop.down.styled.tsx b/frontend/webapp/design.system/drop.down/drop.down.styled.tsx index fccd64123..49282f3d6 100644 --- a/frontend/webapp/design.system/drop.down/drop.down.styled.tsx +++ b/frontend/webapp/design.system/drop.down/drop.down.styled.tsx @@ -32,7 +32,7 @@ export const DropdownHeader = styled.div` align-items: center; color: ${({ theme }) => theme.text.white}; font-size: 14px; - font-family: ${({ theme }) => theme.font_family.primary}; + font-family: ${({ theme }) => theme.font_family.primary}, sans-serif; font-weight: 400; `; diff --git a/frontend/webapp/design.system/index.tsx b/frontend/webapp/design.system/index.tsx index 7885d1a19..c1b3be3ce 100644 --- a/frontend/webapp/design.system/index.tsx +++ b/frontend/webapp/design.system/index.tsx @@ -15,6 +15,7 @@ export { KeyvalLink } from "./link/link"; export { KeyvalTooltip } from "./tooltip/tooltip"; export { KeyvalImage } from "./image/image"; export { KeyvalInput } from "./input/input"; +export { KeyvalActionInput } from "./input/action.input"; export { KeyvalVideo } from "./video/video"; export { KeyvalLoader } from "./loader/loader"; export { KeyvalNotification } from "./notification/notification"; diff --git a/frontend/webapp/design.system/input/action.input.tsx b/frontend/webapp/design.system/input/action.input.tsx new file mode 100644 index 000000000..4bede03d6 --- /dev/null +++ b/frontend/webapp/design.system/input/action.input.tsx @@ -0,0 +1,42 @@ +import React, { ChangeEvent } from "react"; +import { StyledActionInputContainer, StyledActionInput } from "./input.styled"; +import { KeyvalButton } from "../button/button"; +import { KeyvalText } from "../text/text"; +import theme from "@/styles/palette"; +import { ACTION } from "@/utils/constants"; + +interface InputProps { + value: string; + onAction: () => void; + onChange: (value: string) => void; + type?: string; + style?: React.CSSProperties; +} + +export function KeyvalActionInput({ + value, + onChange, + style = {}, +}: InputProps): JSX.Element { + function handleChange(event: ChangeEvent): void { + onChange(event.target.value); + } + + return ( + <> + + + + + + {ACTION.SAVE} + + + + + ); +} diff --git a/frontend/webapp/design.system/input/input.styled.tsx b/frontend/webapp/design.system/input/input.styled.tsx index 25b200005..808fdeffe 100644 --- a/frontend/webapp/design.system/input/input.styled.tsx +++ b/frontend/webapp/design.system/input/input.styled.tsx @@ -32,6 +32,19 @@ export const StyledInputContainer = styled.div` } `; +export const StyledActionInputContainer = styled.div` + position: relative; + display: flex; + width: 100%; + padding: 0px 12px; + height: 100%; + align-items: center; + justify-content: space-between; + gap: 10px; + border-radius: 4px; + border: ${({ theme }) => `1px solid ${theme.colors.secondary}`}; +`; + export const StyledInput = styled.input` background: transparent; border: none; @@ -40,6 +53,12 @@ export const StyledInput = styled.input` color: ${({ theme }) => theme.text.white}; `; +export const StyledActionInput = styled(StyledInput)` + color: var(--dark-mode-white, #fff); + font-family: Inter, sans-serif; + font-size: 24px; +`; + export const LabelWrapper = styled.div` margin-bottom: 8px; `; diff --git a/frontend/webapp/design.system/notification/notification.tsx b/frontend/webapp/design.system/notification/notification.tsx index a8d53e169..c0352b40e 100644 --- a/frontend/webapp/design.system/notification/notification.tsx +++ b/frontend/webapp/design.system/notification/notification.tsx @@ -7,6 +7,7 @@ import { KeyvalText } from "../text/text"; import CloseIcon from "@/assets/icons/X-blue.svg"; import SuccessIcon from "@/assets/icons/success-notification.svg"; import ErrorIcon from "@/assets/icons/error-notification.svg"; + interface KeyvalNotificationProps { type: "success" | "error" | "warning" | "info"; message: string; diff --git a/frontend/webapp/design.system/search.input/search.input.styled.tsx b/frontend/webapp/design.system/search.input/search.input.styled.tsx index f99e986d9..39ee4f362 100644 --- a/frontend/webapp/design.system/search.input/search.input.styled.tsx +++ b/frontend/webapp/design.system/search.input/search.input.styled.tsx @@ -29,7 +29,7 @@ export const StyledSearchInput = styled.input` color: ${({ active, theme }) => `${active ? theme.colors.white : theme.text.grey}`}; font-size: 14px; - font-family: ${({ theme }) => theme.font_family.primary}; + font-family: ${({ theme }) => theme.font_family.primary}, sans-serif; font-weight: 400; &:focus { color: ${({ theme }) => `solid 1px ${theme.colors.white}`}; diff --git a/frontend/webapp/design.system/text/text.styled.tsx b/frontend/webapp/design.system/text/text.styled.tsx index f400cfe94..a68573fc4 100644 --- a/frontend/webapp/design.system/text/text.styled.tsx +++ b/frontend/webapp/design.system/text/text.styled.tsx @@ -3,7 +3,7 @@ import styled from "styled-components"; export const TextWrapper = styled.p` color: ${({ theme }) => theme.text.white}; margin: 0; - font-family: ${({ theme }) => theme.font_family.primary}; + font-family: ${({ theme }) => theme.font_family.primary}, sans-serif; font-size: 16px; font-weight: 400; `; diff --git a/frontend/webapp/services/sources.tsx b/frontend/webapp/services/sources.tsx index eb50b72a2..fc7fd5050 100644 --- a/frontend/webapp/services/sources.tsx +++ b/frontend/webapp/services/sources.tsx @@ -1,5 +1,5 @@ import { API } from "@/utils/constants"; -import { get, post } from "./api"; +import { get, post, httpDelete } from "./api"; import { SelectedSources } from "@/types/sources"; export async function getNamespaces() { @@ -17,3 +17,13 @@ export async function setNamespaces(body: SelectedSources): Promise { export async function getSources() { return await get(API.SOURCES); } + +export async function deleteSource( + namespace: string, + kind: string, + name: string +) { + return await httpDelete( + `${API.SOURCES}/namespace/${namespace}/kind/${kind}/name/${name}` + ); +} diff --git a/frontend/webapp/utils/constants/index.tsx b/frontend/webapp/utils/constants/index.tsx index 11dd91a8d..90fdf2c71 100644 --- a/frontend/webapp/utils/constants/index.tsx +++ b/frontend/webapp/utils/constants/index.tsx @@ -1,4 +1,4 @@ export { ROUTES } from "./routes"; export { CONFIG } from "./config"; -export { SETUP, OVERVIEW, NOTIFICATION } from "./string"; +export { SETUP, OVERVIEW, NOTIFICATION, ACTION } from "./string"; export { API, QUERIES } from "./urls"; diff --git a/frontend/webapp/utils/constants/routes.tsx b/frontend/webapp/utils/constants/routes.tsx index a27e3f561..6a074d899 100644 --- a/frontend/webapp/utils/constants/routes.tsx +++ b/frontend/webapp/utils/constants/routes.tsx @@ -4,4 +4,9 @@ export const ROUTES = { SOURCES: "/overview/sources", DESTINATIONS: "/overview/destinations", NEW_DESTINATION: "/setup?state=destinations", + MANAGE_DESTINATION: "/overview/destinations/create/manage?dest=", + UPDATE_DESTINATION: "destinations/manage?dest=", + CREATE_DESTINATION: "destinations/create", + CREATE_SOURCE: "/overview/sources/create", + MANAGE_SOURCE: "/overview/sources/manage", }; diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx index 53903e8c5..3227c2b95 100644 --- a/frontend/webapp/utils/constants/string.tsx +++ b/frontend/webapp/utils/constants/string.tsx @@ -73,13 +73,22 @@ export const OVERVIEW = { MANAGE: "Manage", DELETE: "Delete", DELETE_DESTINATION: "Delete Destination", + DELETE_SOURCE: "Delete Source", + SOURCE_DANGER_ZONE_TITLE: "Delete this source", + SOURCE_DANGER_ZONE_SUBTITLE: + "This action cannot be undone. This will permanently delete the source and all associated data.", DELETE_MODAL_TITLE: "Delete this destination", DELETE_MODAL_SUBTITLE: "This action cannot be undone. This will permanently delete the destination and all associated data.", DELETE_BUTTON: "I want to delete this destination", + CONFIRM_SOURCE_DELETE: "I want to delete this source", CONNECT: "Connect", }; +export const ACTION = { + SAVE: "Save", +}; + export const NOTIFICATION = { ERROR: "error", SUCCESS: "success", From 4e02ce6da11d1abd5572fc93bf1391c476c9590e Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 3 Aug 2023 16:28:38 +0300 Subject: [PATCH 55/93] WIP --- frontend/webapp/app/layout.tsx | 5 +---- frontend/webapp/app/overview/layout.tsx | 7 ++----- frontend/webapp/app/setup/layout.tsx | 8 ++++++++ frontend/webapp/utils/constants/config.tsx | 5 +++++ frontend/webapp/utils/constants/index.tsx | 2 +- 5 files changed, 17 insertions(+), 10 deletions(-) create mode 100644 frontend/webapp/app/setup/layout.tsx diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx index 050b0c95c..33abda923 100644 --- a/frontend/webapp/app/layout.tsx +++ b/frontend/webapp/app/layout.tsx @@ -3,7 +3,7 @@ import React from "react"; import { ThemeProvider } from "styled-components"; import theme from "@/styles/palette"; import { QueryClient, QueryClientProvider } from "react-query"; -import Head from "next/head"; +import { Metadata } from "next"; const LAYOUT_STYLE: React.CSSProperties = { margin: 0, @@ -31,9 +31,6 @@ export default function RootLayout({ - - Odigos - {children} diff --git a/frontend/webapp/app/overview/layout.tsx b/frontend/webapp/app/overview/layout.tsx index 2159907df..ba1d6a895 100644 --- a/frontend/webapp/app/overview/layout.tsx +++ b/frontend/webapp/app/overview/layout.tsx @@ -1,6 +1,6 @@ -// "use client"; import { Menu } from "@/components/side.menu"; import theme from "@/styles/palette"; +import { METADATA } from "@/utils/constants"; import { Metadata } from "next"; import React from "react"; @@ -15,10 +15,7 @@ const CHILDREN_STYLE = { width: "100%", height: "93%", }; -export const metadata: Metadata = { - title: "Odigos", -}; - +export const metadata: Metadata = METADATA; export default function Layout({ children }: { children: React.ReactNode }) { return (
diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx new file mode 100644 index 000000000..a4ee950c2 --- /dev/null +++ b/frontend/webapp/app/setup/layout.tsx @@ -0,0 +1,8 @@ +import { METADATA } from "@/utils/constants"; +import { Metadata } from "next"; + +export const metadata: Metadata = METADATA; + +export default function Layout({ children }: { children: React.ReactNode }) { + return
{children}
; +} diff --git a/frontend/webapp/utils/constants/config.tsx b/frontend/webapp/utils/constants/config.tsx index f3aebd36f..0cda26a5d 100644 --- a/frontend/webapp/utils/constants/config.tsx +++ b/frontend/webapp/utils/constants/config.tsx @@ -3,3 +3,8 @@ export const CONFIG = { APPS_SELECTED: "APPS_SELECTED", FINISHED: "FINISHED", }; + +export const METADATA = { + title: "Odigos", + icons: "https://d2q89wckrml3k4.cloudfront.net/logo.png", +}; diff --git a/frontend/webapp/utils/constants/index.tsx b/frontend/webapp/utils/constants/index.tsx index 90fdf2c71..253c82b8a 100644 --- a/frontend/webapp/utils/constants/index.tsx +++ b/frontend/webapp/utils/constants/index.tsx @@ -1,4 +1,4 @@ export { ROUTES } from "./routes"; -export { CONFIG } from "./config"; +export { CONFIG, METADATA } from "./config"; export { SETUP, OVERVIEW, NOTIFICATION, ACTION } from "./string"; export { API, QUERIES } from "./urls"; From b49275e5e804180dd1abf5dffff82f06efccad44 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 3 Aug 2023 16:33:40 +0300 Subject: [PATCH 56/93] delete files --- frontend/webapp/app/layout.tsx | 1 - frontend/webapp/public/favicon.ico | Bin 25931 -> 0 bytes frontend/webapp/public/next.svg | 1 - frontend/webapp/public/vercel.svg | 1 - 4 files changed, 3 deletions(-) delete mode 100644 frontend/webapp/public/favicon.ico delete mode 100644 frontend/webapp/public/next.svg delete mode 100644 frontend/webapp/public/vercel.svg diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx index 33abda923..efe4c8326 100644 --- a/frontend/webapp/app/layout.tsx +++ b/frontend/webapp/app/layout.tsx @@ -3,7 +3,6 @@ import React from "react"; import { ThemeProvider } from "styled-components"; import theme from "@/styles/palette"; import { QueryClient, QueryClientProvider } from "react-query"; -import { Metadata } from "next"; const LAYOUT_STYLE: React.CSSProperties = { margin: 0, diff --git a/frontend/webapp/public/favicon.ico b/frontend/webapp/public/favicon.ico deleted file mode 100644 index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 25931 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 LrJugUA?W`A8`#=m diff --git a/frontend/webapp/public/next.svg b/frontend/webapp/public/next.svg deleted file mode 100644 index 5174b28c5..000000000 --- a/frontend/webapp/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/webapp/public/vercel.svg b/frontend/webapp/public/vercel.svg deleted file mode 100644 index d2f842227..000000000 --- a/frontend/webapp/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From beb029fa1b6e188c3789baa232645fd49525ed23 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 3 Aug 2023 16:45:47 +0300 Subject: [PATCH 57/93] WIP --- frontend/webapp/containers/overview/overview/overview.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/webapp/containers/overview/overview/overview.tsx b/frontend/webapp/containers/overview/overview/overview.tsx index 4be89af7f..04a979706 100644 --- a/frontend/webapp/containers/overview/overview/overview.tsx +++ b/frontend/webapp/containers/overview/overview/overview.tsx @@ -47,7 +47,9 @@ export function OverviewContainer() { containerHeight, destinations, "destination", - DESTINATION_NODE_HEIGHT, + destinations?.length > 1 + ? DESTINATION_NODE_HEIGHT + : NAMESPACE_NODE_HEIGHT, DESTINATION_NODE_POSITION ), [destinations, containerHeight] From 4c2847220a06aabfc0410105af75160631640742 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 3 Aug 2023 16:52:40 +0300 Subject: [PATCH 58/93] move page logic to container --- .../destinations/create/[id]/page.tsx | 112 +----------------- .../destination/new.destination.form.tsx | 111 +++++++++++++++++ frontend/webapp/containers/overview/index.tsx | 1 + 3 files changed, 116 insertions(+), 108 deletions(-) create mode 100644 frontend/webapp/containers/overview/destination/new.destination.form.tsx diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx index f4082de12..3f30557fc 100644 --- a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx +++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx @@ -1,111 +1,7 @@ "use client"; -import React, { useEffect } from "react"; -import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; -import { useMutation, useQuery } from "react-query"; -import { - getDestination, - getDestinationsTypes, - setDestination, -} from "@/services"; -import { ManageDestination, OverviewHeader } from "@/components/overview"; -import { useNotification, useSectionData } from "@/hooks"; -import { useRouter, useSearchParams } from "next/navigation"; -import { styled } from "styled-components"; +import React from "react"; +import { NewDestinationForm } from "@/containers/overview"; -const DEST = "dest"; - -const NewDestinationContainer = styled.div` - padding: 20px 36px; -`; - -export default function NewDestinationFlow() { - const { sectionData, setSectionData } = useSectionData(null); - const { show, Notification } = useNotification(); - const { mutate } = useMutation((body) => setDestination(body)); - const searchParams = useSearchParams(); - const router = useRouter(); - - const { data: destinationType } = useQuery( - [QUERIES.API_DESTINATION_TYPE, sectionData?.type], - () => getDestination(sectionData?.type), - { - enabled: !!sectionData, - } - ); - - const { data: destinationsList } = useQuery( - [QUERIES.API_DESTINATION_TYPES], - getDestinationsTypes - ); - - useEffect(onPageLoad, [destinationsList]); - - function onPageLoad() { - const search = searchParams.get(DEST); - if (!destinationsList || !search) return; - - let currentData = null; - - for (const category of destinationsList.categories) { - if (currentData) { - break; - } - const filterItem = category.items.filter(({ type }) => type === search); - if (filterItem.length) { - currentData = filterItem[0]; - } - } - - setSectionData(currentData); - } - - function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { - show({ - type: NOTIFICATION.SUCCESS, - message, - }); - } - - function onError({ response }) { - const message = response?.data?.message; - show({ - type: NOTIFICATION.ERROR, - message, - }); - } - - function onSubmit(newDestination) { - const destination = { - ...newDestination, - type: sectionData.type, - }; - - mutate(destination, { - onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS), - onError, - }); - } - - function handleBackPress() { - router.back(); - } - - return ( - <> - - {destinationType && sectionData && ( - - - - )} - - - ); +export default function CreateNewDestinationPage() { + return ; } diff --git a/frontend/webapp/containers/overview/destination/new.destination.form.tsx b/frontend/webapp/containers/overview/destination/new.destination.form.tsx new file mode 100644 index 000000000..c88928126 --- /dev/null +++ b/frontend/webapp/containers/overview/destination/new.destination.form.tsx @@ -0,0 +1,111 @@ +"use client"; +import React, { useEffect } from "react"; +import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import { useMutation, useQuery } from "react-query"; +import { + getDestination, + getDestinationsTypes, + setDestination, +} from "@/services"; +import { ManageDestination, OverviewHeader } from "@/components/overview"; +import { useNotification, useSectionData } from "@/hooks"; +import { useRouter, useSearchParams } from "next/navigation"; +import { styled } from "styled-components"; + +const DEST = "dest"; + +const NewDestinationContainer = styled.div` + padding: 20px 36px; +`; + +export function NewDestinationForm() { + const { sectionData, setSectionData } = useSectionData(null); + const { show, Notification } = useNotification(); + const { mutate } = useMutation((body) => setDestination(body)); + const searchParams = useSearchParams(); + const router = useRouter(); + + const { data: destinationType } = useQuery( + [QUERIES.API_DESTINATION_TYPE, sectionData?.type], + () => getDestination(sectionData?.type), + { + enabled: !!sectionData, + } + ); + + const { data: destinationsList } = useQuery( + [QUERIES.API_DESTINATION_TYPES], + getDestinationsTypes + ); + + useEffect(onPageLoad, [destinationsList]); + + function onPageLoad() { + const search = searchParams.get(DEST); + if (!destinationsList || !search) return; + + let currentData = null; + + for (const category of destinationsList.categories) { + if (currentData) { + break; + } + const filterItem = category.items.filter(({ type }) => type === search); + if (filterItem.length) { + currentData = filterItem[0]; + } + } + + setSectionData(currentData); + } + + function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { + show({ + type: NOTIFICATION.SUCCESS, + message, + }); + } + + function onError({ response }) { + const message = response?.data?.message; + show({ + type: NOTIFICATION.ERROR, + message, + }); + } + + function onSubmit(newDestination) { + const destination = { + ...newDestination, + type: sectionData.type, + }; + + mutate(destination, { + onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS), + onError, + }); + } + + function handleBackPress() { + router.back(); + } + + return ( + <> + + {destinationType && sectionData && ( + + + + )} + + + ); +} diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx index e7895d4e4..15c133c5d 100644 --- a/frontend/webapp/containers/overview/index.tsx +++ b/frontend/webapp/containers/overview/index.tsx @@ -2,3 +2,4 @@ export { OverviewContainer } from "./overview/overview"; export { DestinationContainer } from "./destination/destination"; export { SourcesContainer } from "./sources/sources"; export { NewDestinationFlow } from "./destination/new.destination.flow"; +export { NewDestinationForm } from "./destination/new.destination.form"; From 5eb73615dcb46fe09d0bf881e695db1fdc31cb7e Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 3 Aug 2023 16:59:19 +0300 Subject: [PATCH 59/93] move page logic to container --- .../destinations/create/[id]/page.tsx | 2 - .../app/overview/destinations/create/page.tsx | 2 - .../app/overview/destinations/manage/page.tsx | 66 +------------------ .../destination/update.destination.flow.tsx | 60 ++++++++++++++--- frontend/webapp/containers/overview/index.tsx | 1 + 5 files changed, 54 insertions(+), 77 deletions(-) diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx index 3f30557fc..0a4722ee6 100644 --- a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx +++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx @@ -1,5 +1,3 @@ -"use client"; -import React from "react"; import { NewDestinationForm } from "@/containers/overview"; export default function CreateNewDestinationPage() { diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx index 3b9a92b41..3ec5946ca 100644 --- a/frontend/webapp/app/overview/destinations/create/page.tsx +++ b/frontend/webapp/app/overview/destinations/create/page.tsx @@ -1,5 +1,3 @@ -"use client"; -import React from "react"; import { NewDestinationFlow } from "@/containers/overview"; export default function CreateDestinationPage() { diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx index cd92c828f..ebe6d6220 100644 --- a/frontend/webapp/app/overview/destinations/manage/page.tsx +++ b/frontend/webapp/app/overview/destinations/manage/page.tsx @@ -1,67 +1,5 @@ -"use client"; -import React, { useEffect, useState } from "react"; -import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; -import { useNotification } from "@/hooks"; -import { useSearchParams } from "next/navigation"; -import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow"; -import { getDestinations } from "@/services"; -import { useQuery } from "react-query"; -import { KeyvalLoader } from "@/design.system"; - -const DEST = "dest"; +import { UpdateDestinationFlow } from "@/containers/overview"; export default function ManageDestinationPage() { - const [selectedDestination, setSelectedDestination] = useState(null); - const { show, Notification } = useNotification(); - - const { - isLoading: destinationLoading, - data: destinationList, - refetch, - } = useQuery([QUERIES.API_DESTINATIONS], getDestinations); - - const searchParams = useSearchParams(); - - useEffect(onPageLoad, [searchParams, destinationList]); - - function onPageLoad() { - const search = searchParams.get(DEST); - const currentDestination = destinationList?.filter( - ({ id }) => id === search - ); - if (currentDestination?.length) { - setSelectedDestination(currentDestination[0]); - } - } - - function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { - refetch(); - show({ - type: NOTIFICATION.SUCCESS, - message, - }); - } - - function onError({ response }) { - const message = response?.data?.message; - show({ - type: NOTIFICATION.ERROR, - message, - }); - } - - if (destinationLoading || !selectedDestination) { - return ; - } - - return ( - <> - - - - ); + return ; } diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx index d95fe7ac4..cc06ab91b 100644 --- a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx @@ -1,20 +1,22 @@ "use client"; -import React, { useMemo } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import { KeyvalLoader } from "@/design.system"; -import { OVERVIEW, QUERIES } from "@/utils/constants"; +import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; import { useMutation, useQuery } from "react-query"; import { getDestination, updateDestination } from "@/services"; import { ManageDestination } from "@/components/overview"; -import { deleteDestination } from "@/services/destinations"; +import { deleteDestination, getDestinations } from "@/services/destinations"; import { ManageDestinationWrapper } from "./destination.styled"; -import { useRouter } from "next/navigation"; +import { useRouter, useSearchParams } from "next/navigation"; +import { useNotification } from "@/hooks"; +const DEST = "dest"; + +export function UpdateDestinationFlow({}) { + const [selectedDestination, setSelectedDestination] = useState(null); -export default function UpdateDestinationFlow({ - selectedDestination, - onSuccess, - onError, -}) { const router = useRouter(); + const searchParams = useSearchParams(); + const { show, Notification } = useNotification(); const manageData = useMemo(() => { return { @@ -22,6 +24,7 @@ export default function UpdateDestinationFlow({ ...selectedDestination?.destination_type, }; }, [selectedDestination]); + const { isLoading: destinationTypeLoading, data: destinationType } = useQuery( [QUERIES.API_DESTINATION_TYPE, selectedDestination?.type], () => getDestination(selectedDestination?.type), @@ -30,6 +33,12 @@ export default function UpdateDestinationFlow({ } ); + const { + isLoading: destinationLoading, + data: destinationList, + refetch, + } = useQuery([QUERIES.API_DESTINATIONS], getDestinations); + const { mutate: handleUpdateDestination } = useMutation((body) => updateDestination(body, selectedDestination?.id) ); @@ -38,6 +47,8 @@ export default function UpdateDestinationFlow({ deleteDestination(selectedDestination?.id) ); + useEffect(onPageLoad, [searchParams, destinationList]); + function onDelete() { handleDeleteDestination(selectedDestination.id, { onSuccess: () => onSuccess(OVERVIEW.DESTINATION_DELETED_SUCCESS), @@ -57,6 +68,36 @@ export default function UpdateDestinationFlow({ }); } + function onPageLoad() { + const search = searchParams.get(DEST); + const currentDestination = destinationList?.filter( + ({ id }) => id === search + ); + if (currentDestination?.length) { + setSelectedDestination(currentDestination[0]); + } + } + + function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { + refetch(); + show({ + type: NOTIFICATION.SUCCESS, + message, + }); + } + + function onError({ response }) { + const message = response?.data?.message; + show({ + type: NOTIFICATION.ERROR, + message, + }); + } + + if (destinationLoading || !selectedDestination) { + return ; + } + return destinationTypeLoading ? ( ) : ( @@ -68,6 +109,7 @@ export default function UpdateDestinationFlow({ onSubmit={onSubmit} onDelete={onDelete} /> + ); } diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx index 15c133c5d..dc0b77e01 100644 --- a/frontend/webapp/containers/overview/index.tsx +++ b/frontend/webapp/containers/overview/index.tsx @@ -3,3 +3,4 @@ export { DestinationContainer } from "./destination/destination"; export { SourcesContainer } from "./sources/sources"; export { NewDestinationFlow } from "./destination/new.destination.flow"; export { NewDestinationForm } from "./destination/new.destination.form"; +export { UpdateDestinationFlow } from "./destination/update.destination.flow"; From 5fe763a44a6f506eeb8107e1e5d417a7f826b074 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 3 Aug 2023 17:00:39 +0300 Subject: [PATCH 60/93] WIP --- frontend/webapp/app/overview/destinations/page.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/webapp/app/overview/destinations/page.tsx b/frontend/webapp/app/overview/destinations/page.tsx index bb83b2d78..09f95a0aa 100644 --- a/frontend/webapp/app/overview/destinations/page.tsx +++ b/frontend/webapp/app/overview/destinations/page.tsx @@ -1,6 +1,5 @@ "use client"; import { DestinationContainer } from "@/containers/overview"; -import React from "react"; import { styled } from "styled-components"; const DestinationContainerWrapper = styled.div` From bfb54d8888c7b9ee314e41527a620f6c0392e920 Mon Sep 17 00:00:00 2001 From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com> Date: Thu, 3 Aug 2023 17:46:21 +0300 Subject: [PATCH 61/93] Task 168 refactor (#370) --- .../destinations/create/[id]/page.tsx | 112 +----------------- .../app/overview/destinations/create/page.tsx | 2 - .../app/overview/destinations/manage/page.tsx | 66 +---------- .../webapp/app/overview/destinations/page.tsx | 1 - frontend/webapp/app/overview/layout.tsx | 7 +- frontend/webapp/app/setup/layout.tsx | 8 ++ .../destination/new.destination.form.tsx | 111 +++++++++++++++++ .../destination/update.destination.flow.tsx | 60 ++++++++-- frontend/webapp/containers/overview/index.tsx | 3 + .../containers/overview/overview/overview.tsx | 4 +- frontend/webapp/public/favicon.ico | Bin 25931 -> 0 bytes frontend/webapp/public/next.svg | 1 - frontend/webapp/public/vercel.svg | 1 - frontend/webapp/utils/constants/config.tsx | 5 + frontend/webapp/utils/constants/index.tsx | 2 +- 15 files changed, 190 insertions(+), 193 deletions(-) create mode 100644 frontend/webapp/app/setup/layout.tsx create mode 100644 frontend/webapp/containers/overview/destination/new.destination.form.tsx delete mode 100644 frontend/webapp/public/favicon.ico delete mode 100644 frontend/webapp/public/next.svg delete mode 100644 frontend/webapp/public/vercel.svg diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx index f4082de12..0a4722ee6 100644 --- a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx +++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx @@ -1,111 +1,5 @@ -"use client"; -import React, { useEffect } from "react"; -import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; -import { useMutation, useQuery } from "react-query"; -import { - getDestination, - getDestinationsTypes, - setDestination, -} from "@/services"; -import { ManageDestination, OverviewHeader } from "@/components/overview"; -import { useNotification, useSectionData } from "@/hooks"; -import { useRouter, useSearchParams } from "next/navigation"; -import { styled } from "styled-components"; +import { NewDestinationForm } from "@/containers/overview"; -const DEST = "dest"; - -const NewDestinationContainer = styled.div` - padding: 20px 36px; -`; - -export default function NewDestinationFlow() { - const { sectionData, setSectionData } = useSectionData(null); - const { show, Notification } = useNotification(); - const { mutate } = useMutation((body) => setDestination(body)); - const searchParams = useSearchParams(); - const router = useRouter(); - - const { data: destinationType } = useQuery( - [QUERIES.API_DESTINATION_TYPE, sectionData?.type], - () => getDestination(sectionData?.type), - { - enabled: !!sectionData, - } - ); - - const { data: destinationsList } = useQuery( - [QUERIES.API_DESTINATION_TYPES], - getDestinationsTypes - ); - - useEffect(onPageLoad, [destinationsList]); - - function onPageLoad() { - const search = searchParams.get(DEST); - if (!destinationsList || !search) return; - - let currentData = null; - - for (const category of destinationsList.categories) { - if (currentData) { - break; - } - const filterItem = category.items.filter(({ type }) => type === search); - if (filterItem.length) { - currentData = filterItem[0]; - } - } - - setSectionData(currentData); - } - - function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { - show({ - type: NOTIFICATION.SUCCESS, - message, - }); - } - - function onError({ response }) { - const message = response?.data?.message; - show({ - type: NOTIFICATION.ERROR, - message, - }); - } - - function onSubmit(newDestination) { - const destination = { - ...newDestination, - type: sectionData.type, - }; - - mutate(destination, { - onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS), - onError, - }); - } - - function handleBackPress() { - router.back(); - } - - return ( - <> - - {destinationType && sectionData && ( - - - - )} - - - ); +export default function CreateNewDestinationPage() { + return ; } diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx index 3b9a92b41..3ec5946ca 100644 --- a/frontend/webapp/app/overview/destinations/create/page.tsx +++ b/frontend/webapp/app/overview/destinations/create/page.tsx @@ -1,5 +1,3 @@ -"use client"; -import React from "react"; import { NewDestinationFlow } from "@/containers/overview"; export default function CreateDestinationPage() { diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx index cd92c828f..ebe6d6220 100644 --- a/frontend/webapp/app/overview/destinations/manage/page.tsx +++ b/frontend/webapp/app/overview/destinations/manage/page.tsx @@ -1,67 +1,5 @@ -"use client"; -import React, { useEffect, useState } from "react"; -import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; -import { useNotification } from "@/hooks"; -import { useSearchParams } from "next/navigation"; -import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow"; -import { getDestinations } from "@/services"; -import { useQuery } from "react-query"; -import { KeyvalLoader } from "@/design.system"; - -const DEST = "dest"; +import { UpdateDestinationFlow } from "@/containers/overview"; export default function ManageDestinationPage() { - const [selectedDestination, setSelectedDestination] = useState(null); - const { show, Notification } = useNotification(); - - const { - isLoading: destinationLoading, - data: destinationList, - refetch, - } = useQuery([QUERIES.API_DESTINATIONS], getDestinations); - - const searchParams = useSearchParams(); - - useEffect(onPageLoad, [searchParams, destinationList]); - - function onPageLoad() { - const search = searchParams.get(DEST); - const currentDestination = destinationList?.filter( - ({ id }) => id === search - ); - if (currentDestination?.length) { - setSelectedDestination(currentDestination[0]); - } - } - - function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { - refetch(); - show({ - type: NOTIFICATION.SUCCESS, - message, - }); - } - - function onError({ response }) { - const message = response?.data?.message; - show({ - type: NOTIFICATION.ERROR, - message, - }); - } - - if (destinationLoading || !selectedDestination) { - return ; - } - - return ( - <> - - - - ); + return ; } diff --git a/frontend/webapp/app/overview/destinations/page.tsx b/frontend/webapp/app/overview/destinations/page.tsx index bb83b2d78..09f95a0aa 100644 --- a/frontend/webapp/app/overview/destinations/page.tsx +++ b/frontend/webapp/app/overview/destinations/page.tsx @@ -1,6 +1,5 @@ "use client"; import { DestinationContainer } from "@/containers/overview"; -import React from "react"; import { styled } from "styled-components"; const DestinationContainerWrapper = styled.div` diff --git a/frontend/webapp/app/overview/layout.tsx b/frontend/webapp/app/overview/layout.tsx index 2159907df..64ff4dd3b 100644 --- a/frontend/webapp/app/overview/layout.tsx +++ b/frontend/webapp/app/overview/layout.tsx @@ -1,6 +1,6 @@ -// "use client"; import { Menu } from "@/components/side.menu"; import theme from "@/styles/palette"; +import { METADATA } from "@/utils/constants"; import { Metadata } from "next"; import React from "react"; @@ -15,9 +15,8 @@ const CHILDREN_STYLE = { width: "100%", height: "93%", }; -export const metadata: Metadata = { - title: "Odigos", -}; + +export const metadata: Metadata = METADATA; export default function Layout({ children }: { children: React.ReactNode }) { return ( diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx new file mode 100644 index 000000000..a4ee950c2 --- /dev/null +++ b/frontend/webapp/app/setup/layout.tsx @@ -0,0 +1,8 @@ +import { METADATA } from "@/utils/constants"; +import { Metadata } from "next"; + +export const metadata: Metadata = METADATA; + +export default function Layout({ children }: { children: React.ReactNode }) { + return
{children}
; +} diff --git a/frontend/webapp/containers/overview/destination/new.destination.form.tsx b/frontend/webapp/containers/overview/destination/new.destination.form.tsx new file mode 100644 index 000000000..c88928126 --- /dev/null +++ b/frontend/webapp/containers/overview/destination/new.destination.form.tsx @@ -0,0 +1,111 @@ +"use client"; +import React, { useEffect } from "react"; +import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import { useMutation, useQuery } from "react-query"; +import { + getDestination, + getDestinationsTypes, + setDestination, +} from "@/services"; +import { ManageDestination, OverviewHeader } from "@/components/overview"; +import { useNotification, useSectionData } from "@/hooks"; +import { useRouter, useSearchParams } from "next/navigation"; +import { styled } from "styled-components"; + +const DEST = "dest"; + +const NewDestinationContainer = styled.div` + padding: 20px 36px; +`; + +export function NewDestinationForm() { + const { sectionData, setSectionData } = useSectionData(null); + const { show, Notification } = useNotification(); + const { mutate } = useMutation((body) => setDestination(body)); + const searchParams = useSearchParams(); + const router = useRouter(); + + const { data: destinationType } = useQuery( + [QUERIES.API_DESTINATION_TYPE, sectionData?.type], + () => getDestination(sectionData?.type), + { + enabled: !!sectionData, + } + ); + + const { data: destinationsList } = useQuery( + [QUERIES.API_DESTINATION_TYPES], + getDestinationsTypes + ); + + useEffect(onPageLoad, [destinationsList]); + + function onPageLoad() { + const search = searchParams.get(DEST); + if (!destinationsList || !search) return; + + let currentData = null; + + for (const category of destinationsList.categories) { + if (currentData) { + break; + } + const filterItem = category.items.filter(({ type }) => type === search); + if (filterItem.length) { + currentData = filterItem[0]; + } + } + + setSectionData(currentData); + } + + function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { + show({ + type: NOTIFICATION.SUCCESS, + message, + }); + } + + function onError({ response }) { + const message = response?.data?.message; + show({ + type: NOTIFICATION.ERROR, + message, + }); + } + + function onSubmit(newDestination) { + const destination = { + ...newDestination, + type: sectionData.type, + }; + + mutate(destination, { + onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS), + onError, + }); + } + + function handleBackPress() { + router.back(); + } + + return ( + <> + + {destinationType && sectionData && ( + + + + )} + + + ); +} diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx index d95fe7ac4..66259fe3e 100644 --- a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx @@ -1,20 +1,22 @@ "use client"; -import React, { useMemo } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import { KeyvalLoader } from "@/design.system"; -import { OVERVIEW, QUERIES } from "@/utils/constants"; +import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; import { useMutation, useQuery } from "react-query"; import { getDestination, updateDestination } from "@/services"; import { ManageDestination } from "@/components/overview"; -import { deleteDestination } from "@/services/destinations"; +import { deleteDestination, getDestinations } from "@/services/destinations"; import { ManageDestinationWrapper } from "./destination.styled"; -import { useRouter } from "next/navigation"; +import { useRouter, useSearchParams } from "next/navigation"; +import { useNotification } from "@/hooks"; +const DEST = "dest"; + +export function UpdateDestinationFlow() { + const [selectedDestination, setSelectedDestination] = useState(null); -export default function UpdateDestinationFlow({ - selectedDestination, - onSuccess, - onError, -}) { const router = useRouter(); + const searchParams = useSearchParams(); + const { show, Notification } = useNotification(); const manageData = useMemo(() => { return { @@ -22,6 +24,7 @@ export default function UpdateDestinationFlow({ ...selectedDestination?.destination_type, }; }, [selectedDestination]); + const { isLoading: destinationTypeLoading, data: destinationType } = useQuery( [QUERIES.API_DESTINATION_TYPE, selectedDestination?.type], () => getDestination(selectedDestination?.type), @@ -30,6 +33,12 @@ export default function UpdateDestinationFlow({ } ); + const { + isLoading: destinationLoading, + data: destinationList, + refetch, + } = useQuery([QUERIES.API_DESTINATIONS], getDestinations); + const { mutate: handleUpdateDestination } = useMutation((body) => updateDestination(body, selectedDestination?.id) ); @@ -38,6 +47,8 @@ export default function UpdateDestinationFlow({ deleteDestination(selectedDestination?.id) ); + useEffect(onPageLoad, [searchParams, destinationList]); + function onDelete() { handleDeleteDestination(selectedDestination.id, { onSuccess: () => onSuccess(OVERVIEW.DESTINATION_DELETED_SUCCESS), @@ -57,6 +68,36 @@ export default function UpdateDestinationFlow({ }); } + function onPageLoad() { + const search = searchParams.get(DEST); + const currentDestination = destinationList?.filter( + ({ id }) => id === search + ); + if (currentDestination?.length) { + setSelectedDestination(currentDestination[0]); + } + } + + function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { + refetch(); + show({ + type: NOTIFICATION.SUCCESS, + message, + }); + } + + function onError({ response }) { + const message = response?.data?.message; + show({ + type: NOTIFICATION.ERROR, + message, + }); + } + + if (destinationLoading || !selectedDestination) { + return ; + } + return destinationTypeLoading ? ( ) : ( @@ -68,6 +109,7 @@ export default function UpdateDestinationFlow({ onSubmit={onSubmit} onDelete={onDelete} /> + ); } diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx index e7895d4e4..9c57b45c8 100644 --- a/frontend/webapp/containers/overview/index.tsx +++ b/frontend/webapp/containers/overview/index.tsx @@ -2,3 +2,6 @@ export { OverviewContainer } from "./overview/overview"; export { DestinationContainer } from "./destination/destination"; export { SourcesContainer } from "./sources/sources"; export { NewDestinationFlow } from "./destination/new.destination.flow"; +export { NewDestinationForm } from "./destination/new.destination.form"; +export { UpdateDestinationFlow } from "./destination/update.destination.flow"; + diff --git a/frontend/webapp/containers/overview/overview/overview.tsx b/frontend/webapp/containers/overview/overview/overview.tsx index 4be89af7f..04a979706 100644 --- a/frontend/webapp/containers/overview/overview/overview.tsx +++ b/frontend/webapp/containers/overview/overview/overview.tsx @@ -47,7 +47,9 @@ export function OverviewContainer() { containerHeight, destinations, "destination", - DESTINATION_NODE_HEIGHT, + destinations?.length > 1 + ? DESTINATION_NODE_HEIGHT + : NAMESPACE_NODE_HEIGHT, DESTINATION_NODE_POSITION ), [destinations, containerHeight] diff --git a/frontend/webapp/public/favicon.ico b/frontend/webapp/public/favicon.ico deleted file mode 100644 index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 25931 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 LrJugUA?W`A8`#=m diff --git a/frontend/webapp/public/next.svg b/frontend/webapp/public/next.svg deleted file mode 100644 index 5174b28c5..000000000 --- a/frontend/webapp/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/webapp/public/vercel.svg b/frontend/webapp/public/vercel.svg deleted file mode 100644 index d2f842227..000000000 --- a/frontend/webapp/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/webapp/utils/constants/config.tsx b/frontend/webapp/utils/constants/config.tsx index f3aebd36f..0cda26a5d 100644 --- a/frontend/webapp/utils/constants/config.tsx +++ b/frontend/webapp/utils/constants/config.tsx @@ -3,3 +3,8 @@ export const CONFIG = { APPS_SELECTED: "APPS_SELECTED", FINISHED: "FINISHED", }; + +export const METADATA = { + title: "Odigos", + icons: "https://d2q89wckrml3k4.cloudfront.net/logo.png", +}; diff --git a/frontend/webapp/utils/constants/index.tsx b/frontend/webapp/utils/constants/index.tsx index 90fdf2c71..253c82b8a 100644 --- a/frontend/webapp/utils/constants/index.tsx +++ b/frontend/webapp/utils/constants/index.tsx @@ -1,4 +1,4 @@ export { ROUTES } from "./routes"; -export { CONFIG } from "./config"; +export { CONFIG, METADATA } from "./config"; export { SETUP, OVERVIEW, NOTIFICATION, ACTION } from "./string"; export { API, QUERIES } from "./urls"; From f15d28d7181c338b51642014e09eacac88014078 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 3 Aug 2023 17:57:55 +0300 Subject: [PATCH 62/93] WIP --- frontend/webapp/app/layout.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx index 050b0c95c..efe4c8326 100644 --- a/frontend/webapp/app/layout.tsx +++ b/frontend/webapp/app/layout.tsx @@ -3,7 +3,6 @@ import React from "react"; import { ThemeProvider } from "styled-components"; import theme from "@/styles/palette"; import { QueryClient, QueryClientProvider } from "react-query"; -import Head from "next/head"; const LAYOUT_STYLE: React.CSSProperties = { margin: 0, @@ -31,9 +30,6 @@ export default function RootLayout({ - - Odigos - {children} From c9d170e31e6b0a25bce15c2c51c5f6ea9c4baddf Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Sun, 6 Aug 2023 21:04:35 +0300 Subject: [PATCH 63/93] edit resource name --- .../app/overview/sources/manage/page.tsx | 104 ++++++++++++------ .../app/overview/sources/manage/styled.tsx | 12 ++ .../manage.source.header.tsx | 70 +----------- .../sources.manage.list.tsx | 4 +- .../design.system/input/action.input.tsx | 3 +- frontend/webapp/services/api.tsx | 4 + frontend/webapp/services/sources.tsx | 20 +++- frontend/webapp/types/sources.tsx | 1 + frontend/webapp/utils/constants/string.tsx | 1 + 9 files changed, 118 insertions(+), 101 deletions(-) diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx index a8de98f08..6d47bf8d4 100644 --- a/frontend/webapp/app/overview/sources/manage/page.tsx +++ b/frontend/webapp/app/overview/sources/manage/page.tsx @@ -1,56 +1,80 @@ "use client"; import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header"; -import { getSources } from "@/services"; -import { - NOTIFICATION, - OVERVIEW, - QUERIES, - ROUTES, - SETUP, -} from "@/utils/constants"; +import { ACTION, NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants"; import { useRouter, useSearchParams } from "next/navigation"; import React, { useEffect, useState } from "react"; -import { useMutation, useQuery } from "react-query"; -import { ManageSourcePageContainer, BackButtonWrapper } from "./styled"; +import { useMutation } from "react-query"; +import { + ManageSourcePageContainer, + BackButtonWrapper, + FieldWrapper, + ButtonWrapper, +} from "./styled"; import { LANGUAGES_LOGOS } from "@/assets/images"; import { Back } from "@/assets/icons/overview"; -import { KeyvalText } from "@/design.system"; -import { ManagedSource } from "@/types/sources"; +import { + KeyvalButton, + KeyvalInput, + KeyvalLoader, + KeyvalText, +} from "@/design.system"; import { DeleteSource } from "@/components/overview"; -import { deleteSource } from "@/services/sources"; +import { deleteSource, getSource, patchSources } from "@/services/sources"; import { useNotification } from "@/hooks"; - -const SOURCE = "source"; +import theme from "@/styles/palette"; +import { ManagedSource } from "@/types/sources"; export default function ManageSourcePage() { - const [currentSource, setCurrentSource] = useState( - null - ); + const [inputValue, setInputValue] = useState(""); + const [currentSource, setCurrentSource] = useState(); const searchParams = useSearchParams(); const router = useRouter(); - const { data: sources, refetch } = useQuery( - [QUERIES.API_SOURCES], - getSources - ); + const { show, Notification } = useNotification(); - const { mutate } = useMutation(() => + const { mutate: handleDeleteSource } = useMutation(() => deleteSource( currentSource?.namespace || "", currentSource?.kind || "", currentSource?.name || "" ) ); - useEffect(onPageLoad, [sources]); + + const { mutate: editSource } = useMutation(() => + patchSources( + currentSource?.namespace || "", + currentSource?.kind || "", + currentSource?.name || "", + { reported_name: inputValue } + ) + ); + useEffect(() => { + onPageLoad(); + }, [searchParams]); useEffect(() => { - console.log({ currentSource }); + setInputValue(currentSource?.reported_name || ""); }, [currentSource]); - function onPageLoad() { - const search = searchParams.get(SOURCE); - const source = sources?.find((item) => item.name === search); - source && setCurrentSource(source); + async function onPageLoad() { + const name = searchParams.get("name") || ""; + const kind = searchParams.get("kind") || ""; + const namespace = searchParams.get("namespace") || ""; + + const currentSource = await getSource(namespace, kind, name); + setCurrentSource(currentSource); + } + + function onSaveClick(newName) { + editSource(newName, { + onError, + onSuccess: () => + show({ + type: NOTIFICATION.SUCCESS, + message: OVERVIEW.SOURCE_UPDATE_SUCCESS, + }), + }); } + function onError({ response }) { const message = response?.data?.message; show({ @@ -62,7 +86,6 @@ export default function ManageSourcePage() { function onSuccess() { setTimeout(() => { router.back(); - refetch(); }, 1000); show({ type: NOTIFICATION.SUCCESS, @@ -70,12 +93,16 @@ export default function ManageSourcePage() { }); } function onDelete() { - mutate(undefined, { + handleDeleteSource(undefined, { onSuccess, onError, }); } + if (!currentSource) { + return ; + } + return ( router.back()}> @@ -84,12 +111,25 @@ export default function ManageSourcePage() { {currentSource && ( )} + + setInputValue(e)} + /> + + + + + {ACTION.SAVE} + + + theme.colors.secondary}; - } -`; - -const ActionInputWrapper = styled.div` - width: 80%; - height: 49px; -`; - const IMAGE_STYLE: React.CSSProperties = { backgroundColor: "#fff", padding: 4, @@ -49,48 +25,10 @@ const IMAGE_STYLE: React.CSSProperties = { marginLeft: 16, }; -export function ManageSourceHeader({ image_url, name }) { - const [showEditInput, setShowEditInput] = useState(true); - const [inputValue, setInputValue] = useState(name); - const containerRef = useRef(null); - const handleClickOutside = () => { - !showEditInput && handleSave(); - }; - - useOnClickOutside(containerRef, handleClickOutside); - - function handleSave() { - setShowEditInput(true); - } - - function handleInputChange(value) { - setInputValue(value); - } - +export function ManageSourceHeader({ image_url }) { return ( - + - {showEditInput ? ( - <> - - - {name} - - - - setShowEditInput(false)}> - - - - ) : ( - - handleInputChange(e)} - onAction={handleSave} - /> - - )} ); } diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx index dff5f790f..30515591f 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx @@ -23,7 +23,9 @@ export function SourcesManagedList({ data = [] }: SourcesManagedListProps) { key={source?.name} item={source} onClick={() => - router.push(`${ROUTES.MANAGE_SOURCE}?source=${source?.name}`) + router.push( + `${ROUTES.MANAGE_SOURCE}?name=${source?.name}&kind=${source?.kind}&namespace=${source?.namespace}` + ) } /> )); diff --git a/frontend/webapp/design.system/input/action.input.tsx b/frontend/webapp/design.system/input/action.input.tsx index 4bede03d6..308468194 100644 --- a/frontend/webapp/design.system/input/action.input.tsx +++ b/frontend/webapp/design.system/input/action.input.tsx @@ -17,6 +17,7 @@ export function KeyvalActionInput({ value, onChange, style = {}, + onAction, }: InputProps): JSX.Element { function handleChange(event: ChangeEvent): void { onChange(event.target.value); @@ -31,7 +32,7 @@ export function KeyvalActionInput({ autoComplete="off" /> - + {ACTION.SAVE} diff --git a/frontend/webapp/services/api.tsx b/frontend/webapp/services/api.tsx index d30c758c3..354663e64 100644 --- a/frontend/webapp/services/api.tsx +++ b/frontend/webapp/services/api.tsx @@ -30,3 +30,7 @@ export async function httpDelete(url: string) { return data; } } + +export async function patch(url: string, body: any) { + await axios.patch(url, body); +} diff --git a/frontend/webapp/services/sources.tsx b/frontend/webapp/services/sources.tsx index fc7fd5050..87e0aedf7 100644 --- a/frontend/webapp/services/sources.tsx +++ b/frontend/webapp/services/sources.tsx @@ -1,5 +1,5 @@ import { API } from "@/utils/constants"; -import { get, post, httpDelete } from "./api"; +import { get, post, httpDelete, patch } from "./api"; import { SelectedSources } from "@/types/sources"; export async function getNamespaces() { @@ -18,6 +18,12 @@ export async function getSources() { return await get(API.SOURCES); } +export async function getSource(namespace: string, kind: string, name: string) { + return await get( + `${API.SOURCES}/namespace/${namespace}/kind/${kind}/name/${name}` + ); +} + export async function deleteSource( namespace: string, kind: string, @@ -27,3 +33,15 @@ export async function deleteSource( `${API.SOURCES}/namespace/${namespace}/kind/${kind}/name/${name}` ); } + +export async function patchSources( + namespace: string, + kind: string, + name: string, + body: any +) { + patch( + `${API.SOURCES}/namespace/${namespace}/kind/${kind}/name/${name}`, + body + ); +} diff --git a/frontend/webapp/types/sources.tsx b/frontend/webapp/types/sources.tsx index 7906c4733..b52c0cea0 100644 --- a/frontend/webapp/types/sources.tsx +++ b/frontend/webapp/types/sources.tsx @@ -2,6 +2,7 @@ export interface ManagedSource { kind: string; name: string; namespace: string; + reported_name?: string; languages: [ { container_name: string; diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx index 3227c2b95..f5070b409 100644 --- a/frontend/webapp/utils/constants/string.tsx +++ b/frontend/webapp/utils/constants/string.tsx @@ -83,6 +83,7 @@ export const OVERVIEW = { DELETE_BUTTON: "I want to delete this destination", CONFIRM_SOURCE_DELETE: "I want to delete this source", CONNECT: "Connect", + REPORTED_NAME: "Reported Name", }; export const ACTION = { From 3b8983c51787cd46bc648248191da2eeaa9cf370 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Sun, 6 Aug 2023 21:17:43 +0300 Subject: [PATCH 64/93] refactor sources| --- .../app/overview/sources/create/page.tsx | 39 +---- .../app/overview/sources/manage/page.tsx | 143 +---------------- frontend/webapp/containers/overview/index.tsx | 3 +- .../overview/sources/new.source.flow.tsx | 2 +- .../sources/sources.list.container.tsx | 40 +++++ .../overview/sources/sources.styled.tsx | 26 +++ .../overview/sources/update.source.form.tsx | 149 ++++++++++++++++++ 7 files changed, 223 insertions(+), 179 deletions(-) create mode 100644 frontend/webapp/containers/overview/sources/sources.list.container.tsx create mode 100644 frontend/webapp/containers/overview/sources/update.source.form.tsx diff --git a/frontend/webapp/app/overview/sources/create/page.tsx b/frontend/webapp/app/overview/sources/create/page.tsx index 9c83bfc82..5267b45b7 100644 --- a/frontend/webapp/app/overview/sources/create/page.tsx +++ b/frontend/webapp/app/overview/sources/create/page.tsx @@ -1,40 +1,5 @@ -"use client"; -import React from "react"; -import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; -import { OverviewHeader } from "@/components/overview"; -import { useNotification } from "@/hooks"; -import { useQuery } from "react-query"; -import { getSources } from "@/services"; -import { NewSourceFlow } from "@/containers/overview/sources/new.source.flow"; -import { useRouter } from "next/navigation"; +import { SourcesListContainer } from "@/containers/overview"; export default function CreateNewSourcesPage() { - const { show, Notification } = useNotification(); - const router = useRouter(); - const { data: sources, refetch } = useQuery( - [QUERIES.API_SOURCES], - getSources - ); - - function onNewSourceSuccess() { - setTimeout(() => { - router.back(); - refetch(); - }, 1000); - show({ - type: NOTIFICATION.SUCCESS, - message: OVERVIEW.SOURCE_CREATED_SUCCESS, - }); - } - - return ( - <> - router.back()} - /> - - - - ); + return ; } diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx index 6d47bf8d4..386d1629f 100644 --- a/frontend/webapp/app/overview/sources/manage/page.tsx +++ b/frontend/webapp/app/overview/sources/manage/page.tsx @@ -1,143 +1,6 @@ -"use client"; -import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header"; -import { ACTION, NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants"; -import { useRouter, useSearchParams } from "next/navigation"; -import React, { useEffect, useState } from "react"; -import { useMutation } from "react-query"; -import { - ManageSourcePageContainer, - BackButtonWrapper, - FieldWrapper, - ButtonWrapper, -} from "./styled"; -import { LANGUAGES_LOGOS } from "@/assets/images"; -import { Back } from "@/assets/icons/overview"; -import { - KeyvalButton, - KeyvalInput, - KeyvalLoader, - KeyvalText, -} from "@/design.system"; -import { DeleteSource } from "@/components/overview"; -import { deleteSource, getSource, patchSources } from "@/services/sources"; -import { useNotification } from "@/hooks"; -import theme from "@/styles/palette"; -import { ManagedSource } from "@/types/sources"; +import React from "react"; +import { UpdateSourceForm } from "@/containers/overview"; export default function ManageSourcePage() { - const [inputValue, setInputValue] = useState(""); - const [currentSource, setCurrentSource] = useState(); - const searchParams = useSearchParams(); - const router = useRouter(); - - const { show, Notification } = useNotification(); - const { mutate: handleDeleteSource } = useMutation(() => - deleteSource( - currentSource?.namespace || "", - currentSource?.kind || "", - currentSource?.name || "" - ) - ); - - const { mutate: editSource } = useMutation(() => - patchSources( - currentSource?.namespace || "", - currentSource?.kind || "", - currentSource?.name || "", - { reported_name: inputValue } - ) - ); - useEffect(() => { - onPageLoad(); - }, [searchParams]); - - useEffect(() => { - setInputValue(currentSource?.reported_name || ""); - }, [currentSource]); - - async function onPageLoad() { - const name = searchParams.get("name") || ""; - const kind = searchParams.get("kind") || ""; - const namespace = searchParams.get("namespace") || ""; - - const currentSource = await getSource(namespace, kind, name); - setCurrentSource(currentSource); - } - - function onSaveClick(newName) { - editSource(newName, { - onError, - onSuccess: () => - show({ - type: NOTIFICATION.SUCCESS, - message: OVERVIEW.SOURCE_UPDATE_SUCCESS, - }), - }); - } - - function onError({ response }) { - const message = response?.data?.message; - show({ - type: NOTIFICATION.ERROR, - message, - }); - } - - function onSuccess() { - setTimeout(() => { - router.back(); - }, 1000); - show({ - type: NOTIFICATION.SUCCESS, - message: OVERVIEW.SOURCE_DELETED_SUCCESS, - }); - } - function onDelete() { - handleDeleteSource(undefined, { - onSuccess, - onError, - }); - } - - if (!currentSource) { - return ; - } - - return ( - - router.back()}> - - {SETUP.BACK} - - {currentSource && ( - - )} - - setInputValue(e)} - /> - - - - - {ACTION.SAVE} - - - - - - - ); + return ; } diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx index 9c57b45c8..61a3731ef 100644 --- a/frontend/webapp/containers/overview/index.tsx +++ b/frontend/webapp/containers/overview/index.tsx @@ -4,4 +4,5 @@ export { SourcesContainer } from "./sources/sources"; export { NewDestinationFlow } from "./destination/new.destination.flow"; export { NewDestinationForm } from "./destination/new.destination.form"; export { UpdateDestinationFlow } from "./destination/update.destination.flow"; - +export { UpdateSourceForm } from "./sources/update.source.form"; +export { SourcesListContainer } from "./sources/sources.list.container"; diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx index 3b5468b9a..3c0dd61a0 100644 --- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx +++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx @@ -9,7 +9,7 @@ import { useMutation } from "react-query"; import { setNamespaces } from "@/services"; import { SelectedSources } from "@/types/sources"; -export function NewSourceFlow({ onSuccess, sources }) { +export function NewSourcesList({ onSuccess, sources }) { const { sectionData, setSectionData, totalSelected } = useSectionData({}); const { mutate } = useMutation((body: SelectedSources) => setNamespaces(body) diff --git a/frontend/webapp/containers/overview/sources/sources.list.container.tsx b/frontend/webapp/containers/overview/sources/sources.list.container.tsx new file mode 100644 index 000000000..6d87ff086 --- /dev/null +++ b/frontend/webapp/containers/overview/sources/sources.list.container.tsx @@ -0,0 +1,40 @@ +"use client"; +import React from "react"; +import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import { OverviewHeader } from "@/components/overview"; +import { useNotification } from "@/hooks"; +import { useQuery } from "react-query"; +import { getSources } from "@/services"; +import { NewSourcesList } from "@/containers/overview/sources/new.source.flow"; +import { useRouter } from "next/navigation"; + +export function SourcesListContainer() { + const { show, Notification } = useNotification(); + const router = useRouter(); + const { data: sources, refetch } = useQuery( + [QUERIES.API_SOURCES], + getSources + ); + + function onNewSourceSuccess() { + setTimeout(() => { + router.back(); + refetch(); + }, 1000); + show({ + type: NOTIFICATION.SUCCESS, + message: OVERVIEW.SOURCE_CREATED_SUCCESS, + }); + } + + return ( + <> + router.back()} + /> + + + + ); +} diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx index d07f83647..705f4b2e7 100644 --- a/frontend/webapp/containers/overview/sources/sources.styled.tsx +++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx @@ -22,3 +22,29 @@ export const ButtonWrapper = styled.div` right: 32px; top: 40px; `; + +export const ManageSourcePageContainer = styled.div` + padding: 32px; +`; + +export const BackButtonWrapper = styled.div` + display: flex; + width: fit-content; + align-items: center; + cursor: pointer; + p { + cursor: pointer !important; + } +`; + +export const FieldWrapper = styled.div` + height: 36px; + width: 348px; + margin-bottom: 64px; +`; + +export const SaveSourceButtonWrapper = styled.div` + margin-top: 48px; + height: 36px; + width: 362px; +`; diff --git a/frontend/webapp/containers/overview/sources/update.source.form.tsx b/frontend/webapp/containers/overview/sources/update.source.form.tsx new file mode 100644 index 000000000..e563177c7 --- /dev/null +++ b/frontend/webapp/containers/overview/sources/update.source.form.tsx @@ -0,0 +1,149 @@ +"use client"; +import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header"; +import { ACTION, NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants"; +import { useRouter, useSearchParams } from "next/navigation"; +import React, { useEffect, useState } from "react"; +import { useMutation } from "react-query"; +import { + ManageSourcePageContainer, + BackButtonWrapper, + FieldWrapper, + SaveSourceButtonWrapper, +} from "./sources.styled"; +import { LANGUAGES_LOGOS } from "@/assets/images"; +import { Back } from "@/assets/icons/overview"; +import { + KeyvalButton, + KeyvalInput, + KeyvalLoader, + KeyvalText, +} from "@/design.system"; +import { DeleteSource } from "@/components/overview"; +import { deleteSource, getSource, patchSources } from "@/services/sources"; +import { useNotification } from "@/hooks"; +import theme from "@/styles/palette"; +import { ManagedSource } from "@/types/sources"; + +const NAME = "name"; +const KIND = "kind"; +const NAMESPACE = "namespace"; + +export function UpdateSourceForm() { + const [inputValue, setInputValue] = useState(""); + const [currentSource, setCurrentSource] = useState(); + + const searchParams = useSearchParams(); + const router = useRouter(); + const { show, Notification } = useNotification(); + + const { mutate: handleDeleteSource } = useMutation(() => + deleteSource( + currentSource?.namespace || "", + currentSource?.kind || "", + currentSource?.name || "" + ) + ); + + const { mutate: editSource } = useMutation(() => + patchSources( + currentSource?.namespace || "", + currentSource?.kind || "", + currentSource?.name || "", + { reported_name: inputValue } + ) + ); + useEffect(() => { + onPageLoad(); + }, [searchParams]); + + useEffect(() => { + setInputValue(currentSource?.reported_name || ""); + }, [currentSource]); + + async function onPageLoad() { + const name = searchParams.get(NAME) || ""; + const kind = searchParams.get(KIND) || ""; + const namespace = searchParams.get(NAMESPACE) || ""; + + const currentSource = await getSource(namespace, kind, name); + setCurrentSource(currentSource); + } + + function onSaveClick(newName) { + editSource(newName, { + onError, + onSuccess: () => + show({ + type: NOTIFICATION.SUCCESS, + message: OVERVIEW.SOURCE_UPDATE_SUCCESS, + }), + }); + } + + function onError({ response }) { + const message = response?.data?.message; + show({ + type: NOTIFICATION.ERROR, + message, + }); + } + + function onSuccess() { + setTimeout(() => { + router.back(); + }, 1000); + show({ + type: NOTIFICATION.SUCCESS, + message: OVERVIEW.SOURCE_DELETED_SUCCESS, + }); + } + + function onDelete() { + handleDeleteSource(undefined, { + onSuccess, + onError, + }); + } + + if (!currentSource) { + return ; + } + + return ( + + router.back()}> + + {SETUP.BACK} + + {currentSource && ( + + )} + + setInputValue(e)} + /> + + + + + {ACTION.SAVE} + + + + + + + ); +} From 0dbc53da9be6a13c501b7c98aaf62fdb8e6162d0 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 7 Aug 2023 09:21:22 +0300 Subject: [PATCH 65/93] change files names --- frontend/webapp/app/overview/destinations/create/page.tsx | 4 ++-- .../{new.destination.flow.tsx => new.destination.list.tsx} | 2 +- frontend/webapp/containers/overview/index.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) rename frontend/webapp/containers/overview/destination/{new.destination.flow.tsx => new.destination.list.tsx} (95%) diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx index 3ec5946ca..516b69bf0 100644 --- a/frontend/webapp/app/overview/destinations/create/page.tsx +++ b/frontend/webapp/app/overview/destinations/create/page.tsx @@ -1,5 +1,5 @@ -import { NewDestinationFlow } from "@/containers/overview"; +import { NewDestinationList } from "@/containers/overview"; export default function CreateDestinationPage() { - return ; + return ; } diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.list.tsx similarity index 95% rename from frontend/webapp/containers/overview/destination/new.destination.flow.tsx rename to frontend/webapp/containers/overview/destination/new.destination.list.tsx index 27c0dddc7..3f8821ed7 100644 --- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destination/new.destination.list.tsx @@ -6,7 +6,7 @@ import { DestinationSection } from "@/containers/setup/destination/destination.s import { NewDestinationContainer } from "./destination.styled"; import { useRouter } from "next/navigation"; -export function NewDestinationFlow() { +export function NewDestinationList() { const router = useRouter(); return ( diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx index 61a3731ef..6fe210b98 100644 --- a/frontend/webapp/containers/overview/index.tsx +++ b/frontend/webapp/containers/overview/index.tsx @@ -1,7 +1,7 @@ export { OverviewContainer } from "./overview/overview"; export { DestinationContainer } from "./destination/destination"; export { SourcesContainer } from "./sources/sources"; -export { NewDestinationFlow } from "./destination/new.destination.flow"; +export { NewDestinationList } from "./destination/new.destination.list"; export { NewDestinationForm } from "./destination/new.destination.form"; export { UpdateDestinationFlow } from "./destination/update.destination.flow"; export { UpdateSourceForm } from "./sources/update.source.form"; From bb9c9d51b1156b748af4110fb2a956393c96065a Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 7 Aug 2023 09:33:39 +0300 Subject: [PATCH 66/93] change files names --- frontend/webapp/app/overview/sources/page.tsx | 4 ++-- frontend/webapp/containers/overview/index.tsx | 2 +- .../sources/{sources.tsx => instrumented.sources.tsx} | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) rename frontend/webapp/containers/overview/sources/{sources.tsx => instrumented.sources.tsx} (93%) diff --git a/frontend/webapp/app/overview/sources/page.tsx b/frontend/webapp/app/overview/sources/page.tsx index 77d0c32f2..07a0ac7cb 100644 --- a/frontend/webapp/app/overview/sources/page.tsx +++ b/frontend/webapp/app/overview/sources/page.tsx @@ -1,7 +1,7 @@ "use client"; -import { SourcesContainer } from "@/containers/overview"; +import { InstrumentedSourcesContainer } from "@/containers/overview"; import React from "react"; export default function SourcesOverviewPage() { - return ; + return ; } diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx index 6fe210b98..60d3d1c17 100644 --- a/frontend/webapp/containers/overview/index.tsx +++ b/frontend/webapp/containers/overview/index.tsx @@ -1,6 +1,6 @@ export { OverviewContainer } from "./overview/overview"; export { DestinationContainer } from "./destination/destination"; -export { SourcesContainer } from "./sources/sources"; +export { InstrumentedSourcesContainer } from "./sources/instrumented.sources"; export { NewDestinationList } from "./destination/new.destination.list"; export { NewDestinationForm } from "./destination/new.destination.form"; export { UpdateDestinationFlow } from "./destination/update.destination.flow"; diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx similarity index 93% rename from frontend/webapp/containers/overview/sources/sources.tsx rename to frontend/webapp/containers/overview/sources/instrumented.sources.tsx index 1eed8288a..17c7ecdbe 100644 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx @@ -8,7 +8,7 @@ import { useQuery } from "react-query"; import { getSources } from "@/services"; import { useRouter } from "next/navigation"; -export function SourcesContainer() { +export function InstrumentedSourcesContainer() { const router = useRouter(); const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources); From c2e13cd3d22d72d42c5724e9ffb9eee627907e34 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 7 Aug 2023 09:51:17 +0300 Subject: [PATCH 67/93] delete dest fixed --- .../overview/destination/destination.tsx | 24 ++++++++++++++++--- .../destination/update.destination.flow.tsx | 4 ++-- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx index 8ed985640..2c7aab1f4 100644 --- a/frontend/webapp/containers/overview/destination/destination.tsx +++ b/frontend/webapp/containers/overview/destination/destination.tsx @@ -1,11 +1,12 @@ "use client"; -import React from "react"; +import React, { useEffect } from "react"; import { KeyvalLoader } from "@/design.system"; -import { OVERVIEW, QUERIES, ROUTES } from "@/utils/constants"; +import { NOTIFICATION, OVERVIEW, QUERIES, ROUTES } from "@/utils/constants"; import { useQuery } from "react-query"; import { getDestinations } from "@/services"; import { OverviewHeader, DestinationsManagedList } from "@/components/overview"; -import { useRouter } from "next/navigation"; +import { useRouter, useSearchParams } from "next/navigation"; +import { useNotification } from "@/hooks"; export function DestinationContainer() { const { isLoading: destinationLoading, data: destinationList } = useQuery( @@ -13,8 +14,24 @@ export function DestinationContainer() { getDestinations ); + const searchParams = useSearchParams(); + const { show, Notification } = useNotification(); + const router = useRouter(); + useEffect(onPageLoad, [searchParams, destinationList]); + + function onPageLoad() { + const status = searchParams.get("status"); + if (status === "deleted") { + show({ + type: NOTIFICATION.SUCCESS, + message: OVERVIEW.DESTINATION_DELETED_SUCCESS, + }); + router.push(ROUTES.DESTINATIONS); + } + } + if (destinationLoading) { return ; } @@ -29,6 +46,7 @@ export function DestinationContainer() { } onMenuButtonClick={() => router.push(ROUTES.CREATE_DESTINATION)} /> + ); } diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx index 66259fe3e..2f0bfa0be 100644 --- a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx @@ -1,7 +1,7 @@ "use client"; import React, { useEffect, useMemo, useState } from "react"; import { KeyvalLoader } from "@/design.system"; -import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import { NOTIFICATION, OVERVIEW, QUERIES, ROUTES } from "@/utils/constants"; import { useMutation, useQuery } from "react-query"; import { getDestination, updateDestination } from "@/services"; import { ManageDestination } from "@/components/overview"; @@ -51,7 +51,7 @@ export function UpdateDestinationFlow() { function onDelete() { handleDeleteDestination(selectedDestination.id, { - onSuccess: () => onSuccess(OVERVIEW.DESTINATION_DELETED_SUCCESS), + onSuccess: () => router.push(`${ROUTES.DESTINATIONS}?status=deleted`), onError, }); } From 61183a4cec9aefe21bde1596b9ddf34fbd603abe Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 7 Aug 2023 10:02:00 +0300 Subject: [PATCH 68/93] WIP --- .../overview/destination/destination.tsx | 22 +++++++---- .../overview/sources/instrumented.sources.tsx | 33 ++++++++++++++-- .../overview/sources/update.source.form.tsx | 39 ++++++++----------- frontend/webapp/utils/constants/index.tsx | 2 +- frontend/webapp/utils/constants/string.tsx | 5 +++ 5 files changed, 67 insertions(+), 34 deletions(-) diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx index 2c7aab1f4..f8020223d 100644 --- a/frontend/webapp/containers/overview/destination/destination.tsx +++ b/frontend/webapp/containers/overview/destination/destination.tsx @@ -1,7 +1,13 @@ "use client"; import React, { useEffect } from "react"; import { KeyvalLoader } from "@/design.system"; -import { NOTIFICATION, OVERVIEW, QUERIES, ROUTES } from "@/utils/constants"; +import { + NOTIFICATION, + OVERVIEW, + PARAMS, + QUERIES, + ROUTES, +} from "@/utils/constants"; import { useQuery } from "react-query"; import { getDestinations } from "@/services"; import { OverviewHeader, DestinationsManagedList } from "@/components/overview"; @@ -9,10 +15,11 @@ import { useRouter, useSearchParams } from "next/navigation"; import { useNotification } from "@/hooks"; export function DestinationContainer() { - const { isLoading: destinationLoading, data: destinationList } = useQuery( - [QUERIES.API_DESTINATIONS], - getDestinations - ); + const { + isLoading: destinationLoading, + data: destinationList, + refetch: refetchDestinations, + } = useQuery([QUERIES.API_DESTINATIONS], getDestinations); const searchParams = useSearchParams(); const { show, Notification } = useNotification(); @@ -22,8 +29,9 @@ export function DestinationContainer() { useEffect(onPageLoad, [searchParams, destinationList]); function onPageLoad() { - const status = searchParams.get("status"); - if (status === "deleted") { + const status = searchParams.get(PARAMS.STATUS); + if (status === PARAMS.DELETED) { + refetchDestinations(); show({ type: NOTIFICATION.SUCCESS, message: OVERVIEW.DESTINATION_DELETED_SUCCESS, diff --git a/frontend/webapp/containers/overview/sources/instrumented.sources.tsx b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx index 17c7ecdbe..03ec2695f 100644 --- a/frontend/webapp/containers/overview/sources/instrumented.sources.tsx +++ b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx @@ -1,17 +1,41 @@ "use client"; -import React from "react"; -import { OVERVIEW, QUERIES, ROUTES } from "@/utils/constants"; +import React, { useEffect } from "react"; +import { + NOTIFICATION, + OVERVIEW, + PARAMS, + QUERIES, + ROUTES, +} from "@/utils/constants"; import { OverviewHeader } from "@/components/overview"; import { SourcesContainerWrapper } from "./sources.styled"; import { ManageSources } from "./manage.sources"; import { useQuery } from "react-query"; import { getSources } from "@/services"; -import { useRouter } from "next/navigation"; +import { useRouter, useSearchParams } from "next/navigation"; +import { useNotification } from "@/hooks"; export function InstrumentedSourcesContainer() { const router = useRouter(); - const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources); + const searchParams = useSearchParams(); + const { show, Notification } = useNotification(); + const { data: sources, refetch: refetchSources } = useQuery( + [QUERIES.API_SOURCES], + getSources + ); + useEffect(onPageLoad, [searchParams]); + function onPageLoad() { + const status = searchParams.get(PARAMS.STATUS); + if (status === PARAMS.DELETED) { + refetchSources(); + show({ + type: NOTIFICATION.SUCCESS, + message: OVERVIEW.SOURCE_DELETED_SUCCESS, + }); + router.push(ROUTES.SOURCES); + } + } return ( @@ -19,6 +43,7 @@ export function InstrumentedSourcesContainer() { onAddClick={() => router.push(ROUTES.CREATE_SOURCE)} sources={sources} /> + ); } diff --git a/frontend/webapp/containers/overview/sources/update.source.form.tsx b/frontend/webapp/containers/overview/sources/update.source.form.tsx index e563177c7..19d67bed5 100644 --- a/frontend/webapp/containers/overview/sources/update.source.form.tsx +++ b/frontend/webapp/containers/overview/sources/update.source.form.tsx @@ -1,6 +1,12 @@ "use client"; import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header"; -import { ACTION, NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants"; +import { + ACTION, + NOTIFICATION, + OVERVIEW, + ROUTES, + SETUP, +} from "@/utils/constants"; import { useRouter, useSearchParams } from "next/navigation"; import React, { useEffect, useState } from "react"; import { useMutation } from "react-query"; @@ -68,6 +74,13 @@ export function UpdateSourceForm() { const currentSource = await getSource(namespace, kind, name); setCurrentSource(currentSource); } + function onError({ response }) { + const message = response?.data?.message; + show({ + type: NOTIFICATION.ERROR, + message, + }); + } function onSaveClick(newName) { editSource(newName, { @@ -80,27 +93,9 @@ export function UpdateSourceForm() { }); } - function onError({ response }) { - const message = response?.data?.message; - show({ - type: NOTIFICATION.ERROR, - message, - }); - } - - function onSuccess() { - setTimeout(() => { - router.back(); - }, 1000); - show({ - type: NOTIFICATION.SUCCESS, - message: OVERVIEW.SOURCE_DELETED_SUCCESS, - }); - } - - function onDelete() { + function onSourceDelete() { handleDeleteSource(undefined, { - onSuccess, + onSuccess: () => router.push(`${ROUTES.SOURCES}?status=deleted`), onError, }); } @@ -137,7 +132,7 @@ export function UpdateSourceForm() { Date: Mon, 7 Aug 2023 10:15:11 +0300 Subject: [PATCH 69/93] refactor services --- frontend/webapp/services/api.tsx | 28 ++++++++-------------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/frontend/webapp/services/api.tsx b/frontend/webapp/services/api.tsx index 354663e64..326084fd4 100644 --- a/frontend/webapp/services/api.tsx +++ b/frontend/webapp/services/api.tsx @@ -7,30 +7,18 @@ export async function get(url: string) { } } -export async function post(url: string, body: any) { - const { data, status } = await axios.post(url, body); - - if (status === 200) { - return data; - } +export function post(url: string, body: any) { + axios.post(url, body); } -export async function put(url: string, body: any) { - const { data, status } = await axios.put(url, body); - - if (status === 200) { - return data; - } +export function put(url: string, body: any) { + axios.put(url, body); } -export async function httpDelete(url: string) { - const { data, status } = await axios.delete(url); - - if (status === 200) { - return data; - } +export function httpDelete(url: string) { + axios.delete(url); } -export async function patch(url: string, body: any) { - await axios.patch(url, body); +export function patch(url: string, body: any) { + axios.patch(url, body); } From f1618a5be5bb0418c800f0e586cbf7ba3516762e Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 7 Aug 2023 14:21:43 +0300 Subject: [PATCH 70/93] WIP --- .../overview/destination/update.destination.flow.tsx | 4 ++-- frontend/webapp/services/api.tsx | 4 ---- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx index 2f0bfa0be..4addddb1d 100644 --- a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx @@ -63,7 +63,7 @@ export function UpdateDestinationFlow() { }; handleUpdateDestination(newDestinations, { - onSuccess, + onSuccess: () => onSuccess(OVERVIEW.DESTINATION_UPDATE_SUCCESS), onError, }); } @@ -78,7 +78,7 @@ export function UpdateDestinationFlow() { } } - function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { + function onSuccess(message: string) { refetch(); show({ type: NOTIFICATION.SUCCESS, diff --git a/frontend/webapp/services/api.tsx b/frontend/webapp/services/api.tsx index 990b1f888..326084fd4 100644 --- a/frontend/webapp/services/api.tsx +++ b/frontend/webapp/services/api.tsx @@ -22,7 +22,3 @@ export function httpDelete(url: string) { export function patch(url: string, body: any) { axios.patch(url, body); } - -export async function patch(url: string, body: any) { - await axios.patch(url, body); -} From fd269a6e8059ccd9f0f2fe0d69bc2d39491521b9 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 7 Aug 2023 14:58:27 +0300 Subject: [PATCH 71/93] change file names --- .../overview/destinations/create/{[id] => form}/page.tsx | 0 .../destinations.styled.tsx} | 0 .../destination.tsx => destinations/destinations.tsx} | 0 .../new.destination.form.tsx | 0 .../new.destination.list.tsx | 2 +- .../update.destination.flow.tsx | 2 +- frontend/webapp/containers/overview/index.tsx | 8 ++++---- frontend/webapp/utils/constants/routes.tsx | 2 +- 8 files changed, 7 insertions(+), 7 deletions(-) rename frontend/webapp/app/overview/destinations/create/{[id] => form}/page.tsx (100%) rename frontend/webapp/containers/overview/{destination/destination.styled.tsx => destinations/destinations.styled.tsx} (100%) rename frontend/webapp/containers/overview/{destination/destination.tsx => destinations/destinations.tsx} (100%) rename frontend/webapp/containers/overview/{destination => destinations}/new.destination.form.tsx (100%) rename frontend/webapp/containers/overview/{destination => destinations}/new.destination.list.tsx (91%) rename frontend/webapp/containers/overview/{destination => destinations}/update.destination.flow.tsx (97%) diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/form/page.tsx similarity index 100% rename from frontend/webapp/app/overview/destinations/create/[id]/page.tsx rename to frontend/webapp/app/overview/destinations/create/form/page.tsx diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destinations/destinations.styled.tsx similarity index 100% rename from frontend/webapp/containers/overview/destination/destination.styled.tsx rename to frontend/webapp/containers/overview/destinations/destinations.styled.tsx diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destinations/destinations.tsx similarity index 100% rename from frontend/webapp/containers/overview/destination/destination.tsx rename to frontend/webapp/containers/overview/destinations/destinations.tsx diff --git a/frontend/webapp/containers/overview/destination/new.destination.form.tsx b/frontend/webapp/containers/overview/destinations/new.destination.form.tsx similarity index 100% rename from frontend/webapp/containers/overview/destination/new.destination.form.tsx rename to frontend/webapp/containers/overview/destinations/new.destination.form.tsx diff --git a/frontend/webapp/containers/overview/destination/new.destination.list.tsx b/frontend/webapp/containers/overview/destinations/new.destination.list.tsx similarity index 91% rename from frontend/webapp/containers/overview/destination/new.destination.list.tsx rename to frontend/webapp/containers/overview/destinations/new.destination.list.tsx index 3f8821ed7..4482533f5 100644 --- a/frontend/webapp/containers/overview/destination/new.destination.list.tsx +++ b/frontend/webapp/containers/overview/destinations/new.destination.list.tsx @@ -3,7 +3,7 @@ import React from "react"; import { OVERVIEW, ROUTES } from "@/utils/constants"; import { OverviewHeader } from "@/components/overview"; import { DestinationSection } from "@/containers/setup/destination/destination.section"; -import { NewDestinationContainer } from "./destination.styled"; +import { NewDestinationContainer } from "./destinations.styled"; import { useRouter } from "next/navigation"; export function NewDestinationList() { diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destinations/update.destination.flow.tsx similarity index 97% rename from frontend/webapp/containers/overview/destination/update.destination.flow.tsx rename to frontend/webapp/containers/overview/destinations/update.destination.flow.tsx index 4addddb1d..1bb1a5221 100644 --- a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destinations/update.destination.flow.tsx @@ -6,7 +6,7 @@ import { useMutation, useQuery } from "react-query"; import { getDestination, updateDestination } from "@/services"; import { ManageDestination } from "@/components/overview"; import { deleteDestination, getDestinations } from "@/services/destinations"; -import { ManageDestinationWrapper } from "./destination.styled"; +import { ManageDestinationWrapper } from "./destinations.styled"; import { useRouter, useSearchParams } from "next/navigation"; import { useNotification } from "@/hooks"; const DEST = "dest"; diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx index 60d3d1c17..27cff2fb1 100644 --- a/frontend/webapp/containers/overview/index.tsx +++ b/frontend/webapp/containers/overview/index.tsx @@ -1,8 +1,8 @@ export { OverviewContainer } from "./overview/overview"; -export { DestinationContainer } from "./destination/destination"; +export { DestinationContainer } from "./destinations/destinations"; export { InstrumentedSourcesContainer } from "./sources/instrumented.sources"; -export { NewDestinationList } from "./destination/new.destination.list"; -export { NewDestinationForm } from "./destination/new.destination.form"; -export { UpdateDestinationFlow } from "./destination/update.destination.flow"; +export { NewDestinationList } from "./destinations/new.destination.list"; +export { NewDestinationForm } from "./destinations/new.destination.form"; +export { UpdateDestinationFlow } from "./destinations/update.destination.flow"; export { UpdateSourceForm } from "./sources/update.source.form"; export { SourcesListContainer } from "./sources/sources.list.container"; diff --git a/frontend/webapp/utils/constants/routes.tsx b/frontend/webapp/utils/constants/routes.tsx index 6a074d899..13cbccc12 100644 --- a/frontend/webapp/utils/constants/routes.tsx +++ b/frontend/webapp/utils/constants/routes.tsx @@ -4,7 +4,7 @@ export const ROUTES = { SOURCES: "/overview/sources", DESTINATIONS: "/overview/destinations", NEW_DESTINATION: "/setup?state=destinations", - MANAGE_DESTINATION: "/overview/destinations/create/manage?dest=", + MANAGE_DESTINATION: "/overview/destinations/create/form?dest=", UPDATE_DESTINATION: "destinations/manage?dest=", CREATE_DESTINATION: "destinations/create", CREATE_SOURCE: "/overview/sources/create", From 8769e675ae3c65d1779fed9b46ce0903fec5740c Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 7 Aug 2023 15:11:39 +0300 Subject: [PATCH 72/93] WIP --- .../overview/sources/instrumented.sources.tsx | 19 ++++++++++++++++--- .../sources/sources.list.container.tsx | 16 ++++------------ .../overview/sources/update.source.form.tsx | 6 +----- frontend/webapp/utils/constants/string.tsx | 2 ++ 4 files changed, 23 insertions(+), 20 deletions(-) diff --git a/frontend/webapp/containers/overview/sources/instrumented.sources.tsx b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx index 03ec2695f..495f370cb 100644 --- a/frontend/webapp/containers/overview/sources/instrumented.sources.tsx +++ b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx @@ -25,15 +25,28 @@ export function InstrumentedSourcesContainer() { ); useEffect(onPageLoad, [searchParams]); + function getMessage(status: string) { + switch (status) { + case PARAMS.DELETED: + return OVERVIEW.SOURCE_DELETED_SUCCESS; + case PARAMS.CREATED: + return OVERVIEW.SOURCE_CREATED_SUCCESS; + case PARAMS.UPDATED: + return OVERVIEW.SOURCE_UPDATE_SUCCESS; + default: + return ""; + } + } + function onPageLoad() { const status = searchParams.get(PARAMS.STATUS); - if (status === PARAMS.DELETED) { + if (status) { refetchSources(); show({ type: NOTIFICATION.SUCCESS, - message: OVERVIEW.SOURCE_DELETED_SUCCESS, + message: getMessage(status), }); - router.push(ROUTES.SOURCES); + router.replace(ROUTES.SOURCES); } } return ( diff --git a/frontend/webapp/containers/overview/sources/sources.list.container.tsx b/frontend/webapp/containers/overview/sources/sources.list.container.tsx index 6d87ff086..7729cf345 100644 --- a/frontend/webapp/containers/overview/sources/sources.list.container.tsx +++ b/frontend/webapp/containers/overview/sources/sources.list.container.tsx @@ -1,6 +1,6 @@ "use client"; import React from "react"; -import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import { NOTIFICATION, OVERVIEW, QUERIES, ROUTES } from "@/utils/constants"; import { OverviewHeader } from "@/components/overview"; import { useNotification } from "@/hooks"; import { useQuery } from "react-query"; @@ -9,22 +9,14 @@ import { NewSourcesList } from "@/containers/overview/sources/new.source.flow"; import { useRouter } from "next/navigation"; export function SourcesListContainer() { - const { show, Notification } = useNotification(); + const { Notification } = useNotification(); const router = useRouter(); - const { data: sources, refetch } = useQuery( - [QUERIES.API_SOURCES], - getSources - ); + const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources); function onNewSourceSuccess() { setTimeout(() => { - router.back(); - refetch(); + router.push(`${ROUTES.SOURCES}?status=created`); }, 1000); - show({ - type: NOTIFICATION.SUCCESS, - message: OVERVIEW.SOURCE_CREATED_SUCCESS, - }); } return ( diff --git a/frontend/webapp/containers/overview/sources/update.source.form.tsx b/frontend/webapp/containers/overview/sources/update.source.form.tsx index 19d67bed5..a7d94cc2f 100644 --- a/frontend/webapp/containers/overview/sources/update.source.form.tsx +++ b/frontend/webapp/containers/overview/sources/update.source.form.tsx @@ -85,11 +85,7 @@ export function UpdateSourceForm() { function onSaveClick(newName) { editSource(newName, { onError, - onSuccess: () => - show({ - type: NOTIFICATION.SUCCESS, - message: OVERVIEW.SOURCE_UPDATE_SUCCESS, - }), + onSuccess: () => router.push(`${ROUTES.SOURCES}?status=updated`), }); } diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx index 5d6fa690a..ec8a22441 100644 --- a/frontend/webapp/utils/constants/string.tsx +++ b/frontend/webapp/utils/constants/string.tsx @@ -98,4 +98,6 @@ export const NOTIFICATION = { export const PARAMS = { STATUS: "status", DELETED: "deleted", + CREATED: "created", + UPDATED: "updated", }; From f5220c5c688ec622583cdd4e407089774f198063 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 7 Aug 2023 15:38:31 +0300 Subject: [PATCH 73/93] WIP --- .../overview/destinations/destinations.tsx | 19 ++++++++++++++++--- .../destinations/new.destination.form.tsx | 11 ++--------- .../destinations/update.destination.flow.tsx | 12 ++---------- .../overview/sources/instrumented.sources.tsx | 1 + 4 files changed, 21 insertions(+), 22 deletions(-) diff --git a/frontend/webapp/containers/overview/destinations/destinations.tsx b/frontend/webapp/containers/overview/destinations/destinations.tsx index f8020223d..ca8a967eb 100644 --- a/frontend/webapp/containers/overview/destinations/destinations.tsx +++ b/frontend/webapp/containers/overview/destinations/destinations.tsx @@ -28,15 +28,28 @@ export function DestinationContainer() { useEffect(onPageLoad, [searchParams, destinationList]); + function getMessage(status: string) { + switch (status) { + case PARAMS.DELETED: + return OVERVIEW.DESTINATION_DELETED_SUCCESS; + case PARAMS.CREATED: + return OVERVIEW.DESTINATION_CREATED_SUCCESS; + case PARAMS.UPDATED: + return OVERVIEW.DESTINATION_UPDATE_SUCCESS; + default: + return ""; + } + } + function onPageLoad() { const status = searchParams.get(PARAMS.STATUS); - if (status === PARAMS.DELETED) { + if (status) { refetchDestinations(); show({ type: NOTIFICATION.SUCCESS, - message: OVERVIEW.DESTINATION_DELETED_SUCCESS, + message: getMessage(status), }); - router.push(ROUTES.DESTINATIONS); + router.replace(ROUTES.DESTINATIONS); } } diff --git a/frontend/webapp/containers/overview/destinations/new.destination.form.tsx b/frontend/webapp/containers/overview/destinations/new.destination.form.tsx index c88928126..2a0ad1b82 100644 --- a/frontend/webapp/containers/overview/destinations/new.destination.form.tsx +++ b/frontend/webapp/containers/overview/destinations/new.destination.form.tsx @@ -1,6 +1,6 @@ "use client"; import React, { useEffect } from "react"; -import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants"; +import { NOTIFICATION, OVERVIEW, QUERIES, ROUTES } from "@/utils/constants"; import { useMutation, useQuery } from "react-query"; import { getDestination, @@ -59,13 +59,6 @@ export function NewDestinationForm() { setSectionData(currentData); } - function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) { - show({ - type: NOTIFICATION.SUCCESS, - message, - }); - } - function onError({ response }) { const message = response?.data?.message; show({ @@ -81,7 +74,7 @@ export function NewDestinationForm() { }; mutate(destination, { - onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS), + onSuccess: () => router.push(`${ROUTES.DESTINATIONS}?status=created`), onError, }); } diff --git a/frontend/webapp/containers/overview/destinations/update.destination.flow.tsx b/frontend/webapp/containers/overview/destinations/update.destination.flow.tsx index 1bb1a5221..d4b9ac1c8 100644 --- a/frontend/webapp/containers/overview/destinations/update.destination.flow.tsx +++ b/frontend/webapp/containers/overview/destinations/update.destination.flow.tsx @@ -1,7 +1,7 @@ "use client"; import React, { useEffect, useMemo, useState } from "react"; import { KeyvalLoader } from "@/design.system"; -import { NOTIFICATION, OVERVIEW, QUERIES, ROUTES } from "@/utils/constants"; +import { NOTIFICATION, QUERIES, ROUTES } from "@/utils/constants"; import { useMutation, useQuery } from "react-query"; import { getDestination, updateDestination } from "@/services"; import { ManageDestination } from "@/components/overview"; @@ -63,7 +63,7 @@ export function UpdateDestinationFlow() { }; handleUpdateDestination(newDestinations, { - onSuccess: () => onSuccess(OVERVIEW.DESTINATION_UPDATE_SUCCESS), + onSuccess: () => router.push(`${ROUTES.DESTINATIONS}?status=updated`), onError, }); } @@ -78,14 +78,6 @@ export function UpdateDestinationFlow() { } } - function onSuccess(message: string) { - refetch(); - show({ - type: NOTIFICATION.SUCCESS, - message, - }); - } - function onError({ response }) { const message = response?.data?.message; show({ diff --git a/frontend/webapp/containers/overview/sources/instrumented.sources.tsx b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx index 495f370cb..4ff1e9384 100644 --- a/frontend/webapp/containers/overview/sources/instrumented.sources.tsx +++ b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx @@ -49,6 +49,7 @@ export function InstrumentedSourcesContainer() { router.replace(ROUTES.SOURCES); } } + return ( From 7626088416a3880e83d440c0c274171461dd431f Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Tue, 8 Aug 2023 11:01:43 +0300 Subject: [PATCH 74/93] add contact button --- frontend/webapp/assets/icons/social/index.tsx | 4 ++ .../webapp/assets/icons/social/slack-grey.svg | 7 +++ frontend/webapp/assets/icons/social/slack.svg | 10 ++++ .../side.menu/contact.us/contact.us.tsx | 48 +++++++++++++++++++ .../components/side.menu/menu/menu.styled.tsx | 5 ++ .../webapp/components/side.menu/menu/menu.tsx | 11 ++++- frontend/webapp/utils/constants/string.tsx | 1 + frontend/webapp/utils/constants/urls.tsx | 5 +- 8 files changed, 89 insertions(+), 2 deletions(-) create mode 100644 frontend/webapp/assets/icons/social/index.tsx create mode 100644 frontend/webapp/assets/icons/social/slack-grey.svg create mode 100644 frontend/webapp/assets/icons/social/slack.svg create mode 100644 frontend/webapp/components/side.menu/contact.us/contact.us.tsx diff --git a/frontend/webapp/assets/icons/social/index.tsx b/frontend/webapp/assets/icons/social/index.tsx new file mode 100644 index 000000000..d868090ae --- /dev/null +++ b/frontend/webapp/assets/icons/social/index.tsx @@ -0,0 +1,4 @@ +import Slack from "./slack.svg"; +import SlackGrey from "./slack-grey.svg"; + +export { SlackGrey, Slack }; diff --git a/frontend/webapp/assets/icons/social/slack-grey.svg b/frontend/webapp/assets/icons/social/slack-grey.svg new file mode 100644 index 000000000..dfb76ae07 --- /dev/null +++ b/frontend/webapp/assets/icons/social/slack-grey.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/frontend/webapp/assets/icons/social/slack.svg b/frontend/webapp/assets/icons/social/slack.svg new file mode 100644 index 000000000..ff256fd4d --- /dev/null +++ b/frontend/webapp/assets/icons/social/slack.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/frontend/webapp/components/side.menu/contact.us/contact.us.tsx b/frontend/webapp/components/side.menu/contact.us/contact.us.tsx new file mode 100644 index 000000000..d33165ecd --- /dev/null +++ b/frontend/webapp/components/side.menu/contact.us/contact.us.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import { Slack, SlackGrey } from "@/assets/icons/social"; +import { KeyvalText } from "@/design.system"; +import { SLACK_INVITE_LINK } from "@/utils/constants/urls"; +import { styled } from "styled-components"; +import { ACTION } from "@/utils/constants"; + +const ContactUsContainer = styled.div` + display: flex; + padding: 0px 16px; + height: 48px; + align-items: center; + gap: 10px; + cursor: pointer; + border-radius: 10px; + p { + color: #8b92a6; + } + .icon-lock { + display: none; + } + &:hover { + p { + color: ${({ theme }) => theme.colors.white}; + } + .icon-unlock { + display: none; + } + + .icon-lock { + display: block; + } + } +`; + +export default function ContactUsButton() { + function handleContactUsClick() { + window.open(SLACK_INVITE_LINK, "_blank"); + } + + return ( + + + + {ACTION.CONTACT_US} + + ); +} diff --git a/frontend/webapp/components/side.menu/menu/menu.styled.tsx b/frontend/webapp/components/side.menu/menu/menu.styled.tsx index 06e515012..e3c1700c6 100644 --- a/frontend/webapp/components/side.menu/menu/menu.styled.tsx +++ b/frontend/webapp/components/side.menu/menu/menu.styled.tsx @@ -14,3 +14,8 @@ export const LogoWrapper = styled.div` export const MenuItemsWrapper = styled.div` padding: 16px 9px; `; + +export const ContactUsWrapper = styled(MenuItemsWrapper)` + position: absolute; + bottom: 5%; +`; diff --git a/frontend/webapp/components/side.menu/menu/menu.tsx b/frontend/webapp/components/side.menu/menu/menu.tsx index 814885343..9cc7cd324 100644 --- a/frontend/webapp/components/side.menu/menu/menu.tsx +++ b/frontend/webapp/components/side.menu/menu/menu.tsx @@ -1,11 +1,17 @@ "use client"; import React, { useEffect, useState } from "react"; -import { MenuContainer, LogoWrapper, MenuItemsWrapper } from "./menu.styled"; +import { + MenuContainer, + LogoWrapper, + MenuItemsWrapper, + ContactUsWrapper, +} from "./menu.styled"; import { KeyvalText } from "@/design.system"; import MenuItem from "../menu.item/menu.item"; import { useRouter } from "next/navigation"; import { OVERVIEW, ROUTES } from "@/utils/constants"; import { MENU_ITEMS } from "./items"; +import ContactUsButton from "../contact.us/contact.us"; export interface MenuItem { id: number; @@ -59,6 +65,9 @@ export function Menu() { {renderMenuItemsList()} + + + ); } diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx index ec8a22441..653500b2a 100644 --- a/frontend/webapp/utils/constants/string.tsx +++ b/frontend/webapp/utils/constants/string.tsx @@ -88,6 +88,7 @@ export const OVERVIEW = { export const ACTION = { SAVE: "Save", + CONTACT_US: "Contact Us", }; export const NOTIFICATION = { diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx index a22b00441..584f320f7 100644 --- a/frontend/webapp/utils/constants/urls.tsx +++ b/frontend/webapp/utils/constants/urls.tsx @@ -22,4 +22,7 @@ const QUERIES = { API_DESTINATION_TYPES: "apiDestinationTypes", }; -export { API, QUERIES }; +const SLACK_INVITE_LINK = + "https://odigos.slack.com/join/shared_invite/zt-1d7egaz29-Rwv2T8kyzc3mWP8qKobz~A#/shared-invite/email"; + +export { API, QUERIES, SLACK_INVITE_LINK }; From 52f92f08b580eca075d36fa9cb903a8790fb2fa8 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 9 Aug 2023 17:11:06 +0300 Subject: [PATCH 75/93] fixed setup source and destinations list wrapping --- .../destination.list/destination.list.styled.tsx | 11 +++++++++-- .../sources/sources.list/sources.list.styled.tsx | 16 ++++++++++++++-- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx index 1515a8416..fcc749e55 100644 --- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx @@ -10,14 +10,21 @@ export const DestinationTypeTitleWrapper = styled.div` export const DestinationListWrapper = styled.div` width: 100%; - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(4, 1fr); gap: 24px; ::-webkit-scrollbar { display: none; } -ms-overflow-style: none; scrollbar-width: none; + + @media screen and (max-width: 1500px) { + grid-template-columns: repeat(3, 1fr); + } + @media screen and (max-width: 1150px) { + grid-template-columns: repeat(2, 1fr); + } `; export const EmptyListWrapper = styled.div` diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx index 4e9eab0e3..8dae05be3 100644 --- a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx +++ b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx @@ -21,11 +21,23 @@ export const SourcesListWrapper = styled.div` width: 100%; height: 400px; padding-bottom: 300px; - display: flex; - flex-wrap: wrap; gap: 24px; overflow-y: scroll; scrollbar-width: none; + -ms-overflow-style: none; + + display: grid; + grid-template-columns: repeat(4, 1fr); + ::-webkit-scrollbar { + display: none; + } + + @media screen and (max-width: 1500px) { + grid-template-columns: repeat(3, 1fr); + } + @media screen and (max-width: 1150px) { + grid-template-columns: repeat(2, 1fr); + } `; export const EmptyListWrapper = styled.div` From 6095f4db72e665f0b340bfa00655d7e715d3bdee Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 9 Aug 2023 17:21:39 +0300 Subject: [PATCH 76/93] manage destination list set up --- .../destination.list/destination.list.styled.tsx | 16 ++++++++++++++-- .../destination.list/destination.list.styled.tsx | 5 ++++- .../sources/sources.list/sources.list.styled.tsx | 6 +++++- 3 files changed, 23 insertions(+), 4 deletions(-) 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 index f172a32f9..ceb5afeb1 100644 --- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx @@ -1,11 +1,23 @@ import { styled } from "styled-components"; export const ManagedListWrapper = styled.div` - display: flex; - flex-wrap: wrap; + display: grid; gap: 24px; padding: 0px 36px; padding-bottom: 50px; + grid-template-columns: repeat(4, 1fr); + ::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; + scrollbar-width: none; + + @media screen and (max-width: 1850px) { + grid-template-columns: repeat(3, 1fr); + } + @media screen and (max-width: 1450px) { + grid-template-columns: repeat(2, 1fr); + } `; export const MenuWrapper = styled.div` diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx index fcc749e55..3521015e3 100644 --- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx @@ -11,13 +11,16 @@ export const DestinationTypeTitleWrapper = styled.div` export const DestinationListWrapper = styled.div` width: 100%; display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(5, 1fr); gap: 24px; ::-webkit-scrollbar { display: none; } -ms-overflow-style: none; scrollbar-width: none; + @media screen and (max-width: 1750px) { + grid-template-columns: repeat(4, 1fr); + } @media screen and (max-width: 1500px) { grid-template-columns: repeat(3, 1fr); diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx index 8dae05be3..6cd703561 100644 --- a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx +++ b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx @@ -27,11 +27,15 @@ export const SourcesListWrapper = styled.div` -ms-overflow-style: none; display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(5, 1fr); ::-webkit-scrollbar { display: none; } + @media screen and (max-width: 1750px) { + grid-template-columns: repeat(4, 1fr); + } + @media screen and (max-width: 1500px) { grid-template-columns: repeat(3, 1fr); } From 960f16df2d1e926cb9af2c2ecbe7542b9d960cec Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 10 Aug 2023 09:37:45 +0300 Subject: [PATCH 77/93] remove unused code --- .../destination.card/destination.card.styled.tsx | 5 +++++ .../destination/destination.card/destination.card.tsx | 4 +--- .../destination/destination.list/destination.list.tsx | 1 - .../setup/destination/destination.section.tsx | 9 ++++++++- .../containers/setup/setup.header/setup.header.tsx | 2 +- .../containers/setup/setup.section/setup.section.tsx | 10 +++++++--- 6 files changed, 22 insertions(+), 9 deletions(-) diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx index 17e6a2a89..b0ab56a32 100644 --- a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx +++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx @@ -7,6 +7,11 @@ export const DestinationCardWrapper = styled.div` flex-direction: column; gap: 14px; cursor: pointer; + border: 1px solid transparent; + &:hover { + border-radius: 24px; + border: ${({ theme }) => `1px solid ${theme.colors.secondary}`}; + } `; export const ApplicationNameWrapper = styled.div` diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx index 316f81939..851127e45 100644 --- a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx +++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx @@ -27,13 +27,11 @@ type Destination = { type DestinationCardProps = { item: Destination; onClick: () => void; - focus: boolean; }; export function DestinationCard({ item: { supported_signals, image_url, display_name }, onClick, - focus, }: DestinationCardProps) { const monitors = useMemo(() => { return Object.entries(supported_signals).reduce((acc, [key, value]) => { @@ -50,7 +48,7 @@ export function DestinationCard({ }, [JSON.stringify(supported_signals)]); return ( - + onItemClick(item)} - focus={sectionData?.type === item?.type} /> )); } diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx index 854edd779..41e3c8a72 100644 --- a/frontend/webapp/containers/setup/destination/destination.section.tsx +++ b/frontend/webapp/containers/setup/destination/destination.section.tsx @@ -22,11 +22,13 @@ import { getDestinationsTypes } from "@/services"; type DestinationSectionProps = { sectionData?: any; setSectionData: (data: any) => void; + onNext?: () => void; }; export function DestinationSection({ sectionData, setSectionData, + onNext, }: DestinationSectionProps) { const [searchFilter, setSearchFilter] = useState(""); const [dropdownData, setDropdownData] = useState(null); @@ -47,6 +49,11 @@ export function DestinationSection({ }); }, [isError]); + function onItemSelect(item) { + setSectionData(item); + onNext && onNext(); + } + function renderDestinationLists() { sortDestinationList(data); const list = filterDataByMonitorsOption( @@ -73,7 +80,7 @@ export function DestinationSection({ sectionData={sectionData} key={category.name} data={category} - onItemClick={(item: any) => setSectionData(item)} + onItemClick={(item: any) => onItemSelect(item)} /> ) ); diff --git a/frontend/webapp/containers/setup/setup.header/setup.header.tsx b/frontend/webapp/containers/setup/setup.header/setup.header.tsx index 6155e889a..f7ca31104 100644 --- a/frontend/webapp/containers/setup/setup.header/setup.header.tsx +++ b/frontend/webapp/containers/setup/setup.header/setup.header.tsx @@ -80,7 +80,7 @@ export function SetupHeader({ {SETUP.SELECTED} )} - {currentStep?.id !== SETUP.STEPS.ID.CREATE_CONNECTION && ( + {currentStep?.id === SETUP.STEPS.ID.CHOOSE_SOURCE && ( + ) : null; } @@ -110,7 +114,7 @@ export function SetupSection() { {currentStep.index !== 1 && ( - + {SETUP.BACK} From d62193bfa07f6c75803c057c800b52d85543cba3 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 10 Aug 2023 10:22:30 +0300 Subject: [PATCH 78/93] fixed repeat numbers --- .../destination.list/destination.list.styled.tsx | 5 +---- .../destination/destination.list/destination.list.tsx | 3 +++ .../setup/sources/sources.list/sources.list.styled.tsx | 5 +++-- .../components/setup/sources/sources.list/sources.list.tsx | 7 +++++-- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx index 3521015e3..fcc749e55 100644 --- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx @@ -11,16 +11,13 @@ export const DestinationTypeTitleWrapper = styled.div` export const DestinationListWrapper = styled.div` width: 100%; display: grid; - grid-template-columns: repeat(5, 1fr); + grid-template-columns: repeat(4, 1fr); gap: 24px; ::-webkit-scrollbar { display: none; } -ms-overflow-style: none; scrollbar-width: none; - @media screen and (max-width: 1750px) { - grid-template-columns: repeat(4, 1fr); - } @media screen and (max-width: 1500px) { grid-template-columns: repeat(3, 1fr); diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx index 4c1a981fd..fa6eb6d14 100644 --- a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx +++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx @@ -6,6 +6,7 @@ import { DestinationTypeTitleWrapper, } from "./destination.list.styled"; import { capitalizeFirstLetter } from "@/utils/functions"; +import { ROUTES } from "@/utils/constants"; export function DestinationList({ data: { items, name }, @@ -22,6 +23,8 @@ export function DestinationList({ /> )); } + // const getNumberOfItemsRepeated = () => + // window.location.pathname.includes(ROUTES.CREATE_DESTINATION) ? 5 : 4; return items?.length ? ( <> diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx index 6cd703561..39d6b8fe9 100644 --- a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx +++ b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx @@ -17,7 +17,7 @@ export const SourcesTitleWrapper = styled.div` margin: 24px 0; `; -export const SourcesListWrapper = styled.div` +export const SourcesListWrapper = styled.div<{ repeat: number }>` width: 100%; height: 400px; padding-bottom: 300px; @@ -27,7 +27,8 @@ export const SourcesListWrapper = styled.div` -ms-overflow-style: none; display: grid; - grid-template-columns: repeat(5, 1fr); + grid-template-columns: ${({ repeat }) => `repeat(${repeat},1fr)`}; + ::-webkit-scrollbar { display: none; } diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.tsx index 1bd2192e1..f50df7ed0 100644 --- a/frontend/webapp/components/setup/sources/sources.list/sources.list.tsx +++ b/frontend/webapp/components/setup/sources/sources.list/sources.list.tsx @@ -7,7 +7,7 @@ import { } from "./sources.list.styled"; import { SourceCard } from "../source.card/source.card"; import { KeyvalLink, KeyvalText } from "@/design.system"; -import { SETUP } from "@/utils/constants"; +import { ROUTES, SETUP } from "@/utils/constants"; import Empty from "@/assets/images/empty-list.svg"; export function SourcesList({ @@ -37,13 +37,16 @@ export function SourcesList({ const isListEmpty = () => data?.length === 0; + const getNumberOfItemsRepeated = () => + window.location.pathname.includes(ROUTES.CREATE_SOURCE) ? 5 : 4; + return !data ? null : ( {`${data?.length} ${SETUP.APPLICATIONS}`} - + {isListEmpty() ? ( From ac1b8f98600780787a0c2d50c59f88c1856d88cb Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 10 Aug 2023 10:24:00 +0300 Subject: [PATCH 79/93] remove comments --- .../setup/destination/destination.list/destination.list.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx index fa6eb6d14..7f84d463b 100644 --- a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx +++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx @@ -23,8 +23,6 @@ export function DestinationList({ /> )); } - // const getNumberOfItemsRepeated = () => - // window.location.pathname.includes(ROUTES.CREATE_DESTINATION) ? 5 : 4; return items?.length ? ( <> From 883d21b02db6b7c0a953ead336f43c75866ae9f8 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 10 Aug 2023 10:34:22 +0300 Subject: [PATCH 80/93] WIP --- go.work.sum | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/go.work.sum b/go.work.sum index d1575bbee..f4405e992 100644 --- a/go.work.sum +++ b/go.work.sum @@ -244,6 +244,7 @@ github.com/alecthomas/units v0.0.0-20190924025748-f65c72e2690d/go.mod h1:rBZYJk5 github.com/alecthomas/units v0.0.0-20211218093645-b94a6e3cc137/go.mod h1:OMCwj8VM1Kc9e19TLln2VL61YJF0x1XFtfdL4JdbSyE= github.com/antlr/antlr4/runtime/Go/antlr v1.4.10/go.mod h1:F7bn7fEU90QkQ3tnmaTx3LTKLEDqnwWODIYppRQ5hnY= github.com/armon/go-socks5 v0.0.0-20160902184237-e75332964ef5/go.mod h1:wHh0iHkYZB8zMSxRWpUBQtwG5a7fFgvEO+odwuTv2gs= +github.com/benbjohnson/clock v1.3.0/go.mod h1:J11/hYXuz8f4ySSvYwY0FKfm+ezbsZBKZxNJlLklBHA= github.com/blang/semver/v4 v4.0.0/go.mod h1:IbckMUScFkM3pff0VJDNKRiT6TG/YpiHIM2yvyW5YoQ= github.com/buger/jsonparser v1.1.1/go.mod h1:6RYKKt7H4d4+iWqouImQ9R2FZql3VbhNgx27UK13J/0= github.com/cenkalti/backoff/v4 v4.1.3/go.mod h1:scbssz8iZGpm3xbr14ovlUdkxfGXNInqkPWOWmG2CLw= @@ -293,8 +294,6 @@ github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730053900-d53d github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730062110-e61bd9fd998e/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo= github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730063239-1359423cb703/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo= github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730071335-e3ae9a524206/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo= -github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730104422-ed0d5aa81b08 h1:pbl9g6FIHZrGQzcRU/Yt6g3WIqAbqbsXK728ztyJRYk= -github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730104422-ed0d5aa81b08/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo= github.com/emicklei/go-restful v0.0.0-20170410110728-ff4f55a20633 h1:H2pdYOb3KQ1/YsqVWoWNLQO+fusocsw354rqGTZtAgw= github.com/emicklei/go-restful/v3 v3.8.0/go.mod h1:6n3XBCmQQb25CM2LCACGz8ukIrRry+4bhvbpWn3mrbc= github.com/emicklei/go-restful/v3 v3.10.2 h1:hIovbnmBTLjHXkqEBUz3HGpXZdM7ZrE9fJIZIqlJLqE= @@ -425,7 +424,9 @@ go.opentelemetry.io/otel/trace v1.10.0/go.mod h1:Sij3YYczqAdz+EhmGhE6TpTxUO5/F/A go.opentelemetry.io/proto/otlp v1.0.0 h1:T0TX0tmXU8a3CbNXzEKGeU5mIVOdf0oykP+u2lIVU/I= go.opentelemetry.io/proto/otlp v1.0.0/go.mod h1:Sy6pihPLfYHkr3NkUbEhGHFhINUSI/v80hjKIs5JXpM= go.uber.org/goleak v1.1.10/go.mod h1:8a7PlsEVH3e/a/GLqe5IIrQx6GzcnRmZEufDUTk4A7A= +go.uber.org/goleak v1.2.0/go.mod h1:XJYK+MuIchqpmGmUSAzotztawfKvYLUIgg7guXrwVUo= go.uber.org/goleak v1.2.1/go.mod h1:qlT2yGI9QafXHhZZLxlSuNsMw3FFLxBr+tBRlmO1xH4= +go.uber.org/multierr v1.10.0/go.mod h1:20+QtiLqy0Nd6FdQB9TLXag12DsQkrbs3htMFfDN80Y= go.uber.org/zap v1.19.0/go.mod h1:xg/QME4nWcxGxrpdeYfq7UvYrLh66cuVKdrbD1XF/NI= golang.org/x/arch v0.4.0/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8= golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc= From d6f4127aa2df23f80c84f7ff8cef5b3f75dead75 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 10 Aug 2023 10:40:27 +0300 Subject: [PATCH 81/93] focus on hover --- .../destination.list/destination.list.styled.tsx | 2 +- .../sources.manage.list/sources.manage.styled.tsx | 3 ++- .../destination.list/destination.list.styled.tsx | 7 +++++-- .../destination.list/destination.list.tsx | 12 ++++++------ 4 files changed, 14 insertions(+), 10 deletions(-) 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 index ceb5afeb1..7df255f83 100644 --- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx @@ -42,7 +42,7 @@ export const CardWrapper = styled.div` flex-direction: column; cursor: pointer; &:hover { - background: var(--dark-mode-dark-1, #07111a81); + border: ${({ theme }) => `1px solid ${theme.colors.secondary}`}; } `; diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx index 9a36b4efa..5666538c4 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx @@ -13,8 +13,9 @@ export const CardWrapper = styled.div` flex-direction: column; gap: 10px; cursor: pointer; + &:hover { - background: var(--dark-mode-dark-1, #07111a81); + border: ${({ theme }) => `1px solid ${theme.colors.secondary}`}; } `; diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx index fcc749e55..8802d0155 100644 --- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx @@ -8,16 +8,19 @@ export const DestinationTypeTitleWrapper = styled.div` margin: 24px 0; `; -export const DestinationListWrapper = styled.div` +export const DestinationListWrapper = styled.div<{ repeat: number }>` width: 100%; display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: ${({ repeat }) => `repeat(${repeat},1fr)`}; gap: 24px; ::-webkit-scrollbar { display: none; } -ms-overflow-style: none; scrollbar-width: none; + @media screen and (max-width: 1700px) { + grid-template-columns: repeat(4, 1fr); + } @media screen and (max-width: 1500px) { grid-template-columns: repeat(3, 1fr); diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx index f92d799e5..8f838552c 100644 --- a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx +++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx @@ -8,11 +8,7 @@ import { import { capitalizeFirstLetter } from "@/utils/functions"; import { ROUTES } from "@/utils/constants"; -export function DestinationList({ - data: { items, name }, - onItemClick, - sectionData, -}: any) { +export function DestinationList({ data: { items, name }, onItemClick }: any) { function renderList() { return items?.map((item: any, index: number) => ( )); } + const getNumberOfItemsRepeated = () => + window.location.pathname.includes(ROUTES.CREATE_DESTINATION) ? 5 : 4; return items?.length ? ( <> @@ -30,7 +28,9 @@ export function DestinationList({ name )}`} - {renderList()} + + {renderList()} + ) : null; } From 7c0e27a2556c71e317efaa24e038518a1667a837 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 10 Aug 2023 10:46:31 +0300 Subject: [PATCH 82/93] types --- .../setup/destination/destination.section.tsx | 21 ++++++++++++++----- .../setup/setup.section/setup.section.tsx | 2 +- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx index 41e3c8a72..18952e541 100644 --- a/frontend/webapp/containers/setup/destination/destination.section.tsx +++ b/frontend/webapp/containers/setup/destination/destination.section.tsx @@ -19,16 +19,27 @@ import { KeyvalLoader } from "@/design.system"; import { useNotification } from "@/hooks"; import { getDestinationsTypes } from "@/services"; +interface DestinationTypes { + image_url: string; + display_name: string; + supported_signals: { + [key: string]: { + supported: boolean; + }; + }; + type: string; +} + type DestinationSectionProps = { sectionData?: any; setSectionData: (data: any) => void; - onNext?: () => void; + onSelectItem?: () => void; }; export function DestinationSection({ sectionData, setSectionData, - onNext, + onSelectItem, }: DestinationSectionProps) { const [searchFilter, setSearchFilter] = useState(""); const [dropdownData, setDropdownData] = useState(null); @@ -49,9 +60,9 @@ export function DestinationSection({ }); }, [isError]); - function onItemSelect(item) { + function handleSelectItem(item: DestinationTypes) { setSectionData(item); - onNext && onNext(); + onSelectItem && onSelectItem(); } function renderDestinationLists() { @@ -80,7 +91,7 @@ export function DestinationSection({ sectionData={sectionData} key={category.name} data={category} - onItemClick={(item: any) => onItemSelect(item)} + onItemClick={(item: DestinationTypes) => handleSelectItem(item)} /> ) ); diff --git a/frontend/webapp/containers/setup/setup.section/setup.section.tsx b/frontend/webapp/containers/setup/setup.section/setup.section.tsx index 5b45368ba..c0578d1e3 100644 --- a/frontend/webapp/containers/setup/setup.section/setup.section.tsx +++ b/frontend/webapp/containers/setup/setup.section/setup.section.tsx @@ -55,7 +55,7 @@ export function SetupSection() { ) : null; } From d2ae59648a7b3dcae0fa54c2bb8289c68bb14e25 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 10 Aug 2023 11:10:10 +0300 Subject: [PATCH 83/93] fixed focus issue --- frontend/webapp/design.system/card/card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/webapp/design.system/card/card.tsx b/frontend/webapp/design.system/card/card.tsx index 9867a5ae3..9d8110c75 100644 --- a/frontend/webapp/design.system/card/card.tsx +++ b/frontend/webapp/design.system/card/card.tsx @@ -5,5 +5,5 @@ interface CardProps { focus?: any; } export function KeyvalCard(props: CardProps) { - return {props.children}; + return {props.children}; } From 0d38d2a1c51bd630a81a3d3ba58483e5bdde0ea1 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 10 Aug 2023 11:27:23 +0300 Subject: [PATCH 84/93] remove scroll bar on firefox --- .../destination.list/destination.list.styled.tsx | 6 +++++- .../setup/destination/destination.section.styled.tsx | 5 +++++ 2 files changed, 10 insertions(+), 1 deletion(-) 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 index 7df255f83..23b90c4b2 100644 --- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx @@ -2,10 +2,12 @@ import { styled } from "styled-components"; export const ManagedListWrapper = styled.div` display: grid; - gap: 24px; + grid-gap: 24px; + padding: 0px 36px; padding-bottom: 50px; grid-template-columns: repeat(4, 1fr); + overflow-y: scroll; ::-webkit-scrollbar { display: none; } @@ -17,6 +19,7 @@ export const ManagedListWrapper = styled.div` } @media screen and (max-width: 1450px) { grid-template-columns: repeat(2, 1fr); + height: 75%; } `; @@ -30,6 +33,7 @@ export const MenuWrapper = styled.div` export const CardWrapper = styled.div` display: flex; width: 366px; + height: 190px; padding-top: 32px; padding-bottom: 24px; flex-direction: column; diff --git a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx index 000d3870c..8e6409f0f 100644 --- a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx +++ b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx @@ -6,6 +6,11 @@ export const DestinationListContainer = styled.div` padding-bottom: 300px; margin-top: 24px; overflow: scroll; + ::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ `; export const EmptyListWrapper = styled.div` From 0a35b8c750fde1ae1f99bf663dabc6ed67fd766d Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 10 Aug 2023 11:46:28 +0300 Subject: [PATCH 85/93] fixed focus issue --- .../setup/sources/sources.list/sources.list.styled.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx index 39d6b8fe9..100317447 100644 --- a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx +++ b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx @@ -25,7 +25,6 @@ export const SourcesListWrapper = styled.div<{ repeat: number }>` overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; - display: grid; grid-template-columns: ${({ repeat }) => `repeat(${repeat},1fr)`}; @@ -46,7 +45,7 @@ export const SourcesListWrapper = styled.div<{ repeat: number }>` `; export const EmptyListWrapper = styled.div` - width: 100%; + width: 1168px; display: flex; justify-content: center; align-items: center; From fec0da92ee103a93b63188ccac9071a84be35a3a Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 10 Aug 2023 13:26:52 +0300 Subject: [PATCH 86/93] WIP --- .../destination.list.styled.tsx | 1 - .../sources.manage.styled.tsx | 25 +++++++++++++++---- 2 files changed, 20 insertions(+), 6 deletions(-) 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 index 23b90c4b2..a161d7f17 100644 --- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx +++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx @@ -3,7 +3,6 @@ import { styled } from "styled-components"; export const ManagedListWrapper = styled.div` display: grid; grid-gap: 24px; - padding: 0px 36px; padding-bottom: 50px; grid-template-columns: repeat(4, 1fr); diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx index 5666538c4..8ac4100ab 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx @@ -28,12 +28,27 @@ export const EmptyListWrapper = styled.div` `; export const ManagedListWrapper = styled.div` - max-height: 72%; - display: flex; - flex-wrap: wrap; + display: grid; + height: 680px; gap: 24px; - padding: 0 36px 0 0; - overflow-y: scroll; + overflow: scroll; + grid-template-columns: repeat(5, 1fr); + ::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; + scrollbar-width: none; + + @media screen and (max-width: 1800px) { + grid-template-columns: repeat(4, 1fr); + } + @media screen and (max-width: 1500px) { + grid-template-columns: repeat(3, 1fr); + } + @media screen and (max-width: 1200px) { + grid-template-columns: repeat(2, 1fr); + height: 650px; + } `; export const ManagedContainer = styled.div` From 41f1d1d49843753300f07b1f770a38afc215ebbc Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 10 Aug 2023 13:34:32 +0300 Subject: [PATCH 87/93] WIP --- .../containers/overview/destinations/destinations.styled.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/webapp/containers/overview/destinations/destinations.styled.tsx b/frontend/webapp/containers/overview/destinations/destinations.styled.tsx index 008ad16f7..993600da7 100644 --- a/frontend/webapp/containers/overview/destinations/destinations.styled.tsx +++ b/frontend/webapp/containers/overview/destinations/destinations.styled.tsx @@ -2,6 +2,11 @@ import styled from "styled-components"; export const NewDestinationContainer = styled.div` padding: 20px 36px; + ::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; + scrollbar-width: none; `; export const ManageDestinationWrapper = styled.div` From 41d9ec0a606c3e795bce18a6824dcfb3813a441a Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 10 Aug 2023 13:55:30 +0300 Subject: [PATCH 88/93] WIP --- .../sources/sources.manage.list/sources.manage.styled.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx index 8ac4100ab..eef639f38 100644 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx @@ -29,7 +29,6 @@ export const EmptyListWrapper = styled.div` export const ManagedListWrapper = styled.div` display: grid; - height: 680px; gap: 24px; overflow: scroll; grid-template-columns: repeat(5, 1fr); @@ -44,6 +43,7 @@ export const ManagedListWrapper = styled.div` } @media screen and (max-width: 1500px) { grid-template-columns: repeat(3, 1fr); + height: 680px; } @media screen and (max-width: 1200px) { grid-template-columns: repeat(2, 1fr); From eccae083b7d35861624b8eaec5993cd346321ae9 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 24 Aug 2023 17:01:38 +0300 Subject: [PATCH 89/93] WIP --- go.work.sum | 30 +++++++++++++++++++++++++----- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/go.work.sum b/go.work.sum index 44d7b8b51..0cbb2f727 100644 --- a/go.work.sum +++ b/go.work.sum @@ -243,6 +243,7 @@ github.com/alecthomas/kingpin/v2 v2.3.2/go.mod h1:0gyi0zQnjuFk8xrkNKamJoyUo382HR github.com/alecthomas/units v0.0.0-20190924025748-f65c72e2690d/go.mod h1:rBZYJk541a8SKzHPHnH3zbiI+7dagKZ0cgpgrD7Fyho= github.com/alecthomas/units v0.0.0-20211218093645-b94a6e3cc137/go.mod h1:OMCwj8VM1Kc9e19TLln2VL61YJF0x1XFtfdL4JdbSyE= github.com/antlr/antlr4/runtime/Go/antlr v1.4.10/go.mod h1:F7bn7fEU90QkQ3tnmaTx3LTKLEDqnwWODIYppRQ5hnY= +github.com/antlr/antlr4/runtime/Go/antlr/v4 v4.0.0-20230305170008-8188dc5388df/go.mod h1:pSwJ0fSY5KhvocuWSx4fz3BA8OrA1bQn+K1Eli3BRwM= github.com/armon/go-socks5 v0.0.0-20160902184237-e75332964ef5/go.mod h1:wHh0iHkYZB8zMSxRWpUBQtwG5a7fFgvEO+odwuTv2gs= github.com/benbjohnson/clock v1.3.0/go.mod h1:J11/hYXuz8f4ySSvYwY0FKfm+ezbsZBKZxNJlLklBHA= github.com/blang/semver/v4 v4.0.0/go.mod h1:IbckMUScFkM3pff0VJDNKRiT6TG/YpiHIM2yvyW5YoQ= @@ -257,8 +258,11 @@ github.com/cncf/udpa/go v0.0.0-20220112060539-c52dc94e7fbe/go.mod h1:6pvJx4me5XP github.com/cncf/xds/go v0.0.0-20211001041855-01bcc9b48dfe/go.mod h1:eXthEFrGJvWHgFFCl3hGmgk+/aYT6PnTQLykKQRLhEs= github.com/cncf/xds/go v0.0.0-20230607035331-e9ce68804cb4/go.mod h1:eXthEFrGJvWHgFFCl3hGmgk+/aYT6PnTQLykKQRLhEs= github.com/coreos/go-semver v0.3.0/go.mod h1:nnelYz7RCh+5ahJtPPxZlU+153eP4D4r3EedlOD2RNk= +github.com/coreos/go-semver v0.3.1/go.mod h1:irMmmIw/7yzSRPWryHsK7EYSg09caPQL03VsM8rvUec= github.com/coreos/go-systemd/v22 v22.4.0/go.mod h1:Y58oyj3AT4RCenI/lSvhwexgC+NSVTIJ3seZv2GcEnc= +github.com/coreos/go-systemd/v22 v22.5.0/go.mod h1:Y58oyj3AT4RCenI/lSvhwexgC+NSVTIJ3seZv2GcEnc= github.com/dustin/go-humanize v1.0.0/go.mod h1:HtrtbFcZ19U5GC7JDqmcUSB87Iq5E25KnS6fMYU6eOk= +github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto= github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230725113008-4107208bd0e5/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo= github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230725115644-40990f7e3c2a/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo= github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230725120751-70c2c88605dd/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo= @@ -317,12 +321,14 @@ github.com/go-openapi/swag v0.22.4/go.mod h1:UzaqsxGiab7freDnrUUra0MwWfN/q7tE4j+ github.com/go-task/slim-sprig v0.0.0-20230315185526-52ccab3ef572/go.mod h1:9Pwr4B2jHnOSGXyyzV8ROjYa2ojvAY6HCGYYfMoC3Ls= github.com/godbus/dbus/v5 v5.0.4/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA= github.com/golang-jwt/jwt/v4 v4.4.2/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w39/MY0Ch0= +github.com/golang-jwt/jwt/v4 v4.5.0/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w39/MY0Ch0= github.com/golang/glog v1.1.1 h1:jxpi2eWoU84wbX9iIEyAeeoac3FLuifZpY9tcNUD9kw= github.com/golang/glog v1.1.1/go.mod h1:zR+okUeTbrL6EL3xHUDxZuEtGv04p5shwip1+mL/rLQ= github.com/golang/snappy v0.0.3/go.mod h1:/XxbfmMg8lxefKM7IXC3fBNl/7bRcc72aCRzEWrmP2Q= github.com/golang/snappy v0.0.4/go.mod h1:/XxbfmMg8lxefKM7IXC3fBNl/7bRcc72aCRzEWrmP2Q= github.com/google/btree v1.0.1/go.mod h1:xXMiIv4Fb/0kKde4SpL7qlzvu5cMJDRkFDxJfI9uaxA= github.com/google/cel-go v0.12.6/go.mod h1:Jk7ljRzLBhkmiAwBoUxB1sZSCVBAzkqPF25olK/iRDw= +github.com/google/cel-go v0.16.0/go.mod h1:HXZKzB0LXqer5lHHgfWAnlYwJaQBDKMjxjulNQzhwhY= github.com/google/gnostic v0.6.9 h1:ZK/5VhkoX835RikCHpSUJV9a+S3e1zLh59YnyWeBW+0= github.com/google/gnostic v0.6.9/go.mod h1:Nm8234We1lq6iB9OmlgNv3nH91XLLVZHCDayfA3xq+E= github.com/google/go-cmp v0.5.3/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE= @@ -368,18 +374,13 @@ github.com/opentracing/opentracing-go v1.1.0/go.mod h1:UkNAQd3GIcIGf0SeVgPpRdFSt github.com/prometheus/client_golang v1.11.0/go.mod h1:Z6t4BnS23TR94PD6BsDNk8yVqroYurpAkEiz0P2BEV0= github.com/prometheus/client_golang v1.12.1/go.mod h1:3Z9XVyYiZYEO+YQWt3RD2R3jrbd179Rt297l4aS6nDY= github.com/prometheus/client_golang v1.14.0/go.mod h1:8vpkKitgIVNcqrRBWh1C4TIUQgYNtG/XQE4E/Zae36Y= -github.com/prometheus/client_golang v1.16.0 h1:yk/hx9hDbrGHovbci4BY+pRMfSuuat626eFsHb7tmT8= -github.com/prometheus/client_golang v1.16.0/go.mod h1:Zsulrv/L9oM40tJ7T815tM89lFEugiJ9HzIqaAx4LKc= github.com/prometheus/client_model v0.3.0/go.mod h1:LDGWKZIo7rky3hgvBe+caln+Dr3dPggB5dvjtD7w9+w= github.com/prometheus/common v0.26.0/go.mod h1:M7rCNAaPfAosfx8veZJCuw84e35h3Cfd9VFqTh1DIvc= github.com/prometheus/common v0.32.1/go.mod h1:vu+V0TpY+O6vW9J44gczi3Ap/oXXR10b+M/gUGO4Hls= github.com/prometheus/common v0.37.0/go.mod h1:phzohg0JFMnBEFGxTDbfu3QyL5GI8gTQJFhYO5B3mfA= -github.com/prometheus/common v0.44.0 h1:+5BrQJwiBB9xsMygAB3TNvpQKOwlkc25LbISbrdOOfY= -github.com/prometheus/common v0.44.0/go.mod h1:ofAIvZbQ1e/nugmZGz4/qCb9Ap1VoSTIO7x0VV9VvuY= github.com/prometheus/procfs v0.6.0/go.mod h1:cz+aTbrPOrUb4q7XlbU9ygM+/jj0fzG6c1xBZuNvfVA= github.com/prometheus/procfs v0.7.3/go.mod h1:cz+aTbrPOrUb4q7XlbU9ygM+/jj0fzG6c1xBZuNvfVA= github.com/prometheus/procfs v0.8.0/go.mod h1:z7EfXMXOkbkqb9IINtpCn86r/to3BnA0uaxHdg830/4= -github.com/prometheus/procfs v0.10.1/go.mod h1:nwNm2aOCAYw8uTR/9bWRREkZFxAUcWzPHWJq+XBB/FM= github.com/prometheus/procfs v0.11.0 h1:5EAgkfkMl659uZPbe9AS2N68a7Cc1TJbPEuGzFuRbyk= github.com/prometheus/procfs v0.11.0/go.mod h1:nwNm2aOCAYw8uTR/9bWRREkZFxAUcWzPHWJq+XBB/FM= github.com/rogpeppe/go-internal v1.9.0/go.mod h1:WtVeX8xhTBvf0smdhujwtBcq4Qrzq/fJaraNFVN+nFs= @@ -400,13 +401,21 @@ github.com/xhit/go-str2duration/v2 v2.1.0/go.mod h1:ohY8p+0f07DiV6Em5LKB0s2YpLtX github.com/xiang90/probing v0.0.0-20190116061207-43a291ad63a2/go.mod h1:UETIi67q53MR2AWcXfiuqkDkRtnGDLqkBTpCHuJHxtU= github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY= go.etcd.io/bbolt v1.3.6/go.mod h1:qXsaaIqmgQH0T+OPdb99Bf+PKfBBQVAdyD6TY9G8XM4= +go.etcd.io/bbolt v1.3.7/go.mod h1:N9Mkw9X8x5fupy0IKsmuqVtoGDyxsaDlbk4Rd05IAQw= go.etcd.io/etcd/api/v3 v3.5.7/go.mod h1:9qew1gCdDDLu+VwmeG+iFpL+QlpHTo7iubavdVDgCAA= +go.etcd.io/etcd/api/v3 v3.5.9/go.mod h1:uyAal843mC8uUVSLWz6eHa/d971iDGnCRpmKd2Z+X8k= go.etcd.io/etcd/client/pkg/v3 v3.5.7/go.mod h1:o0Abi1MK86iad3YrWhgUsbGx1pmTS+hrORWc2CamuhY= +go.etcd.io/etcd/client/pkg/v3 v3.5.9/go.mod h1:y+CzeSmkMpWN2Jyu1npecjB9BBnABxGM4pN8cGuJeL4= go.etcd.io/etcd/client/v2 v2.305.7/go.mod h1:GQGT5Z3TBuAQGvgPfhR7VPySu/SudxmEkRq9BgzFU6s= +go.etcd.io/etcd/client/v2 v2.305.9/go.mod h1:0NBdNx9wbxtEQLwAQtrDHwx58m02vXpDcgSYI2seohQ= go.etcd.io/etcd/client/v3 v3.5.7/go.mod h1:sOWmj9DZUMyAngS7QQwCyAXXAL6WhgTOPLNS/NabQgw= +go.etcd.io/etcd/client/v3 v3.5.9/go.mod h1:i/Eo5LrZ5IKqpbtpPDuaUnDOUv471oDg8cjQaUr2MbA= go.etcd.io/etcd/pkg/v3 v3.5.7/go.mod h1:kcOfWt3Ov9zgYdOiJ/o1Y9zFfLhQjylTgL4Lru8opRo= +go.etcd.io/etcd/pkg/v3 v3.5.9/go.mod h1:BZl0SAShQFk0IpLWR78T/+pyt8AruMHhTNNX73hkNVY= go.etcd.io/etcd/raft/v3 v3.5.7/go.mod h1:TflkAb/8Uy6JFBxcRaH2Fr6Slm9mCPVdI2efzxY96yU= +go.etcd.io/etcd/raft/v3 v3.5.9/go.mod h1:WnFkqzFdZua4LVlVXQEGhmooLeyS7mqzS4Pf4BCVqXg= go.etcd.io/etcd/server/v3 v3.5.7/go.mod h1:gxBgT84issUVBRpZ3XkW1T55NjOb4vZZRI4wVvNhf4A= +go.etcd.io/etcd/server/v3 v3.5.9/go.mod h1:GgI1fQClQCFIzuVjlvdbMxNbnISt90gdfYyqiAIt65g= go.opencensus.io v0.24.0/go.mod h1:vNK8G9p7aAivkbmorf4v+7Hgx+Zs0yY+0fOtgBfjQKo= go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.35.0/go.mod h1:h8TWwRAhQpOd0aM5nYsRD8+flnkj+526GEIVlarH7eY= go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.35.1/go.mod h1:9NiG9I2aHTKkcxqCILhjtyNA1QEiCjdBACv4IvrFQ+c= @@ -419,6 +428,7 @@ go.opentelemetry.io/otel/sdk v1.10.0/go.mod h1:vO06iKzD5baltJz1zarxMCNHFpUlUiOy4 go.opentelemetry.io/otel/trace v1.10.0/go.mod h1:Sij3YYczqAdz+EhmGhE6TpTxUO5/F/AzrK+kxfGqySM= go.opentelemetry.io/proto/otlp v1.0.0 h1:T0TX0tmXU8a3CbNXzEKGeU5mIVOdf0oykP+u2lIVU/I= go.opentelemetry.io/proto/otlp v1.0.0/go.mod h1:Sy6pihPLfYHkr3NkUbEhGHFhINUSI/v80hjKIs5JXpM= +go.uber.org/atomic v1.10.0/go.mod h1:LUxbIzbOniOlMKjJjyPfpl4v+PKK2cNJn91OQbhoJI0= go.uber.org/goleak v1.1.10/go.mod h1:8a7PlsEVH3e/a/GLqe5IIrQx6GzcnRmZEufDUTk4A7A= go.uber.org/goleak v1.2.0/go.mod h1:XJYK+MuIchqpmGmUSAzotztawfKvYLUIgg7guXrwVUo= go.uber.org/goleak v1.2.1/go.mod h1:qlT2yGI9QafXHhZZLxlSuNsMw3FFLxBr+tBRlmO1xH4= @@ -431,6 +441,7 @@ golang.org/x/crypto v0.1.0/go.mod h1:RecgLatLF4+eUMCP1PoPZQb+cVrJcOPbHkTkbkB9sbw golang.org/x/crypto v0.9.0/go.mod h1:yrmDGqONDYtNj3tH8X9dzUun2m2lzPa9ngI6/RUPGR0= golang.org/x/crypto v0.11.0 h1:6Ewdq3tDic1mg5xRO4milcWCfMVQhI4NkqWWvqejpuA= golang.org/x/crypto v0.11.0/go.mod h1:xgJhtzW8F9jGdVFWZESrid1U1bjeNy4zgy5cRr/CIio= +golang.org/x/exp v0.0.0-20220722155223-a9213eeb770e/go.mod h1:Kr81I6Kryrl9sr8s2FK3vxD90NdsKWRuOIl2O4CvYbA= golang.org/x/exp v0.0.0-20230713183714-613f0c0eb8a1 h1:MGwJjxBy0HJshjDNfLsYO8xppfqWlA5ZT9OhtUUhTNw= golang.org/x/exp v0.0.0-20230713183714-613f0c0eb8a1/go.mod h1:FXUEEKJgO7OQYeo8N01OfiKP8RXMtf6e8aTskBGqWdc= golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4= @@ -448,8 +459,12 @@ golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug golang.org/x/net v0.7.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs= golang.org/x/net v0.8.0/go.mod h1:QVkue5JL9kW//ek3r6jTKnTFis1tRmNAW2P1shuFdJc= golang.org/x/net v0.9.0/go.mod h1:d48xBJpPfHeWQsugry2m+kC02ZBRGRgulfHnEXEuWns= +golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg= +golang.org/x/net v0.12.0/go.mod h1:zEVYFnQC7m/vmpQFELhcD1EWkZlX69l4oqgmer6hfKA= golang.org/x/oauth2 v0.0.0-20210514164344-f6687ab2804c/go.mod h1:KelEdhl1UZF7XfJ4dDtk6s++YSgaE7mD/BuKKDLBl4A= +golang.org/x/oauth2 v0.5.0/go.mod h1:9/XBHVqLaWO3/BRHs5jbpYCnOZVjj5V0ndyaAM7KB4I= golang.org/x/oauth2 v0.6.0/go.mod h1:ycmewcwgD4Rpr3eZJLSB4Kyyljb3qDh40vJ8STE5HKw= +golang.org/x/oauth2 v0.7.0/go.mod h1:hPLQkd9LyjfXTiRohC/41GhcFqxisoUQ99sCUOHO9x4= golang.org/x/oauth2 v0.10.0 h1:zHCpF2Khkwy4mMB4bv0U37YtJdTGW8jI0glAApi0Kh8= golang.org/x/oauth2 v0.10.0/go.mod h1:kTpgurOux7LqtuxjuyZa4Gj2gdezIt/jQtGnNFfypQI= golang.org/x/sync v0.0.0-20201207232520-09787c993a3a/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM= @@ -471,9 +486,11 @@ golang.org/x/sys v0.3.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.7.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/term v0.6.0/go.mod h1:m6U89DPEgQRMq3DNkDClhWw02AUbt2daBVO4cn4Hv9U= +golang.org/x/term v0.8.0/go.mod h1:xPskH00ivmX89bAKVGSKKtLOWNx2+17Eiy94tnKShWo= golang.org/x/text v0.3.8/go.mod h1:E6s5w1FMmriuDzIBO73fBruAKo1PCIq6d2Q6DHfQ8WQ= golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8= golang.org/x/text v0.8.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8= +golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8= golang.org/x/tools v0.0.0-20191108193012-7d206e10da11/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo= golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc= golang.org/x/tools v0.4.0/go.mod h1:UE5sM2OK9E/d67R0ANs2xJizIymRP5gJU295PvKXxjQ= @@ -517,15 +534,18 @@ google.golang.org/grpc v1.55.0/go.mod h1:iYEXKGkEBhg1PjZQvoYEVPTDkHo1/bjTnfwTeGO google.golang.org/grpc/cmd/protoc-gen-go-grpc v1.1.0/go.mod h1:6Kw0yEErY5E/yWrBtf03jp27GLLJujG4z/JK95pnjjw= google.golang.org/protobuf v1.28.1/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I= gopkg.in/natefinch/lumberjack.v2 v2.0.0/go.mod h1:l0ndWWf7gzL7RNwBG7wST/UCcT4T24xpD6X8LsfU/+k= +gopkg.in/natefinch/lumberjack.v2 v2.2.1/go.mod h1:YD8tP3GAjkrDg1eZH7EGmyESg/lsYskCTPBJVb9jqSc= k8s.io/api v0.27.2/go.mod h1:ENmbocXfBT2ADujUXcBhHV55RIT31IIEvkntP6vZKS4= k8s.io/apimachinery v0.27.2/go.mod h1:XNfZ6xklnMCOGGFNqXG7bUrQCoR04dh/E7FprV6pb+E= k8s.io/apiserver v0.27.3/go.mod h1:Y61+EaBMVWUBJtxD5//cZ48cHZbQD+yIyV/4iEBhhNA= k8s.io/apiserver v0.27.4/go.mod h1:GDEFRfFZ4/l+pAvwYRnoSfz0K4j3TWiN4WsG2KnRteE= +k8s.io/apiserver v0.28.0/go.mod h1:MvLmtxhQ0Tb1SZk4hfJBjs8iqr5nhYeaFSaoEcz7Lk4= k8s.io/client-go v0.27.2/go.mod h1:tY0gVmUsHrAmjzHX9zs7eCjxcBsf8IiNe7KQ52biTcQ= k8s.io/component-base v0.27.3/go.mod h1:JNiKYcGImpQ44iwSYs6dysxzR9SxIIgQalk4HaCNVUY= k8s.io/klog/v2 v2.80.1/go.mod h1:y1WjHnz7Dj687irZUWR/WLkLc5N1YHtjLdmgWjndZn0= k8s.io/kms v0.27.3/go.mod h1:VDfnSIK0dk5J+jasbe+kKpb3CQVwlcDeBLyq59P2KyY= k8s.io/kms v0.27.4/go.mod h1:0BY6tkfa+zOP85u8yE7iNNf1Yx7rEZnRQSWLEbsSk+w= +k8s.io/kms v0.28.0/go.mod h1:CNU792ls92v2Ye7Vn1jn+xLqYtUSezDZNVu6PLbJyrU= k8s.io/kube-openapi v0.0.0-20230718181711-3c0fae5ee9fd h1:0tN7VkdcfPGfii8Zl0edopOV08M6XxGlhO29AsPkBHw= k8s.io/kube-openapi v0.0.0-20230718181711-3c0fae5ee9fd/go.mod h1:wZK2AVp1uHCp4VamDVgBP2COHZjqD1T68Rf0CM3YjSM= k8s.io/utils v0.0.0-20230711102312-30195339c3c7 h1:ZgnF1KZsYxWIifwSNZFZgNtWE89WI5yiP5WwlfDoIyc= From caa3fa70c3fc85864db74d0e04b6f41572287676 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Sun, 10 Mar 2024 13:26:05 +0200 Subject: [PATCH 90/93] chore: wip --- .../sources.manage.card.tsx | 49 +++++++++++++++++++ .../sources.manage.list.tsx | 24 +++++++++ .../sources.manage.styled.tsx | 38 ++++++++++++++ .../containers/overview/sources/sources.tsx | 28 +++++++++++ frontend/webapp/types/sources.tsx | 11 +++++ 5 files changed, 150 insertions(+) create mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx create mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx create mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx create mode 100644 frontend/webapp/containers/overview/sources/sources.tsx create mode 100644 frontend/webapp/types/sources.tsx diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx new file mode 100644 index 000000000..dbd8fe628 --- /dev/null +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import { KeyvalImage, KeyvalTag, KeyvalText } from "@/design.system"; +import { CardWrapper } from "./sources.manage.styled"; +import theme from "@/styles/palette"; +import { KIND_COLORS } from "@/styles/global"; +import { SOURCES_LOGOS } from "@/assets/images"; +import { ManagedSource } from "@/types/sources"; + +const TEXT_STYLE: React.CSSProperties = { + textOverflow: "ellipsis", + whiteSpace: "nowrap", + overflow: "hidden", + width: 224, + textAlign: "center", +}; +const LOGO_STYLE: React.CSSProperties = { + padding: 4, + backgroundColor: theme.colors.white, +}; + +interface SourceManagedCardProps { + item: ManagedSource | null; +} +const DEPLOYMENT = "Deployment"; +export default function SourceManagedCard({ + item = null, +}: SourceManagedCardProps) { + return ( + + + + {item?.name} + + + + {item?.namespace} + + + ); +} diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx new file mode 100644 index 000000000..9d7b4bded --- /dev/null +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { ManagedListWrapper, EmptyListWrapper } from "./sources.manage.styled"; +import Empty from "@/assets/images/empty-list.svg"; +import SourceManagedCard from "./sources.manage.card"; + +export function SourcesManagedList({ data = [1, 1, 1, 1] }) { + function renderDestinations() { + return data.map((source: any) => ); + } + + return ( + <> + + {data?.length === 0 ? ( + + + + ) : ( + renderDestinations() + )} + + + ); +} diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx new file mode 100644 index 000000000..cb4f81c3a --- /dev/null +++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx @@ -0,0 +1,38 @@ +import { styled } from "styled-components"; + +export const CardWrapper = styled.div` + display: flex; + width: 272px; + height: 152px; + padding-top: 32px; + padding-bottom: 24px; + border-radius: 24px; + border: 1px solid var(--dark-mode-dark-3, #203548); + background: var(--dark-mode-dark-1, #07111a); + align-items: center; + flex-direction: column; + gap: 10px; + cursor: pointer; + &:hover { + background: var(--dark-mode-dark-1, #07111a81); + } +`; + +export const EmptyListWrapper = styled.div` + width: 100%; + margin-top: 130px; + display: flex; + justify-content: center; + align-items: center; +`; + +export const ManagedListWrapper = styled.div` + width: 100%; + display: flex; + flex-wrap: wrap; + gap: 24px; + overflow-y: scroll; + padding: 0px 36px; + padding-bottom: 50px; + margin-top: 88px; +`; diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx new file mode 100644 index 000000000..9164e2704 --- /dev/null +++ b/frontend/webapp/containers/overview/sources/sources.tsx @@ -0,0 +1,28 @@ +"use client"; +import React from "react"; +import { KeyvalLoader } from "@/design.system"; +import { OVERVIEW, QUERIES } from "@/utils/constants"; +import { useQuery } from "react-query"; +import { getSources } from "@/services"; +import { OverviewHeader, SourcesManagedList } from "@/components/overview"; +import { SourcesContainerWrapper } from "./sources.styled"; + +export function SourcesContainer() { + const { + data: sources, + refetch, + isLoading, + } = useQuery([QUERIES.API_SOURCES], getSources); + + if (isLoading) { + return ; + } + console.log({ sources }); + + return ( + + + + + ); +} diff --git a/frontend/webapp/types/sources.tsx b/frontend/webapp/types/sources.tsx new file mode 100644 index 000000000..53f44fe6e --- /dev/null +++ b/frontend/webapp/types/sources.tsx @@ -0,0 +1,11 @@ +export interface ManagedSource { + kind: string; + name: string; + namespace: string; + languages: [ + { + container_name: string; + language: string; + } + ]; +} From 21096f49262a5862b82c43f2dc1342fb7872f940 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 13 Mar 2024 17:04:42 +0200 Subject: [PATCH 91/93] chore: wip --- .../sources.manage.card.tsx | 49 ------------------- .../sources.manage.list.tsx | 24 --------- .../sources.manage.styled.tsx | 38 -------------- .../containers/overview/sources/sources.tsx | 28 ----------- 4 files changed, 139 deletions(-) delete mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx delete mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx delete mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx delete mode 100644 frontend/webapp/containers/overview/sources/sources.tsx diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx deleted file mode 100644 index dbd8fe628..000000000 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from "react"; -import { KeyvalImage, KeyvalTag, KeyvalText } from "@/design.system"; -import { CardWrapper } from "./sources.manage.styled"; -import theme from "@/styles/palette"; -import { KIND_COLORS } from "@/styles/global"; -import { SOURCES_LOGOS } from "@/assets/images"; -import { ManagedSource } from "@/types/sources"; - -const TEXT_STYLE: React.CSSProperties = { - textOverflow: "ellipsis", - whiteSpace: "nowrap", - overflow: "hidden", - width: 224, - textAlign: "center", -}; -const LOGO_STYLE: React.CSSProperties = { - padding: 4, - backgroundColor: theme.colors.white, -}; - -interface SourceManagedCardProps { - item: ManagedSource | null; -} -const DEPLOYMENT = "Deployment"; -export default function SourceManagedCard({ - item = null, -}: SourceManagedCardProps) { - return ( - - - - {item?.name} - - - - {item?.namespace} - - - ); -} diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx deleted file mode 100644 index 9d7b4bded..000000000 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react"; -import { ManagedListWrapper, EmptyListWrapper } from "./sources.manage.styled"; -import Empty from "@/assets/images/empty-list.svg"; -import SourceManagedCard from "./sources.manage.card"; - -export function SourcesManagedList({ data = [1, 1, 1, 1] }) { - function renderDestinations() { - return data.map((source: any) => ); - } - - return ( - <> - - {data?.length === 0 ? ( - - - - ) : ( - renderDestinations() - )} - - - ); -} diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx deleted file mode 100644 index cb4f81c3a..000000000 --- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { styled } from "styled-components"; - -export const CardWrapper = styled.div` - display: flex; - width: 272px; - height: 152px; - padding-top: 32px; - padding-bottom: 24px; - border-radius: 24px; - border: 1px solid var(--dark-mode-dark-3, #203548); - background: var(--dark-mode-dark-1, #07111a); - align-items: center; - flex-direction: column; - gap: 10px; - cursor: pointer; - &:hover { - background: var(--dark-mode-dark-1, #07111a81); - } -`; - -export const EmptyListWrapper = styled.div` - width: 100%; - margin-top: 130px; - display: flex; - justify-content: center; - align-items: center; -`; - -export const ManagedListWrapper = styled.div` - width: 100%; - display: flex; - flex-wrap: wrap; - gap: 24px; - overflow-y: scroll; - padding: 0px 36px; - padding-bottom: 50px; - margin-top: 88px; -`; diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx deleted file mode 100644 index 9164e2704..000000000 --- a/frontend/webapp/containers/overview/sources/sources.tsx +++ /dev/null @@ -1,28 +0,0 @@ -"use client"; -import React from "react"; -import { KeyvalLoader } from "@/design.system"; -import { OVERVIEW, QUERIES } from "@/utils/constants"; -import { useQuery } from "react-query"; -import { getSources } from "@/services"; -import { OverviewHeader, SourcesManagedList } from "@/components/overview"; -import { SourcesContainerWrapper } from "./sources.styled"; - -export function SourcesContainer() { - const { - data: sources, - refetch, - isLoading, - } = useQuery([QUERIES.API_SOURCES], getSources); - - if (isLoading) { - return ; - } - console.log({ sources }); - - return ( - - - - - ); -} From 97b23bb094efe631fa6353f82e8293a5e73858b3 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 9 Sep 2024 15:07:31 +0300 Subject: [PATCH 92/93] chore: wip --- .../sources/managed.sources.table/index.tsx | 11 +-- .../sources.table.header.tsx | 68 ++++++++++++++++++- .../containers/main/sources/managed/index.tsx | 8 ++- frontend/webapp/hooks/sources/useSources.ts | 48 +++++++++++++ 4 files changed, 127 insertions(+), 8 deletions(-) diff --git a/frontend/webapp/components/overview/sources/managed.sources.table/index.tsx b/frontend/webapp/components/overview/sources/managed.sources.table/index.tsx index 7367ac979..56869e7d0 100644 --- a/frontend/webapp/components/overview/sources/managed.sources.table/index.tsx +++ b/frontend/webapp/components/overview/sources/managed.sources.table/index.tsx @@ -5,7 +5,7 @@ import { SourcesTableRow } from './sources.table.row'; import { SourcesTableHeader } from './sources.table.header'; import { EmptyList } from '@/components/lists'; import { OVERVIEW } from '@/utils'; -import { ConnectionsIcons, DeleteSource } from '@/components'; + import { ModalPositionX, ModalPositionY } from '@/design.system/modal/types'; type TableProps = { @@ -16,8 +16,9 @@ type TableProps = { filterSourcesByKind?: (kinds: string[]) => void; filterSourcesByNamespace?: (namespaces: string[]) => void; filterSourcesByLanguage?: (languages: string[]) => void; - toggleActionStatus?: (ids: string[], disabled: boolean) => void; deleteSourcesHandler?: (sources: ManagedSource[]) => void; + filterByConditionStatus?: (status: 'All' | 'True' | 'False') => void; + filterByConditionMessage: (message: string[]) => void; }; const SELECT_ALL_CHECKBOX = 'select_all'; @@ -27,11 +28,12 @@ export const ManagedSourcesTable: React.FC = ({ namespaces, onRowClick, sortSources, - toggleActionStatus, filterSourcesByKind, deleteSourcesHandler, filterSourcesByNamespace, filterSourcesByLanguage, + filterByConditionStatus, + filterByConditionMessage, }) => { const [selectedCheckbox, setSelectedCheckbox] = useState([]); const [showModal, setShowModal] = useState(false); @@ -94,13 +96,14 @@ export const ManagedSourcesTable: React.FC = ({ data={data} namespaces={namespaces} sortSources={sortSources} - toggleActionStatus={toggleActionStatus} filterSourcesByKind={filterSourcesByKind} filterSourcesByNamespace={filterSourcesByNamespace} filterSourcesByLanguage={filterSourcesByLanguage} selectedCheckbox={selectedCheckbox} onSelectedCheckboxChange={onSelectedCheckboxChange} deleteSourcesHandler={() => setShowModal(true)} + filterByConditionStatus={filterByConditionStatus} + filterByConditionMessage={filterByConditionMessage} /> {showModal && ( void; filterSourcesByKind?: (kinds: string[]) => void; filterSourcesByNamespace?: (namespaces: string[]) => void; - toggleActionStatus?: (ids: string[], disabled: boolean) => void; selectedCheckbox: string[]; onSelectedCheckboxChange: (id: string) => void; deleteSourcesHandler: () => void; filterSourcesByLanguage?: (languages: string[]) => void; + filterByConditionStatus?: (status: 'All' | 'True' | 'False') => void; + filterByConditionMessage: (message: string[]) => void; } export function SourcesTableHeader({ @@ -72,9 +75,13 @@ export function SourcesTableHeader({ deleteSourcesHandler, selectedCheckbox, onSelectedCheckboxChange, + filterByConditionStatus, + filterByConditionMessage, }: ActionsTableHeaderProps) { const [currentSortId, setCurrentSortId] = useState(''); const [groupNamespaces, setGroupNamespaces] = useState([]); + const [showSourcesWithIssues, setShowSourcesWithIssues] = useState(false); + const [groupErrorMessage, setGroupErrorMessage] = useState([]); const [groupLanguages, setGroupLanguages] = useState([ 'javascript', 'python', @@ -88,6 +95,20 @@ export function SourcesTableHeader({ K8SSourceTypes.DAEMON_SET, ]); + const { groupErrorMessages } = useSources(); + + useEffect(() => { + if (!filterByConditionStatus) { + return; + } + + setGroupErrorMessage(groupErrorMessages()); + + showSourcesWithIssues + ? filterByConditionStatus('False') + : filterByConditionStatus('All'); + }, [showSourcesWithIssues, data]); + useEffect(() => { if (namespaces) { setGroupNamespaces( @@ -140,6 +161,21 @@ export function SourcesTableHeader({ filterSourcesByLanguage && filterSourcesByLanguage(newGroup); } + function onErrorClick(message: string) { + let newGroup: string[] = []; + if (groupErrorMessage.includes(message)) { + setGroupErrorMessage( + groupErrorMessage.filter((item) => item !== message) + ); + newGroup = groupErrorMessage.filter((item) => item !== message); + } else { + setGroupErrorMessage([...groupErrorMessage, message]); + newGroup = [...groupErrorMessage, message]; + } + + filterByConditionMessage(newGroup); + } + const sourcesGroups = useMemo(() => { if (!namespaces) return []; @@ -161,7 +197,7 @@ export function SourcesTableHeader({ totalNamespacesWithApps === 1, })); - return [ + const actionsGroup = [ { label: 'Language', subTitle: 'Filter', @@ -323,6 +359,24 @@ export function SourcesTableHeader({ condition: true, }, ]; + + if (showSourcesWithIssues) { + actionsGroup.unshift({ + label: 'Error', + subTitle: 'Filter by error message', + condition: true, + items: groupErrorMessages().map((item) => ({ + label: item, + onClick: () => onErrorClick(item), + id: item, + selected: groupErrorMessage.includes(item), + disabled: + groupErrorMessage.length === 1 && groupErrorMessage.includes(item), + })), + }); + } + + return actionsGroup; }, [namespaces, groupNamespaces, data]); return ( @@ -336,6 +390,16 @@ export function SourcesTableHeader({ {`${data.length} ${OVERVIEW.MENU.SOURCES}`} + + {groupErrorMessage.length > 0 && ( + + setShowSourcesWithIssues(!showSourcesWithIssues) + } + label={'Show only sources with issues'} + /> + )} {selectedCheckbox.length > 0 && ( { @@ -119,12 +121,14 @@ export function ManagedSourcesContainer() { diff --git a/frontend/webapp/hooks/sources/useSources.ts b/frontend/webapp/hooks/sources/useSources.ts index 1aed8ca86..7264bba74 100644 --- a/frontend/webapp/hooks/sources/useSources.ts +++ b/frontend/webapp/hooks/sources/useSources.ts @@ -175,6 +175,51 @@ export function useSources() { setSortedSources(filtered); } + function filterByConditionMessage(message: string[]) { + const sourcesWithCondition = sources?.filter((deployment) => + deployment.instrumented_application_details.conditions.some( + (condition) => condition.status === 'False' + ) + ); + + const filteredSources = sourcesWithCondition?.filter((deployment) => + deployment.instrumented_application_details.conditions.some((condition) => + message.includes(condition.message) + ) + ); + + setSortedSources(filteredSources || []); + } + + const filterByConditionStatus = (status: 'All' | 'True' | 'False') => { + if (status === 'All') { + setSortedSources(sources); + return; + } + + const filteredSources = sources?.filter((deployment) => + deployment.instrumented_application_details.conditions.some( + (condition) => condition.status === status + ) + ); + + setSortedSources(filteredSources || []); + }; + + const groupErrorMessages = (): string[] => { + const errorMessagesSet: Set = new Set(); + + sources?.forEach((deployment) => { + deployment.instrumented_application_details?.conditions + .filter((condition) => condition.status === 'False') + .forEach((condition) => { + errorMessagesSet.add(condition.message); // Using Set to avoid duplicates + }); + }); + + return Array.from(errorMessagesSet); + }; + return { upsertSources, refetchSources, @@ -187,5 +232,8 @@ export function useSources() { instrumentedNamespaces, namespaces: namespaces?.namespaces || [], deleteSourcesHandler, + filterByConditionStatus, + groupErrorMessages, + filterByConditionMessage, }; } From 1b067197468179987ec7225f17a6182fd53296c3 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Mon, 9 Sep 2024 15:10:38 +0300 Subject: [PATCH 93/93] cchore: change label --- .../sources/managed.sources.table/sources.table.header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx b/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx index b54099b6f..b645662bb 100644 --- a/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx +++ b/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx @@ -397,7 +397,7 @@ export function SourcesTableHeader({ handleToggleChange={() => setShowSourcesWithIssues(!showSourcesWithIssues) } - label={'Show only sources with issues'} + label={'Show Sources with Errors'} /> )} {selectedCheckbox.length > 0 && (