This repository has been archived by the owner on Jul 2, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(webui): show current project in the navbar
- Loading branch information
Showing
23 changed files
with
313 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#630be2"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Superviseur Dashboard</title><script defer="defer" src="/static/js/main.650773b9.js"></script><link href="/static/css/main.61403641.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html> | ||
| <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#630be2"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Superviseur Dashboard</title><script defer="defer" src="/static/js/main.1a5e8dec.js"></script><link href="/static/css/main.61403641.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html> |
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
6 changes: 3 additions & 3 deletions
6
...ui/webui/build/static/js/main.650773b9.js → ...ui/webui/build/static/js/main.1a5e8dec.js
Large diffs are not rendered by default.
Oops, something went wrong.
File renamed without changes.
2 changes: 1 addition & 1 deletion
2
...ebui/build/static/js/main.650773b9.js.map → ...ebui/build/static/js/main.1a5e8dec.js.map
Large diffs are not rendered by default.
Oops, something went wrong.
1 change: 1 addition & 0 deletions
1
crates/webui/webui/build/static/media/kafka.e7d8fe1d18b91a8871b9c66cf80d4ca1.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
crates/webui/webui/build/static/media/nats.5ee42c5209de5b1699f3ca8886f11379.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions
8
...es/webui/webui/build/static/media/rabbitmq.c9f156289726ee6cbe5d77e85fa38346.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
107 changes: 107 additions & 0 deletions
107
crates/webui/webui/src/Components/Navbar/CurrentProject/CurrentProject.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import { FC, useEffect, useState } from "react"; | ||
| import { Folder } from "@styled-icons/bootstrap"; | ||
| import { Edit } from "@styled-icons/remix-line"; | ||
| import styled from "@emotion/styled"; | ||
| import { Controller, useForm } from "react-hook-form"; | ||
|
|
||
| const ProjectName = styled.div` | ||
| color: #fff; | ||
| `; | ||
|
|
||
| const EditIcon = styled(Edit)` | ||
| margin-left: 5px; | ||
| color: #ffffff86; | ||
| &:hover { | ||
| color: #fff; | ||
| } | ||
| `; | ||
|
|
||
| const EditButton = styled.button` | ||
| background-color: transparent; | ||
| border: none; | ||
| cursor: pointer; | ||
| `; | ||
|
|
||
| const Input = styled.input` | ||
| background-color: transparent; | ||
| border: none; | ||
| color: #fff; | ||
| font-size: 16px; | ||
| font-family: RockfordSansRegular; | ||
| padding: 0; | ||
| &:focus { | ||
| outline: none; | ||
| } | ||
| `; | ||
|
|
||
| export type CurrentProjectProps = { | ||
| projectId?: string; | ||
| projectName?: string; | ||
| onEdit: (projectName: string) => void; | ||
| }; | ||
|
|
||
| const CurrentProject: FC<CurrentProjectProps> = ({ | ||
| projectId, | ||
| projectName, | ||
| onEdit, | ||
| }) => { | ||
| const [edit, setEdit] = useState(false); | ||
| const { control, watch } = useForm(); | ||
|
|
||
| useEffect(() => { | ||
| const subscription = watch( | ||
| (value, { name }) => name && onEdit(value[name]) | ||
| ); | ||
| return () => subscription.unsubscribe(); | ||
| }, [watch, onEdit]); | ||
|
|
||
| useEffect(() => { | ||
| const keyDownHandler = (event: any) => { | ||
| console.log("User pressed: ", event.key); | ||
|
|
||
| if (event.key === "Enter") { | ||
| event.preventDefault(); | ||
| setEdit(false); | ||
| } | ||
| }; | ||
|
|
||
| document.addEventListener("keydown", keyDownHandler); | ||
|
|
||
| return () => { | ||
| document.removeEventListener("keydown", keyDownHandler); | ||
| }; | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| {projectId && ( | ||
| <> | ||
| <Folder size={18} color="#fff" style={{ marginRight: 10 }} /> | ||
| {!edit && <ProjectName>{projectName}</ProjectName>} | ||
| {edit && ( | ||
| <Controller | ||
| render={({ field }) => ( | ||
| <Input | ||
| {...(field as any)} | ||
| autoFocus={true} | ||
| onBlur={() => setEdit(false)} | ||
| /> | ||
| )} | ||
| name="projectName" | ||
| control={control} | ||
| defaultValue={projectName} | ||
| /> | ||
| )} | ||
| {!edit && ( | ||
| <EditButton onClick={() => setEdit(true)}> | ||
| <EditIcon size={18} /> | ||
| </EditButton> | ||
| )} | ||
| </> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default CurrentProject; |
9 changes: 9 additions & 0 deletions
9
crates/webui/webui/src/Components/Navbar/CurrentProject/CurrentProjectState.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { atom } from "recoil"; | ||
|
|
||
| export const currentProjectState = atom({ | ||
| key: "currentProjectState", | ||
| default: { | ||
| id: "", | ||
| name: "", | ||
| }, | ||
| }); |
34 changes: 34 additions & 0 deletions
34
crates/webui/webui/src/Components/Navbar/CurrentProject/CurrentProjectWithData.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { FC, useEffect } from "react"; | ||
| import CurrentProject from "./CurrentProject"; | ||
| import { useParams } from "react-router-dom"; | ||
| import { useGetProjectQuery } from "../../../Hooks/GraphQL"; | ||
| import { useRecoilState } from "recoil"; | ||
| import { currentProjectState } from "./CurrentProjectState"; | ||
|
|
||
| const CurrentProjectWithData: FC = () => { | ||
| const [state, setState] = useRecoilState(currentProjectState); | ||
| const { projectId } = useParams(); | ||
| const { data } = useGetProjectQuery({ variables: { id: projectId! } }); | ||
| const name = data?.project?.name; | ||
|
|
||
| useEffect(() => { | ||
| if (name) { | ||
| setState({ ...state, name }); | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [name]); | ||
|
|
||
| const setProjectName = (name: string) => { | ||
| setState({ ...state, name }); | ||
| }; | ||
|
|
||
| return ( | ||
| <CurrentProject | ||
| projectId={projectId} | ||
| projectName={state.name} | ||
| onEdit={setProjectName} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default CurrentProjectWithData; |
3 changes: 3 additions & 0 deletions
3
crates/webui/webui/src/Components/Navbar/CurrentProject/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import CurrentProject from "./CurrentProjectWithData"; | ||
|
|
||
| export default CurrentProject; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
crates/webui/webui/src/Components/ServicesGraph/NewServiceModal/Messaging.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { FC } from "react"; | ||
| import styled from "@emotion/styled"; | ||
| import { Stack } from "@styled-icons/octicons"; | ||
|
|
||
| const Action = styled.div` | ||
| height: 50px; | ||
| width: 100%; | ||
| display: flex; | ||
| align-items: center; | ||
| padding-left: 20px; | ||
| cursor: pointer; | ||
| &:hover { | ||
| color: #630be2; | ||
| background-color: #fbfbfb; | ||
| } | ||
| `; | ||
|
|
||
| const Logo = styled.img` | ||
| height: 18px; | ||
| margin-right: 15px; | ||
| `; | ||
|
|
||
| export type MessagingProps = { | ||
| data: any[]; | ||
| }; | ||
|
|
||
| const Messaging: FC<MessagingProps> = ({ data }) => { | ||
| return ( | ||
| <> | ||
| {data.map((template) => ( | ||
| <Action key={template.id} onClick={() => {}}> | ||
| {template.icon && <Logo src={template.icon} />} | ||
| {!template.icon && ( | ||
| <Stack color="#ff0a80" size={20} style={{ marginRight: 15 }} /> | ||
| )} | ||
| <div>{template.name}</div> | ||
| </Action> | ||
| ))} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Messaging; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.