From 0b2ee85418fc59b14520a242a65a2bdea6bab274 Mon Sep 17 00:00:00 2001 From: Guillaume Date: Mon, 15 Apr 2024 17:05:36 -0400 Subject: [PATCH 1/2] chore: format --- .../components/data-table/SequenceTable.tsx | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/renderer/routes/test_sequencer_panel/components/data-table/SequenceTable.tsx b/src/renderer/routes/test_sequencer_panel/components/data-table/SequenceTable.tsx index 9273ad247..83a7f9771 100644 --- a/src/renderer/routes/test_sequencer_panel/components/data-table/SequenceTable.tsx +++ b/src/renderer/routes/test_sequencer_panel/components/data-table/SequenceTable.tsx @@ -277,11 +277,13 @@ export function SequenceTable() { toast.error("Sequence name cannot be empty"); return; } - setSequences(produce(sequences, (draft) => { - const seq = draft[renameForIdx.current]; - seq.project.name = newName; - seq.testSequenceUnsaved = true; - })) + setSequences( + produce(sequences, (draft) => { + const seq = draft[renameForIdx.current]; + seq.project.name = newName; + seq.testSequenceUnsaved = true; + }), + ); setIsRenameDescModalOpen(false); setIsRenameNameModalOpen(false); @@ -301,11 +303,13 @@ export function SequenceTable() { }; const handleRenameDescription = (newDescription: string) => { - setSequences(produce(sequences, (draft) => { - const seq = draft[renameForIdx.current]; - seq.project.description = newDescription; - seq.testSequenceUnsaved = true; - })) + setSequences( + produce(sequences, (draft) => { + const seq = draft[renameForIdx.current]; + seq.project.description = newDescription; + seq.testSequenceUnsaved = true; + }), + ); setIsRenameDescModalOpen(false); }; From 026448cd595072bf9b04ab5385dbd1b9af0bd4f2 Mon Sep 17 00:00:00 2001 From: Gui Date: Mon, 15 Apr 2024 18:38:34 -0400 Subject: [PATCH 2/2] [STU-340] Ability to know Admin / Viewer + general UI & UX (#1153) * [STU-340-View-Dev-id-bar] ui: reduce user attention to the log * [STU-340-View-Dev-id-bar] revert: Sequencer Play button position * [STU-340-View-Dev-id-bar] ui: flowchart title now at top left of ReactFlow view * [STU-340-View-Dev-id-bar] chore: adding badge viewer / admin * [STU-340-View-Dev-id-bar] ui: flowchart, consistent separator line * [STU-340-View-Dev-id-bar] chore: allow only 10 first char of the name to allow a smaller window size * chore: formatting * [STU-340-View-Dev-id-bar] chore: reduce user attention when operational is Ok + better margin * [STU-340-View-Dev-id-bar] chore: better conditional rendering of status bar & fux eslint * chore: formatting * [STU-340-View-Dev-id-bar] chore: typo in css & slice to text-ellipsis overflow-hidden * chore: formatting --- src/renderer/App.tsx | 6 +- src/renderer/components/auth/ProfileBox.tsx | 4 +- src/renderer/routes/common/Layout.tsx | 7 +- .../routes/common/Sidebar/Sidebar.tsx | 6 +- src/renderer/routes/common/StatusBar.tsx | 66 ++++++++++++++----- .../control_panel/control-panel-view.tsx | 51 +++++++------- .../routes/flow_chart/FlowChartTabView.tsx | 51 +++++++------- .../routes/flow_chart/views/ControlBar.tsx | 10 ++- .../views/user-profile/ProfileMenu.tsx | 18 ++--- .../TestSequencerView.tsx | 2 +- 10 files changed, 127 insertions(+), 94 deletions(-) diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index 92efe1fd5..b7b12df88 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -8,8 +8,6 @@ import ControlPanelTab from "./routes/control_panel/control-panel-view"; import { useTheme } from "@/renderer/providers/theme-provider"; import { Layout } from "./routes/common/Layout"; import { Index } from "./routes/index"; -// eslint-disable-next-line no-restricted-imports -import packageJson from "../../package.json"; import EditorView from "./routes/editor/EditorView"; import AuthPage from "./routes/auth/Auth"; import { Toaster } from "sonner"; @@ -29,8 +27,8 @@ const App = () => {
-
- Flojoy Studio ({packageJson.version}) +
+ Flojoy Studio
} /> diff --git a/src/renderer/components/auth/ProfileBox.tsx b/src/renderer/components/auth/ProfileBox.tsx index 7161c2799..575c5da1c 100644 --- a/src/renderer/components/auth/ProfileBox.tsx +++ b/src/renderer/components/auth/ProfileBox.tsx @@ -154,7 +154,9 @@ const ProfileBox = ({
-

{user.name}

+

+ {user.name} +

{ return (
-
+
{ const [messages, setMessages] = useState([]); const serverStatus = useSocketStore((state) => state.serverStatus); const [minimize, setMinimize] = useState(true); const lastElem = useRef(null); + const { activeTab } = useAppStore( + useShallow((state) => ({ + activeTab: state.activeTab, + })), + ); useEffect(() => { if (lastElem.current?.scrollIntoView) { @@ -36,14 +45,14 @@ const StatusBar = (): JSX.Element => { return (
{ }} > {minimize && ( -
- {![ServerStatus.OFFLINE, ServerStatus.CONNECTING].includes( - serverStatus, - ) ? ( - Operational +
+
+ {![ServerStatus.OFFLINE, ServerStatus.CONNECTING].includes( + serverStatus, + ) ? ( + + Operational - {packageJson.version} + + ) : ( + + Disconnected - {packageJson.version} + + )} +
+ {activeTab !== "Test Sequencer" && + activeTab !== "Device Manager" ? ( + <> +
+ {serverStatus} +
+ ) : ( - Disconnected + <> + + {messages[messages.length - 1]?.slice(0, 145)}... + +
+ )} -
- {messages[messages.length - 1]?.slice(0, 145)}... -
+
)}
{!minimize && ( )} diff --git a/src/renderer/routes/control_panel/control-panel-view.tsx b/src/renderer/routes/control_panel/control-panel-view.tsx index 2be0b5cfa..ed8443c9c 100644 --- a/src/renderer/routes/control_panel/control-panel-view.tsx +++ b/src/renderer/routes/control_panel/control-panel-view.tsx @@ -48,7 +48,6 @@ import { toast } from "sonner"; import { useContextMenu } from "@/renderer/hooks/useContextMenu"; import { deepMutableClone } from "@/renderer/utils/clone"; import { Link } from "react-router-dom"; -import { useSocketStore } from "@/renderer/stores/socket"; import FlowControlButtons from "../flow_chart/views/ControlBar/FlowControlButtons"; import _ from "lodash"; import { Input } from "@/renderer/components/ui/input"; @@ -202,8 +201,6 @@ const ControlPanelView = () => { } : undefined; - const serverStatus = useSocketStore((state) => state.serverStatus); - const { setProjectName, projectName, hasUnsavedChanges } = useProjectStore( useShallow((state) => ({ setProjectName: state.setProjectName, @@ -225,6 +222,29 @@ const ControlPanelView = () => { >
+
+
+ setProjectName(e.target.value)} + placeholder="Untitled project" + /> + {hasUnsavedChanges && ( +
+ )} +
+
{ : onWidgetConfigSubmit } /> -
+
-
+
{
-
- {hasUnsavedChanges && ( -
- )} - setProjectName(e.target.value)} - placeholder="Untitled project" - /> -
-
-
- {serverStatus} -
-
+
+
+ setProjectName(e.target.value)} + placeholder="Untitled project" + /> + {hasUnsavedChanges && ( +
+ )} +
+
+
-
+
@@ -365,27 +387,6 @@ const FlowChartTab = () => { )}
-
- {hasUnsavedChanges && ( -
- )} - setProjectName(e.target.value)} - placeholder="Untitled project" - /> -
-
-
- {serverStatus} -
- + + + + +
); diff --git a/src/renderer/routes/flow_chart/views/user-profile/ProfileMenu.tsx b/src/renderer/routes/flow_chart/views/user-profile/ProfileMenu.tsx index 242ef594c..af3a51676 100644 --- a/src/renderer/routes/flow_chart/views/user-profile/ProfileMenu.tsx +++ b/src/renderer/routes/flow_chart/views/user-profile/ProfileMenu.tsx @@ -1,4 +1,3 @@ -import { Avatar, AvatarFallback } from "@/renderer/components/ui/avatar"; import { DropdownMenu, DropdownMenuContent, @@ -10,10 +9,10 @@ import { import { KeyIcon, UserPlus2 } from "lucide-react"; import { Fragment, useState } from "react"; import { PasswordModal } from "./PasswordModal"; -import { getAlphabetAvatar } from "@/renderer/utils/text-wrap"; import { CreateUserProfile } from "@/renderer/components/common/CreateProfileModal"; import { useAuth } from "@/renderer/context/auth.context"; import { useNavigate } from "react-router-dom"; +import { Badge } from "@/renderer/components/ui/badge"; const ProfileMenu = () => { const { user, setUser } = useAuth(); @@ -27,14 +26,15 @@ const ProfileMenu = () => { return ( - - - - {getAlphabetAvatar(user.name ?? "")} - - + + {user.name.slice(0, 10)} + {user.role === "Admin" ? ( + Admin + ) : ( + Viewer + )} - + {user.role} {user.role === "Admin" && ( diff --git a/src/renderer/routes/test_sequencer_panel/TestSequencerView.tsx b/src/renderer/routes/test_sequencer_panel/TestSequencerView.tsx index 579b02e33..daecc0c01 100644 --- a/src/renderer/routes/test_sequencer_panel/TestSequencerView.tsx +++ b/src/renderer/routes/test_sequencer_panel/TestSequencerView.tsx @@ -13,7 +13,7 @@ const TestSequencerView = () => { const isLoading = useSequencerStore(useShallow((state) => state.isLoading)); return ( -
+
{!isLoading && } {isLoading && (