From ff30626e632636e9519c4de70cf3c50ce848756a Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Fri, 3 Apr 2026 00:03:38 -0700 Subject: [PATCH 01/27] fix login page import --- Cargo.lock | 26 +++++++++++++------------- Cargo.toml | 2 +- client/core/ts/package.json | 2 +- ui/src/lib/hooks.ts | 6 +++--- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 134f769d2..011fd44fb 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1149,7 +1149,7 @@ dependencies = [ [[package]] name = "command" -version = "2.1.1" +version = "2.2.0-dev-0" dependencies = [ "komodo_client", "shlex", @@ -1489,7 +1489,7 @@ checksum = "d7a1e2f27636f116493b8b860f5546edb47c8d8f8ea73e1d2a20be88e28d1fea" [[package]] name = "database" -version = "2.1.1" +version = "2.2.0-dev-0" dependencies = [ "anyhow", "async-compression", @@ -1759,7 +1759,7 @@ dependencies = [ [[package]] name = "encoding" -version = "2.1.1" +version = "2.2.0-dev-0" dependencies = [ "anyhow", "bytes", @@ -1801,7 +1801,7 @@ dependencies = [ [[package]] name = "environment" -version = "2.1.1" +version = "2.2.0-dev-0" dependencies = [ "anyhow", "formatting", @@ -1930,7 +1930,7 @@ dependencies = [ [[package]] name = "formatting" -version = "2.1.1" +version = "2.2.0-dev-0" dependencies = [ "mogh_error", ] @@ -2109,7 +2109,7 @@ dependencies = [ [[package]] name = "git" -version = "2.1.1" +version = "2.2.0-dev-0" dependencies = [ "anyhow", "command", @@ -2709,7 +2709,7 @@ dependencies = [ [[package]] name = "interpolate" -version = "2.1.1" +version = "2.2.0-dev-0" dependencies = [ "anyhow", "komodo_client", @@ -2835,7 +2835,7 @@ dependencies = [ [[package]] name = "komodo_cli" -version = "2.1.1" +version = "2.2.0-dev-0" dependencies = [ "anyhow", "bcrypt", @@ -2865,7 +2865,7 @@ dependencies = [ [[package]] name = "komodo_client" -version = "2.1.1" +version = "2.2.0-dev-0" dependencies = [ "anyhow", "async_timing_util", @@ -2904,7 +2904,7 @@ dependencies = [ [[package]] name = "komodo_core" -version = "2.1.1" +version = "2.2.0-dev-0" dependencies = [ "anyhow", "arc-swap", @@ -2977,7 +2977,7 @@ dependencies = [ [[package]] name = "komodo_periphery" -version = "2.1.1" +version = "2.2.0-dev-0" dependencies = [ "anyhow", "arc-swap", @@ -4032,7 +4032,7 @@ checksum = "9b4f627cb1b25917193a259e49bdad08f671f8d9708acfd5fe0a8c1455d87220" [[package]] name = "periphery_client" -version = "2.1.1" +version = "2.2.0-dev-0" dependencies = [ "anyhow", "encoding", @@ -5997,7 +5997,7 @@ dependencies = [ [[package]] name = "transport" -version = "2.1.1" +version = "2.2.0-dev-0" dependencies = [ "anyhow", "axum", diff --git a/Cargo.toml b/Cargo.toml index c95420039..510ffe954 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -8,7 +8,7 @@ members = [ ] [workspace.package] -version = "2.1.1" +version = "2.2.0-dev-0" edition = "2024" authors = ["mbecker20 "] license = "GPL-3.0-or-later" diff --git a/client/core/ts/package.json b/client/core/ts/package.json index 75fc8167b..5bb5f8b01 100644 --- a/client/core/ts/package.json +++ b/client/core/ts/package.json @@ -1,6 +1,6 @@ { "name": "komodo_client", - "version": "2.1.1", + "version": "2.2.0", "description": "Komodo client package", "homepage": "https://komo.do", "main": "dist/lib.js", diff --git a/ui/src/lib/hooks.ts b/ui/src/lib/hooks.ts index f501236a3..d5c8699b6 100644 --- a/ui/src/lib/hooks.ts +++ b/ui/src/lib/hooks.ts @@ -25,7 +25,6 @@ import { } from "@/lib/utils"; import { notifications } from "@mantine/notifications"; import { useWindowEvent } from "@mantine/hooks"; -import { PermissionLevelAndSpecifics } from "komodo_client/dist/types"; import { useCombobox } from "@mantine/core"; export function komodo_client() { @@ -581,12 +580,13 @@ export function usePermissions({ type, id }: Types.ResourceTarget) { const level = (perms && typeof perms === "string" ? perms - : (perms as PermissionLevelAndSpecifics | undefined)?.level) ?? + : (perms as Types.PermissionLevelAndSpecifics | undefined)?.level) ?? Types.PermissionLevel.None; const specific = (perms && typeof perms === "string" ? [] - : (perms as PermissionLevelAndSpecifics | undefined)?.specific) ?? []; + : (perms as Types.PermissionLevelAndSpecifics | undefined)?.specific) ?? + []; const canWrite = !ui_write_disabled && level === Types.PermissionLevel.Write; const canExecute = hasMinimumPermissions( From 2c6b044cfeb6ca95d6b03cc9630d30a3002a3a9e Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Fri, 3 Apr 2026 00:31:11 -0700 Subject: [PATCH 02/27] update to mantine v9, reduce the border radius on some things --- ui/package.json | 24 +- ui/src/app/topbar/omni-search/index.tsx | 1 + ui/src/components/maintenance-windows.tsx | 2 +- ui/src/theme/index.tsx | 20 +- ui/yarn.lock | 268 +++++++++++----------- 5 files changed, 162 insertions(+), 153 deletions(-) diff --git a/ui/package.json b/ui/package.json index b3d2f9578..6fe439769 100644 --- a/ui/package.json +++ b/ui/package.json @@ -10,34 +10,34 @@ "build-client": "cd ../client/core/ts && yarn && yarn build && yarn link" }, "dependencies": { - "@mantine/core": "^8.3.15", - "@mantine/form": "^8.3.15", - "@mantine/hooks": "^8.3.15", - "@mantine/notifications": "^8.3.15", - "@mantine/spotlight": "^8.3.15", + "@mantine/core": "^9.0.0", + "@mantine/form": "^9.0.0", + "@mantine/hooks": "^9.0.0", + "@mantine/notifications": "^9.0.0", + "@mantine/spotlight": "^9.0.0", "@monaco-editor/react": "^4.7.0", - "@tanstack/react-query": "^5.90.21", + "@tanstack/react-query": "^5.96.1", "@tanstack/react-table": "^8.21.3", "@xterm/addon-fit": "^0.11.0", "@xterm/xterm": "^6.0.0", "ansi-to-html": "^0.7.2", - "jotai": "^2.18.0", + "jotai": "^2.19.0", "jotai-family": "^1.0.1", "jotai-location": "^0.6.2", - "lucide-react": "^1.6.0", + "lucide-react": "^1.7.0", "monaco-editor": "^0.55.1", "monaco-yaml": "^5.4.1", "react": "^19.2.4", "react-dom": "^19.2.4", "react-minimal-pie-chart": "^9.1.2", - "react-router-dom": "^7.13.0", + "react-router-dom": "^7.14.0", "react-xtermjs": "^1.0.10", - "recharts": "^3.7.0", - "sanitize-html": "^2.17.1", + "recharts": "^3.8.1", + "sanitize-html": "^2.17.2", "shell-quote": "^1.8.3" }, "devDependencies": { - "@types/node": "^25.3.0", + "@types/node": "^25.5.0", "@types/react": "^19.2.14", "@types/react-dom": "^19.2.3", "@types/sanitize-html": "^2.16.0", diff --git a/ui/src/app/topbar/omni-search/index.tsx b/ui/src/app/topbar/omni-search/index.tsx index 0dd004cd0..720311fa2 100644 --- a/ui/src/app/topbar/omni-search/index.tsx +++ b/ui/src/app/topbar/omni-search/index.tsx @@ -40,6 +40,7 @@ export default function OmniSearch({}: {}) { query={search} onQueryChange={setSearch} clearQueryOnClose={false} + radius="sm" > } diff --git a/ui/src/components/maintenance-windows.tsx b/ui/src/components/maintenance-windows.tsx index 79b7834e3..cf083effc 100644 --- a/ui/src/components/maintenance-windows.tsx +++ b/ui/src/components/maintenance-windows.tsx @@ -319,7 +319,7 @@ function MaintenanceWindowForm({ {formData.schedule_type === "Weekly" && ( value && onValueChange(value)} - leftSection={SelectedIcon && } - data={tabs.map((tab) => ({ - value: tab.value, - label: tab.label ?? tab.value, - disabled: tab.disabled, - }))} - renderOption={({ option, checked }) => { - const Icon = tabs.find((tab) => tab.value === option.value)?.icon; - return ( - - {Icon && } - {option.label} - {checked && } - - ); - }} - withScrollArea={false} - styles={{ - dropdown: { maxHeight: "calc(100vh - 230px)", overflowY: "auto" }, - }} - /> - {actions} - - - ); -} - -export function MobileFriendlyTabsContent({ - tabs, - value, -}: { - tabs: Tab[]; - value: string; -}) { - return tabs.find((tab) => tab.value === value)?.content; -} From 7f3098f9e85801e0c688680d1c9242486fd62aa5 Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Fri, 3 Apr 2026 11:17:59 -0700 Subject: [PATCH 06/27] move more components to mogh_ui --- ui/src/components/alerts/details.tsx | 2 +- ui/src/components/api-keys/new.tsx | 2 +- ui/src/components/api-keys/table.tsx | 2 +- ui/src/components/batch-executions.tsx | 3 +- ui/src/components/export-toml.tsx | 2 +- ui/src/components/updates/details.tsx | 2 +- ui/src/components/webhook/copy-url.tsx | 2 +- ui/src/lib/color.ts | 4 +- ui/src/lib/utils.ts | 15 ------- ui/src/main.tsx | 6 +-- ui/src/pages/profile/index.tsx | 2 +- ui/src/pages/profile/totp.tsx | 2 +- ui/src/pages/settings/core-info.tsx | 2 +- ui/src/pages/settings/onboarding/new.tsx | 2 +- ui/src/pages/settings/providers/index.tsx | 2 +- ui/src/pages/settings/variables/index.tsx | 4 +- ui/src/resources/build/info.tsx | 2 +- .../resources/procedure/config/executions.tsx | 2 +- ui/src/resources/procedure/config/stage.tsx | 2 +- ui/src/resources/stack/config/index.tsx | 2 +- ui/src/resources/stack/info.tsx | 2 +- ui/src/resources/swarm/join-commands.tsx | 2 +- ui/src/ui/config/item.tsx | 2 +- ui/src/ui/confirm-modal.tsx | 2 +- ui/src/ui/copy-button.tsx | 42 ----------------- ui/src/ui/copy-text.tsx | 42 ----------------- ui/src/ui/enable-switch.tsx | 45 ------------------- 27 files changed, 28 insertions(+), 171 deletions(-) delete mode 100644 ui/src/ui/copy-button.tsx delete mode 100644 ui/src/ui/copy-text.tsx delete mode 100644 ui/src/ui/enable-switch.tsx diff --git a/ui/src/components/alerts/details.tsx b/ui/src/components/alerts/details.tsx index 88b4fd8c4..08284d325 100644 --- a/ui/src/components/alerts/details.tsx +++ b/ui/src/components/alerts/details.tsx @@ -8,7 +8,7 @@ import { ResourceComponents, UsableResource } from "@/resources"; import { ActionIcon, Drawer, Group, Stack, Text } from "@mantine/core"; import { ICONS } from "@/lib/icons"; import { Clock, Link2 } from "lucide-react"; -import CopyButton from "@/ui/copy-button"; +import { CopyButton } from "mogh_ui"; import { MonacoEditor } from "@/components/monaco"; import LoadingScreen from "@/ui/loading-screen"; import { atom, useAtom } from "jotai"; diff --git a/ui/src/components/api-keys/new.tsx b/ui/src/components/api-keys/new.tsx index defeed416..2d500c429 100644 --- a/ui/src/components/api-keys/new.tsx +++ b/ui/src/components/api-keys/new.tsx @@ -1,6 +1,6 @@ import { useInvalidate, useManageAuth, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import CopyText from "@/ui/copy-text"; +import { CopyText } from "mogh_ui"; import { Button, Group, diff --git a/ui/src/components/api-keys/table.tsx b/ui/src/components/api-keys/table.tsx index 05d771f75..eb4803532 100644 --- a/ui/src/components/api-keys/table.tsx +++ b/ui/src/components/api-keys/table.tsx @@ -1,6 +1,6 @@ import { ICONS } from "@/lib/icons"; import ConfirmButton from "@/ui/confirm-button"; -import CopyText from "@/ui/copy-text"; +import { CopyText } from "mogh_ui"; import { DataTable } from "@/ui/data-table"; import { Text } from "@mantine/core"; import { Types } from "komodo_client"; diff --git a/ui/src/components/batch-executions.tsx b/ui/src/components/batch-executions.tsx index b49a5ec45..f07611aa0 100644 --- a/ui/src/components/batch-executions.tsx +++ b/ui/src/components/batch-executions.tsx @@ -1,6 +1,6 @@ import { fmtUpperCamelcase } from "@/lib/formatting"; import { useExecute, useSelectedResources, useWrite } from "@/lib/hooks"; -import { sendCopyNotification, usableResourceExecuteKey } from "@/lib/utils"; +import { usableResourceExecuteKey } from "@/lib/utils"; import { UsableResource } from "@/resources"; import { ICONS } from "@/lib/icons"; import { @@ -20,6 +20,7 @@ import { import { Types } from "komodo_client"; import { ChevronDown } from "lucide-react"; import { FC, useState } from "react"; +import { sendCopyNotification } from "mogh_ui"; type Request = Types.ExecuteRequest["type"] | Types.WriteRequest["type"]; diff --git a/ui/src/components/export-toml.tsx b/ui/src/components/export-toml.tsx index 0a1fd1b6b..4e1c4494b 100644 --- a/ui/src/components/export-toml.tsx +++ b/ui/src/components/export-toml.tsx @@ -4,7 +4,7 @@ import { Box, Button, Modal } from "@mantine/core"; import { useDisclosure } from "@mantine/hooks"; import { Types } from "komodo_client"; import { MonacoEditor } from "@/components/monaco"; -import CopyButton from "@/ui/copy-button"; +import { CopyButton } from "mogh_ui"; import LoadingScreen from "@/ui/loading-screen"; export interface ExportTomlProps { diff --git a/ui/src/components/updates/details.tsx b/ui/src/components/updates/details.tsx index adcb6a6d1..7cb4f1852 100644 --- a/ui/src/components/updates/details.tsx +++ b/ui/src/components/updates/details.tsx @@ -12,7 +12,7 @@ import { ActionIcon, Code, Drawer, Group, Stack, Text } from "@mantine/core"; import UserAvatar from "@/components/user-avatar"; import { ICONS } from "@/lib/icons"; import { Clock, Link2, SquarePen } from "lucide-react"; -import CopyButton from "@/ui/copy-button"; +import { CopyButton } from "mogh_ui"; import Section from "@/ui/section"; import { MonacoDiffEditor } from "@/components/monaco"; import LoadingScreen from "@/ui/loading-screen"; diff --git a/ui/src/components/webhook/copy-url.tsx b/ui/src/components/webhook/copy-url.tsx index 9faf20cbd..c1062d89b 100644 --- a/ui/src/components/webhook/copy-url.tsx +++ b/ui/src/components/webhook/copy-url.tsx @@ -1,6 +1,6 @@ import { useRead, WebhookIntegration } from "@/lib/hooks"; import { ConfigItem, ConfigItemProps } from "@/ui/config/item"; -import CopyText from "@/ui/copy-text"; +import { CopyText } from "mogh_ui"; export interface CopyWebhookUrlProps extends Omit { integration: WebhookIntegration; diff --git a/ui/src/lib/color.ts b/ui/src/lib/color.ts index 5bd046eae..48f3d6387 100644 --- a/ui/src/lib/color.ts +++ b/ui/src/lib/color.ts @@ -1,10 +1,10 @@ import { Types } from "komodo_client"; -import { Theme } from "mogh_ui"; +import { opacityColorsTuple } from "mogh_ui"; export function themeAdditionalColors() { return Object.fromEntries( Object.values(Types.TagColor).map((color) => { - return ["Tag" + color, Theme.opacityColorsTuple(tagColor(color))]; + return ["Tag" + color, opacityColorsTuple(tagColor(color))]; }), ); } diff --git a/ui/src/lib/utils.ts b/ui/src/lib/utils.ts index 8885953a3..7aa7a9931 100644 --- a/ui/src/lib/utils.ts +++ b/ui/src/lib/utils.ts @@ -2,7 +2,6 @@ import { UsableResource } from "@/resources"; import { Types } from "komodo_client"; import sanitizeHtml from "sanitize-html"; import ConvertAnsiToHtml from "ansi-to-html"; -import { notifications } from "@mantine/notifications"; export function sanitizeQuery() { sanitizeQueryInner(new URLSearchParams(location.search)); @@ -316,20 +315,6 @@ export function terminalLink({ } } -export function sendCopyNotification(label = "content") { - if (location.origin.startsWith("https")) { - notifications.show({ - message: `Copied ${label} to clipboard.`, - color: "green", - }); - } else { - notifications.show({ - message: "Cannot copy to clipboard without HTTPS.", - color: "red", - }); - } -} - export function listsEqual(a: string[], b: string[]) { for (const aa of a) { if (!b.includes(aa)) { diff --git a/ui/src/main.tsx b/ui/src/main.tsx index 96aa564a1..04fc397ef 100644 --- a/ui/src/main.tsx +++ b/ui/src/main.tsx @@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { WebsocketProvider } from "@/lib/socket"; import { Router } from "@/router"; -import { Theme } from "mogh_ui"; +import { ThemeProvider } from "mogh_ui"; import { themeAdditionalColors } from "@/lib/color"; import "@mantine/core/styles.css"; @@ -32,10 +32,10 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - + - + , diff --git a/ui/src/pages/profile/index.tsx b/ui/src/pages/profile/index.tsx index 1561246dc..db3df3bfe 100644 --- a/ui/src/pages/profile/index.tsx +++ b/ui/src/pages/profile/index.tsx @@ -13,7 +13,7 @@ import { useEffect, useState } from "react"; import { LinkedLogins } from "./linked-logins"; import { EnrollPasskey } from "./passkey"; import { EnrollTotp } from "./totp"; -import EnableSwitch from "@/ui/enable-switch"; +import { EnableSwitch } from "mogh_ui"; import PageGuard from "@/ui/page-guard"; import EntityPage from "@/ui/entity-page"; import ApiKeysSection from "@/components/api-keys/section"; diff --git a/ui/src/pages/profile/totp.tsx b/ui/src/pages/profile/totp.tsx index 7361b2aa2..7da24f62a 100644 --- a/ui/src/pages/profile/totp.tsx +++ b/ui/src/pages/profile/totp.tsx @@ -1,4 +1,4 @@ -import CopyButton from "@/ui/copy-button"; +import { CopyButton } from "mogh_ui"; import { useManageAuth, useUserInvalidate } from "@/lib/hooks"; import { Button, diff --git a/ui/src/pages/settings/core-info.tsx b/ui/src/pages/settings/core-info.tsx index 403421c4f..8af540b6b 100644 --- a/ui/src/pages/settings/core-info.tsx +++ b/ui/src/pages/settings/core-info.tsx @@ -1,7 +1,7 @@ import { MonacoEditor } from "@/components/monaco"; import { useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import CopyText from "@/ui/copy-text"; +import { CopyText } from "mogh_ui"; import { DividedChildren } from "mogh_ui"; import { ActionIcon, diff --git a/ui/src/pages/settings/onboarding/new.tsx b/ui/src/pages/settings/onboarding/new.tsx index 20388e855..4a3ab83dd 100644 --- a/ui/src/pages/settings/onboarding/new.tsx +++ b/ui/src/pages/settings/onboarding/new.tsx @@ -1,6 +1,6 @@ import { useInvalidate, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import CopyText from "@/ui/copy-text"; +import { CopyText } from "mogh_ui"; import { Button, Group, diff --git a/ui/src/pages/settings/providers/index.tsx b/ui/src/pages/settings/providers/index.tsx index f73b68f68..bb867fe2f 100644 --- a/ui/src/pages/settings/providers/index.tsx +++ b/ui/src/pages/settings/providers/index.tsx @@ -14,7 +14,7 @@ import NewProviderAccount from "./new"; import { DataTable, SortableHeader } from "@/ui/data-table"; import DeleteProviderAccount from "./delete"; import ProvidersFromConfig from "./from-config"; -import CopyButton from "@/ui/copy-button"; +import { CopyButton } from "mogh_ui"; import { Types } from "komodo_client"; import SharedTextUpdate, { useSharedTextUpdateData, diff --git a/ui/src/pages/settings/variables/index.tsx b/ui/src/pages/settings/variables/index.tsx index 448264a6d..ff7a24b60 100644 --- a/ui/src/pages/settings/variables/index.tsx +++ b/ui/src/pages/settings/variables/index.tsx @@ -7,7 +7,7 @@ import { useWrite, } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; -import CopyButton from "@/ui/copy-button"; +import { CopyButton } from "mogh_ui"; import { DataTable, SortableHeader } from "@/ui/data-table"; import { Badge, @@ -23,7 +23,7 @@ import DeleteVariable from "./delete"; import SharedTextUpdate, { useSharedTextUpdateData, } from "@/ui/shared-text-update"; -import CopyText from "@/ui/copy-text"; +import { CopyText } from "mogh_ui"; import SearchInput from "@/ui/search-input"; export default function SettingsVariables() { diff --git a/ui/src/resources/build/info.tsx b/ui/src/resources/build/info.tsx index 729c17919..944e71daa 100644 --- a/ui/src/resources/build/info.tsx +++ b/ui/src/resources/build/info.tsx @@ -9,7 +9,7 @@ import ConfirmButton from "@/ui/confirm-button"; import { Clock, FilePlus } from "lucide-react"; import { DEFAULT_BUILD_DOCKERFILE_CONTENTS } from "./config"; import { updateLogToHtml } from "@/lib/utils"; -import CopyButton from "@/ui/copy-button"; +import { CopyButton } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import ConfirmUpdate from "@/ui/config/confirm"; import ShowHideButton from "@/ui/show-hide-button"; diff --git a/ui/src/resources/procedure/config/executions.tsx b/ui/src/resources/procedure/config/executions.tsx index a2c8237ec..b313662a5 100644 --- a/ui/src/resources/procedure/config/executions.tsx +++ b/ui/src/resources/procedure/config/executions.tsx @@ -5,7 +5,7 @@ import { useRead } from "@/lib/hooks"; import { textToEnv } from "@/lib/utils"; import ResourceSelector from "@/resources/selector"; import { ICONS } from "@/lib/icons"; -import EnableSwitch from "@/ui/enable-switch"; +import { EnableSwitch } from "mogh_ui"; import TextUpdateModal from "@/ui/text-update-modal"; import { Button, diff --git a/ui/src/resources/procedure/config/stage.tsx b/ui/src/resources/procedure/config/stage.tsx index a76400783..1100d5138 100644 --- a/ui/src/resources/procedure/config/stage.tsx +++ b/ui/src/resources/procedure/config/stage.tsx @@ -13,7 +13,7 @@ import { defaultEnabledExecution } from "."; import { ICONS } from "@/lib/icons"; import ProcedureExecutionSelector from "./execution-selector"; import { PROCEDURE_EXECUTIONS, ProcedureMinExecutionType } from "./executions"; -import EnableSwitch from "@/ui/enable-switch"; +import { EnableSwitch } from "mogh_ui"; import { ArrowDown, ArrowUp, Ellipsis, Plus, Trash } from "lucide-react"; export interface ProcedureStageProps { diff --git a/ui/src/resources/stack/config/index.tsx b/ui/src/resources/stack/config/index.tsx index b130231f2..2379ea5ab 100644 --- a/ui/src/resources/stack/config/index.tsx +++ b/ui/src/resources/stack/config/index.tsx @@ -25,7 +25,7 @@ import ResourceSelector from "@/resources/selector"; import ShowHideButton from "@/ui/show-hide-button"; import SecretsSearch from "@/components/config/secrets-search"; import { MonacoEditor } from "@/components/monaco"; -import EnableSwitch from "@/ui/enable-switch"; +import { EnableSwitch } from "mogh_ui"; import StackConfigFiles from "./config-files"; import SystemCommand from "@/components/config/system-command"; import { Link } from "react-router-dom"; diff --git a/ui/src/resources/stack/info.tsx b/ui/src/resources/stack/info.tsx index fa28dc8e4..67e103556 100644 --- a/ui/src/resources/stack/info.tsx +++ b/ui/src/resources/stack/info.tsx @@ -9,7 +9,7 @@ import { Button, Code, Group, Stack, Text } from "@mantine/core"; import ConfirmButton from "@/ui/confirm-button"; import { FilePlus } from "lucide-react"; import { updateLogToHtml } from "@/lib/utils"; -import CopyButton from "@/ui/copy-button"; +import { CopyButton } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import ConfirmUpdate from "@/ui/config/confirm"; import ShowHideButton from "@/ui/show-hide-button"; diff --git a/ui/src/resources/swarm/join-commands.tsx b/ui/src/resources/swarm/join-commands.tsx index 07037b5d6..6957d248e 100644 --- a/ui/src/resources/swarm/join-commands.tsx +++ b/ui/src/resources/swarm/join-commands.tsx @@ -1,6 +1,6 @@ import { useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import CopyButton from "@/ui/copy-button"; +import { CopyButton } from "mogh_ui"; import { Button, Center, Group, Loader, Stack, Text } from "@mantine/core"; import { Types } from "komodo_client"; diff --git a/ui/src/ui/config/item.tsx b/ui/src/ui/config/item.tsx index a88cf3dcf..537a5a945 100644 --- a/ui/src/ui/config/item.tsx +++ b/ui/src/ui/config/item.tsx @@ -1,6 +1,6 @@ import { fmtSnakeCaseToUpperSpaceCase } from "@/lib/formatting"; import { ICONS } from "@/lib/icons"; -import EnableSwitch from "@/ui/enable-switch"; +import { EnableSwitch } from "mogh_ui"; import InputList, { InputListProps } from "@/ui/input-list"; import { Button, diff --git a/ui/src/ui/confirm-modal.tsx b/ui/src/ui/confirm-modal.tsx index 6f71389e5..3848d6cb7 100644 --- a/ui/src/ui/confirm-modal.tsx +++ b/ui/src/ui/confirm-modal.tsx @@ -12,7 +12,7 @@ import { import { useDisclosure } from "@mantine/hooks"; import { ReactNode, useState } from "react"; import ConfirmButton from "./confirm-button"; -import { sendCopyNotification } from "@/lib/utils"; +import { sendCopyNotification } from "mogh_ui"; export interface ConfirmModalProps extends Omit< Omit, "onClose">, diff --git a/ui/src/ui/copy-button.tsx b/ui/src/ui/copy-button.tsx deleted file mode 100644 index 0c3b6f014..000000000 --- a/ui/src/ui/copy-button.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { sendCopyNotification } from "@/lib/utils"; -import { - ActionIcon, - ActionIconProps, - CopyButton as MantineCopyButton, -} from "@mantine/core"; -import { Check, Copy } from "lucide-react"; -import { ReactNode } from "react"; - -export interface CopyButtonProps { - content: string; - icon?: ReactNode; - label?: string; - size?: string | number; - buttonSize?: ActionIconProps["size"]; -} - -export default function CopyButton({ - content, - icon, - label = "content", - size = "1.1rem", - buttonSize = "lg", -}: CopyButtonProps) { - return ( - - {({ copied, copy }) => ( - { - e.stopPropagation(); - copy(); - sendCopyNotification(label); - }} - size={buttonSize} - > - {copied ? : (icon ?? )} - - )} - - ); -} diff --git a/ui/src/ui/copy-text.tsx b/ui/src/ui/copy-text.tsx deleted file mode 100644 index c2b630956..000000000 --- a/ui/src/ui/copy-text.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { Group, GroupProps, Text, TextProps } from "@mantine/core"; -import CopyButton from "@/ui/copy-button"; -import { sendCopyNotification } from "@/lib/utils"; - -export interface CopyTextProps extends TextProps { - content: string; - label?: string; - groupProps?: GroupProps; -} - -export default function CopyText({ - content, - label, - groupProps, - ...textProps -}: CopyTextProps) { - return ( - - { - navigator.clipboard.writeText(content); - sendCopyNotification(label); - }} - {...textProps} - > - {content} - - - - ); -} diff --git a/ui/src/ui/enable-switch.tsx b/ui/src/ui/enable-switch.tsx deleted file mode 100644 index 5caac7a8a..000000000 --- a/ui/src/ui/enable-switch.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Badge, Group, GroupProps, Switch, SwitchProps } from "@mantine/core"; - -export interface EnableSwitchProps extends SwitchProps { - checked?: boolean; - onCheckedChange?: (checked: boolean) => void; - redDisabled?: boolean; - labelProps?: GroupProps; -} - -export default function EnableSwitch({ - checked, - color = "green.9", - label, - onChange, - onCheckedChange, - disabled, - redDisabled = true, - labelProps, - ...props -}: EnableSwitchProps) { - return ( - - {label} - - {checked ? "Enabled" : "Disabled"} - - - } - onChange={(e) => { - onChange?.(e); - onCheckedChange?.(e.target.checked); - }} - {...props} - /> - ); -} From c3ecd64a9ff7b6782b7911d47bc2429e0a406ef3 Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Fri, 3 Apr 2026 11:21:06 -0700 Subject: [PATCH 07/27] move section to mogh_ui --- ui/src/components/api-keys/section.tsx | 2 +- .../components/docker/containers-section.tsx | 2 +- ui/src/components/docker/labels-section.tsx | 2 +- ui/src/components/inspect-section.tsx | 2 +- ui/src/components/log-section.tsx | 2 +- .../components/permissions/base-section.tsx | 2 +- .../permissions/specific-section.tsx | 2 +- ui/src/components/swarm/services-section.tsx | 2 +- ui/src/components/swarm/tasks-section.tsx | 2 +- ui/src/components/terminal/section.tsx | 2 +- ui/src/components/updates/details.tsx | 2 +- ui/src/components/updates/section.tsx | 2 +- ui/src/pages/dashboard/active.tsx | 2 +- ui/src/pages/dashboard/tables.tsx | 2 +- ui/src/pages/docker/container/index.tsx | 2 +- ui/src/pages/docker/image.tsx | 2 +- ui/src/pages/docker/network.tsx | 2 +- ui/src/pages/docker/volume.tsx | 2 +- ui/src/pages/profile/index.tsx | 2 +- ui/src/pages/profile/linked-logins.tsx | 2 +- ui/src/pages/resource.tsx | 2 +- ui/src/pages/settings/onboarding/index.tsx | 2 +- ui/src/pages/settings/providers/index.tsx | 2 +- ui/src/pages/settings/users/groups.tsx | 2 +- ui/src/pages/settings/users/index.tsx | 2 +- ui/src/pages/stack-service/inspect.tsx | 2 +- ui/src/pages/swarm/config/edit.tsx | 2 +- ui/src/pages/swarm/secret/edit.tsx | 2 +- ui/src/pages/swarm/stack/inspect.tsx | 2 +- ui/src/pages/swarm/stack/logs.tsx | 2 +- ui/src/pages/swarm/task/inspect.tsx | 2 +- ui/src/pages/user-group/index.tsx | 2 +- ui/src/pages/user/index.tsx | 2 +- ui/src/pages/user/member-groups.tsx | 2 +- ui/src/resources/action/last-run.tsx | 2 +- ui/src/resources/build/info.tsx | 2 +- ui/src/resources/build/tabs.tsx | 2 +- ui/src/resources/deployment/tabs.tsx | 2 +- ui/src/resources/repo/resources.tsx | 2 +- ui/src/resources/server/docker/images.tsx | 2 +- ui/src/resources/server/docker/index.tsx | 2 +- ui/src/resources/server/docker/networks.tsx | 2 +- ui/src/resources/server/docker/volumes.tsx | 2 +- ui/src/resources/server/resources.tsx | 2 +- ui/src/resources/server/stats/containers.tsx | 2 +- .../resources/server/stats/current/index.tsx | 2 +- ui/src/resources/server/stats/disks.tsx | 2 +- ui/src/resources/server/stats/historical.tsx | 2 +- ui/src/resources/server/stats/index.tsx | 2 +- ui/src/resources/server/stats/processes.tsx | 2 +- ui/src/resources/server/stats/system-info.tsx | 2 +- ui/src/resources/stack/info.tsx | 2 +- ui/src/resources/stack/services.tsx | 2 +- ui/src/resources/sub-page.tsx | 2 +- ui/src/resources/swarm/docker/configs.tsx | 2 +- ui/src/resources/swarm/docker/index.tsx | 2 +- ui/src/resources/swarm/docker/nodes/index.tsx | 2 +- ui/src/resources/swarm/docker/secrets.tsx | 2 +- ui/src/resources/swarm/docker/stacks.tsx | 2 +- ui/src/resources/swarm/resources.tsx | 2 +- ui/src/resources/sync/info.tsx | 2 +- ui/src/resources/sync/pending.tsx | 2 +- ui/src/ui/config/layout.tsx | 2 +- ui/src/ui/section.tsx | 142 ------------------ 64 files changed, 63 insertions(+), 205 deletions(-) delete mode 100644 ui/src/ui/section.tsx diff --git a/ui/src/components/api-keys/section.tsx b/ui/src/components/api-keys/section.tsx index 21ee40bc9..eb29523e4 100644 --- a/ui/src/components/api-keys/section.tsx +++ b/ui/src/components/api-keys/section.tsx @@ -1,5 +1,5 @@ import { ICONS } from "@/lib/icons"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import NewApiKey from "./new"; import ApiKeysTable from "./table"; import { useInvalidate, useManageAuth, useRead, useWrite } from "@/lib/hooks"; diff --git a/ui/src/components/docker/containers-section.tsx b/ui/src/components/docker/containers-section.tsx index 8406a92c7..534f49d11 100644 --- a/ui/src/components/docker/containers-section.tsx +++ b/ui/src/components/docker/containers-section.tsx @@ -3,7 +3,7 @@ import { filterBySplit } from "@/lib/utils"; import { Prune } from "@/resources/server/executions"; import { ICONS } from "@/lib/icons"; import { DataTable, SortableHeader } from "@/ui/data-table"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; import { Group } from "@mantine/core"; import { Types } from "komodo_client"; diff --git a/ui/src/components/docker/labels-section.tsx b/ui/src/components/docker/labels-section.tsx index dba892cbe..59d335778 100644 --- a/ui/src/components/docker/labels-section.tsx +++ b/ui/src/components/docker/labels-section.tsx @@ -1,6 +1,6 @@ import { filterMultitermBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import { Box, GroupProps } from "@mantine/core"; import { useMemo, useState } from "react"; import DockerOptions from "./options"; diff --git a/ui/src/components/inspect-section.tsx b/ui/src/components/inspect-section.tsx index bd0b540c0..f8fe9db3f 100644 --- a/ui/src/components/inspect-section.tsx +++ b/ui/src/components/inspect-section.tsx @@ -1,5 +1,5 @@ import { ICONS } from "@/lib/icons"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import { useState } from "react"; import { MonacoEditor } from "./monaco"; import ShowHideButton from "@/ui/show-hide-button"; diff --git a/ui/src/components/log-section.tsx b/ui/src/components/log-section.tsx index 13899f0c8..58f9cf41f 100644 --- a/ui/src/components/log-section.tsx +++ b/ui/src/components/log-section.tsx @@ -1,7 +1,7 @@ import { useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import LogViewer from "@/ui/log-viewer"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import { ActionIcon, Button, diff --git a/ui/src/components/permissions/base-section.tsx b/ui/src/components/permissions/base-section.tsx index e38a58157..bd22956de 100644 --- a/ui/src/components/permissions/base-section.tsx +++ b/ui/src/components/permissions/base-section.tsx @@ -6,7 +6,7 @@ import { UsableResource, } from "@/resources"; import { DataTable, SortableHeader } from "@/ui/data-table"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import { Group, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { Types } from "komodo_client"; diff --git a/ui/src/components/permissions/specific-section.tsx b/ui/src/components/permissions/specific-section.tsx index 825f856da..f332fe669 100644 --- a/ui/src/components/permissions/specific-section.tsx +++ b/ui/src/components/permissions/specific-section.tsx @@ -4,7 +4,7 @@ import { ResourceComponents, UsableResource } from "@/resources"; import ResourceLink from "@/resources/link"; import { DataTable, SortableHeader } from "@/ui/data-table"; import SearchInput from "@/ui/search-input"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import { Group, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { Types } from "komodo_client"; diff --git a/ui/src/components/swarm/services-section.tsx b/ui/src/components/swarm/services-section.tsx index 260878f59..67386bc64 100644 --- a/ui/src/components/swarm/services-section.tsx +++ b/ui/src/components/swarm/services-section.tsx @@ -1,7 +1,7 @@ import { filterBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; import { DataTable, SortableHeader } from "@/ui/data-table"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; import { Group } from "@mantine/core"; import { Types } from "komodo_client"; diff --git a/ui/src/components/swarm/tasks-section.tsx b/ui/src/components/swarm/tasks-section.tsx index 57fb87719..b2911c056 100644 --- a/ui/src/components/swarm/tasks-section.tsx +++ b/ui/src/components/swarm/tasks-section.tsx @@ -1,7 +1,7 @@ import { filterMultitermBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; import { DataTable, SortableHeader } from "@/ui/data-table"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; import { Group } from "@mantine/core"; import { Types } from "komodo_client"; diff --git a/ui/src/components/terminal/section.tsx b/ui/src/components/terminal/section.tsx index bff3e389b..1d83b078a 100644 --- a/ui/src/components/terminal/section.tsx +++ b/ui/src/components/terminal/section.tsx @@ -1,5 +1,5 @@ import { useRead, useWrite } from "@/lib/hooks"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import { useLocalStorage } from "@mantine/hooks"; import { Types } from "komodo_client"; import { useState } from "react"; diff --git a/ui/src/components/updates/details.tsx b/ui/src/components/updates/details.tsx index 7cb4f1852..77ed09fef 100644 --- a/ui/src/components/updates/details.tsx +++ b/ui/src/components/updates/details.tsx @@ -13,7 +13,7 @@ import UserAvatar from "@/components/user-avatar"; import { ICONS } from "@/lib/icons"; import { Clock, Link2, SquarePen } from "lucide-react"; import { CopyButton } from "mogh_ui"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { MonacoDiffEditor } from "@/components/monaco"; import LoadingScreen from "@/ui/loading-screen"; import { atom, useAtom } from "jotai"; diff --git a/ui/src/components/updates/section.tsx b/ui/src/components/updates/section.tsx index 70b182b60..500a5f623 100644 --- a/ui/src/components/updates/section.tsx +++ b/ui/src/components/updates/section.tsx @@ -1,4 +1,4 @@ -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import UpdateList, { UpdateListProps } from "./list"; import { ICONS } from "@/lib/icons"; import { ActionIcon, Stack } from "@mantine/core"; diff --git a/ui/src/pages/dashboard/active.tsx b/ui/src/pages/dashboard/active.tsx index e7afeab78..e1ba567a9 100644 --- a/ui/src/pages/dashboard/active.tsx +++ b/ui/src/pages/dashboard/active.tsx @@ -11,7 +11,7 @@ import { useRead } from "@/lib/hooks"; import ResourceLink from "@/resources/link"; import { ICONS } from "@/lib/icons"; import { DataTable, SortableHeader } from "@/ui/data-table"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import StatusBadge from "@/ui/status-badge"; import { Group } from "@mantine/core"; import { Types } from "komodo_client"; diff --git a/ui/src/pages/dashboard/tables.tsx b/ui/src/pages/dashboard/tables.tsx index a2edf4849..10a80fd7e 100644 --- a/ui/src/pages/dashboard/tables.tsx +++ b/ui/src/pages/dashboard/tables.tsx @@ -7,7 +7,7 @@ import { UsableResource, } from "@/resources"; import { ICONS } from "@/lib/icons"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Group, Stack, Text } from "@mantine/core"; import { Types } from "komodo_client"; import { useState } from "react"; diff --git a/ui/src/pages/docker/container/index.tsx b/ui/src/pages/docker/container/index.tsx index 63ec3007c..695aad4a9 100644 --- a/ui/src/pages/docker/container/index.tsx +++ b/ui/src/pages/docker/container/index.tsx @@ -10,7 +10,7 @@ import { import { UsableResource } from "@/resources"; import { useServer } from "@/resources/server"; import { ICONS } from "@/lib/icons"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Center, Text } from "@mantine/core"; import { Types } from "komodo_client"; import { useParams } from "react-router-dom"; diff --git a/ui/src/pages/docker/image.tsx b/ui/src/pages/docker/image.tsx index bf90a28bb..4cef20be9 100644 --- a/ui/src/pages/docker/image.tsx +++ b/ui/src/pages/docker/image.tsx @@ -9,7 +9,7 @@ import { ICONS } from "@/lib/icons"; import ConfirmButton from "@/ui/confirm-button"; import { DataTable } from "@/ui/data-table"; import PageGuard from "@/ui/page-guard"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; import { Box, Center, Group, Text } from "@mantine/core"; import { Types } from "komodo_client"; diff --git a/ui/src/pages/docker/network.tsx b/ui/src/pages/docker/network.tsx index d9bfbb8a1..6215ed98d 100644 --- a/ui/src/pages/docker/network.tsx +++ b/ui/src/pages/docker/network.tsx @@ -8,7 +8,7 @@ import ResourceSubPage from "@/resources/sub-page"; import { ICONS } from "@/lib/icons"; import ConfirmButton from "@/ui/confirm-button"; import { DataTable, SortableHeader } from "@/ui/data-table"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Center, Group, Loader, Text } from "@mantine/core"; import { Types } from "komodo_client"; import { Waypoints } from "lucide-react"; diff --git a/ui/src/pages/docker/volume.tsx b/ui/src/pages/docker/volume.tsx index d12f57d15..0f8381740 100644 --- a/ui/src/pages/docker/volume.tsx +++ b/ui/src/pages/docker/volume.tsx @@ -8,7 +8,7 @@ import ResourceSubPage from "@/resources/sub-page"; import { ICONS } from "@/lib/icons"; import ConfirmButton from "@/ui/confirm-button"; import { DataTable } from "@/ui/data-table"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Center, Group, Loader, Text } from "@mantine/core"; import { Types } from "komodo_client"; import { useNavigate, useParams } from "react-router-dom"; diff --git a/ui/src/pages/profile/index.tsx b/ui/src/pages/profile/index.tsx index db3df3bfe..806a57971 100644 --- a/ui/src/pages/profile/index.tsx +++ b/ui/src/pages/profile/index.tsx @@ -18,7 +18,7 @@ import PageGuard from "@/ui/page-guard"; import EntityPage from "@/ui/entity-page"; import ApiKeysSection from "@/components/api-keys/section"; import UserHeader from "@/components/user/header"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { ICONS } from "@/lib/icons"; export default function Profile() { diff --git a/ui/src/pages/profile/linked-logins.tsx b/ui/src/pages/profile/linked-logins.tsx index 7f05f1de1..2b90cc507 100644 --- a/ui/src/pages/profile/linked-logins.tsx +++ b/ui/src/pages/profile/linked-logins.tsx @@ -7,7 +7,7 @@ import { useLoginOptions, useManageAuth } from "@/lib/hooks"; import { DataTable } from "@/ui/data-table"; import { ICONS } from "@/lib/icons"; import ConfirmModal from "@/ui/confirm-modal"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; const useLinkWithExternalLogin = () => { const { mutateAsync } = useManageAuth("BeginExternalLoginLink"); diff --git a/ui/src/pages/resource.tsx b/ui/src/pages/resource.tsx index e051e96a0..ab0aa6710 100644 --- a/ui/src/pages/resource.tsx +++ b/ui/src/pages/resource.tsx @@ -15,7 +15,7 @@ import { } from "@/resources"; import { AddResourceTags, ResourceTags } from "@/resources/tags"; import { DividedChildren } from "mogh_ui"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Group, Stack, Text } from "@mantine/core"; import { Types } from "komodo_client"; import { Link, useParams } from "react-router-dom"; diff --git a/ui/src/pages/settings/onboarding/index.tsx b/ui/src/pages/settings/onboarding/index.tsx index 745764cba..6ab9326fc 100644 --- a/ui/src/pages/settings/onboarding/index.tsx +++ b/ui/src/pages/settings/onboarding/index.tsx @@ -11,7 +11,7 @@ import { ColumnDef } from "@tanstack/react-table"; import { Types } from "komodo_client"; import { useMemo } from "react"; import DeleteOnboardingKey from "./delete"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import NewOnboardingKey from "./new"; export default function SettingsOnboardingKeys() { diff --git a/ui/src/pages/settings/providers/index.tsx b/ui/src/pages/settings/providers/index.tsx index bb867fe2f..1a780aea3 100644 --- a/ui/src/pages/settings/providers/index.tsx +++ b/ui/src/pages/settings/providers/index.tsx @@ -6,7 +6,7 @@ import { useWrite, } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Button, Group, Stack, Switch, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useState } from "react"; diff --git a/ui/src/pages/settings/users/groups.tsx b/ui/src/pages/settings/users/groups.tsx index 1cd479533..bab0a88aa 100644 --- a/ui/src/pages/settings/users/groups.tsx +++ b/ui/src/pages/settings/users/groups.tsx @@ -3,7 +3,7 @@ import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; import { DataTable } from "@/ui/data-table"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Box, Group } from "@mantine/core"; import { useNavigate } from "react-router-dom"; import DeleteUserGroup from "../../../components/user/delete-group"; diff --git a/ui/src/pages/settings/users/index.tsx b/ui/src/pages/settings/users/index.tsx index 43d315965..09560e4ef 100644 --- a/ui/src/pages/settings/users/index.tsx +++ b/ui/src/pages/settings/users/index.tsx @@ -9,7 +9,7 @@ import { useWrite, } from "@/lib/hooks"; import { useState } from "react"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { notifications } from "@mantine/notifications"; import { filterBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; diff --git a/ui/src/pages/stack-service/inspect.tsx b/ui/src/pages/stack-service/inspect.tsx index 45544ee5e..abd2d9ef2 100644 --- a/ui/src/pages/stack-service/inspect.tsx +++ b/ui/src/pages/stack-service/inspect.tsx @@ -1,6 +1,6 @@ import { MonacoEditor } from "@/components/monaco"; import { usePermissions, useRead } from "@/lib/hooks"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Center, Text } from "@mantine/core"; import { Types } from "komodo_client"; import { ReactNode } from "react"; diff --git a/ui/src/pages/swarm/config/edit.tsx b/ui/src/pages/swarm/config/edit.tsx index 90d1973f2..cdafc5289 100644 --- a/ui/src/pages/swarm/config/edit.tsx +++ b/ui/src/pages/swarm/config/edit.tsx @@ -3,7 +3,7 @@ import { useExecute, usePermissions, useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import ConfirmUpdate from "@/ui/config/confirm"; import UnsavedChanges from "@/ui/config/unsaved-changes"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import { Button, Group } from "@mantine/core"; import { useLocalStorage } from "@mantine/hooks"; import { notifications } from "@mantine/notifications"; diff --git a/ui/src/pages/swarm/secret/edit.tsx b/ui/src/pages/swarm/secret/edit.tsx index b0905ffef..38cfbb685 100644 --- a/ui/src/pages/swarm/secret/edit.tsx +++ b/ui/src/pages/swarm/secret/edit.tsx @@ -3,7 +3,7 @@ import { useExecute, usePermissions, useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import ConfirmUpdate from "@/ui/config/confirm"; import UnsavedChanges from "@/ui/config/unsaved-changes"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import { Button, Group } from "@mantine/core"; import { useLocalStorage } from "@mantine/hooks"; import { notifications } from "@mantine/notifications"; diff --git a/ui/src/pages/swarm/stack/inspect.tsx b/ui/src/pages/swarm/stack/inspect.tsx index fc15a8cde..9d23e32f3 100644 --- a/ui/src/pages/swarm/stack/inspect.tsx +++ b/ui/src/pages/swarm/stack/inspect.tsx @@ -1,6 +1,6 @@ import { MonacoEditor } from "@/components/monaco"; import { useRead } from "@/lib/hooks"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; export interface SwarmStackInspectSectionProps extends SectionProps { swarm: string; diff --git a/ui/src/pages/swarm/stack/logs.tsx b/ui/src/pages/swarm/stack/logs.tsx index a78f029e8..78c2a84fa 100644 --- a/ui/src/pages/swarm/stack/logs.tsx +++ b/ui/src/pages/swarm/stack/logs.tsx @@ -1,5 +1,5 @@ import LogSection from "@/components/log-section"; -import { SectionProps } from "@/ui/section"; +import { SectionProps } from "mogh_ui"; import { Select } from "@mantine/core"; import { Types } from "komodo_client"; import { useState } from "react"; diff --git a/ui/src/pages/swarm/task/inspect.tsx b/ui/src/pages/swarm/task/inspect.tsx index e8578c239..3293f8278 100644 --- a/ui/src/pages/swarm/task/inspect.tsx +++ b/ui/src/pages/swarm/task/inspect.tsx @@ -1,6 +1,6 @@ import { MonacoEditor } from "@/components/monaco"; import { useRead } from "@/lib/hooks"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; export interface SwarmTaskInspectSectionProps extends SectionProps { swarm: string; diff --git a/ui/src/pages/user-group/index.tsx b/ui/src/pages/user-group/index.tsx index af83bcac6..85d8b64e3 100644 --- a/ui/src/pages/user-group/index.tsx +++ b/ui/src/pages/user-group/index.tsx @@ -5,7 +5,7 @@ import { DividedChildren } from "mogh_ui"; import EntityHeader from "@/ui/entity-header"; import EntityPage from "@/ui/entity-page"; import PageGuard from "@/ui/page-guard"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Group, Stack, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useParams } from "react-router-dom"; diff --git a/ui/src/pages/user/index.tsx b/ui/src/pages/user/index.tsx index ffd441ecc..dc60d188d 100644 --- a/ui/src/pages/user/index.tsx +++ b/ui/src/pages/user/index.tsx @@ -3,7 +3,7 @@ import ConfirmButton from "@/ui/confirm-button"; import EntityPage from "@/ui/entity-page"; import LabelledSwitch from "@/ui/labelled-switch"; import PageGuard from "@/ui/page-guard"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Group, Stack } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { UserCheck, UserMinus } from "lucide-react"; diff --git a/ui/src/pages/user/member-groups.tsx b/ui/src/pages/user/member-groups.tsx index 4fdd39706..e7b1dd08f 100644 --- a/ui/src/pages/user/member-groups.tsx +++ b/ui/src/pages/user/member-groups.tsx @@ -1,6 +1,6 @@ import { useInvalidate, useRead, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Box, Group, Text } from "@mantine/core"; import { useNavigate } from "react-router-dom"; import UserAddUserGroup from "./add-group"; diff --git a/ui/src/resources/action/last-run.tsx b/ui/src/resources/action/last-run.tsx index 5e0174f45..ac2fafcd3 100644 --- a/ui/src/resources/action/last-run.tsx +++ b/ui/src/resources/action/last-run.tsx @@ -1,7 +1,7 @@ import { hexColorByIntention } from "@/lib/color"; import { useRead } from "@/lib/hooks"; import { getUpdateQuery, updateLogToHtml } from "@/lib/utils"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Box, Code, Group, Stack, Text } from "@mantine/core"; export default function ActionLastRun({ id }: { id: string }) { diff --git a/ui/src/resources/build/info.tsx b/ui/src/resources/build/info.tsx index 944e71daa..76d33b653 100644 --- a/ui/src/resources/build/info.tsx +++ b/ui/src/resources/build/info.tsx @@ -3,7 +3,7 @@ import { useLocalStorage } from "@mantine/hooks"; import { notifications } from "@mantine/notifications"; import { ReactNode, useState } from "react"; import { useFullBuild } from "."; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Button, Code, Group, Stack, Text } from "@mantine/core"; import ConfirmButton from "@/ui/confirm-button"; import { Clock, FilePlus } from "lucide-react"; diff --git a/ui/src/resources/build/tabs.tsx b/ui/src/resources/build/tabs.tsx index 4fd6d73e6..ce7c6b2d0 100644 --- a/ui/src/resources/build/tabs.tsx +++ b/ui/src/resources/build/tabs.tsx @@ -9,7 +9,7 @@ import { useLocalStorage } from "@mantine/hooks"; import { useMemo } from "react"; import { useBuild } from "."; import BuildConfig from "./config"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import DeploymentTable from "../deployment/table"; import BuildInfo from "./info"; import { ICONS } from "@/lib/icons"; diff --git a/ui/src/resources/deployment/tabs.tsx b/ui/src/resources/deployment/tabs.tsx index 8bd4fc1de..4b233bb92 100644 --- a/ui/src/resources/deployment/tabs.tsx +++ b/ui/src/resources/deployment/tabs.tsx @@ -15,7 +15,7 @@ import DeploymentConfig from "./config"; import LogSection from "@/components/log-section"; import TerminalSection from "@/components/terminal/section"; import { MonacoEditor } from "@/components/monaco"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; type DeploymentTabsView = "Config" | "Tasks" | "Log" | "Inspect" | "Terminals"; diff --git a/ui/src/resources/repo/resources.tsx b/ui/src/resources/repo/resources.tsx index 117bc66f9..ebd3b72fa 100644 --- a/ui/src/resources/repo/resources.tsx +++ b/ui/src/resources/repo/resources.tsx @@ -1,6 +1,6 @@ import { ICONS } from "@/lib/icons"; import { Types } from "komodo_client"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import StackTable from "@/resources/stack/table"; import BuildTable from "../build/table"; import ResourceSyncTable from "../sync/table"; diff --git a/ui/src/resources/server/docker/images.tsx b/ui/src/resources/server/docker/images.tsx index 58306927a..fd21ddfc9 100644 --- a/ui/src/resources/server/docker/images.tsx +++ b/ui/src/resources/server/docker/images.tsx @@ -2,7 +2,7 @@ import { ReactNode } from "react"; import { useServerDockerSearch } from "."; import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Badge, Group } from "@mantine/core"; import { Prune } from "../executions"; import { DataTable, SortableHeader } from "@/ui/data-table"; diff --git a/ui/src/resources/server/docker/index.tsx b/ui/src/resources/server/docker/index.tsx index 739df0609..ba972ec5b 100644 --- a/ui/src/resources/server/docker/index.tsx +++ b/ui/src/resources/server/docker/index.tsx @@ -3,7 +3,7 @@ import { ReactNode, useMemo } from "react"; import { useServer } from ".."; import { Types } from "komodo_client"; import { useLocalStorage } from "@mantine/hooks"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Center, Stack, Tabs, Text } from "@mantine/core"; import { MobileFriendlyTabsSelector, diff --git a/ui/src/resources/server/docker/networks.tsx b/ui/src/resources/server/docker/networks.tsx index 1b0b72419..54811a74c 100644 --- a/ui/src/resources/server/docker/networks.tsx +++ b/ui/src/resources/server/docker/networks.tsx @@ -2,7 +2,7 @@ import { ReactNode } from "react"; import { useServerDockerSearch } from "."; import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Prune } from "../executions"; import { Badge, Group } from "@mantine/core"; import { DataTable, SortableHeader } from "@/ui/data-table"; diff --git a/ui/src/resources/server/docker/volumes.tsx b/ui/src/resources/server/docker/volumes.tsx index ebb0ae07b..005e67db9 100644 --- a/ui/src/resources/server/docker/volumes.tsx +++ b/ui/src/resources/server/docker/volumes.tsx @@ -2,7 +2,7 @@ import { ReactNode } from "react"; import { useServerDockerSearch } from "."; import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Prune } from "../executions"; import { Badge, Group } from "@mantine/core"; import { DataTable, SortableHeader } from "@/ui/data-table"; diff --git a/ui/src/resources/server/resources.tsx b/ui/src/resources/server/resources.tsx index 3863c047e..3fd95eae5 100644 --- a/ui/src/resources/server/resources.tsx +++ b/ui/src/resources/server/resources.tsx @@ -1,7 +1,7 @@ import { useRead, useUser } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { Types } from "komodo_client"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import StackTable from "@/resources/stack/table"; import DeploymentTable from "@/resources/deployment/table"; import RepoTable from "@/resources/repo/table"; diff --git a/ui/src/resources/server/stats/containers.tsx b/ui/src/resources/server/stats/containers.tsx index dbc3a7e0d..cb5dd884d 100644 --- a/ui/src/resources/server/stats/containers.tsx +++ b/ui/src/resources/server/stats/containers.tsx @@ -1,6 +1,6 @@ import { useRead } from "@/lib/hooks"; import { DataTable, SortableHeader } from "@/ui/data-table"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; import { Group, Text } from "@mantine/core"; import { useLocalStorage } from "@mantine/hooks"; diff --git a/ui/src/resources/server/stats/current/index.tsx b/ui/src/resources/server/stats/current/index.tsx index 80fc4913b..d991b8379 100644 --- a/ui/src/resources/server/stats/current/index.tsx +++ b/ui/src/resources/server/stats/current/index.tsx @@ -1,5 +1,5 @@ import { ICONS } from "@/lib/icons"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import StatBar from "@/ui/stat-bar"; import { Group, Stack } from "@mantine/core"; import { Types } from "komodo_client"; diff --git a/ui/src/resources/server/stats/disks.tsx b/ui/src/resources/server/stats/disks.tsx index a21f2da73..4b2236c78 100644 --- a/ui/src/resources/server/stats/disks.tsx +++ b/ui/src/resources/server/stats/disks.tsx @@ -1,6 +1,6 @@ import { ICONS } from "@/lib/icons"; import { DataTable, SortableHeader } from "@/ui/data-table"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; import { Group, Text } from "@mantine/core"; import { useLocalStorage } from "@mantine/hooks"; diff --git a/ui/src/resources/server/stats/historical.tsx b/ui/src/resources/server/stats/historical.tsx index d741b54ce..d8d4ff902 100644 --- a/ui/src/resources/server/stats/historical.tsx +++ b/ui/src/resources/server/stats/historical.tsx @@ -1,4 +1,4 @@ -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { useStatsGranularity } from "../hooks"; import { ReactNode, useMemo } from "react"; import { Types } from "komodo_client"; diff --git a/ui/src/resources/server/stats/index.tsx b/ui/src/resources/server/stats/index.tsx index 5e409916b..ec344f413 100644 --- a/ui/src/resources/server/stats/index.tsx +++ b/ui/src/resources/server/stats/index.tsx @@ -1,7 +1,7 @@ import { ReactNode } from "react"; import { usePermissions, useRead } from "@/lib/hooks"; import { Types } from "komodo_client"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import ServerProcesses from "./processes"; import ServerContainerStats from "./containers"; import ServerDisks from "./disks"; diff --git a/ui/src/resources/server/stats/processes.tsx b/ui/src/resources/server/stats/processes.tsx index 287b5134f..a3fab6be0 100644 --- a/ui/src/resources/server/stats/processes.tsx +++ b/ui/src/resources/server/stats/processes.tsx @@ -3,7 +3,7 @@ import { filterBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; import { DataTable, SortableHeader } from "@/ui/data-table"; import SearchInput from "@/ui/search-input"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; import TableSkeleton from "@/ui/table-skeleton"; import { Group } from "@mantine/core"; diff --git a/ui/src/resources/server/stats/system-info.tsx b/ui/src/resources/server/stats/system-info.tsx index 86703da41..1d091c832 100644 --- a/ui/src/resources/server/stats/system-info.tsx +++ b/ui/src/resources/server/stats/system-info.tsx @@ -1,5 +1,5 @@ import { DataTable } from "@/ui/data-table"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Types } from "komodo_client"; import { useRead } from "@/lib/hooks"; import { useIsServerAvailable } from "../hooks"; diff --git a/ui/src/resources/stack/info.tsx b/ui/src/resources/stack/info.tsx index 67e103556..e3a2ff9e3 100644 --- a/ui/src/resources/stack/info.tsx +++ b/ui/src/resources/stack/info.tsx @@ -4,7 +4,7 @@ import { notifications } from "@mantine/notifications"; import { ReactNode, useState } from "react"; import { DEFAULT_STACK_FILE_CONTENTS, useFullStack, useStack } from "."; import { Types } from "komodo_client"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Button, Code, Group, Stack, Text } from "@mantine/core"; import ConfirmButton from "@/ui/confirm-button"; import { FilePlus } from "lucide-react"; diff --git a/ui/src/resources/stack/services.tsx b/ui/src/resources/stack/services.tsx index f3e946c7e..74dbdc31a 100644 --- a/ui/src/resources/stack/services.tsx +++ b/ui/src/resources/stack/services.tsx @@ -2,7 +2,7 @@ import { Fragment, ReactNode } from "react"; import { useStack } from "."; import { useRead } from "@/lib/hooks"; import { Types } from "komodo_client"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { DataTable, SortableHeader } from "@/ui/data-table"; import StackServiceLink from "@/components/stack-service-link"; import StatusBadge from "@/ui/status-badge"; diff --git a/ui/src/resources/sub-page.tsx b/ui/src/resources/sub-page.tsx index 4d774b05d..bd6e54559 100644 --- a/ui/src/resources/sub-page.tsx +++ b/ui/src/resources/sub-page.tsx @@ -9,7 +9,7 @@ import ResourceDescription from "./description"; import { usableResourcePath } from "@/lib/utils"; import ResourceUpdates from "@/components/updates/resource"; import { usePermissions } from "@/lib/hooks"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { ICONS } from "@/lib/icons"; export interface ResourceSubPageProps extends EntityHeaderProps { diff --git a/ui/src/resources/swarm/docker/configs.tsx b/ui/src/resources/swarm/docker/configs.tsx index 1b60537bf..90347c3d3 100644 --- a/ui/src/resources/swarm/docker/configs.tsx +++ b/ui/src/resources/swarm/docker/configs.tsx @@ -2,7 +2,7 @@ import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { ReactNode } from "react"; import { useSwarmDockerSearch } from "."; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Badge, Group } from "@mantine/core"; import { DataTable, SortableHeader } from "@/ui/data-table"; import SwarmResourceLink from "@/components/swarm/link"; diff --git a/ui/src/resources/swarm/docker/index.tsx b/ui/src/resources/swarm/docker/index.tsx index b24c96fec..15cc662ad 100644 --- a/ui/src/resources/swarm/docker/index.tsx +++ b/ui/src/resources/swarm/docker/index.tsx @@ -3,7 +3,7 @@ import { ReactNode, useMemo } from "react"; import { useSwarm } from ".."; import { Types } from "komodo_client"; import { useLocalStorage } from "@mantine/hooks"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Center, Stack, Tabs, Text } from "@mantine/core"; import { MobileFriendlyTabsSelector, diff --git a/ui/src/resources/swarm/docker/nodes/index.tsx b/ui/src/resources/swarm/docker/nodes/index.tsx index a60d619b7..9215b5afe 100644 --- a/ui/src/resources/swarm/docker/nodes/index.tsx +++ b/ui/src/resources/swarm/docker/nodes/index.tsx @@ -2,7 +2,7 @@ import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { ReactNode, useState } from "react"; import { useSwarmDockerSearch } from ".."; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { DataTable, SortableHeader } from "@/ui/data-table"; import SwarmResourceLink from "@/components/swarm/link"; import StatusBadge from "@/ui/status-badge"; diff --git a/ui/src/resources/swarm/docker/secrets.tsx b/ui/src/resources/swarm/docker/secrets.tsx index e82fe7c0d..431edb2a5 100644 --- a/ui/src/resources/swarm/docker/secrets.tsx +++ b/ui/src/resources/swarm/docker/secrets.tsx @@ -2,7 +2,7 @@ import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { ReactNode } from "react"; import { useSwarmDockerSearch } from "."; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Badge, Group } from "@mantine/core"; import { DataTable, SortableHeader } from "@/ui/data-table"; import SwarmResourceLink from "@/components/swarm/link"; diff --git a/ui/src/resources/swarm/docker/stacks.tsx b/ui/src/resources/swarm/docker/stacks.tsx index 0a8ba62ca..88132bef7 100644 --- a/ui/src/resources/swarm/docker/stacks.tsx +++ b/ui/src/resources/swarm/docker/stacks.tsx @@ -2,7 +2,7 @@ import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { ReactNode } from "react"; import { useSwarmDockerSearch } from "."; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { DataTable, SortableHeader } from "@/ui/data-table"; import SwarmResourceLink from "@/components/swarm/link"; import StatusBadge from "@/ui/status-badge"; diff --git a/ui/src/resources/swarm/resources.tsx b/ui/src/resources/swarm/resources.tsx index 81f8cfb85..eaa50b342 100644 --- a/ui/src/resources/swarm/resources.tsx +++ b/ui/src/resources/swarm/resources.tsx @@ -1,6 +1,6 @@ import { useRead, useUser } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import { Types } from "komodo_client"; import StackTable from "@/resources/stack/table"; import DeploymentTable from "@/resources/deployment/table"; diff --git a/ui/src/resources/sync/info.tsx b/ui/src/resources/sync/info.tsx index 4eafceb34..1f9c99ef7 100644 --- a/ui/src/resources/sync/info.tsx +++ b/ui/src/resources/sync/info.tsx @@ -3,7 +3,7 @@ import { useLocalStorage } from "@mantine/hooks"; import { notifications } from "@mantine/notifications"; import { ReactNode, useState } from "react"; import { useFullResourceSync } from "."; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Button, Code, Group, Stack, Text } from "@mantine/core"; import ConfirmButton from "@/ui/confirm-button"; import { FilePlus } from "lucide-react"; diff --git a/ui/src/resources/sync/pending.tsx b/ui/src/resources/sync/pending.tsx index 8918b2fe7..f5288c904 100644 --- a/ui/src/resources/sync/pending.tsx +++ b/ui/src/resources/sync/pending.tsx @@ -2,7 +2,7 @@ import { useExecute, usePermissions, useRead } from "@/lib/hooks"; import { ReactNode } from "react"; import { useFullResourceSync } from "."; import { useResourceSyncTabsView } from "./hooks"; -import Section from "@/ui/section"; +import { Section } from "mogh_ui"; import { Code, Group, Stack, Text } from "@mantine/core"; import { sanitizeOnlySpan } from "@/lib/utils"; import { Types } from "komodo_client"; diff --git a/ui/src/ui/config/layout.tsx b/ui/src/ui/config/layout.tsx index 2d9354da6..88be5369c 100644 --- a/ui/src/ui/config/layout.tsx +++ b/ui/src/ui/config/layout.tsx @@ -1,5 +1,5 @@ import { ReactNode } from "react"; -import Section, { SectionProps } from "@/ui/section"; +import { Section, SectionProps } from "mogh_ui"; import { ICONS } from "@/lib/icons"; /** Includes save buttons */ diff --git a/ui/src/ui/section.tsx b/ui/src/ui/section.tsx deleted file mode 100644 index c0507a15e..000000000 --- a/ui/src/ui/section.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import { - Center, - CenterProps, - createPolymorphicComponent, - Group, - Loader, - MantineStyleProps, - Stack, - StackProps, - Text, -} from "@mantine/core"; -import { forwardRef, ReactNode } from "react"; - -// https://mantine.dev/guides/polymorphic/#create-your-own-polymorphic-components - -export interface SectionProps extends StackProps { - titleFz?: MantineStyleProps["fz"]; - titleMb?: MantineStyleProps["mb"]; - titleDimmed?: boolean; - titleNode?: ReactNode; - icon?: ReactNode; - titleRight?: ReactNode; - titleOther?: ReactNode; - description?: ReactNode; - actions?: ReactNode; - withBorder?: boolean; - isPending?: boolean; - error?: false | string; - guardProps?: CenterProps; - forceHeaderGroup?: boolean; - onHeaderClick?: () => void; -} - -const Section = createPolymorphicComponent<"div", SectionProps>( - forwardRef( - ( - { - titleFz = "h2", - titleMb, - title, - titleDimmed, - titleNode, - icon, - titleRight, - titleOther, - description, - actions, - children, - withBorder, - isPending, - error, - guardProps, - forceHeaderGroup, - onHeaderClick, - ...props - }, - ref, - ) => { - const TitleComponentInner = (title || - titleNode || - icon || - titleRight || - titleOther || - actions) && ( - <> - {title || titleNode || icon ? ( - - {icon} - {title && {title}} - {titleNode} - {titleRight} - - ) : titleRight ? ( - - {titleOther} - {titleRight} - - ) : ( - titleOther - )} - {actions} - - ); - - const TitleComponent = - TitleComponentInner && - (forceHeaderGroup ? ( - {TitleComponentInner} - ) : ( - <> - {TitleComponentInner} - - {TitleComponentInner} - - - )); - - return ( - - {(TitleComponent || description) && ( - - {TitleComponent} - {description && {description}} - - )} - {isPending ? ( -
- -
- ) : error ? ( -
- {error} -
- ) : ( - children - )} - - ); - }, - ), -); - -export default Section; From 5b5f69439526995d3f386a8cb9cd547dab512780 Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Fri, 3 Apr 2026 11:24:28 -0700 Subject: [PATCH 08/27] move confirm button --- ui/src/components/alerts/details.tsx | 2 +- ui/src/components/api-keys/table.tsx | 2 +- ui/src/components/user/table.tsx | 2 +- ui/src/pages/docker/container/executions.tsx | 2 +- ui/src/pages/docker/image.tsx | 2 +- ui/src/pages/docker/network.tsx | 2 +- ui/src/pages/docker/volume.tsx | 2 +- ui/src/pages/settings/onboarding/delete.tsx | 2 +- ui/src/pages/settings/providers/delete.tsx | 2 +- ui/src/pages/settings/tags/delete.tsx | 2 +- ui/src/pages/settings/variables/delete.tsx | 2 +- ui/src/pages/terminals/batch-delete.tsx | 2 +- ui/src/pages/terminals/delete.tsx | 2 +- ui/src/pages/user/index.tsx | 2 +- ui/src/resources/alerter/index.tsx | 2 +- ui/src/resources/build/executions.tsx | 2 +- ui/src/resources/build/info.tsx | 2 +- ui/src/resources/deployment/executions.tsx | 2 +- ui/src/resources/repo/executions.tsx | 2 +- ui/src/resources/server/config.tsx | 2 +- ui/src/resources/server/executions.tsx | 2 +- ui/src/resources/server/index.tsx | 2 +- ui/src/resources/stack/executions.tsx | 2 +- ui/src/resources/stack/info.tsx | 2 +- ui/src/resources/sync/executions.tsx | 2 +- ui/src/resources/sync/info.tsx | 2 +- ui/src/resources/sync/pending.tsx | 2 +- ui/src/ui/confirm-button.tsx | 93 -------------------- ui/src/ui/confirm-modal.tsx | 2 +- 29 files changed, 28 insertions(+), 121 deletions(-) delete mode 100644 ui/src/ui/confirm-button.tsx diff --git a/ui/src/components/alerts/details.tsx b/ui/src/components/alerts/details.tsx index 08284d325..38b2b2201 100644 --- a/ui/src/components/alerts/details.tsx +++ b/ui/src/components/alerts/details.tsx @@ -14,7 +14,7 @@ import LoadingScreen from "@/ui/loading-screen"; import { atom, useAtom } from "jotai"; import ResourceLink from "@/resources/link"; import { notifications } from "@mantine/notifications"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { To, useLocation, useNavigate } from "react-router-dom"; const alertDetailsAtom = atom(); diff --git a/ui/src/components/api-keys/table.tsx b/ui/src/components/api-keys/table.tsx index eb4803532..25ad14220 100644 --- a/ui/src/components/api-keys/table.tsx +++ b/ui/src/components/api-keys/table.tsx @@ -1,5 +1,5 @@ import { ICONS } from "@/lib/icons"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { CopyText } from "mogh_ui"; import { DataTable } from "@/ui/data-table"; import { Text } from "@mantine/core"; diff --git a/ui/src/components/user/table.tsx b/ui/src/components/user/table.tsx index 16aca8cee..394e8e65b 100644 --- a/ui/src/components/user/table.tsx +++ b/ui/src/components/user/table.tsx @@ -1,6 +1,6 @@ import { useUser } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import ConfirmModal from "@/ui/confirm-modal"; import { DataTable } from "@/ui/data-table"; import StatusBadge from "@/ui/status-badge"; diff --git a/ui/src/pages/docker/container/executions.tsx b/ui/src/pages/docker/container/executions.tsx index 82b60a02a..f30159c33 100644 --- a/ui/src/pages/docker/container/executions.tsx +++ b/ui/src/pages/docker/container/executions.tsx @@ -1,5 +1,5 @@ import { useExecute, useRead } from "@/lib/hooks"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import ConfirmModalWithDisable from "@/components/confirm-modal-with-disable"; import { Types } from "komodo_client"; import { Pause, Play, RefreshCcw, Square, Trash } from "lucide-react"; diff --git a/ui/src/pages/docker/image.tsx b/ui/src/pages/docker/image.tsx index 4cef20be9..018211b28 100644 --- a/ui/src/pages/docker/image.tsx +++ b/ui/src/pages/docker/image.tsx @@ -6,7 +6,7 @@ import { useExecute, usePermissions, useRead, useSetTitle } from "@/lib/hooks"; import { useServer } from "@/resources/server"; import ResourceSubPage from "@/resources/sub-page"; import { ICONS } from "@/lib/icons"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { DataTable } from "@/ui/data-table"; import PageGuard from "@/ui/page-guard"; import { Section } from "mogh_ui"; diff --git a/ui/src/pages/docker/network.tsx b/ui/src/pages/docker/network.tsx index 6215ed98d..9ff93a954 100644 --- a/ui/src/pages/docker/network.tsx +++ b/ui/src/pages/docker/network.tsx @@ -6,7 +6,7 @@ import InspectSection from "@/components/inspect-section"; import { useServer } from "@/resources/server"; import ResourceSubPage from "@/resources/sub-page"; import { ICONS } from "@/lib/icons"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { DataTable, SortableHeader } from "@/ui/data-table"; import { Section } from "mogh_ui"; import { Center, Group, Loader, Text } from "@mantine/core"; diff --git a/ui/src/pages/docker/volume.tsx b/ui/src/pages/docker/volume.tsx index 0f8381740..52f424d14 100644 --- a/ui/src/pages/docker/volume.tsx +++ b/ui/src/pages/docker/volume.tsx @@ -6,7 +6,7 @@ import { useExecute, usePermissions, useRead, useSetTitle } from "@/lib/hooks"; import { useServer } from "@/resources/server"; import ResourceSubPage from "@/resources/sub-page"; import { ICONS } from "@/lib/icons"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { DataTable } from "@/ui/data-table"; import { Section } from "mogh_ui"; import { Center, Group, Loader, Text } from "@mantine/core"; diff --git a/ui/src/pages/settings/onboarding/delete.tsx b/ui/src/pages/settings/onboarding/delete.tsx index 469cac237..0742a2edb 100644 --- a/ui/src/pages/settings/onboarding/delete.tsx +++ b/ui/src/pages/settings/onboarding/delete.tsx @@ -1,6 +1,6 @@ import { useInvalidate, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { notifications } from "@mantine/notifications"; export default function DeleteOnboardingKey({ diff --git a/ui/src/pages/settings/providers/delete.tsx b/ui/src/pages/settings/providers/delete.tsx index d16648ba9..aadab9aa8 100644 --- a/ui/src/pages/settings/providers/delete.tsx +++ b/ui/src/pages/settings/providers/delete.tsx @@ -1,6 +1,6 @@ import { useInvalidate, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { notifications } from "@mantine/notifications"; export default function DeleteProviderAccount({ diff --git a/ui/src/pages/settings/tags/delete.tsx b/ui/src/pages/settings/tags/delete.tsx index d541cc699..67e5ffa41 100644 --- a/ui/src/pages/settings/tags/delete.tsx +++ b/ui/src/pages/settings/tags/delete.tsx @@ -1,6 +1,6 @@ import { useInvalidate, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { notifications } from "@mantine/notifications"; export default function DeleteTag({ diff --git a/ui/src/pages/settings/variables/delete.tsx b/ui/src/pages/settings/variables/delete.tsx index 09db0333c..0f72ac84e 100644 --- a/ui/src/pages/settings/variables/delete.tsx +++ b/ui/src/pages/settings/variables/delete.tsx @@ -1,6 +1,6 @@ import { useInvalidate, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { notifications } from "@mantine/notifications"; export default function DeleteVariable({ diff --git a/ui/src/pages/terminals/batch-delete.tsx b/ui/src/pages/terminals/batch-delete.tsx index 5250871ba..1f149cace 100644 --- a/ui/src/pages/terminals/batch-delete.tsx +++ b/ui/src/pages/terminals/batch-delete.tsx @@ -1,6 +1,6 @@ import { useTags, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { notifications } from "@mantine/notifications"; export default function BatchDeleteAllTerminals({ diff --git a/ui/src/pages/terminals/delete.tsx b/ui/src/pages/terminals/delete.tsx index e65ae58a1..657840434 100644 --- a/ui/src/pages/terminals/delete.tsx +++ b/ui/src/pages/terminals/delete.tsx @@ -1,6 +1,6 @@ import { useTerminalTargetPermissions, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { ButtonProps } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { Types } from "komodo_client"; diff --git a/ui/src/pages/user/index.tsx b/ui/src/pages/user/index.tsx index dc60d188d..fd5260b1a 100644 --- a/ui/src/pages/user/index.tsx +++ b/ui/src/pages/user/index.tsx @@ -1,5 +1,5 @@ import { useInvalidate, useRead, useUser, useWrite } from "@/lib/hooks"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import EntityPage from "@/ui/entity-page"; import LabelledSwitch from "@/ui/labelled-switch"; import PageGuard from "@/ui/page-guard"; diff --git a/ui/src/resources/alerter/index.tsx b/ui/src/resources/alerter/index.tsx index 24e36e3ce..d142b1b71 100644 --- a/ui/src/resources/alerter/index.tsx +++ b/ui/src/resources/alerter/index.tsx @@ -8,7 +8,7 @@ import ResourceHeader from "../header"; import AlerterConfig from "./config"; import { hexColorByIntention } from "@/lib/color"; import BatchExecutions from "@/components/batch-executions"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; export function useAlerter(id: string | undefined, useName?: boolean) { return useRead("ListAlerters", {}).data?.find((r) => diff --git a/ui/src/resources/build/executions.tsx b/ui/src/resources/build/executions.tsx index 26cecd549..ea29d1e11 100644 --- a/ui/src/resources/build/executions.tsx +++ b/ui/src/resources/build/executions.tsx @@ -2,7 +2,7 @@ import { Types } from "komodo_client"; import { useExecute, usePermissions, useRead } from "@/lib/hooks"; import { useBuilder } from "../builder"; import { useBuild } from "."; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { ICONS } from "@/lib/icons"; export function RunBuild({ id }: { id: string }) { diff --git a/ui/src/resources/build/info.tsx b/ui/src/resources/build/info.tsx index 76d33b653..2cd3810c9 100644 --- a/ui/src/resources/build/info.tsx +++ b/ui/src/resources/build/info.tsx @@ -5,7 +5,7 @@ import { ReactNode, useState } from "react"; import { useFullBuild } from "."; import { Section } from "mogh_ui"; import { Button, Code, Group, Stack, Text } from "@mantine/core"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { Clock, FilePlus } from "lucide-react"; import { DEFAULT_BUILD_DOCKERFILE_CONTENTS } from "./config"; import { updateLogToHtml } from "@/lib/utils"; diff --git a/ui/src/resources/deployment/executions.tsx b/ui/src/resources/deployment/executions.tsx index 616af4a56..043c53cc3 100644 --- a/ui/src/resources/deployment/executions.tsx +++ b/ui/src/resources/deployment/executions.tsx @@ -5,7 +5,7 @@ import { Types } from "komodo_client"; import { parseKeyValue } from "@/lib/utils"; import { useDeployment } from "."; import { ICONS } from "@/lib/icons"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import ConfirmModalWithDisable from "@/components/confirm-modal-with-disable"; interface DeploymentId { diff --git a/ui/src/resources/repo/executions.tsx b/ui/src/resources/repo/executions.tsx index 2d1fb98cf..77f68f0b3 100644 --- a/ui/src/resources/repo/executions.tsx +++ b/ui/src/resources/repo/executions.tsx @@ -2,7 +2,7 @@ import { useExecute, usePermissions, useRead } from "@/lib/hooks"; import { useRepo } from "."; import { useBuilder } from "../builder"; import { Types } from "komodo_client"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { ICONS } from "@/lib/icons"; export function CloneRepo({ id }: { id: string }) { diff --git a/ui/src/resources/server/config.tsx b/ui/src/resources/server/config.tsx index fa754e212..51a6b2dd5 100644 --- a/ui/src/resources/server/config.tsx +++ b/ui/src/resources/server/config.tsx @@ -5,7 +5,7 @@ import { Types } from "komodo_client"; import { useLocalStorage } from "@mantine/hooks"; import Config from "@/ui/config"; import { ConfigInput, ConfigList } from "@/ui/config/item"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import { Group } from "@mantine/core"; import { useIsServerAvailable } from "./hooks"; diff --git a/ui/src/resources/server/executions.tsx b/ui/src/resources/server/executions.tsx index 84ed20109..dad1dc00a 100644 --- a/ui/src/resources/server/executions.tsx +++ b/ui/src/resources/server/executions.tsx @@ -1,6 +1,6 @@ import { useExecute, usePermissions, useRead } from "@/lib/hooks"; import { useServer } from "."; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import ConfirmModalWithDisable from "@/components/confirm-modal-with-disable"; diff --git a/ui/src/resources/server/index.tsx b/ui/src/resources/server/index.tsx index ff2b71c1c..0bf5cb9c0 100644 --- a/ui/src/resources/server/index.tsx +++ b/ui/src/resources/server/index.tsx @@ -6,7 +6,7 @@ import { Types } from "komodo_client"; import StatusBadge from "@/ui/status-badge"; import ServerTable from "./table"; import NewResource from "@/resources/new"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { Prune } from "./executions"; import ServerVersion from "./version"; import { Box, Group, HoverCard } from "@mantine/core"; diff --git a/ui/src/resources/stack/executions.tsx b/ui/src/resources/stack/executions.tsx index 0073bab8c..964b3dd7b 100644 --- a/ui/src/resources/stack/executions.tsx +++ b/ui/src/resources/stack/executions.tsx @@ -1,7 +1,7 @@ import { useExecute, useRead } from "@/lib/hooks"; import { Types } from "komodo_client"; import { useStack } from "."; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import ConfirmModalWithDisable from "@/components/confirm-modal-with-disable"; diff --git a/ui/src/resources/stack/info.tsx b/ui/src/resources/stack/info.tsx index e3a2ff9e3..c8680ddf4 100644 --- a/ui/src/resources/stack/info.tsx +++ b/ui/src/resources/stack/info.tsx @@ -6,7 +6,7 @@ import { DEFAULT_STACK_FILE_CONTENTS, useFullStack, useStack } from "."; import { Types } from "komodo_client"; import { Section } from "mogh_ui"; import { Button, Code, Group, Stack, Text } from "@mantine/core"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { FilePlus } from "lucide-react"; import { updateLogToHtml } from "@/lib/utils"; import { CopyButton } from "mogh_ui"; diff --git a/ui/src/resources/sync/executions.tsx b/ui/src/resources/sync/executions.tsx index 872ffea82..64fa0f311 100644 --- a/ui/src/resources/sync/executions.tsx +++ b/ui/src/resources/sync/executions.tsx @@ -7,7 +7,7 @@ import { } from "@/lib/hooks"; import { Button, Loader } from "@mantine/core"; import { ICONS } from "@/lib/icons"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { useFullResourceSync } from "."; import { useResourceSyncTabsView } from "./hooks"; import { fileContentsEmpty, resourceSyncNoChanges } from "@/lib/utils"; diff --git a/ui/src/resources/sync/info.tsx b/ui/src/resources/sync/info.tsx index 1f9c99ef7..8eaffff38 100644 --- a/ui/src/resources/sync/info.tsx +++ b/ui/src/resources/sync/info.tsx @@ -5,7 +5,7 @@ import { ReactNode, useState } from "react"; import { useFullResourceSync } from "."; import { Section } from "mogh_ui"; import { Button, Code, Group, Stack, Text } from "@mantine/core"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { FilePlus } from "lucide-react"; import { updateLogToHtml } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; diff --git a/ui/src/resources/sync/pending.tsx b/ui/src/resources/sync/pending.tsx index f5288c904..86dcd3609 100644 --- a/ui/src/resources/sync/pending.tsx +++ b/ui/src/resources/sync/pending.tsx @@ -9,7 +9,7 @@ import { Types } from "komodo_client"; import { DividedChildren } from "mogh_ui"; import ResourceLink from "@/resources/link"; import { UsableResource } from "@/resources"; -import ConfirmButton from "@/ui/confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { SquarePlay } from "lucide-react"; import { MonacoDiffEditor, MonacoEditor } from "@/components/monaco"; import { colorByIntention, diffTypeIntention } from "@/lib/color"; diff --git a/ui/src/ui/confirm-button.tsx b/ui/src/ui/confirm-button.tsx deleted file mode 100644 index cb45cae8b..000000000 --- a/ui/src/ui/confirm-button.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { ICONS } from "@/lib/icons"; -import { - Button, - ButtonProps, - createPolymorphicComponent, - Loader, -} from "@mantine/core"; -import { Check } from "lucide-react"; -import { - FocusEventHandler, - forwardRef, - MouseEventHandler, - ReactNode, - useEffect, - useState, -} from "react"; - -// https://mantine.dev/guides/polymorphic/#create-your-own-polymorphic-components - -export interface ConfirmButtonProps extends ButtonProps { - icon?: ReactNode; - onClick?: MouseEventHandler; - onBlur?: FocusEventHandler; - /** Passed when button is in confirm mode */ - confirmProps?: ButtonProps; -} - -const ConfirmButton = createPolymorphicComponent<"button", ConfirmButtonProps>( - forwardRef( - ( - { - icon, - rightSection, - children, - onClick, - onBlur, - miw, - loading, - disabled, - confirmProps, - ...props - }, - ref, - ) => { - const [clickedOnce, setClickedOnce] = useState(false); - useEffect(() => { - if (clickedOnce) { - const timeout = setTimeout(() => { - setClickedOnce(false); - }, 4_000); - return () => clearTimeout(timeout); - } - }, [clickedOnce]); - return ( - - ); - }, - ), -); - -export default ConfirmButton; diff --git a/ui/src/ui/confirm-modal.tsx b/ui/src/ui/confirm-modal.tsx index 3848d6cb7..de1fd8578 100644 --- a/ui/src/ui/confirm-modal.tsx +++ b/ui/src/ui/confirm-modal.tsx @@ -11,7 +11,7 @@ import { } from "@mantine/core"; import { useDisclosure } from "@mantine/hooks"; import { ReactNode, useState } from "react"; -import ConfirmButton from "./confirm-button"; +import { ConfirmButton } from "mogh_ui"; import { sendCopyNotification } from "mogh_ui"; export interface ConfirmModalProps extends Omit< From 04c8d08c0015e34bc5c5492cab16d6c0b6792236 Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Fri, 3 Apr 2026 12:13:50 -0700 Subject: [PATCH 09/27] move colors and formatting to mogh_ui --- ui/src/app/topbar/index.tsx | 2 +- ui/src/app/topbar/user-dropdown.tsx | 2 +- ui/src/app/topbar/websocket-status.tsx | 2 +- ui/src/components/alerts/card.tsx | 4 +- ui/src/components/alerts/details.tsx | 6 +- ui/src/components/alerts/level.tsx | 2 +- ui/src/components/api-keys/table.tsx | 2 +- ui/src/components/batch-executions.tsx | 2 +- ui/src/components/dashboard-summary/index.tsx | 2 +- ui/src/components/docker/container-ports.tsx | 7 +- .../components/docker/containers-section.tsx | 4 +- ui/src/components/docker/link.tsx | 3 +- ui/src/components/maintenance-windows.tsx | 2 +- .../components/permissions/base-section.tsx | 2 +- .../components/permissions/level-selector.tsx | 2 +- .../permissions/specific-section.tsx | 2 +- ui/src/components/stack-service-link.tsx | 7 +- ui/src/components/stack-service-selector.tsx | 9 +- ui/src/components/swarm/link.tsx | 2 +- ui/src/components/swarm/services-section.tsx | 2 +- ui/src/components/swarm/tasks-section.tsx | 4 +- ui/src/components/updates/card.tsx | 6 +- ui/src/components/updates/details.tsx | 16 +- ui/src/components/user/table.tsx | 4 +- ui/src/lib/color.ts | 44 +-- ui/src/lib/formatting.ts | 99 ------ ui/src/lib/socket.tsx | 4 +- ui/src/pages/alerts.tsx | 8 +- ui/src/pages/containers.tsx | 6 +- ui/src/pages/dashboard/active.tsx | 5 +- ui/src/pages/dashboard/index.tsx | 2 +- ui/src/pages/docker/container/index.tsx | 2 +- ui/src/pages/docker/container/tabs.tsx | 9 +- ui/src/pages/docker/image.tsx | 5 +- ui/src/pages/docker/network.tsx | 2 +- ui/src/pages/docker/volume.tsx | 2 +- ui/src/pages/profile/linked-logins.tsx | 2 +- ui/src/pages/resources.tsx | 2 +- ui/src/pages/schedules.tsx | 4 +- ui/src/pages/settings/onboarding/index.tsx | 3 +- ui/src/pages/settings/providers/index.tsx | 2 +- ui/src/pages/settings/tags/color-selector.tsx | 2 +- ui/src/pages/settings/tags/index.tsx | 2 +- ui/src/pages/settings/users/groups.tsx | 2 +- ui/src/pages/settings/variables/index.tsx | 2 +- ui/src/pages/stack-service/tabs.tsx | 4 +- ui/src/pages/swarm/config/tabs.tsx | 4 +- ui/src/pages/swarm/node/tabs.tsx | 4 +- ui/src/pages/swarm/secret/tabs.tsx | 4 +- ui/src/pages/swarm/service/tabs.tsx | 5 +- ui/src/pages/swarm/stack/tabs.tsx | 5 +- ui/src/pages/swarm/task/tabs.tsx | 5 +- ui/src/pages/terminal.tsx | 2 +- ui/src/pages/terminals/index.tsx | 5 +- ui/src/pages/updates.tsx | 17 +- ui/src/resources/action/config.tsx | 2 +- ui/src/resources/action/index.tsx | 8 +- ui/src/resources/action/last-run.tsx | 9 +- ui/src/resources/action/table.tsx | 2 +- .../resources/alerter/config/alert-types.tsx | 2 +- ui/src/resources/alerter/config/resources.tsx | 2 +- ui/src/resources/alerter/index.tsx | 2 +- ui/src/resources/alerter/table.tsx | 4 +- ui/src/resources/build/index.tsx | 5 +- ui/src/resources/build/info.tsx | 8 +- ui/src/resources/build/table.tsx | 2 +- ui/src/resources/build/tabs.tsx | 7 +- ui/src/resources/builder/table.tsx | 2 +- ui/src/resources/deployment/config/image.tsx | 3 +- .../resources/deployment/config/restart.tsx | 2 +- ui/src/resources/deployment/index.tsx | 5 +- ui/src/resources/deployment/table.tsx | 2 +- ui/src/resources/deployment/tabs.tsx | 6 +- .../resources/deployment/update-available.tsx | 2 +- ui/src/resources/description.tsx | 2 +- .../procedure/config/execution-selector.tsx | 2 +- ui/src/resources/procedure/config/stage.tsx | 2 +- ui/src/resources/procedure/index.tsx | 5 +- ui/src/resources/procedure/table.tsx | 2 +- ui/src/resources/repo/index.tsx | 5 +- ui/src/resources/repo/table.tsx | 2 +- ui/src/resources/repo/tabs.tsx | 7 +- ui/src/resources/server/diskUsage.tsx | 2 +- ui/src/resources/server/docker/images.tsx | 5 +- ui/src/resources/server/docker/index.tsx | 10 +- ui/src/resources/server/docker/networks.tsx | 2 +- ui/src/resources/server/docker/volumes.tsx | 2 +- ui/src/resources/server/index.tsx | 8 +- ui/src/resources/server/stats-card.tsx | 2 +- ui/src/resources/server/stats/containers.tsx | 2 +- .../server/stats/current/load-average.tsx | 2 +- .../server/stats/current/network-usage.tsx | 2 +- ui/src/resources/server/stats/disks.tsx | 2 +- ui/src/resources/server/stats/historical.tsx | 5 +- ui/src/resources/server/stats/processes.tsx | 2 +- ui/src/resources/server/stats/system-info.tsx | 2 +- ui/src/resources/server/table/standard.tsx | 2 +- ui/src/resources/server/table/stats.tsx | 3 +- ui/src/resources/server/tabs.tsx | 19 +- ui/src/resources/server/version.tsx | 8 +- ui/src/resources/stack/index.tsx | 5 +- ui/src/resources/stack/services.tsx | 4 +- ui/src/resources/stack/table.tsx | 2 +- ui/src/resources/stack/tabs.tsx | 12 +- ui/src/resources/stack/update-available.tsx | 2 +- ui/src/resources/swarm/docker/configs.tsx | 2 +- ui/src/resources/swarm/docker/index.tsx | 4 +- ui/src/resources/swarm/docker/nodes/index.tsx | 4 +- ui/src/resources/swarm/docker/secrets.tsx | 2 +- ui/src/resources/swarm/docker/stacks.tsx | 4 +- ui/src/resources/swarm/header-info.tsx | 4 +- ui/src/resources/swarm/index.tsx | 4 +- ui/src/resources/swarm/table.tsx | 2 +- ui/src/resources/swarm/tabs.tsx | 7 +- ui/src/resources/sync/index.tsx | 6 +- ui/src/resources/sync/pending.tsx | 14 +- ui/src/resources/sync/table.tsx | 2 +- ui/src/resources/sync/tabs.tsx | 12 +- ui/src/ui/config/confirm.tsx | 11 +- ui/src/ui/config/item.tsx | 2 +- ui/src/ui/data-table.tsx | 317 ------------------ ui/src/ui/entity-header.tsx | 2 +- ui/src/ui/page.tsx | 102 ------ ui/src/ui/stat-bar.tsx | 2 +- ui/src/ui/stat-cell.tsx | 2 +- ui/src/ui/status-badge.tsx | 54 --- ui/src/ui/tabbed-page.tsx | 61 ---- ui/src/ui/theme-toggle.tsx | 58 ---- 128 files changed, 229 insertions(+), 1016 deletions(-) delete mode 100644 ui/src/ui/data-table.tsx delete mode 100644 ui/src/ui/page.tsx delete mode 100644 ui/src/ui/status-badge.tsx delete mode 100644 ui/src/ui/tabbed-page.tsx delete mode 100644 ui/src/ui/theme-toggle.tsx diff --git a/ui/src/app/topbar/index.tsx b/ui/src/app/topbar/index.tsx index 90b6217a3..4fdf15179 100644 --- a/ui/src/app/topbar/index.tsx +++ b/ui/src/app/topbar/index.tsx @@ -10,7 +10,7 @@ import { Text, } from "@mantine/core"; import { useNavigate } from "react-router-dom"; -import ThemeToggle from "@/ui/theme-toggle"; +import { ThemeToggle } from "mogh_ui"; import UserDropdown from "@/app/topbar/user-dropdown"; import TopbarUpdates from "@/app/topbar/updates"; import OmniSearch from "@/app/topbar/omni-search"; diff --git a/ui/src/app/topbar/user-dropdown.tsx b/ui/src/app/topbar/user-dropdown.tsx index c41364da6..91cacd4f3 100644 --- a/ui/src/app/topbar/user-dropdown.tsx +++ b/ui/src/app/topbar/user-dropdown.tsx @@ -21,7 +21,7 @@ import { useMemo, useState } from "react"; import { useNavigate } from "react-router-dom"; import { MoghAuth } from "komodo_client"; import { useRead, useUser, useUserInvalidate } from "@/lib/hooks"; -import { hexColorByIntention } from "@/lib/color"; +import { hexColorByIntention } from "mogh_ui"; export default function UserDropdown() { const [_, setRerender] = useState(false); diff --git a/ui/src/app/topbar/websocket-status.tsx b/ui/src/app/topbar/websocket-status.tsx index 5f8f0ce1d..0fbad1546 100644 --- a/ui/src/app/topbar/websocket-status.tsx +++ b/ui/src/app/topbar/websocket-status.tsx @@ -1,8 +1,8 @@ -import { hexColorByIntention } from "@/lib/color"; import { useWebsocketConnected, useWebsocketReconnect } from "@/lib/socket"; import { ActionIcon, Box, HoverCard, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { Circle } from "lucide-react"; +import { hexColorByIntention } from "mogh_ui"; export default function WebsocketStatus() { const connected = useWebsocketConnected(); diff --git a/ui/src/components/alerts/card.tsx b/ui/src/components/alerts/card.tsx index a77911cd0..27b602600 100644 --- a/ui/src/components/alerts/card.tsx +++ b/ui/src/components/alerts/card.tsx @@ -1,12 +1,12 @@ import { BoxProps, Flex, FlexProps, Group, Stack } from "@mantine/core"; import { Types } from "komodo_client"; import { AlertTriangle, Check } from "lucide-react"; -import { fmtDate, fmtUpperCamelcase } from "@/lib/formatting"; +import { fmtDate, fmtUpperCamelcase } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import { useAlertDetails } from "./details"; import AlertLevel from "./level"; import ResourceLink from "@/resources/link"; -import { hexColorByIntention } from "@/lib/color"; +import { hexColorByIntention } from "mogh_ui"; export default function AlertCard({ alert, diff --git a/ui/src/components/alerts/details.tsx b/ui/src/components/alerts/details.tsx index 38b2b2201..8085c4d0c 100644 --- a/ui/src/components/alerts/details.tsx +++ b/ui/src/components/alerts/details.tsx @@ -1,8 +1,4 @@ -import { - fmtDateWithMinutes, - fmtDuration, - fmtUpperCamelcase, -} from "@/lib/formatting"; +import { fmtDateWithMinutes, fmtDuration, fmtUpperCamelcase } from "mogh_ui"; import { useInvalidate, useRead, useUser, useWrite } from "@/lib/hooks"; import { ResourceComponents, UsableResource } from "@/resources"; import { ActionIcon, Drawer, Group, Stack, Text } from "@mantine/core"; diff --git a/ui/src/components/alerts/level.tsx b/ui/src/components/alerts/level.tsx index 57dd4e869..db2751c2c 100644 --- a/ui/src/components/alerts/level.tsx +++ b/ui/src/components/alerts/level.tsx @@ -1,5 +1,5 @@ import { alertLevelIntention } from "@/lib/color"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import { Types } from "komodo_client"; export default function AlertLevel({ diff --git a/ui/src/components/api-keys/table.tsx b/ui/src/components/api-keys/table.tsx index 25ad14220..7496da4a7 100644 --- a/ui/src/components/api-keys/table.tsx +++ b/ui/src/components/api-keys/table.tsx @@ -1,7 +1,7 @@ import { ICONS } from "@/lib/icons"; import { ConfirmButton } from "mogh_ui"; import { CopyText } from "mogh_ui"; -import { DataTable } from "@/ui/data-table"; +import { DataTable } from "mogh_ui"; import { Text } from "@mantine/core"; import { Types } from "komodo_client"; diff --git a/ui/src/components/batch-executions.tsx b/ui/src/components/batch-executions.tsx index f07611aa0..94a1dceb3 100644 --- a/ui/src/components/batch-executions.tsx +++ b/ui/src/components/batch-executions.tsx @@ -1,4 +1,4 @@ -import { fmtUpperCamelcase } from "@/lib/formatting"; +import { fmtUpperCamelcase } from "mogh_ui"; import { useExecute, useSelectedResources, useWrite } from "@/lib/hooks"; import { usableResourceExecuteKey } from "@/lib/utils"; import { UsableResource } from "@/resources"; diff --git a/ui/src/components/dashboard-summary/index.tsx b/ui/src/components/dashboard-summary/index.tsx index d63224a52..7b8508e74 100644 --- a/ui/src/components/dashboard-summary/index.tsx +++ b/ui/src/components/dashboard-summary/index.tsx @@ -1,7 +1,7 @@ import { Group, Paper, Stack, Text } from "@mantine/core"; import { PieChart } from "react-minimal-pie-chart"; import { ReactNode, useMemo } from "react"; -import { ColorIntention, hexColorByIntention } from "@/lib/color"; +import { ColorIntention, hexColorByIntention } from "mogh_ui"; import classes from "./index.module.scss"; export type PieChartItem = { diff --git a/ui/src/components/docker/container-ports.tsx b/ui/src/components/docker/container-ports.tsx index 7f744a608..fd4a7a875 100644 --- a/ui/src/components/docker/container-ports.tsx +++ b/ui/src/components/docker/container-ports.tsx @@ -9,9 +9,8 @@ import { Text, } from "@mantine/core"; import { Types } from "komodo_client"; -import { DividedChildren } from "mogh_ui"; +import { DividedChildren, hexColorByIntention } from "mogh_ui"; import { EthernetPort } from "lucide-react"; -import { colorByIntention } from "@/lib/color"; import { ICONS } from "@/lib/icons"; import { fmtPortMount } from "@/lib/formatting"; import { useServerAddress } from "@/resources/server/hooks"; @@ -131,7 +130,7 @@ export function ContainerPort({ gap="sm" wrap="nowrap" > - + {displayText} @@ -149,7 +148,7 @@ export function ContainerPort({ > {link ? ( <> - + {link} ) : ( diff --git a/ui/src/components/docker/containers-section.tsx b/ui/src/components/docker/containers-section.tsx index 534f49d11..07badbb40 100644 --- a/ui/src/components/docker/containers-section.tsx +++ b/ui/src/components/docker/containers-section.tsx @@ -2,13 +2,13 @@ import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { Prune } from "@/resources/server/executions"; import { ICONS } from "@/lib/icons"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Section, SectionProps } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; import { Group } from "@mantine/core"; import { Types } from "komodo_client"; import DockerResourceLink from "./link"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import { containerStateIntention } from "@/lib/color"; import ContainerPorts from "@/components/docker/container-ports"; import SearchInput from "@/ui/search-input"; diff --git a/ui/src/components/docker/link.tsx b/ui/src/components/docker/link.tsx index b611d6431..0b118392c 100644 --- a/ui/src/components/docker/link.tsx +++ b/ui/src/components/docker/link.tsx @@ -2,9 +2,10 @@ import { ReactNode } from "react"; import { Types } from "komodo_client"; import { useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import { hexColorByIntention, containerStateIntention } from "@/lib/color"; +import { containerStateIntention } from "@/lib/color"; import { Box, Group, Text } from "@mantine/core"; import { Link } from "react-router-dom"; +import { hexColorByIntention } from "mogh_ui"; export type DockerResourceType = "Container" | "Network" | "Image" | "Volume"; diff --git a/ui/src/components/maintenance-windows.tsx b/ui/src/components/maintenance-windows.tsx index 484af69f9..0228ba0c9 100644 --- a/ui/src/components/maintenance-windows.tsx +++ b/ui/src/components/maintenance-windows.tsx @@ -12,7 +12,7 @@ import { } from "@mantine/core"; import { Types } from "komodo_client"; import { useState } from "react"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Calendar, CalendarDays, Clock } from "lucide-react"; import { fmtMaintenanceWindowTime } from "@/lib/formatting"; import { ICONS } from "@/lib/icons"; diff --git a/ui/src/components/permissions/base-section.tsx b/ui/src/components/permissions/base-section.tsx index bd22956de..861ef48cd 100644 --- a/ui/src/components/permissions/base-section.tsx +++ b/ui/src/components/permissions/base-section.tsx @@ -5,7 +5,7 @@ import { ResourceComponents, UsableResource, } from "@/resources"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Section, SectionProps } from "mogh_ui"; import { Group, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; diff --git a/ui/src/components/permissions/level-selector.tsx b/ui/src/components/permissions/level-selector.tsx index 8a96634b7..eadae57b8 100644 --- a/ui/src/components/permissions/level-selector.tsx +++ b/ui/src/components/permissions/level-selector.tsx @@ -1,4 +1,4 @@ -import { fmtSnakeCaseToUpperSpaceCase } from "@/lib/formatting"; +import { fmtSnakeCaseToUpperSpaceCase } from "mogh_ui"; import { Select, SelectProps } from "@mantine/core"; import { Types } from "komodo_client"; diff --git a/ui/src/components/permissions/specific-section.tsx b/ui/src/components/permissions/specific-section.tsx index f332fe669..eec3e00ac 100644 --- a/ui/src/components/permissions/specific-section.tsx +++ b/ui/src/components/permissions/specific-section.tsx @@ -2,7 +2,7 @@ import { useInvalidate, useUserTargetPermissions, useWrite } from "@/lib/hooks"; import { levelSortingFn } from "@/lib/utils"; import { ResourceComponents, UsableResource } from "@/resources"; import ResourceLink from "@/resources/link"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import SearchInput from "@/ui/search-input"; import { Section, SectionProps } from "mogh_ui"; import { Group, Text } from "@mantine/core"; diff --git a/ui/src/components/stack-service-link.tsx b/ui/src/components/stack-service-link.tsx index e3059dc5b..82346448c 100644 --- a/ui/src/components/stack-service-link.tsx +++ b/ui/src/components/stack-service-link.tsx @@ -1,11 +1,8 @@ -import { - containerStateIntention, - hexColorByIntention, - swarmStateIntention, -} from "@/lib/color"; +import { containerStateIntention, swarmStateIntention } from "@/lib/color"; import { useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { Group, Text } from "@mantine/core"; +import { hexColorByIntention } from "mogh_ui"; import { Link } from "react-router-dom"; export interface StackServiceLinkProps { diff --git a/ui/src/components/stack-service-selector.tsx b/ui/src/components/stack-service-selector.tsx index 463517ca6..53216a873 100644 --- a/ui/src/components/stack-service-selector.tsx +++ b/ui/src/components/stack-service-selector.tsx @@ -14,13 +14,10 @@ import { ChevronsUpDown } from "lucide-react"; import { useEffect } from "react"; import { DOCKER_LINK_ICONS } from "./docker/link"; import { ICONS } from "@/lib/icons"; -import { - colorByIntention, - containerStateIntention, - swarmStateIntention, -} from "@/lib/color"; +import { containerStateIntention, swarmStateIntention } from "@/lib/color"; import { SWARM_LINK_ICONS } from "./swarm/link"; import { useStack } from "@/resources/stack"; +import { hexColorByIntention } from "mogh_ui"; export interface StackServiceSelectorProps extends ComboboxProps { stackId: string; @@ -125,7 +122,7 @@ export default function StackServiceSelector({ {...targetProps} > - + {name || (placeholder ?? "Select service")} diff --git a/ui/src/components/swarm/link.tsx b/ui/src/components/swarm/link.tsx index 67c4a4af4..1480a05c4 100644 --- a/ui/src/components/swarm/link.tsx +++ b/ui/src/components/swarm/link.tsx @@ -1,5 +1,4 @@ import { - hexColorByIntention, swarmNodeStateIntention, swarmStateIntention, swarmTaskStateIntention, @@ -7,6 +6,7 @@ import { import { useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { Box, Group, Text } from "@mantine/core"; +import { hexColorByIntention } from "mogh_ui"; import { ReactNode } from "react"; import { Link } from "react-router-dom"; diff --git a/ui/src/components/swarm/services-section.tsx b/ui/src/components/swarm/services-section.tsx index 67386bc64..ba23e90f3 100644 --- a/ui/src/components/swarm/services-section.tsx +++ b/ui/src/components/swarm/services-section.tsx @@ -1,6 +1,6 @@ import { filterBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Section, SectionProps } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; import { Group } from "@mantine/core"; diff --git a/ui/src/components/swarm/tasks-section.tsx b/ui/src/components/swarm/tasks-section.tsx index b2911c056..ac3ac9529 100644 --- a/ui/src/components/swarm/tasks-section.tsx +++ b/ui/src/components/swarm/tasks-section.tsx @@ -1,6 +1,6 @@ import { filterMultitermBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Section, SectionProps } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; import { Group } from "@mantine/core"; @@ -8,7 +8,7 @@ import { Types } from "komodo_client"; import SwarmResourceLink from "./link"; import { useRead } from "@/lib/hooks"; import { swarmTaskStateIntention } from "@/lib/color"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import SearchInput from "@/ui/search-input"; export interface SwarmTasksSectionProps extends SectionProps { diff --git a/ui/src/components/updates/card.tsx b/ui/src/components/updates/card.tsx index 1736f6658..f1f19bc73 100644 --- a/ui/src/components/updates/card.tsx +++ b/ui/src/components/updates/card.tsx @@ -2,13 +2,13 @@ import { BoxProps, Flex, FlexProps, Group, Loader, Stack } from "@mantine/core"; import { Types } from "komodo_client"; import { UpdateStatus } from "komodo_client/dist/types"; import { Check, X } from "lucide-react"; -import { fmtDate, fmtOperation, fmtVersion } from "@/lib/formatting"; +import { fmtVersion } from "@/lib/formatting"; import { versionIsNone } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; import UserAvatar from "@/components/user-avatar"; import { useUpdateDetails } from "./details"; import ResourceLink from "@/resources/link"; -import { hexColorByIntention } from "@/lib/color"; +import { fmtDate, fmtUpperCamelcase, hexColorByIntention } from "mogh_ui"; export default function UpdateCard({ update, @@ -33,7 +33,7 @@ export default function UpdateCard({ > - {fmtOperation(update.operation)} + {fmtUpperCamelcase(update.operation)} {!versionIsNone(update.version) && ( diff --git a/ui/src/components/updates/details.tsx b/ui/src/components/updates/details.tsx index 77ed09fef..882f41832 100644 --- a/ui/src/components/updates/details.tsx +++ b/ui/src/components/updates/details.tsx @@ -1,9 +1,4 @@ -import { - fmtDateWithMinutes, - fmtDuration, - fmtOperation, - fmtVersion, -} from "@/lib/formatting"; +import { fmtVersion } from "@/lib/formatting"; import { useRead } from "@/lib/hooks"; import { useWebsocketMessages } from "@/lib/socket"; import { updateLogToHtml, versionIsNone } from "@/lib/utils"; @@ -12,7 +7,12 @@ import { ActionIcon, Code, Drawer, Group, Stack, Text } from "@mantine/core"; import UserAvatar from "@/components/user-avatar"; import { ICONS } from "@/lib/icons"; import { Clock, Link2, SquarePen } from "lucide-react"; -import { CopyButton } from "mogh_ui"; +import { + CopyButton, + fmtDateWithMinutes, + fmtDuration, + fmtUpperCamelcase, +} from "mogh_ui"; import { Section } from "mogh_ui"; import { MonacoDiffEditor } from "@/components/monaco"; import LoadingScreen from "@/ui/loading-screen"; @@ -83,7 +83,7 @@ export function UpdateDetailsContent({ id }: { id: string }) { {/** HEADER */} - {fmtOperation(update.operation)}{" "} + {fmtUpperCamelcase(update.operation)}{" "} {!versionIsNone(update.version) && fmtVersion(update.version)} diff --git a/ui/src/components/user/table.tsx b/ui/src/components/user/table.tsx index 394e8e65b..62b02a978 100644 --- a/ui/src/components/user/table.tsx +++ b/ui/src/components/user/table.tsx @@ -2,8 +2,8 @@ import { useUser } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { ConfirmButton } from "mogh_ui"; import ConfirmModal from "@/ui/confirm-modal"; -import { DataTable } from "@/ui/data-table"; -import StatusBadge from "@/ui/status-badge"; +import { DataTable } from "mogh_ui"; +import { StatusBadge } from "mogh_ui"; import { Badge, BoxProps } from "@mantine/core"; import { ColumnDef } from "@tanstack/react-table"; import { Types } from "komodo_client"; diff --git a/ui/src/lib/color.ts b/ui/src/lib/color.ts index 48f3d6387..3096350b9 100644 --- a/ui/src/lib/color.ts +++ b/ui/src/lib/color.ts @@ -1,5 +1,5 @@ import { Types } from "komodo_client"; -import { opacityColorsTuple } from "mogh_ui"; +import { ColorIntention, opacityColorsTuple } from "mogh_ui"; export function themeAdditionalColors() { return Object.fromEntries( @@ -9,48 +9,6 @@ export function themeAdditionalColors() { ); } -export type ColorIntention = - | "Good" - | "Neutral" - | "Warning" - | "Critical" - | "Unknown" - | "None"; - -export function colorByIntention(intention: ColorIntention) { - switch (intention) { - case "Good": - return "green"; - case "Neutral": - return "blue"; - case "Warning": - return "yellow"; - case "Critical": - return "red"; - case "Unknown": - return "purple"; - case "None": - return undefined; - } -} - -export function hexColorByIntention(intention: ColorIntention) { - switch (intention) { - case "Good": - return "#22C55E"; - case "Neutral": - return "#3B82F6"; - case "Warning": - return "#EAB308"; - case "Critical": - return "#EF0044"; - case "Unknown": - return "#A855F7"; - case "None": - return undefined; - } -} - export function swarmStateIntention(state?: Types.SwarmState): ColorIntention { switch (state) { case Types.SwarmState.Healthy: diff --git a/ui/src/lib/formatting.ts b/ui/src/lib/formatting.ts index 6f044ca1c..6cf06764c 100644 --- a/ui/src/lib/formatting.ts +++ b/ui/src/lib/formatting.ts @@ -1,56 +1,6 @@ import { Types } from "komodo_client"; import { UsableResource } from "@/resources"; -export const fmtDate = (d: Date) => { - const hours = d.getHours(); - const minutes = d.getMinutes(); - return `${fmtMonth(d.getMonth())} ${d.getDate()} ${ - hours > 9 ? hours : "0" + hours - }:${minutes > 9 ? minutes : "0" + minutes}`; -}; - -export const fmtUtcDate = (d: Date) => { - const hours = d.getUTCHours(); - const minutes = d.getUTCMinutes(); - return `${fmtMonth(d.getUTCMonth())} ${d.getUTCDate()} ${ - hours > 9 ? hours : "0" + hours - }:${minutes > 9 ? minutes : "0" + minutes}`; -}; - -const fmtMonth = (month: number) => { - switch (month) { - case 0: - return "Jan"; - case 1: - return "Feb"; - case 2: - return "Mar"; - case 3: - return "Apr"; - case 4: - return "May"; - case 5: - return "Jun"; - case 6: - return "Jul"; - case 7: - return "Aug"; - case 8: - return "Sep"; - case 9: - return "Oct"; - case 10: - return "Nov"; - case 11: - return "Dec"; - } -}; - -export const fmtDateWithMinutes = (d: Date) => { - // return `${d.toLocaleDateString()} ${d.toLocaleTimeString()}`; - return d.toLocaleString(); -}; - export const fmtVersion = (version: Types.Version | undefined) => { if (!version) return "..."; const { major, minor, patch } = version; @@ -58,55 +8,6 @@ export const fmtVersion = (version: Types.Version | undefined) => { return `v${major}.${minor}.${patch}`; }; -export const fmtDuration = (start_ts: number, end_ts: number) => { - const start = new Date(start_ts); - const end = new Date(end_ts); - const durr = end.getTime() - start.getTime(); - const seconds = durr / 1000; - const minutes = Math.floor(seconds / 60); - const remaining_seconds = seconds % 60; - return `${ - minutes > 0 ? `${minutes} minute${minutes > 1 ? "s" : ""} ` : "" - }${remaining_seconds.toFixed(minutes > 0 ? 0 : 1)} seconds`; -}; - -export const fmtOperation = (operation: Types.Operation) => { - return operation.match(/[A-Z][a-z]+|[0-9]+/g)?.join(" ")!; -}; - -export const fmtUpperCamelcase = (input: string) => { - return input.match(/[A-Z][a-z]+|[0-9]+/g)?.join(" ") ?? input; -}; - -/// list_all_items => List All Items -export function fmtSnakeCaseToUpperSpaceCase(snake: string) { - if (snake.length === 0) return ""; - return snake - .split("_") - .map((item) => item[0].toUpperCase() + item.slice(1)) - .join(" "); -} - -export const BYTES_PER_KB = 1024; -export const BYTES_PER_MB = 1024 * BYTES_PER_KB; -export const BYTES_PER_GB = 1024 * BYTES_PER_MB; - -export function fmtSizeBytes(bytes: number) { - if (bytes >= BYTES_PER_GB) { - return (bytes / BYTES_PER_GB).toFixed(1) + " GiB"; - } else if (bytes >= BYTES_PER_MB) { - return (bytes / BYTES_PER_MB).toFixed(1) + " MiB"; - } else if (bytes >= BYTES_PER_KB) { - return (bytes / BYTES_PER_KB).toFixed(1) + " KiB"; - } else { - return bytes.toString() + " bytes"; - } -} - -export function fmtRateBytes(bytes: number) { - return fmtSizeBytes(bytes) + "/s"; -} - export function fmtResourceType(type: UsableResource) { if (type === "ResourceSync") { return "Resource Sync"; diff --git a/ui/src/lib/socket.tsx b/ui/src/lib/socket.tsx index e2a9da143..3e9769093 100644 --- a/ui/src/lib/socket.tsx +++ b/ui/src/lib/socket.tsx @@ -6,7 +6,7 @@ import { ResourceComponents, UsableResource } from "@/resources"; import { notifications } from "@mantine/notifications"; import { Badge, Group, Text } from "@mantine/core"; import ResourceName from "@/resources/name"; -import { fmtOperation } from "./formatting"; +import { fmtUpperCamelcase } from "mogh_ui"; const wsAtom = atom<{ ws: WebSocket | undefined; @@ -123,7 +123,7 @@ function onUpdate( notifications.show({ title: ( - {fmtOperation(update.operation)} + {fmtUpperCamelcase(update.operation)} {state} ), diff --git a/ui/src/pages/alerts.tsx b/ui/src/pages/alerts.tsx index f8f228f85..9a99d0a78 100644 --- a/ui/src/pages/alerts.tsx +++ b/ui/src/pages/alerts.tsx @@ -2,16 +2,16 @@ import { useAlertDetails } from "@/components/alerts/details"; import AlertLevel from "@/components/alerts/level"; import ResourceTypeSelector from "@/components/resource-type-selector"; import { alertLevelIntention } from "@/lib/color"; -import { fmtUpperCamelcase } from "@/lib/formatting"; +import { fmtUpperCamelcase } from "mogh_ui"; import { useRead } from "@/lib/hooks"; import { UsableResource } from "@/resources"; import ResourceLink from "@/resources/link"; import ResourceSelector from "@/resources/selector"; import { ICONS } from "@/lib/icons"; -import { DataTable } from "@/ui/data-table"; +import { DataTable } from "mogh_ui"; import LabelledSwitch from "@/ui/labelled-switch"; -import Page from "@/ui/page"; -import StatusBadge from "@/ui/status-badge"; +import { Page } from "mogh_ui"; +import { StatusBadge } from "mogh_ui"; import { ActionIcon, Group, Pagination, Select, Stack } from "@mantine/core"; import { Types } from "komodo_client"; import { useMemo, useState } from "react"; diff --git a/ui/src/pages/containers.tsx b/ui/src/pages/containers.tsx index 578e30fd0..a4c5f0445 100644 --- a/ui/src/pages/containers.tsx +++ b/ui/src/pages/containers.tsx @@ -4,9 +4,9 @@ import { containerStateIntention } from "@/lib/color"; import { useDebounce, useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { filterBySplit } from "@/lib/utils"; -import { DataTable, SortableHeader } from "@/ui/data-table"; -import Page from "@/ui/page"; -import StatusBadge from "@/ui/status-badge"; +import { DataTable, SortableHeader } from "mogh_ui"; +import { Page } from "mogh_ui"; +import { StatusBadge } from "mogh_ui"; import { Group, MultiSelect, Stack } from "@mantine/core"; import { useCallback, useMemo, useState } from "react"; import { DividedChildren } from "mogh_ui"; diff --git a/ui/src/pages/dashboard/active.tsx b/ui/src/pages/dashboard/active.tsx index e1ba567a9..84b56faf3 100644 --- a/ui/src/pages/dashboard/active.tsx +++ b/ui/src/pages/dashboard/active.tsx @@ -2,7 +2,6 @@ import { actionStateIntention, buildStateIntention, deploymentStateIntention, - hexColorByIntention, procedureStateIntention, repoStateIntention, stackStateIntention, @@ -10,9 +9,9 @@ import { import { useRead } from "@/lib/hooks"; import ResourceLink from "@/resources/link"; import { ICONS } from "@/lib/icons"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, hexColorByIntention, SortableHeader } from "mogh_ui"; import { Section } from "mogh_ui"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import { Group } from "@mantine/core"; import { Types } from "komodo_client"; import { Circle } from "lucide-react"; diff --git a/ui/src/pages/dashboard/index.tsx b/ui/src/pages/dashboard/index.tsx index 92c1976bc..b0d3ee3d7 100644 --- a/ui/src/pages/dashboard/index.tsx +++ b/ui/src/pages/dashboard/index.tsx @@ -1,4 +1,4 @@ -import Page from "@/ui/page"; +import { Page } from "mogh_ui"; import { useDashboardPreferences, useSetTitle } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { Group } from "@mantine/core"; diff --git a/ui/src/pages/docker/container/index.tsx b/ui/src/pages/docker/container/index.tsx index 695aad4a9..329bf3758 100644 --- a/ui/src/pages/docker/container/index.tsx +++ b/ui/src/pages/docker/container/index.tsx @@ -15,7 +15,7 @@ import { Center, Text } from "@mantine/core"; import { Types } from "komodo_client"; import { useParams } from "react-router-dom"; import { ContainerExecutions } from "./executions"; -import { DataTable } from "@/ui/data-table"; +import { DataTable } from "mogh_ui"; import DockerLabelsSection from "@/components/docker/labels-section"; import ContainerTabs from "./tabs"; import ResourceLink from "@/resources/link"; diff --git a/ui/src/pages/docker/container/tabs.tsx b/ui/src/pages/docker/container/tabs.tsx index 81aac1aba..b6ae5f29e 100644 --- a/ui/src/pages/docker/container/tabs.tsx +++ b/ui/src/pages/docker/container/tabs.tsx @@ -1,10 +1,7 @@ -import { colorByIntention, containerStateIntention } from "@/lib/color"; +import { containerStateIntention } from "@/lib/color"; import { usePermissions } from "@/lib/hooks"; import { useServer } from "@/resources/server"; -import { - MobileFriendlyTabsSelector, - TabNoContent, -} from "mogh_ui"; +import { MobileFriendlyTabsSelector, TabNoContent } from "mogh_ui"; import { Tabs } from "@mantine/core"; import { useLocalStorage } from "@mantine/hooks"; import { Types } from "komodo_client"; @@ -123,7 +120,7 @@ export default function ContainerTabs({ } return ( - + {View} ); diff --git a/ui/src/pages/docker/image.tsx b/ui/src/pages/docker/image.tsx index 018211b28..8e6e000e1 100644 --- a/ui/src/pages/docker/image.tsx +++ b/ui/src/pages/docker/image.tsx @@ -1,13 +1,12 @@ import ContainersSection from "@/components/docker/containers-section"; import DockerLabelsSection from "@/components/docker/labels-section"; import InspectSection from "@/components/inspect-section"; -import { fmtDateWithMinutes, fmtSizeBytes } from "@/lib/formatting"; import { useExecute, usePermissions, useRead, useSetTitle } from "@/lib/hooks"; import { useServer } from "@/resources/server"; import ResourceSubPage from "@/resources/sub-page"; import { ICONS } from "@/lib/icons"; -import { ConfirmButton } from "mogh_ui"; -import { DataTable } from "@/ui/data-table"; +import { ConfirmButton, fmtDateWithMinutes, fmtSizeBytes } from "mogh_ui"; +import { DataTable } from "mogh_ui"; import PageGuard from "@/ui/page-guard"; import { Section } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; diff --git a/ui/src/pages/docker/network.tsx b/ui/src/pages/docker/network.tsx index 9ff93a954..6bf91a347 100644 --- a/ui/src/pages/docker/network.tsx +++ b/ui/src/pages/docker/network.tsx @@ -7,7 +7,7 @@ import { useServer } from "@/resources/server"; import ResourceSubPage from "@/resources/sub-page"; import { ICONS } from "@/lib/icons"; import { ConfirmButton } from "mogh_ui"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Section } from "mogh_ui"; import { Center, Group, Loader, Text } from "@mantine/core"; import { Types } from "komodo_client"; diff --git a/ui/src/pages/docker/volume.tsx b/ui/src/pages/docker/volume.tsx index 52f424d14..12b65496f 100644 --- a/ui/src/pages/docker/volume.tsx +++ b/ui/src/pages/docker/volume.tsx @@ -7,7 +7,7 @@ import { useServer } from "@/resources/server"; import ResourceSubPage from "@/resources/sub-page"; import { ICONS } from "@/lib/icons"; import { ConfirmButton } from "mogh_ui"; -import { DataTable } from "@/ui/data-table"; +import { DataTable } from "mogh_ui"; import { Section } from "mogh_ui"; import { Center, Group, Loader, Text } from "@mantine/core"; import { Types } from "komodo_client"; diff --git a/ui/src/pages/profile/linked-logins.tsx b/ui/src/pages/profile/linked-logins.tsx index 2b90cc507..0df74aa2f 100644 --- a/ui/src/pages/profile/linked-logins.tsx +++ b/ui/src/pages/profile/linked-logins.tsx @@ -4,7 +4,7 @@ import { Badge, Button, Text } from "@mantine/core"; import { KOMODO_BASE_URL } from "@/main"; import { notifications } from "@mantine/notifications"; import { useLoginOptions, useManageAuth } from "@/lib/hooks"; -import { DataTable } from "@/ui/data-table"; +import { DataTable } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import ConfirmModal from "@/ui/confirm-modal"; import { Section } from "mogh_ui"; diff --git a/ui/src/pages/resources.tsx b/ui/src/pages/resources.tsx index 54c4ab1da..8fba0dae4 100644 --- a/ui/src/pages/resources.tsx +++ b/ui/src/pages/resources.tsx @@ -10,7 +10,7 @@ import { } from "@/lib/hooks"; import { ResourceComponents, UsableResource } from "@/resources"; import { Types } from "komodo_client"; -import Page from "@/ui/page"; +import { Page } from "mogh_ui"; import { Group, Stack } from "@mantine/core"; import TableSkeleton from "@/ui/table-skeleton"; import TemplateQuerySelector from "@/components/template-query-selector"; diff --git a/ui/src/pages/schedules.tsx b/ui/src/pages/schedules.tsx index c9479d2a0..d671c8976 100644 --- a/ui/src/pages/schedules.tsx +++ b/ui/src/pages/schedules.tsx @@ -11,8 +11,8 @@ import { filterBySplit } from "@/lib/utils"; import { UsableResource } from "@/resources"; import ResourceLink from "@/resources/link"; import { ICONS } from "@/lib/icons"; -import { DataTable, SortableHeader } from "@/ui/data-table"; -import Page from "@/ui/page"; +import { DataTable, SortableHeader } from "mogh_ui"; +import { Page } from "mogh_ui"; import SearchInput from "@/ui/search-input"; import { Group, Stack, Switch } from "@mantine/core"; import { notifications } from "@mantine/notifications"; diff --git a/ui/src/pages/settings/onboarding/index.tsx b/ui/src/pages/settings/onboarding/index.tsx index 6ab9326fc..2157e545a 100644 --- a/ui/src/pages/settings/onboarding/index.tsx +++ b/ui/src/pages/settings/onboarding/index.tsx @@ -1,10 +1,9 @@ import Tags from "@/components/tags"; import TagSelector from "@/components/tags/selector"; -import { fmtDateWithMinutes } from "@/lib/formatting"; import { useInvalidate, useRead, useSetTitle, useWrite } from "@/lib/hooks"; import ResourceSelector from "@/resources/selector"; import { ICONS } from "@/lib/icons"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, fmtDateWithMinutes, SortableHeader } from "mogh_ui"; import { Badge, Group, Switch, TextInput, useMatches } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { ColumnDef } from "@tanstack/react-table"; diff --git a/ui/src/pages/settings/providers/index.tsx b/ui/src/pages/settings/providers/index.tsx index 1a780aea3..44bf504f9 100644 --- a/ui/src/pages/settings/providers/index.tsx +++ b/ui/src/pages/settings/providers/index.tsx @@ -11,7 +11,7 @@ import { Button, Group, Stack, Switch, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useState } from "react"; import NewProviderAccount from "./new"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import DeleteProviderAccount from "./delete"; import ProvidersFromConfig from "./from-config"; import { CopyButton } from "mogh_ui"; diff --git a/ui/src/pages/settings/tags/color-selector.tsx b/ui/src/pages/settings/tags/color-selector.tsx index 385f70e25..72af4cde0 100644 --- a/ui/src/pages/settings/tags/color-selector.tsx +++ b/ui/src/pages/settings/tags/color-selector.tsx @@ -1,4 +1,4 @@ -import { fmtUpperCamelcase } from "@/lib/formatting"; +import { fmtUpperCamelcase } from "mogh_ui"; import { useInvalidate, useSearchCombobox, useWrite } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; diff --git a/ui/src/pages/settings/tags/index.tsx b/ui/src/pages/settings/tags/index.tsx index 8002d1f16..b542507ae 100644 --- a/ui/src/pages/settings/tags/index.tsx +++ b/ui/src/pages/settings/tags/index.tsx @@ -2,7 +2,7 @@ import NewTag from "@/components/tags/new"; import Tag from "@/components/tags/tag"; import UserAvatar from "@/components/user-avatar"; import { useRead, useSetTitle, useUser } from "@/lib/hooks"; -import { DataTable } from "@/ui/data-table"; +import { DataTable } from "mogh_ui"; import { Group, Stack } from "@mantine/core"; import { useState } from "react"; import TagColorSelector from "./color-selector"; diff --git a/ui/src/pages/settings/users/groups.tsx b/ui/src/pages/settings/users/groups.tsx index bab0a88aa..47cb9b935 100644 --- a/ui/src/pages/settings/users/groups.tsx +++ b/ui/src/pages/settings/users/groups.tsx @@ -2,7 +2,7 @@ import ExportToml from "@/components/export-toml"; import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; -import { DataTable } from "@/ui/data-table"; +import { DataTable } from "mogh_ui"; import { Section } from "mogh_ui"; import { Box, Group } from "@mantine/core"; import { useNavigate } from "react-router-dom"; diff --git a/ui/src/pages/settings/variables/index.tsx b/ui/src/pages/settings/variables/index.tsx index ff7a24b60..712d6dc14 100644 --- a/ui/src/pages/settings/variables/index.tsx +++ b/ui/src/pages/settings/variables/index.tsx @@ -8,7 +8,7 @@ import { } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { CopyButton } from "mogh_ui"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Badge, Button, diff --git a/ui/src/pages/stack-service/tabs.tsx b/ui/src/pages/stack-service/tabs.tsx index f767cef03..4e11ca894 100644 --- a/ui/src/pages/stack-service/tabs.tsx +++ b/ui/src/pages/stack-service/tabs.tsx @@ -1,10 +1,10 @@ import LogSection from "@/components/log-section"; import TerminalSection from "@/components/terminal/section"; -import { colorByIntention, ColorIntention } from "@/lib/color"; import { usePermissions } from "@/lib/hooks"; import { useServer } from "@/resources/server"; import { ICONS } from "@/lib/icons"; import { + ColorIntention, MobileFriendlyTabsSelector, TabNoContent, } from "mogh_ui"; @@ -146,7 +146,7 @@ export default function StackServiceTabs({ } return ( - + {View} ); diff --git a/ui/src/pages/swarm/config/tabs.tsx b/ui/src/pages/swarm/config/tabs.tsx index 961f62c6b..671293d21 100644 --- a/ui/src/pages/swarm/config/tabs.tsx +++ b/ui/src/pages/swarm/config/tabs.tsx @@ -1,7 +1,7 @@ -import { colorByIntention, ColorIntention } from "@/lib/color"; import { usePermissions } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { + ColorIntention, MobileFriendlyTabsSelector, TabNoContent, } from "mogh_ui"; @@ -116,7 +116,7 @@ export default function SwarmConfigTabs({ } return ( - + {View} ); diff --git a/ui/src/pages/swarm/node/tabs.tsx b/ui/src/pages/swarm/node/tabs.tsx index 0e7279cf0..37274ff32 100644 --- a/ui/src/pages/swarm/node/tabs.tsx +++ b/ui/src/pages/swarm/node/tabs.tsx @@ -1,6 +1,6 @@ -import { colorByIntention, ColorIntention } from "@/lib/color"; import { usePermissions } from "@/lib/hooks"; import { + ColorIntention, MobileFriendlyTabsSelector, TabNoContent, } from "mogh_ui"; @@ -88,7 +88,7 @@ export default function SwarmNodeTabs({ } return ( - + {View} ); diff --git a/ui/src/pages/swarm/secret/tabs.tsx b/ui/src/pages/swarm/secret/tabs.tsx index 5f460d5b3..794b62cfb 100644 --- a/ui/src/pages/swarm/secret/tabs.tsx +++ b/ui/src/pages/swarm/secret/tabs.tsx @@ -1,7 +1,7 @@ -import { colorByIntention, ColorIntention } from "@/lib/color"; import { usePermissions } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { + ColorIntention, MobileFriendlyTabsSelector, TabNoContent, } from "mogh_ui"; @@ -116,7 +116,7 @@ export default function SwarmSecretTabs({ } return ( - + {View} ); diff --git a/ui/src/pages/swarm/service/tabs.tsx b/ui/src/pages/swarm/service/tabs.tsx index adea3373f..edd8e2511 100644 --- a/ui/src/pages/swarm/service/tabs.tsx +++ b/ui/src/pages/swarm/service/tabs.tsx @@ -1,7 +1,6 @@ -import { colorByIntention, ColorIntention } from "@/lib/color"; import { usePermissions } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import { MobileFriendlyTabsSelector } from "mogh_ui"; +import { ColorIntention, MobileFriendlyTabsSelector } from "mogh_ui"; import { Tabs } from "@mantine/core"; import { useLocalStorage } from "@mantine/hooks"; import { Types } from "komodo_client"; @@ -104,7 +103,7 @@ export default function SwarmServiceTabs({ } return ( - + {View} ); diff --git a/ui/src/pages/swarm/stack/tabs.tsx b/ui/src/pages/swarm/stack/tabs.tsx index 0d3c4a84c..4664c7ebb 100644 --- a/ui/src/pages/swarm/stack/tabs.tsx +++ b/ui/src/pages/swarm/stack/tabs.tsx @@ -1,12 +1,11 @@ import { usePermissions } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import { MobileFriendlyTabsSelector } from "mogh_ui"; +import { ColorIntention, MobileFriendlyTabsSelector } from "mogh_ui"; import { useLocalStorage } from "@mantine/hooks"; import { Types } from "komodo_client"; import { useMemo, useState } from "react"; import SwarmServicesSection from "@/components/swarm/services-section"; import SwarmTasksSection from "@/components/swarm/tasks-section"; -import { colorByIntention, ColorIntention } from "@/lib/color"; import { Tabs } from "@mantine/core"; import SwarmStackLogsSection from "./logs"; import InspectSection from "@/components/inspect-section"; @@ -118,7 +117,7 @@ export default function SwarmStackTabs({ } return ( - + {View} ); diff --git a/ui/src/pages/swarm/task/tabs.tsx b/ui/src/pages/swarm/task/tabs.tsx index 8aab05916..27f6901fe 100644 --- a/ui/src/pages/swarm/task/tabs.tsx +++ b/ui/src/pages/swarm/task/tabs.tsx @@ -1,8 +1,7 @@ import LogSection from "@/components/log-section"; -import { colorByIntention, ColorIntention } from "@/lib/color"; import { usePermissions } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import { MobileFriendlyTabsSelector } from "mogh_ui"; +import { ColorIntention, MobileFriendlyTabsSelector } from "mogh_ui"; import { Tabs } from "@mantine/core"; import { useLocalStorage } from "@mantine/hooks"; import { Types } from "komodo_client"; @@ -82,7 +81,7 @@ export default function SwarmTaskTabs({ } return ( - + {View} ); diff --git a/ui/src/pages/terminal.tsx b/ui/src/pages/terminal.tsx index a6f9e706c..6b8a5af68 100644 --- a/ui/src/pages/terminal.tsx +++ b/ui/src/pages/terminal.tsx @@ -5,7 +5,7 @@ import { ICONS } from "@/lib/icons"; import { useDeployment } from "@/resources/deployment"; import { useServer } from "@/resources/server"; import { useStack } from "@/resources/stack"; -import Page from "@/ui/page"; +import { Page } from "mogh_ui"; import { Group, Text } from "@mantine/core"; import { Types } from "komodo_client"; import { ReactNode, useMemo } from "react"; diff --git a/ui/src/pages/terminals/index.tsx b/ui/src/pages/terminals/index.tsx index cf529aa39..12dced84e 100644 --- a/ui/src/pages/terminals/index.tsx +++ b/ui/src/pages/terminals/index.tsx @@ -1,10 +1,9 @@ import TerminalTargetLink from "@/pages/terminals/target-link"; -import { fmtDateWithMinutes } from "@/lib/formatting"; import { useRead, useSetTitle } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { filterBySplit, terminalLink } from "@/lib/utils"; -import { DataTable, SortableHeader } from "@/ui/data-table"; -import Page from "@/ui/page"; +import { DataTable, fmtDateWithMinutes, SortableHeader } from "mogh_ui"; +import { Page } from "mogh_ui"; import { Group, Stack, Text } from "@mantine/core"; import { useState } from "react"; import { Link } from "react-router-dom"; diff --git a/ui/src/pages/updates.tsx b/ui/src/pages/updates.tsx index 449231604..779488715 100644 --- a/ui/src/pages/updates.tsx +++ b/ui/src/pages/updates.tsx @@ -1,19 +1,18 @@ import ResourceTypeSelector from "@/components/resource-type-selector"; import { useUpdateDetails } from "@/components/updates/details"; import UserAvatar from "@/components/user-avatar"; -import { - fmtDateWithMinutes, - fmtOperation, - fmtUpperCamelcase, -} from "@/lib/formatting"; import { useRead, useSetTitle } from "@/lib/hooks"; import { UsableResource } from "@/resources"; import ResourceLink from "@/resources/link"; import ResourceSelector from "@/resources/selector"; import { ICONS } from "@/lib/icons"; -import { DataTable } from "@/ui/data-table"; -import Page from "@/ui/page"; -import StatusBadge from "@/ui/status-badge"; +import { + StatusBadge, + fmtDateWithMinutes, + DataTable, + Page, + fmtUpperCamelcase, +} from "mogh_ui"; import { ActionIcon, Group, @@ -176,7 +175,7 @@ export default function Updates() { : undefined; return ( - {fmtOperation(row.original.operation)} + {fmtUpperCamelcase(row.original.operation)} {more && {more}} ); diff --git a/ui/src/resources/action/config.tsx b/ui/src/resources/action/config.tsx index 567bb7b29..65ce6288e 100644 --- a/ui/src/resources/action/config.tsx +++ b/ui/src/resources/action/config.tsx @@ -9,7 +9,7 @@ import { useWebhookIntegrations, useWrite, } from "@/lib/hooks"; -import { fmtSnakeCaseToUpperSpaceCase } from "@/lib/formatting"; +import { fmtSnakeCaseToUpperSpaceCase } from "mogh_ui"; import { MonacoEditor } from "@/components/monaco"; import Config from "@/ui/config"; import ActionLastRun from "./last-run"; diff --git a/ui/src/resources/action/index.tsx b/ui/src/resources/action/index.tsx index 1124e6e1b..4a623ddd6 100644 --- a/ui/src/resources/action/index.tsx +++ b/ui/src/resources/action/index.tsx @@ -1,9 +1,9 @@ -import { actionStateIntention, hexColorByIntention } from "@/lib/color"; +import { actionStateIntention } from "@/lib/color"; import { useExecute, useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { RequiredResourceComponents } from ".."; import { Types } from "komodo_client"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import { Badge, Group, Popover, Text } from "@mantine/core"; import { Clock } from "lucide-react"; import { useDisclosure } from "@mantine/hooks"; @@ -75,9 +75,7 @@ export const ActionComponents: RequiredResourceComponents< Icon: ({ id, size = "1rem", noColor }) => { const state = useRead("ListActions", {}).data?.find((r) => r.id === id) ?.info.state; - const color = noColor - ? undefined - : state && hexColorByIntention(actionStateIntention(state)); + const color = noColor ? undefined : state && actionStateIntention(state); return ; }, diff --git a/ui/src/resources/action/last-run.tsx b/ui/src/resources/action/last-run.tsx index ac2fafcd3..eee99e5eb 100644 --- a/ui/src/resources/action/last-run.tsx +++ b/ui/src/resources/action/last-run.tsx @@ -1,4 +1,3 @@ -import { hexColorByIntention } from "@/lib/color"; import { useRead } from "@/lib/hooks"; import { getUpdateQuery, updateLogToHtml } from "@/lib/utils"; import { Section } from "mogh_ui"; @@ -23,7 +22,7 @@ export default function ActionLastRun({ id }: { id: string }) { if (!log?.stdout && !log?.stderr) { return (
- Never run + Never run
); } @@ -32,14 +31,14 @@ export default function ActionLastRun({ id }: { id: string }) { {!log?.stdout && !log?.stderr && ( - Never run + Never run )} {log.stdout && ( Last run: - Stdout + Stdout Last run: - Stderr + Stderr diff --git a/ui/src/resources/build/info.tsx b/ui/src/resources/build/info.tsx index 2cd3810c9..8ee8e35d0 100644 --- a/ui/src/resources/build/info.tsx +++ b/ui/src/resources/build/info.tsx @@ -3,7 +3,7 @@ import { useLocalStorage } from "@mantine/hooks"; import { notifications } from "@mantine/notifications"; import { ReactNode, useState } from "react"; import { useFullBuild } from "."; -import { Section } from "mogh_ui"; +import { fmtDuration, Section } from "mogh_ui"; import { Button, Code, Group, Stack, Text } from "@mantine/core"; import { ConfirmButton } from "mogh_ui"; import { Clock, FilePlus } from "lucide-react"; @@ -14,7 +14,6 @@ import { ICONS } from "@/lib/icons"; import ConfirmUpdate from "@/ui/config/confirm"; import ShowHideButton from "@/ui/show-hide-button"; import { MonacoEditor } from "@/components/monaco"; -import { fmtDuration } from "@/lib/formatting"; export default function BuildInfo({ id, @@ -168,7 +167,10 @@ export default function BuildInfo({ /> )} - setShow((show) => !show)} /> + setShow((show) => !show)} + /> diff --git a/ui/src/resources/build/table.tsx b/ui/src/resources/build/table.tsx index 7c1119796..106bbb821 100644 --- a/ui/src/resources/build/table.tsx +++ b/ui/src/resources/build/table.tsx @@ -1,5 +1,5 @@ import { useSelectedResources } from "@/lib/hooks"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Types } from "komodo_client"; import { fmtVersion } from "@/lib/formatting"; import { BuildComponents } from "."; diff --git a/ui/src/resources/build/tabs.tsx b/ui/src/resources/build/tabs.tsx index ce7c6b2d0..ea1265c18 100644 --- a/ui/src/resources/build/tabs.tsx +++ b/ui/src/resources/build/tabs.tsx @@ -1,4 +1,4 @@ -import { buildStateIntention, colorByIntention } from "@/lib/color"; +import { buildStateIntention } from "@/lib/color"; import { useRead } from "@/lib/hooks"; import { MobileFriendlyTabsSelector, @@ -86,10 +86,7 @@ export default function BuildTabs({ id }: { id: string }) { } return ( - + {View} ); diff --git a/ui/src/resources/builder/table.tsx b/ui/src/resources/builder/table.tsx index 871a7f1cc..641cd4cf8 100644 --- a/ui/src/resources/builder/table.tsx +++ b/ui/src/resources/builder/table.tsx @@ -1,5 +1,5 @@ import { useSelectedResources } from "@/lib/hooks"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { BoxProps } from "@mantine/core"; import { Types } from "komodo_client"; import ResourceLink from "@/resources/link"; diff --git a/ui/src/resources/deployment/config/image.tsx b/ui/src/resources/deployment/config/image.tsx index abdf289a7..f3e6cf9d1 100644 --- a/ui/src/resources/deployment/config/image.tsx +++ b/ui/src/resources/deployment/config/image.tsx @@ -1,4 +1,4 @@ -import { fmtDate, fmtVersion } from "@/lib/formatting"; +import { fmtVersion } from "@/lib/formatting"; import { useRead, useSearchCombobox } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { filterBySplit } from "@/lib/utils"; @@ -13,6 +13,7 @@ import { } from "@mantine/core"; import { Types } from "komodo_client"; import { ChevronsUpDown } from "lucide-react"; +import { fmtDate } from "mogh_ui"; export interface DeploymentImageConfigProps { image: Types.DeploymentImage | undefined; diff --git a/ui/src/resources/deployment/config/restart.tsx b/ui/src/resources/deployment/config/restart.tsx index a1c4276d9..7639afd3c 100644 --- a/ui/src/resources/deployment/config/restart.tsx +++ b/ui/src/resources/deployment/config/restart.tsx @@ -1,4 +1,4 @@ -import { fmtUpperCamelcase } from "@/lib/formatting"; +import { fmtUpperCamelcase } from "mogh_ui"; import { ConfigItem } from "@/ui/config/item"; import { Select } from "@mantine/core"; import { Types } from "komodo_client"; diff --git a/ui/src/resources/deployment/index.tsx b/ui/src/resources/deployment/index.tsx index 50a277e67..a0c7dedc4 100644 --- a/ui/src/resources/deployment/index.tsx +++ b/ui/src/resources/deployment/index.tsx @@ -1,9 +1,9 @@ -import { deploymentStateIntention, hexColorByIntention } from "@/lib/color"; +import { deploymentStateIntention } from "@/lib/color"; import { useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { RequiredResourceComponents } from ".."; import { Types } from "komodo_client"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import DeploymentTable from "./table"; import DeploymentTabs from "./tabs"; import { @@ -26,6 +26,7 @@ import DeploymentUpdateAvailable from "./update-available"; import ResourceHeader from "../header"; import BatchExecutions from "@/components/batch-executions"; import NewResourceWithDeployTarget from "../new-with-deploy-target"; +import { hexColorByIntention } from "mogh_ui"; export function useDeployment(id: string | undefined, useName?: boolean) { return useRead("ListDeployments", {}).data?.find((r) => diff --git a/ui/src/resources/deployment/table.tsx b/ui/src/resources/deployment/table.tsx index 9e827f415..4ca57cbfb 100644 --- a/ui/src/resources/deployment/table.tsx +++ b/ui/src/resources/deployment/table.tsx @@ -3,7 +3,7 @@ import { Types } from "komodo_client"; import { ICONS } from "@/lib/icons"; import { Group, BoxProps } from "@mantine/core"; import TableTags from "@/components/tags/table"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { DeploymentComponents } from "."; import ResourceLink from "@/resources/link"; import DeploymentUpdateAvailable from "./update-available"; diff --git a/ui/src/resources/deployment/tabs.tsx b/ui/src/resources/deployment/tabs.tsx index 4b233bb92..5fb5ddf50 100644 --- a/ui/src/resources/deployment/tabs.tsx +++ b/ui/src/resources/deployment/tabs.tsx @@ -10,7 +10,7 @@ import { } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import { Tabs } from "@mantine/core"; -import { colorByIntention, deploymentStateIntention } from "@/lib/color"; +import { deploymentStateIntention } from "@/lib/color"; import DeploymentConfig from "./config"; import LogSection from "@/components/log-section"; import TerminalSection from "@/components/terminal/section"; @@ -129,9 +129,7 @@ export default function DeploymentTabs({ id }: { id: string }) { return ( {View} diff --git a/ui/src/resources/deployment/update-available.tsx b/ui/src/resources/deployment/update-available.tsx index 2ed470272..d53fa5609 100644 --- a/ui/src/resources/deployment/update-available.tsx +++ b/ui/src/resources/deployment/update-available.tsx @@ -11,7 +11,7 @@ import { Types } from "komodo_client"; import { ActionIcon, Box, Button, HoverCard } from "@mantine/core"; import { ICONS } from "@/lib/icons"; import ConfirmModalWithDisable from "@/components/confirm-modal-with-disable"; -import { hexColorByIntention } from "@/lib/color"; +import { hexColorByIntention } from "mogh_ui"; export default function DeploymentUpdateAvailable({ id, diff --git a/ui/src/resources/description.tsx b/ui/src/resources/description.tsx index c3ea5e634..0d32b7109 100644 --- a/ui/src/resources/description.tsx +++ b/ui/src/resources/description.tsx @@ -3,7 +3,7 @@ import { UsableResource } from "."; import { notifications } from "@mantine/notifications"; import TextUpdateModal from "@/ui/text-update-modal"; import { Button, Text } from "@mantine/core"; -import { fmtUpperCamelcase } from "@/lib/formatting"; +import { fmtUpperCamelcase } from "mogh_ui"; export default function ResourceDescription({ type, diff --git a/ui/src/resources/procedure/config/execution-selector.tsx b/ui/src/resources/procedure/config/execution-selector.tsx index d25b2b0ca..3526b77bb 100644 --- a/ui/src/resources/procedure/config/execution-selector.tsx +++ b/ui/src/resources/procedure/config/execution-selector.tsx @@ -3,7 +3,7 @@ import { PROCEDURE_EXECUTIONS } from "./executions"; import { filterBySplit } from "@/lib/utils"; import { Button, ButtonProps, Combobox, ComboboxProps } from "@mantine/core"; import { ChevronsUpDown } from "lucide-react"; -import { fmtUpperCamelcase } from "@/lib/formatting"; +import { fmtUpperCamelcase } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import { useSearchCombobox } from "@/lib/hooks"; diff --git a/ui/src/resources/procedure/config/stage.tsx b/ui/src/resources/procedure/config/stage.tsx index 1100d5138..1da9547c3 100644 --- a/ui/src/resources/procedure/config/stage.tsx +++ b/ui/src/resources/procedure/config/stage.tsx @@ -1,4 +1,4 @@ -import { DataTable } from "@/ui/data-table"; +import { DataTable } from "mogh_ui"; import { ActionIcon, Button, diff --git a/ui/src/resources/procedure/index.tsx b/ui/src/resources/procedure/index.tsx index 11d323ea1..bbe75109c 100644 --- a/ui/src/resources/procedure/index.tsx +++ b/ui/src/resources/procedure/index.tsx @@ -1,9 +1,9 @@ -import { procedureStateIntention, hexColorByIntention } from "@/lib/color"; +import { procedureStateIntention } from "@/lib/color"; import { useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { RequiredResourceComponents } from ".."; import { Types } from "komodo_client"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import ProcedureTable from "./table"; import NewResource from "@/resources/new"; import ProcedureConfig from "./config"; @@ -14,6 +14,7 @@ import { Badge, Group, Popover, Text } from "@mantine/core"; import { Clock } from "lucide-react"; import { useDisclosure } from "@mantine/hooks"; import { updateLogToHtml } from "@/lib/utils"; +import { hexColorByIntention } from "mogh_ui"; export function useProcedure(id: string | undefined, useName?: boolean) { return useRead("ListProcedures", {}).data?.find((r) => diff --git a/ui/src/resources/procedure/table.tsx b/ui/src/resources/procedure/table.tsx index fc2afcae9..4f13ac92e 100644 --- a/ui/src/resources/procedure/table.tsx +++ b/ui/src/resources/procedure/table.tsx @@ -1,5 +1,5 @@ import { useSelectedResources } from "@/lib/hooks"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Types } from "komodo_client"; import ResourceLink from "@/resources/link"; import { ProcedureComponents } from "."; diff --git a/ui/src/resources/repo/index.tsx b/ui/src/resources/repo/index.tsx index c0fe7194a..d60f4d817 100644 --- a/ui/src/resources/repo/index.tsx +++ b/ui/src/resources/repo/index.tsx @@ -1,9 +1,9 @@ -import { repoStateIntention, hexColorByIntention } from "@/lib/color"; +import { repoStateIntention } from "@/lib/color"; import { useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { RequiredResourceComponents } from "@/resources"; import { Types } from "komodo_client"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import RepoTable from "./table"; import NewResource from "@/resources/new"; import ResourceHeader from "@/resources/header"; @@ -15,6 +15,7 @@ import { useBuilder } from "../builder"; import { Box, Group } from "@mantine/core"; import ResourceLink from "../link"; import RepoLink from "@/components/repo-link"; +import { hexColorByIntention } from "mogh_ui"; export function useRepo(id: string | undefined, useName?: boolean) { return useRead("ListRepos", {}).data?.find((r) => diff --git a/ui/src/resources/repo/table.tsx b/ui/src/resources/repo/table.tsx index 6b6a940c8..ce2d5ee60 100644 --- a/ui/src/resources/repo/table.tsx +++ b/ui/src/resources/repo/table.tsx @@ -1,6 +1,6 @@ import { Types } from "komodo_client"; import { useSelectedResources } from "@/lib/hooks"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import ResourceLink from "@/resources/link"; import { RepoComponents } from "."; import TableTags from "@/components/tags/table"; diff --git a/ui/src/resources/repo/tabs.tsx b/ui/src/resources/repo/tabs.tsx index 6c28ef38f..ff31e3fe4 100644 --- a/ui/src/resources/repo/tabs.tsx +++ b/ui/src/resources/repo/tabs.tsx @@ -6,7 +6,7 @@ import { TabNoContent, } from "mogh_ui"; import { ICONS } from "@/lib/icons"; -import { colorByIntention, repoStateIntention } from "@/lib/color"; +import { repoStateIntention } from "@/lib/color"; import { Tabs } from "@mantine/core"; import RepoConfig from "./config"; import { useRead } from "@/lib/hooks"; @@ -79,10 +79,7 @@ export default function RepoTabs({ id }: { id: string }) { } return ( - + {View} ); diff --git a/ui/src/resources/server/diskUsage.tsx b/ui/src/resources/server/diskUsage.tsx index bfea9e30e..999494d50 100644 --- a/ui/src/resources/server/diskUsage.tsx +++ b/ui/src/resources/server/diskUsage.tsx @@ -1,7 +1,7 @@ import { Group, Stack, Text } from "@mantine/core"; import { Types } from "komodo_client"; import { useServerThresholds } from "@/resources/server/hooks"; -import { hexColorByIntention } from "@/lib/color"; +import { hexColorByIntention } from "mogh_ui"; import { ICONS } from "@/lib/icons"; export default function ServerDiskUsage({ diff --git a/ui/src/resources/server/docker/images.tsx b/ui/src/resources/server/docker/images.tsx index fd21ddfc9..96f91f052 100644 --- a/ui/src/resources/server/docker/images.tsx +++ b/ui/src/resources/server/docker/images.tsx @@ -2,12 +2,11 @@ import { ReactNode } from "react"; import { useServerDockerSearch } from "."; import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; -import { Section } from "mogh_ui"; +import { fmtSizeBytes, Section } from "mogh_ui"; import { Badge, Group } from "@mantine/core"; import { Prune } from "../executions"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import DockerResourceLink from "@/components/docker/link"; -import { fmtSizeBytes } from "@/lib/formatting"; import SearchInput from "@/ui/search-input"; export default function ServerImages({ diff --git a/ui/src/resources/server/docker/index.tsx b/ui/src/resources/server/docker/index.tsx index ba972ec5b..1307fdb63 100644 --- a/ui/src/resources/server/docker/index.tsx +++ b/ui/src/resources/server/docker/index.tsx @@ -9,7 +9,7 @@ import { MobileFriendlyTabsSelector, TabNoContent, } from "mogh_ui"; -import { colorByIntention, serverStateIntention } from "@/lib/color"; +import { serverStateIntention } from "@/lib/color"; import ServerContainers from "./containers"; import ServerNetworks from "./networks"; import { ICONS } from "@/lib/icons"; @@ -101,11 +101,9 @@ export default function ServerDockerResources({ return (
diff --git a/ui/src/resources/server/docker/networks.tsx b/ui/src/resources/server/docker/networks.tsx index 54811a74c..ecafb7df7 100644 --- a/ui/src/resources/server/docker/networks.tsx +++ b/ui/src/resources/server/docker/networks.tsx @@ -5,7 +5,7 @@ import { filterBySplit } from "@/lib/utils"; import { Section } from "mogh_ui"; import { Prune } from "../executions"; import { Badge, Group } from "@mantine/core"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import DockerResourceLink from "@/components/docker/link"; import SearchInput from "@/ui/search-input"; diff --git a/ui/src/resources/server/docker/volumes.tsx b/ui/src/resources/server/docker/volumes.tsx index 005e67db9..af2303392 100644 --- a/ui/src/resources/server/docker/volumes.tsx +++ b/ui/src/resources/server/docker/volumes.tsx @@ -5,7 +5,7 @@ import { filterBySplit } from "@/lib/utils"; import { Section } from "mogh_ui"; import { Prune } from "../executions"; import { Badge, Group } from "@mantine/core"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import DockerResourceLink from "@/components/docker/link"; import SearchInput from "@/ui/search-input"; diff --git a/ui/src/resources/server/index.tsx b/ui/src/resources/server/index.tsx index 0bf5cb9c0..b2e793849 100644 --- a/ui/src/resources/server/index.tsx +++ b/ui/src/resources/server/index.tsx @@ -1,19 +1,19 @@ -import { serverStateIntention, hexColorByIntention } from "@/lib/color"; +import { serverStateIntention } from "@/lib/color"; import { useExecute, useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { RequiredResourceComponents } from ".."; import { Types } from "komodo_client"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import ServerTable from "./table"; import NewResource from "@/resources/new"; -import { ConfirmButton } from "mogh_ui"; +import { ConfirmButton, hexColorByIntention } from "mogh_ui"; import { Prune } from "./executions"; import ServerVersion from "./version"; import { Box, Group, HoverCard } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import ConfirmServerPubkey from "./confirm-pubkey"; import ServerTabs from "./tabs"; -import { fmtUpperCamelcase } from "@/lib/formatting"; +import { fmtUpperCamelcase } from "mogh_ui"; import ConfirmModalWithDisable from "@/components/confirm-modal-with-disable"; import ResourceHeader from "../header"; import { useIsServerAvailable } from "./hooks"; diff --git a/ui/src/resources/server/stats-card.tsx b/ui/src/resources/server/stats-card.tsx index b35a345b9..23c118050 100644 --- a/ui/src/resources/server/stats-card.tsx +++ b/ui/src/resources/server/stats-card.tsx @@ -12,7 +12,7 @@ import { Text, useComputedColorScheme, } from "@mantine/core"; -import { ColorIntention, hexColorByIntention } from "@/lib/color"; +import { ColorIntention, hexColorByIntention } from "mogh_ui"; import { LucideIcon } from "lucide-react"; export interface ServerStatsCardProps { diff --git a/ui/src/resources/server/stats/containers.tsx b/ui/src/resources/server/stats/containers.tsx index cb5dd884d..7ea7c9f10 100644 --- a/ui/src/resources/server/stats/containers.tsx +++ b/ui/src/resources/server/stats/containers.tsx @@ -1,5 +1,5 @@ import { useRead } from "@/lib/hooks"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Section } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; import { Group, Text } from "@mantine/core"; diff --git a/ui/src/resources/server/stats/current/load-average.tsx b/ui/src/resources/server/stats/current/load-average.tsx index 5b0c12f24..05d98bcb6 100644 --- a/ui/src/resources/server/stats/current/load-average.tsx +++ b/ui/src/resources/server/stats/current/load-average.tsx @@ -1,6 +1,6 @@ import { Types } from "komodo_client"; import { useRead } from "@/lib/hooks"; -import { hexColorByIntention } from "@/lib/color"; +import { hexColorByIntention } from "mogh_ui"; import InfoCard from "@/ui/info-card"; import { Group, Progress, SimpleGrid, Stack, Text } from "@mantine/core"; import { useIsServerAvailable } from "@/resources/server/hooks"; diff --git a/ui/src/resources/server/stats/current/network-usage.tsx b/ui/src/resources/server/stats/current/network-usage.tsx index 344864aba..2f0b8ba46 100644 --- a/ui/src/resources/server/stats/current/network-usage.tsx +++ b/ui/src/resources/server/stats/current/network-usage.tsx @@ -1,7 +1,7 @@ -import { fmtRateBytes } from "@/lib/formatting"; import InfoCard from "@/ui/info-card"; import { Group, Stack, Text } from "@mantine/core"; import { Types } from "komodo_client"; +import { fmtRateBytes } from "mogh_ui"; export default function ServerNetworkUsage({ stats, diff --git a/ui/src/resources/server/stats/disks.tsx b/ui/src/resources/server/stats/disks.tsx index 4b2236c78..701acc5be 100644 --- a/ui/src/resources/server/stats/disks.tsx +++ b/ui/src/resources/server/stats/disks.tsx @@ -1,5 +1,5 @@ import { ICONS } from "@/lib/icons"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Section } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; import { Group, Text } from "@mantine/core"; diff --git a/ui/src/resources/server/stats/historical.tsx b/ui/src/resources/server/stats/historical.tsx index d8d4ff902..8ac2026aa 100644 --- a/ui/src/resources/server/stats/historical.tsx +++ b/ui/src/resources/server/stats/historical.tsx @@ -1,8 +1,8 @@ -import { Section } from "mogh_ui"; +import { fmtSizeBytes, Section } from "mogh_ui"; import { useStatsGranularity } from "../hooks"; import { ReactNode, useMemo } from "react"; import { Types } from "komodo_client"; -import { hexColorByIntention } from "@/lib/color"; +import { hexColorByIntention } from "mogh_ui"; import { useRead } from "@/lib/hooks"; import { ChartLine, Download, Upload } from "lucide-react"; import ShowHideButton from "@/ui/show-hide-button"; @@ -25,7 +25,6 @@ import { ResponsiveContainer, Legend, } from "recharts"; -import { fmtSizeBytes } from "@/lib/formatting"; import { ICONS } from "@/lib/icons"; import { useLocalStorage } from "@mantine/hooks"; diff --git a/ui/src/resources/server/stats/processes.tsx b/ui/src/resources/server/stats/processes.tsx index a3fab6be0..f8c0f1c13 100644 --- a/ui/src/resources/server/stats/processes.tsx +++ b/ui/src/resources/server/stats/processes.tsx @@ -1,7 +1,7 @@ import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import SearchInput from "@/ui/search-input"; import { Section } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; diff --git a/ui/src/resources/server/stats/system-info.tsx b/ui/src/resources/server/stats/system-info.tsx index 1d091c832..81b318908 100644 --- a/ui/src/resources/server/stats/system-info.tsx +++ b/ui/src/resources/server/stats/system-info.tsx @@ -1,4 +1,4 @@ -import { DataTable } from "@/ui/data-table"; +import { DataTable } from "mogh_ui"; import { Section } from "mogh_ui"; import { Types } from "komodo_client"; import { useRead } from "@/lib/hooks"; diff --git a/ui/src/resources/server/table/standard.tsx b/ui/src/resources/server/table/standard.tsx index 8b4efb0c8..2aad1f83d 100644 --- a/ui/src/resources/server/table/standard.tsx +++ b/ui/src/resources/server/table/standard.tsx @@ -1,6 +1,6 @@ import { useRead, useSelectedResources } from "@/lib/hooks"; import ResourceLink from "@/resources/link"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Types } from "komodo_client"; import { useCallback } from "react"; import { ServerComponents } from ".."; diff --git a/ui/src/resources/server/table/stats.tsx b/ui/src/resources/server/table/stats.tsx index cb82bc837..b5a80fda4 100644 --- a/ui/src/resources/server/table/stats.tsx +++ b/ui/src/resources/server/table/stats.tsx @@ -1,11 +1,10 @@ import { useSelectedResources } from "@/lib/hooks"; import ResourceLink from "@/resources/link"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, fmtRateBytes, SortableHeader } from "mogh_ui"; import { BoxProps, Group, Text } from "@mantine/core"; import { Types } from "komodo_client"; import { useServerStats, useServerThresholds } from "@/resources/server/hooks"; import StatCell from "@/ui/stat-cell"; -import { fmtRateBytes } from "@/lib/formatting"; import ServerVersion from "@/resources/server/version"; import ServerDiskUsage from "../diskUsage"; diff --git a/ui/src/resources/server/tabs.tsx b/ui/src/resources/server/tabs.tsx index 2892a5d2e..97cce2a72 100644 --- a/ui/src/resources/server/tabs.tsx +++ b/ui/src/resources/server/tabs.tsx @@ -2,14 +2,11 @@ import { usePermissions, useRead } from "@/lib/hooks"; import { useLocalStorage } from "@mantine/hooks"; import { useServer } from "."; import { useMemo } from "react"; -import { - MobileFriendlyTabsSelector, - TabNoContent, -} from "mogh_ui"; +import { MobileFriendlyTabsSelector, TabNoContent } from "mogh_ui"; import { Types } from "komodo_client"; import TerminalSection from "@/components/terminal/section"; import { Tabs } from "@mantine/core"; -import { colorByIntention, serverStateIntention } from "@/lib/color"; +import { serverStateIntention } from "@/lib/color"; import ServerConfig from "./config"; import { ICONS } from "@/lib/icons"; import ServerDockerResources from "./docker"; @@ -126,13 +123,11 @@ export default function ServerTabs({ id }: { id: string }) { return ( diff --git a/ui/src/resources/server/version.tsx b/ui/src/resources/server/version.tsx index 5a8e9705f..519e2fa26 100644 --- a/ui/src/resources/server/version.tsx +++ b/ui/src/resources/server/version.tsx @@ -2,8 +2,8 @@ import { useRead } from "@/lib/hooks"; import { useServer } from "."; import { Group, HoverCard, Text } from "@mantine/core"; import { ICONS } from "@/lib/icons"; -import { colorByIntention } from "@/lib/color"; import { Types } from "komodo_client"; +import { hexColorByIntention } from "mogh_ui"; export default function ServerVersion({ id }: { id: string }) { const coreVersion = useRead("GetVersion", {}).data?.version; @@ -17,11 +17,11 @@ export default function ServerVersion({ id }: { id: string }) { {!serverVersion ? ( - + ) : mismatch ? ( - + ) : ( - + )} {serverVersion ?? "Unknown"} diff --git a/ui/src/resources/stack/index.tsx b/ui/src/resources/stack/index.tsx index ea8d0ca08..592d4e9f5 100644 --- a/ui/src/resources/stack/index.tsx +++ b/ui/src/resources/stack/index.tsx @@ -1,8 +1,8 @@ -import { stackStateIntention, hexColorByIntention } from "@/lib/color"; +import { stackStateIntention } from "@/lib/color"; import { useInvalidate, usePermissions, useRead, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { Types } from "komodo_client"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import { RequiredResourceComponents } from "@/resources"; import StackTable from "./table"; import StackTabs from "./tabs"; @@ -34,6 +34,7 @@ import StackUpdateAvailable from "./update-available"; import ResourceHeader from "../header"; import BatchExecutions from "@/components/batch-executions"; import NewResourceWithDeployTarget from "../new-with-deploy-target"; +import { hexColorByIntention } from "mogh_ui"; export function useStack(id: string | undefined, useName?: boolean) { return useRead("ListStacks", {}).data?.find((r) => diff --git a/ui/src/resources/stack/services.tsx b/ui/src/resources/stack/services.tsx index 74dbdc31a..bb30a3a1a 100644 --- a/ui/src/resources/stack/services.tsx +++ b/ui/src/resources/stack/services.tsx @@ -3,9 +3,9 @@ import { useStack } from "."; import { useRead } from "@/lib/hooks"; import { Types } from "komodo_client"; import { Section } from "mogh_ui"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import StackServiceLink from "@/components/stack-service-link"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import { containerStateIntention, swarmStateIntention } from "@/lib/color"; import DockerResourceLink from "@/components/docker/link"; import { Group } from "@mantine/core"; diff --git a/ui/src/resources/stack/table.tsx b/ui/src/resources/stack/table.tsx index a582dbec6..bf2592786 100644 --- a/ui/src/resources/stack/table.tsx +++ b/ui/src/resources/stack/table.tsx @@ -1,5 +1,5 @@ import { useResourceName, useSelectedResources } from "@/lib/hooks"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Group, BoxProps } from "@mantine/core"; import { Types } from "komodo_client"; import ResourceLink from "@/resources/link"; diff --git a/ui/src/resources/stack/tabs.tsx b/ui/src/resources/stack/tabs.tsx index 8ebc30d36..e5ce95f68 100644 --- a/ui/src/resources/stack/tabs.tsx +++ b/ui/src/resources/stack/tabs.tsx @@ -9,7 +9,7 @@ import { } from "mogh_ui"; import { Tabs } from "@mantine/core"; import { ICONS } from "@/lib/icons"; -import { colorByIntention, stackStateIntention } from "@/lib/color"; +import { stackStateIntention } from "@/lib/color"; import { useServer } from "@/resources/server"; import StackConfig from "./config"; import StackInfo from "./info"; @@ -143,12 +143,10 @@ export default function StackTabs({ id }: { id: string }) { return ( !service.update_available), - ), + color={stackStateIntention( + state, + info?.services && + !info.services.every((service) => !service.update_available), )} value={view} > diff --git a/ui/src/resources/stack/update-available.tsx b/ui/src/resources/stack/update-available.tsx index 5ea00af33..f99f1a38f 100644 --- a/ui/src/resources/stack/update-available.tsx +++ b/ui/src/resources/stack/update-available.tsx @@ -19,7 +19,7 @@ import { } from "@mantine/core"; import { ICONS } from "@/lib/icons"; import ConfirmModalWithDisable from "@/components/confirm-modal-with-disable"; -import { hexColorByIntention } from "@/lib/color"; +import { hexColorByIntention } from "mogh_ui"; export default function StackUpdateAvailable({ id, diff --git a/ui/src/resources/swarm/docker/configs.tsx b/ui/src/resources/swarm/docker/configs.tsx index 90347c3d3..e2b7a1002 100644 --- a/ui/src/resources/swarm/docker/configs.tsx +++ b/ui/src/resources/swarm/docker/configs.tsx @@ -4,7 +4,7 @@ import { ReactNode } from "react"; import { useSwarmDockerSearch } from "."; import { Section } from "mogh_ui"; import { Badge, Group } from "@mantine/core"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import SwarmResourceLink from "@/components/swarm/link"; import SearchInput from "@/ui/search-input"; import NewSwarmConfig from "@/resources/swarm/new/config"; diff --git a/ui/src/resources/swarm/docker/index.tsx b/ui/src/resources/swarm/docker/index.tsx index 15cc662ad..c54c8da5c 100644 --- a/ui/src/resources/swarm/docker/index.tsx +++ b/ui/src/resources/swarm/docker/index.tsx @@ -9,7 +9,7 @@ import { MobileFriendlyTabsSelector, TabNoContent, } from "mogh_ui"; -import { colorByIntention, swarmStateIntention } from "@/lib/color"; +import { swarmStateIntention } from "@/lib/color"; import { ICONS } from "@/lib/icons"; import SwarmNodes from "./nodes"; import SwarmStacks from "./stacks"; @@ -119,7 +119,7 @@ export default function SwarmDockerResources({ return (
- + {View}
diff --git a/ui/src/resources/swarm/docker/nodes/index.tsx b/ui/src/resources/swarm/docker/nodes/index.tsx index 9215b5afe..c6d373f4d 100644 --- a/ui/src/resources/swarm/docker/nodes/index.tsx +++ b/ui/src/resources/swarm/docker/nodes/index.tsx @@ -3,9 +3,9 @@ import { filterBySplit } from "@/lib/utils"; import { ReactNode, useState } from "react"; import { useSwarmDockerSearch } from ".."; import { Section } from "mogh_ui"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import SwarmResourceLink from "@/components/swarm/link"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import { swarmNodeAvailabilityIntention, swarmNodeRoleIntention, diff --git a/ui/src/resources/swarm/docker/secrets.tsx b/ui/src/resources/swarm/docker/secrets.tsx index 431edb2a5..dfc144164 100644 --- a/ui/src/resources/swarm/docker/secrets.tsx +++ b/ui/src/resources/swarm/docker/secrets.tsx @@ -4,7 +4,7 @@ import { ReactNode } from "react"; import { useSwarmDockerSearch } from "."; import { Section } from "mogh_ui"; import { Badge, Group } from "@mantine/core"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import SwarmResourceLink from "@/components/swarm/link"; import SearchInput from "@/ui/search-input"; import NewSwarmSecret from "@/resources/swarm/new/secret"; diff --git a/ui/src/resources/swarm/docker/stacks.tsx b/ui/src/resources/swarm/docker/stacks.tsx index 88132bef7..d9692d1fa 100644 --- a/ui/src/resources/swarm/docker/stacks.tsx +++ b/ui/src/resources/swarm/docker/stacks.tsx @@ -3,9 +3,9 @@ import { filterBySplit } from "@/lib/utils"; import { ReactNode } from "react"; import { useSwarmDockerSearch } from "."; import { Section } from "mogh_ui"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import SwarmResourceLink from "@/components/swarm/link"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import { swarmStateIntention } from "@/lib/color"; import SearchInput from "@/ui/search-input"; diff --git a/ui/src/resources/swarm/header-info.tsx b/ui/src/resources/swarm/header-info.tsx index 983653c54..c9fa61026 100644 --- a/ui/src/resources/swarm/header-info.tsx +++ b/ui/src/resources/swarm/header-info.tsx @@ -1,8 +1,8 @@ import { useRead } from "@/lib/hooks"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import { Box, Group, HoverCard, Loader, Stack, Text } from "@mantine/core"; import SwarmResourceLink, { SwarmResourceType } from "@/components/swarm/link"; -import { ColorIntention } from "@/lib/color"; +import { ColorIntention } from "mogh_ui"; export interface SwarmHeaderInfoProps { swarmId: string; diff --git a/ui/src/resources/swarm/index.tsx b/ui/src/resources/swarm/index.tsx index f73157fbe..47f574928 100644 --- a/ui/src/resources/swarm/index.tsx +++ b/ui/src/resources/swarm/index.tsx @@ -1,6 +1,5 @@ import { swarmStateIntention, - hexColorByIntention, swarmNodeStateIntention, swarmTaskStateIntention, } from "@/lib/color"; @@ -8,7 +7,7 @@ import { usePermissions, useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { RequiredResourceComponents } from ".."; import { Types } from "komodo_client"; -import StatusBadge from "@/ui/status-badge"; +import { StatusBadge } from "mogh_ui"; import SwarmTable from "./table"; import NewResource from "@/resources/new"; import SwarmTabs from "./tabs"; @@ -19,6 +18,7 @@ import ResourceHeader from "../header"; import BatchExecutions from "@/components/batch-executions"; import SwarmHeaderInfo from "./header-info"; import HoverError from "@/ui/hover-error"; +import { hexColorByIntention } from "mogh_ui"; export function useSwarm(id: string | undefined, useName?: boolean) { return useRead("ListSwarms", {}).data?.find((r) => diff --git a/ui/src/resources/swarm/table.tsx b/ui/src/resources/swarm/table.tsx index 038d19647..9bdf8a883 100644 --- a/ui/src/resources/swarm/table.tsx +++ b/ui/src/resources/swarm/table.tsx @@ -1,6 +1,6 @@ import { useSelectedResources } from "@/lib/hooks"; import ResourceLink from "@/resources/link"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Types } from "komodo_client"; import { SwarmComponents } from "."; import TableTags from "@/components/tags/table"; diff --git a/ui/src/resources/swarm/tabs.tsx b/ui/src/resources/swarm/tabs.tsx index fa64e7377..08fe8e929 100644 --- a/ui/src/resources/swarm/tabs.tsx +++ b/ui/src/resources/swarm/tabs.tsx @@ -9,7 +9,7 @@ import { useMemo } from "react"; import { useSwarm } from "."; import SwarmConfig from "./config"; import { Tabs } from "@mantine/core"; -import { colorByIntention, swarmStateIntention } from "@/lib/color"; +import { swarmStateIntention } from "@/lib/color"; import SwarmDockerResources from "./docker"; import InspectSection from "@/components/inspect-section"; import SwarmHostedResourcesSection from "./resources"; @@ -102,10 +102,7 @@ export default function SwarmTabs({ id }: { id: string }) { } return ( - + {View} ); diff --git a/ui/src/resources/sync/index.tsx b/ui/src/resources/sync/index.tsx index 112c43a4a..ab712563f 100644 --- a/ui/src/resources/sync/index.tsx +++ b/ui/src/resources/sync/index.tsx @@ -1,20 +1,20 @@ -import { resourceSyncStateIntention, hexColorByIntention } from "@/lib/color"; +import { resourceSyncStateIntention } from "@/lib/color"; import { useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { Types } from "komodo_client"; -import StatusBadge from "@/ui/status-badge"; +import { fmtDate, StatusBadge } from "mogh_ui"; import ResourceSyncTable from "./table"; import { RequiredResourceComponents } from "@/resources"; import NewResource from "@/resources/new"; import { CommitSync, ExecuteSync, RefreshSync } from "./executions"; import FileSource from "@/components/file-source"; import { Clock } from "lucide-react"; -import { fmtDate } from "@/lib/formatting"; import { Box, Group } from "@mantine/core"; import HashCompare from "@/components/hash-compare"; import ResourceSyncTabs from "./tabs"; import ResourceHeader from "../header"; import BatchExecutions from "@/components/batch-executions"; +import { hexColorByIntention } from "mogh_ui"; export function useResourceSync(id: string | undefined, useName?: boolean) { return useRead("ListResourceSyncs", {}).data?.find((r) => diff --git a/ui/src/resources/sync/pending.tsx b/ui/src/resources/sync/pending.tsx index 86dcd3609..90b11941b 100644 --- a/ui/src/resources/sync/pending.tsx +++ b/ui/src/resources/sync/pending.tsx @@ -12,7 +12,7 @@ import { UsableResource } from "@/resources"; import { ConfirmButton } from "mogh_ui"; import { SquarePlay } from "lucide-react"; import { MonacoDiffEditor, MonacoEditor } from "@/components/monaco"; -import { colorByIntention, diffTypeIntention } from "@/lib/color"; +import { diffTypeIntention } from "@/lib/color"; export default function ResourceSyncPending({ id, @@ -143,9 +143,7 @@ export default function ResourceSyncPending({ {view === "Commit" ? reversePendingType(update.data.type) @@ -227,9 +225,7 @@ export default function ResourceSyncPending({ {view === "Commit" ? reversePendingType(data.type) : data.type}{" "} Variable @@ -278,9 +274,7 @@ export default function ResourceSyncPending({ {view === "Commit" ? reversePendingType(data.type) : data.type}{" "} User Group diff --git a/ui/src/resources/sync/table.tsx b/ui/src/resources/sync/table.tsx index 7a6300dcf..a351829da 100644 --- a/ui/src/resources/sync/table.tsx +++ b/ui/src/resources/sync/table.tsx @@ -1,5 +1,5 @@ import { useSelectedResources } from "@/lib/hooks"; -import { DataTable, SortableHeader } from "@/ui/data-table"; +import { DataTable, SortableHeader } from "mogh_ui"; import { Types } from "komodo_client"; import ResourceLink from "@/resources/link"; import { ResourceSyncComponents } from "."; diff --git a/ui/src/resources/sync/tabs.tsx b/ui/src/resources/sync/tabs.tsx index a632e677d..0a427b34e 100644 --- a/ui/src/resources/sync/tabs.tsx +++ b/ui/src/resources/sync/tabs.tsx @@ -1,13 +1,10 @@ import { useMemo } from "react"; import { useFullResourceSync, useResourceSync } from "."; import { useResourceSyncTabsView } from "./hooks"; -import { - MobileFriendlyTabsSelector, - TabNoContent, -} from "mogh_ui"; +import { MobileFriendlyTabsSelector, TabNoContent } from "mogh_ui"; import { Tabs } from "@mantine/core"; import ResourceSyncConfig from "./config"; -import { colorByIntention, resourceSyncStateIntention } from "@/lib/color"; +import { resourceSyncStateIntention } from "@/lib/color"; import ResourceSyncInfo from "./info"; import ResourceSyncPending from "./pending"; @@ -64,10 +61,7 @@ export default function ResourceSyncTabs({ id }: { id: string }) { } return ( - + {View} ); diff --git a/ui/src/ui/config/confirm.tsx b/ui/src/ui/config/confirm.tsx index 2ae423e61..46468facc 100644 --- a/ui/src/ui/config/confirm.tsx +++ b/ui/src/ui/config/confirm.tsx @@ -3,10 +3,9 @@ import { useState } from "react"; import { useDisclosure } from "@mantine/hooks"; import { Box, Button, Group, Modal, Stack, Text } from "@mantine/core"; import { useCtrlKeyListener, useKeyListener } from "@/lib/hooks"; -import { fmtSnakeCaseToUpperSpaceCase } from "@/lib/formatting"; +import { fmtSnakeCaseToUpperSpaceCase } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import { deepCompare, envToText } from "@/lib/utils"; -import { colorByIntention } from "@/lib/color"; import ShowHideButton from "@/ui/show-hide-button"; export default function ConfirmUpdate({ @@ -173,9 +172,7 @@ function ConfirmUpdateItem({ bdrs="md" > - - {fmtSnakeCaseToUpperSpaceCase(_key as string)} - + {fmtSnakeCaseToUpperSpaceCase(_key as string)} {show && ( @@ -198,13 +195,13 @@ function ConfirmUpdateItem({ /> ) : ( - + {prev_val || "None"} {" "} {"->"} {" "} - + {val || "None"} diff --git a/ui/src/ui/config/item.tsx b/ui/src/ui/config/item.tsx index 537a5a945..b92bb317a 100644 --- a/ui/src/ui/config/item.tsx +++ b/ui/src/ui/config/item.tsx @@ -1,4 +1,4 @@ -import { fmtSnakeCaseToUpperSpaceCase } from "@/lib/formatting"; +import { fmtSnakeCaseToUpperSpaceCase } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import { EnableSwitch } from "mogh_ui"; import InputList, { InputListProps } from "@/ui/input-list"; diff --git a/ui/src/ui/data-table.tsx b/ui/src/ui/data-table.tsx deleted file mode 100644 index b93e59fa5..000000000 --- a/ui/src/ui/data-table.tsx +++ /dev/null @@ -1,317 +0,0 @@ -import { - Dispatch, - ReactNode, - SetStateAction, - useEffect, - useState, -} from "react"; -import { - Column, - ColumnDef, - flexRender, - getCoreRowModel, - getSortedRowModel, - Row, - RowSelectionState, - SortingState, - useReactTable, -} from "@tanstack/react-table"; -import { - Box, - BoxProps, - Center, - Checkbox, - Group, - HoverCard, - Loader, - Table, - TableProps, - Text, - UnstyledButton, -} from "@mantine/core"; -import { ArrowDown, ArrowUp, Info, Minus } from "lucide-react"; -import { hexColorByIntention } from "@/lib/color"; - -export interface DataTableProps extends BoxProps { - /** Unique key given to table so sorting can be remembered on local storage */ - tableKey: string; - columns: (ColumnDef | false | undefined)[]; - data: TData[]; - loading?: boolean; - onRowClick?: (row: TData) => void; - noResults?: ReactNode; - defaultSort?: SortingState; - sortDescFirst?: boolean; - selectOptions?: { - selectKey: (row: TData) => string; - onSelect?: (selected: string[]) => void; - state?: [RowSelectionState, Dispatch>]; - disableRow?: boolean | ((row: Row) => boolean); - }; - caption?: string; - tableProps?: TableProps; - noBox?: boolean; - noBorder?: boolean; -} - -export function DataTable({ - tableKey, - columns, - data, - loading, - onRowClick, - noResults = No results, - sortDescFirst = false, - defaultSort = [], - selectOptions, - caption, - tableProps, - noBox, - noBorder, - mah = "max(150px, calc(100vh - 320px))", - ...boxProps -}: DataTableProps) { - const [sorting, setSorting] = useState(defaultSort); - - // intentionally not initialized to clear selected values on table mount - // could add some prop for adding default selected state to preserve between mounts - const _internalState = useState({}); - const [rowSelection, setRowSelection] = selectOptions?.state - ? selectOptions.state - : _internalState; - - const table = useReactTable({ - data, - columns: columns.filter((c) => c) as any, - getCoreRowModel: getCoreRowModel(), - onSortingChange: setSorting, - getSortedRowModel: getSortedRowModel(), - state: { - sorting, - rowSelection, - }, - sortDescFirst, - onRowSelectionChange: setRowSelection, - getRowId: selectOptions?.selectKey, - enableRowSelection: selectOptions?.disableRow, - }); - - useEffect(() => { - const stored = localStorage.getItem("data-table-" + tableKey); - const sorting = stored ? (JSON.parse(stored) as SortingState) : null; - if (sorting) setSorting(sorting); - }, [tableKey]); - - useEffect(() => { - localStorage.setItem("data-table-" + tableKey, JSON.stringify(sorting)); - }, [tableKey, sorting]); - - useEffect(() => { - selectOptions?.onSelect?.(Object.keys(rowSelection)); - }, [rowSelection]); - - const rows = table.getPrePaginationRowModel().rows; - - const tableNode = ( - - {caption ? {caption} : null} - - - {table.getHeaderGroups().map((hg, i) => ( - - {i === 0 && selectOptions && ( - - selectOptions.disableRow !== true && - table.toggleAllRowsSelected() - } - style={{ - cursor: "pointer", - borderColor: "var(--mantine-color-accent-border-0)", - borderWidth: 0, - borderRightWidth: 1, - borderStyle: "solid", - }} - > - - - )} - {hg.headers.map((header, i) => { - // const canSort = header.column.getCanSort(); - // const sortState = header.column.getIsSorted(); - return ( - - {header.isPlaceholder ? null : ( - - {flexRender( - header.column.columnDef.header, - header.getContext(), - )} - - )} - - ); - })} - - ))} - - - - {loading ? ( - - - - - - - - ) : rows.length === 0 ? ( - - - - {noResults} - - - - ) : ( - rows.map((row) => ( - - {selectOptions && ( - row.toggleSelected()}> - - - )} - {row.getVisibleCells().map((cell) => ( - onRowClick(row.original) : undefined - } - style={{ flexWrap: "nowrap", textWrap: "nowrap" }} - > - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - )) - )} - -
- ); - - if (noBox) { - return tableNode; - } else { - return ( - - {tableNode} - - ); - } -} - -export const SortableHeader = ({ - column, - title, - description, - sortDescFirst, -}: { - column: Column; - title: string; - description?: ReactNode; - sortDescFirst?: boolean; -}) => { - return ( - - - - - {title} - - {description && ( - - - - - - {description} - - - )} - -
- -
- - - ); -}; - -function SortIcon({ - state, - sortDescFirst, -}: { - state: false | "asc" | "desc"; - sortDescFirst?: boolean; -}) { - if (state === "asc") - return sortDescFirst ? : ; - if (state === "desc") - return sortDescFirst ? : ; - return ; -} diff --git a/ui/src/ui/entity-header.tsx b/ui/src/ui/entity-header.tsx index 0dd73af0c..dbad012f7 100644 --- a/ui/src/ui/entity-header.tsx +++ b/ui/src/ui/entity-header.tsx @@ -1,6 +1,6 @@ -import { ColorIntention, hexColorByIntention } from "@/lib/color"; import { ICONS } from "@/lib/icons"; import { ActionIcon, Group, Stack, Text, TextInput } from "@mantine/core"; +import { ColorIntention, hexColorByIntention } from "mogh_ui"; import { FC, ReactNode, useEffect, useState } from "react"; export interface EntityHeaderProps { diff --git a/ui/src/ui/page.tsx b/ui/src/ui/page.tsx deleted file mode 100644 index b1a835369..000000000 --- a/ui/src/ui/page.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { - createPolymorphicComponent, - Group, - Paper, - Stack, - StackProps, - Text, -} from "@mantine/core"; -import { CircleQuestionMark } from "lucide-react"; -import { FC, forwardRef, ReactNode } from "react"; - -// https://mantine.dev/guides/polymorphic/#create-your-own-polymorphic-components - -export interface PageProps extends StackProps { - title?: string; - icon?: FC<{ size?: string | number }>; - description?: ReactNode; - rightTitle?: ReactNode; - aboveTitle?: ReactNode; - /** The right hand side of page opposite the title */ - oppositeTitle?: ReactNode; - /* Replace the default title / icon with a full custom ReactNode */ - customTitle?: ReactNode; - customDescription?: ReactNode; - actions?: ReactNode; - children?: ReactNode; -} - -const Page = createPolymorphicComponent<"div", PageProps>( - forwardRef( - ( - { - title, - icon, - description, - rightTitle, - aboveTitle, - customTitle, - customDescription, - oppositeTitle, - actions, - children, - ...stackProps - }, - ref, - ) => { - const Icon = icon ?? CircleQuestionMark; - const titleNode = ( - - - {customTitle ? ( - customTitle - ) : ( - <> - - {title} - - )} - {rightTitle} - - {customDescription ? ( - - {customDescription} - - ) : ( - description && ( - - {description} - - ) - )} - - ); - return ( - - {aboveTitle} - {oppositeTitle ? ( - - {titleNode} - {oppositeTitle} - - ) : ( - titleNode - )} - - {actions && {actions}} - - {children} - - ); - }, - ), -); - -export default Page; diff --git a/ui/src/ui/stat-bar.tsx b/ui/src/ui/stat-bar.tsx index 6dff72682..fa92a3136 100644 --- a/ui/src/ui/stat-bar.tsx +++ b/ui/src/ui/stat-bar.tsx @@ -1,4 +1,4 @@ -import { hexColorByIntention } from "@/lib/color"; +import { hexColorByIntention } from "mogh_ui"; import { Group, Progress, StackProps, Text } from "@mantine/core"; import { ReactNode } from "react"; import InfoCard from "./info-card"; diff --git a/ui/src/ui/stat-cell.tsx b/ui/src/ui/stat-cell.tsx index 348c1f898..650e4cd87 100644 --- a/ui/src/ui/stat-cell.tsx +++ b/ui/src/ui/stat-cell.tsx @@ -1,4 +1,4 @@ -import { ColorIntention, hexColorByIntention } from "@/lib/color"; +import { ColorIntention, hexColorByIntention } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import { ActionIcon, diff --git a/ui/src/ui/status-badge.tsx b/ui/src/ui/status-badge.tsx deleted file mode 100644 index dddc0f219..000000000 --- a/ui/src/ui/status-badge.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { forwardRef } from "react"; -import { Text, TextProps, createPolymorphicComponent } from "@mantine/core"; -import { - colorByIntention, - ColorIntention, - hexColorByIntention, -} from "@/lib/color"; -import { - fmtUpperCamelcase, - fmtSnakeCaseToUpperSpaceCase, -} from "@/lib/formatting"; - -// https://mantine.dev/guides/polymorphic/#create-your-own-polymorphic-components - -interface StatusBadgeProps extends TextProps { - text: string | undefined; - intent: ColorIntention; -} - -const StatusBadge = createPolymorphicComponent<"div", StatusBadgeProps>( - forwardRef( - ({ text: _text, intent, ...props }, ref) => { - if (!_text) { - return null; - } - - const text = fmtSnakeCaseToUpperSpaceCase( - fmtUpperCamelcase(_text), - ).toUpperCase(); - const color = colorByIntention(intent); - const _background = hexColorByIntention(intent); - const background = _background ? _background + "25" : undefined; - - return ( - - {text} - - ); - }, - ), -); - -export default StatusBadge; diff --git a/ui/src/ui/tabbed-page.tsx b/ui/src/ui/tabbed-page.tsx deleted file mode 100644 index bbb2920e7..000000000 --- a/ui/src/ui/tabbed-page.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { Center, Group, Tabs, Text } from "@mantine/core"; -import { useLocalStorage } from "@mantine/hooks"; -import { FC } from "react"; -import Page from "@/ui/page"; -import { ICONS } from "@/lib/icons"; - -export type TabbedPageItem = { - tab: Tab; - icon?: FC<{ size?: string | number }>; - content?: FC; -}; - -export type TabbedPageProps = { - /** Store current tab on localStorage */ - storageKey: string; - tabs: TabbedPageItem[]; -}; - -export function TabbedPage({ - storageKey, - tabs, -}: TabbedPageProps) { - const defaultTab = tabs[0]?.tab; - const [selectedTab, setSelectedTab] = useLocalStorage({ - key: storageKey, - defaultValue: defaultTab, - }); - const Content = - tabs.find((tab) => tab.tab === selectedTab)?.content ?? - (() => ( -
- -
- )); - return ( - setSelectedTab((tab as Tab) ?? defaultTab)} - > - - {tabs.map(({ tab, icon }) => { - const Icon = icon ?? ICONS.Unknown; - return ( - - - - {tab} - - - ); - })} - - } - > - - - - ); -} diff --git a/ui/src/ui/theme-toggle.tsx b/ui/src/ui/theme-toggle.tsx deleted file mode 100644 index d43543f72..000000000 --- a/ui/src/ui/theme-toggle.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { - ActionIcon, - MantineColorScheme, - Menu, - useComputedColorScheme, - useMantineColorScheme, -} from "@mantine/core"; -import { CheckCircle, Moon, Sun } from "lucide-react"; - -export default function ThemeToggle() { - const { colorScheme, setColorScheme } = useMantineColorScheme(); - return ( - - - - - - - - {["light", "dark", "auto"].map((theme) => ( - setColorScheme(theme as MantineColorScheme)} - style={{ textTransform: "capitalize" }} - rightSection={ - colorScheme === theme ? : undefined - } - > - {theme} - - ))} - - - ); -} - -function ThemeIcon() { - const currentTheme = useComputedColorScheme(); - const dark = currentTheme === "dark"; - return ( - <> - - - - ); -} From 94c04065853f342c11e16c01600a5fcd67ad3d2a Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Fri, 3 Apr 2026 12:30:23 -0700 Subject: [PATCH 10/27] move more to mogh_ui --- .../components/docker/containers-section.tsx | 2 +- ui/src/components/docker/labels-section.tsx | 2 +- .../components/permissions/base-section.tsx | 2 +- .../permissions/specific-section.tsx | 2 +- ui/src/components/swarm/services-section.tsx | 2 +- ui/src/components/swarm/tasks-section.tsx | 2 +- ui/src/pages/alert.tsx | 2 +- ui/src/pages/containers.tsx | 2 +- ui/src/pages/dashboard/recents.tsx | 2 +- ui/src/pages/dashboard/tables.tsx | 2 +- ui/src/pages/docker/image.tsx | 2 +- ui/src/pages/profile/index.tsx | 2 +- ui/src/pages/resources.tsx | 2 +- ui/src/pages/schedules.tsx | 2 +- ui/src/pages/settings/providers/index.tsx | 2 +- ui/src/pages/settings/tags/index.tsx | 2 +- ui/src/pages/settings/users/groups.tsx | 2 +- ui/src/pages/settings/variables/index.tsx | 2 +- ui/src/pages/swarm/config/index.tsx | 2 +- ui/src/pages/swarm/node/index.tsx | 2 +- ui/src/pages/swarm/secret/index.tsx | 2 +- ui/src/pages/swarm/service/index.tsx | 2 +- ui/src/pages/swarm/stack/index.tsx | 2 +- ui/src/pages/swarm/task/index.tsx | 2 +- ui/src/pages/terminals/index.tsx | 2 +- ui/src/pages/update.tsx | 2 +- ui/src/pages/user-group/index.tsx | 2 +- ui/src/pages/user/index.tsx | 2 +- ui/src/pages/user/member-groups.tsx | 4 +- ui/src/resources/alerter/config/resources.tsx | 2 +- ui/src/resources/server/docker/images.tsx | 2 +- ui/src/resources/server/docker/networks.tsx | 2 +- ui/src/resources/server/docker/volumes.tsx | 2 +- ui/src/resources/server/index.tsx | 2 +- ui/src/resources/server/stats/containers.tsx | 2 +- ui/src/resources/server/stats/current/cpu.tsx | 2 +- .../resources/server/stats/current/index.tsx | 2 +- .../server/stats/current/load-average.tsx | 2 +- .../server/stats/current/network-usage.tsx | 2 +- ui/src/resources/server/stats/current/ram.tsx | 2 +- ui/src/resources/server/stats/processes.tsx | 2 +- ui/src/resources/swarm/docker/configs.tsx | 2 +- ui/src/resources/swarm/docker/nodes/index.tsx | 2 +- ui/src/resources/swarm/docker/secrets.tsx | 2 +- ui/src/resources/swarm/docker/stacks.tsx | 2 +- ui/src/resources/swarm/index.tsx | 2 +- ui/src/ui/confirm-icon.tsx | 69 ------------------- ui/src/ui/fancy-card/index.module.css | 13 ---- ui/src/ui/fancy-card/index.tsx | 23 ------- ui/src/ui/hover-error.tsx | 48 ------------- ui/src/ui/info-card.tsx | 37 ---------- ui/src/ui/page-guard.tsx | 33 --------- ui/src/ui/search-input.tsx | 26 ------- ui/src/ui/stat-bar.tsx | 58 ---------------- 54 files changed, 46 insertions(+), 355 deletions(-) delete mode 100644 ui/src/ui/confirm-icon.tsx delete mode 100644 ui/src/ui/fancy-card/index.module.css delete mode 100644 ui/src/ui/fancy-card/index.tsx delete mode 100644 ui/src/ui/hover-error.tsx delete mode 100644 ui/src/ui/info-card.tsx delete mode 100644 ui/src/ui/page-guard.tsx delete mode 100644 ui/src/ui/search-input.tsx delete mode 100644 ui/src/ui/stat-bar.tsx diff --git a/ui/src/components/docker/containers-section.tsx b/ui/src/components/docker/containers-section.tsx index 07badbb40..90a2fc02c 100644 --- a/ui/src/components/docker/containers-section.tsx +++ b/ui/src/components/docker/containers-section.tsx @@ -11,7 +11,7 @@ import DockerResourceLink from "./link"; import { StatusBadge } from "mogh_ui"; import { containerStateIntention } from "@/lib/color"; import ContainerPorts from "@/components/docker/container-ports"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; import { DividedChildren } from "mogh_ui"; export interface ContainersSectionProps extends SectionProps { diff --git a/ui/src/components/docker/labels-section.tsx b/ui/src/components/docker/labels-section.tsx index 59d335778..6a0b86db9 100644 --- a/ui/src/components/docker/labels-section.tsx +++ b/ui/src/components/docker/labels-section.tsx @@ -4,7 +4,7 @@ import { Section, SectionProps } from "mogh_ui"; import { Box, GroupProps } from "@mantine/core"; import { useMemo, useState } from "react"; import DockerOptions from "./options"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; export interface DockerLabelsSectionProps extends Omit< SectionProps, diff --git a/ui/src/components/permissions/base-section.tsx b/ui/src/components/permissions/base-section.tsx index 861ef48cd..a09989c72 100644 --- a/ui/src/components/permissions/base-section.tsx +++ b/ui/src/components/permissions/base-section.tsx @@ -13,7 +13,7 @@ import { Types } from "komodo_client"; import { useState } from "react"; import PermissionLevelSelector from "./level-selector"; import SpecificPermissionSelector from "./specific-selector"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; import LabelledSwitch from "@/ui/labelled-switch"; export interface BasePermissionsSectionProps extends SectionProps { diff --git a/ui/src/components/permissions/specific-section.tsx b/ui/src/components/permissions/specific-section.tsx index eec3e00ac..bb72b04f6 100644 --- a/ui/src/components/permissions/specific-section.tsx +++ b/ui/src/components/permissions/specific-section.tsx @@ -3,7 +3,7 @@ import { levelSortingFn } from "@/lib/utils"; import { ResourceComponents, UsableResource } from "@/resources"; import ResourceLink from "@/resources/link"; import { DataTable, SortableHeader } from "mogh_ui"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; import { Section, SectionProps } from "mogh_ui"; import { Group, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; diff --git a/ui/src/components/swarm/services-section.tsx b/ui/src/components/swarm/services-section.tsx index ba23e90f3..60753cdb3 100644 --- a/ui/src/components/swarm/services-section.tsx +++ b/ui/src/components/swarm/services-section.tsx @@ -6,7 +6,7 @@ import ShowHideButton from "@/ui/show-hide-button"; import { Group } from "@mantine/core"; import { Types } from "komodo_client"; import SwarmResourceLink from "./link"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; export interface SwarmServicesSectionProps extends SectionProps { id: string; diff --git a/ui/src/components/swarm/tasks-section.tsx b/ui/src/components/swarm/tasks-section.tsx index ac3ac9529..20f9eeab7 100644 --- a/ui/src/components/swarm/tasks-section.tsx +++ b/ui/src/components/swarm/tasks-section.tsx @@ -9,7 +9,7 @@ import SwarmResourceLink from "./link"; import { useRead } from "@/lib/hooks"; import { swarmTaskStateIntention } from "@/lib/color"; import { StatusBadge } from "mogh_ui"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; export interface SwarmTasksSectionProps extends SectionProps { id: string; diff --git a/ui/src/pages/alert.tsx b/ui/src/pages/alert.tsx index cfde621fa..39ea34f27 100644 --- a/ui/src/pages/alert.tsx +++ b/ui/src/pages/alert.tsx @@ -1,6 +1,6 @@ import AlertDetails from "@/components/alerts/details"; import { useRead, useSetTitle } from "@/lib/hooks"; -import PageGuard from "@/ui/page-guard"; +import { PageGuard } from "mogh_ui"; import { useParams } from "react-router-dom"; export default function Alert() { diff --git a/ui/src/pages/containers.tsx b/ui/src/pages/containers.tsx index a4c5f0445..8fd5a1110 100644 --- a/ui/src/pages/containers.tsx +++ b/ui/src/pages/containers.tsx @@ -11,7 +11,7 @@ import { Group, MultiSelect, Stack } from "@mantine/core"; import { useCallback, useMemo, useState } from "react"; import { DividedChildren } from "mogh_ui"; import ResourceLink from "@/resources/link"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; export default function Containers() { const [search, setSearch] = useState(""); diff --git a/ui/src/pages/dashboard/recents.tsx b/ui/src/pages/dashboard/recents.tsx index 5d7fd886e..6bd326a2c 100644 --- a/ui/src/pages/dashboard/recents.tsx +++ b/ui/src/pages/dashboard/recents.tsx @@ -16,7 +16,6 @@ import { } from "@/resources"; import { Link, useNavigate } from "react-router-dom"; import DashboardSummary from "@/components/dashboard-summary"; -import FancyCard from "@/ui/fancy-card"; import { TemplateMarker } from "@/components/template-marker"; import Tags from "@/components/tags"; import ResourceName from "@/resources/name"; @@ -24,6 +23,7 @@ import DeploymentUpdateAvailable from "@/resources/deployment/update-available"; import StackUpdateAvailable from "@/resources/stack/update-available"; import DashboardNoResources from "./no-resources"; import ServerStatsCard from "@/resources/server/stats-card"; +import { FancyCard } from "mogh_ui"; export default function DashboardRecents() { return ( diff --git a/ui/src/pages/dashboard/tables.tsx b/ui/src/pages/dashboard/tables.tsx index 10a80fd7e..ec0c71f16 100644 --- a/ui/src/pages/dashboard/tables.tsx +++ b/ui/src/pages/dashboard/tables.tsx @@ -14,7 +14,7 @@ import { useState } from "react"; import { Link } from "react-router-dom"; import DashboardNoResources from "./no-resources"; import ShowHideButton from "@/ui/show-hide-button"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; export default function DashboardTables() { const [search, setSearch] = useState(""); diff --git a/ui/src/pages/docker/image.tsx b/ui/src/pages/docker/image.tsx index 8e6e000e1..2079017c1 100644 --- a/ui/src/pages/docker/image.tsx +++ b/ui/src/pages/docker/image.tsx @@ -7,7 +7,7 @@ import ResourceSubPage from "@/resources/sub-page"; import { ICONS } from "@/lib/icons"; import { ConfirmButton, fmtDateWithMinutes, fmtSizeBytes } from "mogh_ui"; import { DataTable } from "mogh_ui"; -import PageGuard from "@/ui/page-guard"; +import { PageGuard } from "mogh_ui"; import { Section } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; import { Box, Center, Group, Text } from "@mantine/core"; diff --git a/ui/src/pages/profile/index.tsx b/ui/src/pages/profile/index.tsx index 806a57971..68198bad6 100644 --- a/ui/src/pages/profile/index.tsx +++ b/ui/src/pages/profile/index.tsx @@ -14,7 +14,7 @@ import { LinkedLogins } from "./linked-logins"; import { EnrollPasskey } from "./passkey"; import { EnrollTotp } from "./totp"; import { EnableSwitch } from "mogh_ui"; -import PageGuard from "@/ui/page-guard"; +import { PageGuard } from "mogh_ui"; import EntityPage from "@/ui/entity-page"; import ApiKeysSection from "@/components/api-keys/section"; import UserHeader from "@/components/user/header"; diff --git a/ui/src/pages/resources.tsx b/ui/src/pages/resources.tsx index 8fba0dae4..8d21fe64c 100644 --- a/ui/src/pages/resources.tsx +++ b/ui/src/pages/resources.tsx @@ -18,7 +18,7 @@ import TagsFilter from "@/components/tags/filter"; import ResourceNotFound from "@/resources/not-found"; import ExportToml from "@/components/export-toml"; import ServerShowStats from "@/resources/server/show-stats"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; import LabelledSwitch from "@/ui/labelled-switch"; export default function Resources({ _type }: { _type?: UsableResource }) { diff --git a/ui/src/pages/schedules.tsx b/ui/src/pages/schedules.tsx index d671c8976..a46b61135 100644 --- a/ui/src/pages/schedules.tsx +++ b/ui/src/pages/schedules.tsx @@ -13,7 +13,7 @@ import ResourceLink from "@/resources/link"; import { ICONS } from "@/lib/icons"; import { DataTable, SortableHeader } from "mogh_ui"; import { Page } from "mogh_ui"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; import { Group, Stack, Switch } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useState } from "react"; diff --git a/ui/src/pages/settings/providers/index.tsx b/ui/src/pages/settings/providers/index.tsx index 44bf504f9..e70189e3f 100644 --- a/ui/src/pages/settings/providers/index.tsx +++ b/ui/src/pages/settings/providers/index.tsx @@ -19,7 +19,7 @@ import { Types } from "komodo_client"; import SharedTextUpdate, { useSharedTextUpdateData, } from "@/ui/shared-text-update"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; export default function SettingsProviders() { return ( diff --git a/ui/src/pages/settings/tags/index.tsx b/ui/src/pages/settings/tags/index.tsx index b542507ae..65e30c0e6 100644 --- a/ui/src/pages/settings/tags/index.tsx +++ b/ui/src/pages/settings/tags/index.tsx @@ -7,7 +7,7 @@ import { Group, Stack } from "@mantine/core"; import { useState } from "react"; import TagColorSelector from "./color-selector"; import DeleteTag from "./delete"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; export default function SettingsTags() { useSetTitle("Tags"); diff --git a/ui/src/pages/settings/users/groups.tsx b/ui/src/pages/settings/users/groups.tsx index 47cb9b935..178b6fe33 100644 --- a/ui/src/pages/settings/users/groups.tsx +++ b/ui/src/pages/settings/users/groups.tsx @@ -8,7 +8,7 @@ import { Box, Group } from "@mantine/core"; import { useNavigate } from "react-router-dom"; import DeleteUserGroup from "../../../components/user/delete-group"; import NewUserGroup from "./new-group"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; export default function SettingsUserGroups({ search, diff --git a/ui/src/pages/settings/variables/index.tsx b/ui/src/pages/settings/variables/index.tsx index 712d6dc14..886a4c6fb 100644 --- a/ui/src/pages/settings/variables/index.tsx +++ b/ui/src/pages/settings/variables/index.tsx @@ -24,7 +24,7 @@ import SharedTextUpdate, { useSharedTextUpdateData, } from "@/ui/shared-text-update"; import { CopyText } from "mogh_ui"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; export default function SettingsVariables() { const user = useUser().data; diff --git a/ui/src/pages/swarm/config/index.tsx b/ui/src/pages/swarm/config/index.tsx index e83236150..eff1c1c59 100644 --- a/ui/src/pages/swarm/config/index.tsx +++ b/ui/src/pages/swarm/config/index.tsx @@ -6,7 +6,7 @@ import { useParams } from "react-router-dom"; import RemoveSwarmResource from "@/components/swarm/remove"; import ResourceSubPage from "@/resources/sub-page"; import SwarmConfigTabs from "./tabs"; -import PageGuard from "@/ui/page-guard"; +import { PageGuard } from "mogh_ui"; export default function SwarmConfig() { const { id: swarmId, config: __config } = useParams() as { diff --git a/ui/src/pages/swarm/node/index.tsx b/ui/src/pages/swarm/node/index.tsx index ee0787ad0..cc6d03ab1 100644 --- a/ui/src/pages/swarm/node/index.tsx +++ b/ui/src/pages/swarm/node/index.tsx @@ -6,7 +6,7 @@ import { ICONS } from "@/lib/icons"; import RemoveSwarmResource from "@/components/swarm/remove"; import ResourceSubPage from "@/resources/sub-page"; import SwarmNodeTabs from "./tabs"; -import PageGuard from "@/ui/page-guard"; +import { PageGuard } from "mogh_ui"; import UpdateSwarmNodes from "@/resources/swarm/docker/nodes/update"; export default function SwarmNode() { diff --git a/ui/src/pages/swarm/secret/index.tsx b/ui/src/pages/swarm/secret/index.tsx index 694a28b2f..633c78570 100644 --- a/ui/src/pages/swarm/secret/index.tsx +++ b/ui/src/pages/swarm/secret/index.tsx @@ -3,7 +3,7 @@ import { useRead, useSetTitle } from "@/lib/hooks"; import ResourceSubPage from "@/resources/sub-page"; import { useSwarm } from "@/resources/swarm"; import { ICONS } from "@/lib/icons"; -import PageGuard from "@/ui/page-guard"; +import { PageGuard } from "mogh_ui"; import { Badge } from "@mantine/core"; import { useParams } from "react-router-dom"; import SwarmSecretTabs from "./tabs"; diff --git a/ui/src/pages/swarm/service/index.tsx b/ui/src/pages/swarm/service/index.tsx index 95a4ddedf..369d549b4 100644 --- a/ui/src/pages/swarm/service/index.tsx +++ b/ui/src/pages/swarm/service/index.tsx @@ -5,7 +5,7 @@ import { useRead, useSetTitle } from "@/lib/hooks"; import ResourceSubPage from "@/resources/sub-page"; import { useSwarm } from "@/resources/swarm"; import { ICONS } from "@/lib/icons"; -import PageGuard from "@/ui/page-guard"; +import { PageGuard } from "mogh_ui"; import { useParams } from "react-router-dom"; import SwarmServiceTabs from "./tabs"; diff --git a/ui/src/pages/swarm/stack/index.tsx b/ui/src/pages/swarm/stack/index.tsx index 99a8a254c..4afa17f6e 100644 --- a/ui/src/pages/swarm/stack/index.tsx +++ b/ui/src/pages/swarm/stack/index.tsx @@ -4,7 +4,7 @@ import { useRead, useSetTitle } from "@/lib/hooks"; import ResourceSubPage from "@/resources/sub-page"; import { useSwarm } from "@/resources/swarm"; import { ICONS } from "@/lib/icons"; -import PageGuard from "@/ui/page-guard"; +import { PageGuard } from "mogh_ui"; import { useParams } from "react-router-dom"; import SwarmStackTabs from "./tabs"; diff --git a/ui/src/pages/swarm/task/index.tsx b/ui/src/pages/swarm/task/index.tsx index d8080b508..5edf4755e 100644 --- a/ui/src/pages/swarm/task/index.tsx +++ b/ui/src/pages/swarm/task/index.tsx @@ -4,7 +4,7 @@ import { useRead, useSetTitle } from "@/lib/hooks"; import ResourceSubPage from "@/resources/sub-page"; import { useSwarm } from "@/resources/swarm"; import { ICONS } from "@/lib/icons"; -import PageGuard from "@/ui/page-guard"; +import { PageGuard } from "mogh_ui"; import { useParams } from "react-router-dom"; import SwarmTaskTabs from "./tabs"; diff --git a/ui/src/pages/terminals/index.tsx b/ui/src/pages/terminals/index.tsx index 12dced84e..7017d2e4b 100644 --- a/ui/src/pages/terminals/index.tsx +++ b/ui/src/pages/terminals/index.tsx @@ -10,7 +10,7 @@ import { Link } from "react-router-dom"; import DeleteTerminal from "./delete"; import BatchDeleteAllTerminals from "./batch-delete"; import NewTerminal from "./new"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; export default function Terminals() { useSetTitle("Terminals"); diff --git a/ui/src/pages/update.tsx b/ui/src/pages/update.tsx index d47ab4d51..672fedf9f 100644 --- a/ui/src/pages/update.tsx +++ b/ui/src/pages/update.tsx @@ -1,6 +1,6 @@ import UpdateDetails from "@/components/updates/details"; import { useRead, useSetTitle } from "@/lib/hooks"; -import PageGuard from "@/ui/page-guard"; +import { PageGuard } from "mogh_ui"; import { useParams } from "react-router-dom"; export default function Update() { diff --git a/ui/src/pages/user-group/index.tsx b/ui/src/pages/user-group/index.tsx index 85d8b64e3..5ee1d8294 100644 --- a/ui/src/pages/user-group/index.tsx +++ b/ui/src/pages/user-group/index.tsx @@ -4,7 +4,7 @@ import { ICONS } from "@/lib/icons"; import { DividedChildren } from "mogh_ui"; import EntityHeader from "@/ui/entity-header"; import EntityPage from "@/ui/entity-page"; -import PageGuard from "@/ui/page-guard"; +import { PageGuard } from "mogh_ui"; import { Section } from "mogh_ui"; import { Group, Stack, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; diff --git a/ui/src/pages/user/index.tsx b/ui/src/pages/user/index.tsx index fd5260b1a..edf799cf3 100644 --- a/ui/src/pages/user/index.tsx +++ b/ui/src/pages/user/index.tsx @@ -2,7 +2,7 @@ import { useInvalidate, useRead, useUser, useWrite } from "@/lib/hooks"; import { ConfirmButton } from "mogh_ui"; import EntityPage from "@/ui/entity-page"; import LabelledSwitch from "@/ui/labelled-switch"; -import PageGuard from "@/ui/page-guard"; +import { PageGuard } from "mogh_ui"; import { Section } from "mogh_ui"; import { Group, Stack } from "@mantine/core"; import { notifications } from "@mantine/notifications"; diff --git a/ui/src/pages/user/member-groups.tsx b/ui/src/pages/user/member-groups.tsx index e7b1dd08f..3c7e4d1a4 100644 --- a/ui/src/pages/user/member-groups.tsx +++ b/ui/src/pages/user/member-groups.tsx @@ -1,11 +1,10 @@ import { useInvalidate, useRead, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import { Section } from "mogh_ui"; +import { Section, ConfirmIcon } from "mogh_ui"; import { Box, Group, Text } from "@mantine/core"; import { useNavigate } from "react-router-dom"; import UserAddUserGroup from "./add-group"; import { notifications } from "@mantine/notifications"; -import ConfirmIcon from "@/ui/confirm-icon"; export default function UserMemberGroups({ userId }: { userId: string }) { const allGroups = useRead("ListUserGroups", {}).data; @@ -29,7 +28,6 @@ export default function UserMemberGroups({ userId }: { userId: string }) { title="Groups" icon={} titleFz="h3" - titleRight={ diff --git a/ui/src/resources/alerter/config/resources.tsx b/ui/src/resources/alerter/config/resources.tsx index 26a9a4757..5cc12e1bb 100644 --- a/ui/src/resources/alerter/config/resources.tsx +++ b/ui/src/resources/alerter/config/resources.tsx @@ -5,7 +5,7 @@ import ResourceLink from "@/resources/link"; import { ICONS } from "@/lib/icons"; import { ConfigItem } from "@/ui/config/item"; import { DataTable, SortableHeader } from "mogh_ui"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; import { Button, Group, Modal, Stack, Switch, Text } from "@mantine/core"; import { useDisclosure } from "@mantine/hooks"; import { Types } from "komodo_client"; diff --git a/ui/src/resources/server/docker/images.tsx b/ui/src/resources/server/docker/images.tsx index 96f91f052..bc1e2546b 100644 --- a/ui/src/resources/server/docker/images.tsx +++ b/ui/src/resources/server/docker/images.tsx @@ -7,7 +7,7 @@ import { Badge, Group } from "@mantine/core"; import { Prune } from "../executions"; import { DataTable, SortableHeader } from "mogh_ui"; import DockerResourceLink from "@/components/docker/link"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; export default function ServerImages({ id, diff --git a/ui/src/resources/server/docker/networks.tsx b/ui/src/resources/server/docker/networks.tsx index ecafb7df7..11b1d9eff 100644 --- a/ui/src/resources/server/docker/networks.tsx +++ b/ui/src/resources/server/docker/networks.tsx @@ -7,7 +7,7 @@ import { Prune } from "../executions"; import { Badge, Group } from "@mantine/core"; import { DataTable, SortableHeader } from "mogh_ui"; import DockerResourceLink from "@/components/docker/link"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; export default function ServerNetworks({ id, diff --git a/ui/src/resources/server/docker/volumes.tsx b/ui/src/resources/server/docker/volumes.tsx index af2303392..1bb90b3cd 100644 --- a/ui/src/resources/server/docker/volumes.tsx +++ b/ui/src/resources/server/docker/volumes.tsx @@ -7,7 +7,7 @@ import { Prune } from "../executions"; import { Badge, Group } from "@mantine/core"; import { DataTable, SortableHeader } from "mogh_ui"; import DockerResourceLink from "@/components/docker/link"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; export default function ServerVolumes({ id, diff --git a/ui/src/resources/server/index.tsx b/ui/src/resources/server/index.tsx index b2e793849..45743b1d3 100644 --- a/ui/src/resources/server/index.tsx +++ b/ui/src/resources/server/index.tsx @@ -22,7 +22,7 @@ import { ServerLoadAverage } from "./stats/current/load-average"; import { ServerRamUsage } from "./stats/current/ram"; import ServerDiskUsage from "./diskUsage"; import ServerCpuUsage from "./stats/current/cpu"; -import HoverError from "@/ui/hover-error"; +import { HoverError } from "mogh_ui"; export function useServer(id: string | undefined, useName?: boolean) { return useRead("ListServers", {}).data?.find((r) => diff --git a/ui/src/resources/server/stats/containers.tsx b/ui/src/resources/server/stats/containers.tsx index 7ea7c9f10..5512e7464 100644 --- a/ui/src/resources/server/stats/containers.tsx +++ b/ui/src/resources/server/stats/containers.tsx @@ -8,7 +8,7 @@ import { useState } from "react"; import { filterBySplit } from "@/lib/utils"; import DockerResourceLink from "@/components/docker/link"; import { useIsServerAvailable } from "../hooks"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; import { ICONS } from "@/lib/icons"; export default function ServerContainerStats({ id }: { id: string }) { diff --git a/ui/src/resources/server/stats/current/cpu.tsx b/ui/src/resources/server/stats/current/cpu.tsx index 02c73e341..aa6dffcbb 100644 --- a/ui/src/resources/server/stats/current/cpu.tsx +++ b/ui/src/resources/server/stats/current/cpu.tsx @@ -1,7 +1,7 @@ import { useServerStats } from "@/resources/server/hooks"; import { useFullServer } from "@/resources/server"; import { ICONS } from "@/lib/icons"; -import StatBar from "@/ui/stat-bar"; +import { StatBar } from "mogh_ui"; export default function ServerCpuUsage({ id }: { id: string }) { const server = useFullServer(id); diff --git a/ui/src/resources/server/stats/current/index.tsx b/ui/src/resources/server/stats/current/index.tsx index d991b8379..dfe4d1a50 100644 --- a/ui/src/resources/server/stats/current/index.tsx +++ b/ui/src/resources/server/stats/current/index.tsx @@ -1,6 +1,6 @@ import { ICONS } from "@/lib/icons"; import { Section } from "mogh_ui"; -import StatBar from "@/ui/stat-bar"; +import { StatBar } from "mogh_ui"; import { Group, Stack } from "@mantine/core"; import { Types } from "komodo_client"; import { useFullServer } from "@/resources/server"; diff --git a/ui/src/resources/server/stats/current/load-average.tsx b/ui/src/resources/server/stats/current/load-average.tsx index 05d98bcb6..d1b50f1d2 100644 --- a/ui/src/resources/server/stats/current/load-average.tsx +++ b/ui/src/resources/server/stats/current/load-average.tsx @@ -1,7 +1,7 @@ import { Types } from "komodo_client"; import { useRead } from "@/lib/hooks"; import { hexColorByIntention } from "mogh_ui"; -import InfoCard from "@/ui/info-card"; +import { InfoCard } from "mogh_ui"; import { Group, Progress, SimpleGrid, Stack, Text } from "@mantine/core"; import { useIsServerAvailable } from "@/resources/server/hooks"; diff --git a/ui/src/resources/server/stats/current/network-usage.tsx b/ui/src/resources/server/stats/current/network-usage.tsx index 2f0b8ba46..cfb6de532 100644 --- a/ui/src/resources/server/stats/current/network-usage.tsx +++ b/ui/src/resources/server/stats/current/network-usage.tsx @@ -1,4 +1,4 @@ -import InfoCard from "@/ui/info-card"; +import { InfoCard } from "mogh_ui"; import { Group, Stack, Text } from "@mantine/core"; import { Types } from "komodo_client"; import { fmtRateBytes } from "mogh_ui"; diff --git a/ui/src/resources/server/stats/current/ram.tsx b/ui/src/resources/server/stats/current/ram.tsx index ad167da01..b44961755 100644 --- a/ui/src/resources/server/stats/current/ram.tsx +++ b/ui/src/resources/server/stats/current/ram.tsx @@ -1,5 +1,5 @@ import { ICONS } from "@/lib/icons"; -import StatBar from "@/ui/stat-bar"; +import { StatBar } from "mogh_ui"; import { Types } from "komodo_client"; import { useFullServer } from "@/resources/server"; diff --git a/ui/src/resources/server/stats/processes.tsx b/ui/src/resources/server/stats/processes.tsx index f8c0f1c13..82f7aa215 100644 --- a/ui/src/resources/server/stats/processes.tsx +++ b/ui/src/resources/server/stats/processes.tsx @@ -2,7 +2,7 @@ import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; import { DataTable, SortableHeader } from "mogh_ui"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; import { Section } from "mogh_ui"; import ShowHideButton from "@/ui/show-hide-button"; import TableSkeleton from "@/ui/table-skeleton"; diff --git a/ui/src/resources/swarm/docker/configs.tsx b/ui/src/resources/swarm/docker/configs.tsx index e2b7a1002..0a1bbf9c9 100644 --- a/ui/src/resources/swarm/docker/configs.tsx +++ b/ui/src/resources/swarm/docker/configs.tsx @@ -6,7 +6,7 @@ import { Section } from "mogh_ui"; import { Badge, Group } from "@mantine/core"; import { DataTable, SortableHeader } from "mogh_ui"; import SwarmResourceLink from "@/components/swarm/link"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; import NewSwarmConfig from "@/resources/swarm/new/config"; export default function SwarmConfigs({ diff --git a/ui/src/resources/swarm/docker/nodes/index.tsx b/ui/src/resources/swarm/docker/nodes/index.tsx index c6d373f4d..89e1067a2 100644 --- a/ui/src/resources/swarm/docker/nodes/index.tsx +++ b/ui/src/resources/swarm/docker/nodes/index.tsx @@ -11,7 +11,7 @@ import { swarmNodeRoleIntention, swarmNodeStateIntention, } from "@/lib/color"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; import { RowSelectionState } from "@tanstack/react-table"; import UpdateSwarmNode from "./update"; import { HoverCard } from "@mantine/core"; diff --git a/ui/src/resources/swarm/docker/secrets.tsx b/ui/src/resources/swarm/docker/secrets.tsx index dfc144164..ee78df8e4 100644 --- a/ui/src/resources/swarm/docker/secrets.tsx +++ b/ui/src/resources/swarm/docker/secrets.tsx @@ -6,7 +6,7 @@ import { Section } from "mogh_ui"; import { Badge, Group } from "@mantine/core"; import { DataTable, SortableHeader } from "mogh_ui"; import SwarmResourceLink from "@/components/swarm/link"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; import NewSwarmSecret from "@/resources/swarm/new/secret"; export default function SwarmSecrets({ diff --git a/ui/src/resources/swarm/docker/stacks.tsx b/ui/src/resources/swarm/docker/stacks.tsx index d9692d1fa..1a5806e9f 100644 --- a/ui/src/resources/swarm/docker/stacks.tsx +++ b/ui/src/resources/swarm/docker/stacks.tsx @@ -7,7 +7,7 @@ import { DataTable, SortableHeader } from "mogh_ui"; import SwarmResourceLink from "@/components/swarm/link"; import { StatusBadge } from "mogh_ui"; import { swarmStateIntention } from "@/lib/color"; -import SearchInput from "@/ui/search-input"; +import { SearchInput } from "mogh_ui"; export default function SwarmStacks({ id, diff --git a/ui/src/resources/swarm/index.tsx b/ui/src/resources/swarm/index.tsx index 47f574928..4d98a3364 100644 --- a/ui/src/resources/swarm/index.tsx +++ b/ui/src/resources/swarm/index.tsx @@ -17,7 +17,7 @@ import JoinSwarmCommands from "./join-commands"; import ResourceHeader from "../header"; import BatchExecutions from "@/components/batch-executions"; import SwarmHeaderInfo from "./header-info"; -import HoverError from "@/ui/hover-error"; +import { HoverError } from "mogh_ui"; import { hexColorByIntention } from "mogh_ui"; export function useSwarm(id: string | undefined, useName?: boolean) { diff --git a/ui/src/ui/confirm-icon.tsx b/ui/src/ui/confirm-icon.tsx deleted file mode 100644 index 67b2fbcf4..000000000 --- a/ui/src/ui/confirm-icon.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { ICONS } from "@/lib/icons"; -import { - ActionIcon, - ActionIconProps, - createPolymorphicComponent, - Loader, -} from "@mantine/core"; -import { Check } from "lucide-react"; -import { - FocusEventHandler, - forwardRef, - MouseEventHandler, - useEffect, - useState, -} from "react"; - -// https://mantine.dev/guides/polymorphic/#create-your-own-polymorphic-components - -export interface ConfirmIconProps extends ActionIconProps { - onClick?: MouseEventHandler; - onBlur?: FocusEventHandler; -} - -const ConfirmIcon = createPolymorphicComponent<"button", ConfirmIconProps>( - forwardRef( - ({ children, onClick, onBlur, miw, loading, disabled, ...props }, ref) => { - const [clickedOnce, setClickedOnce] = useState(false); - useEffect(() => { - if (clickedOnce) { - const timeout = setTimeout(() => { - setClickedOnce(false); - }, 4_000); - return () => clearTimeout(timeout); - } - }, [clickedOnce]); - return ( - { - e.stopPropagation(); - if (clickedOnce) { - onClick?.(e); - setClickedOnce(false); - } else { - setClickedOnce(true); - } - }} - onBlur={(e) => { - setClickedOnce(false); - onBlur?.(e); - }} - onPointerDown={(e) => e.stopPropagation()} - disabled={disabled || loading} - {...props} - ref={ref} - > - {clickedOnce ? ( - - ) : loading ? ( - - ) : ( - (children ?? ) - )} - - ); - }, - ), -); - -export default ConfirmIcon; diff --git a/ui/src/ui/fancy-card/index.module.css b/ui/src/ui/fancy-card/index.module.css deleted file mode 100644 index e208a4e97..000000000 --- a/ui/src/ui/fancy-card/index.module.css +++ /dev/null @@ -1,13 +0,0 @@ -.fancy-card { - cursor: pointer; - border: 1px solid color-mix(in srgb, var(--mantine-color-accent-border-1) 40%, transparent); - box-shadow: var(--mantine-shadow-xs); - transition: all 150ms ease; -} - -.fancy-card:hover { - border-color: color-mix(in srgb, var(--mantine-color-accent-border-4) 40%, transparent); - background-color: var(--mantine-color-accent-0); - transform: translateY(-4%); - box-shadow: var(--mantine-shadow-md); -} \ No newline at end of file diff --git a/ui/src/ui/fancy-card/index.tsx b/ui/src/ui/fancy-card/index.tsx deleted file mode 100644 index 8c1e4d7fc..000000000 --- a/ui/src/ui/fancy-card/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { forwardRef } from "react"; -import { Box, BoxProps, createPolymorphicComponent } from "@mantine/core"; -import classes from "./index.module.css"; - -// https://mantine.dev/guides/polymorphic/#create-your-own-polymorphic-components - -interface FancyCardProps extends BoxProps {} - -const FancyCard = createPolymorphicComponent<"div", FancyCardProps>( - forwardRef(({ className, ...props }, ref) => ( - - )), -); - -export default FancyCard; diff --git a/ui/src/ui/hover-error.tsx b/ui/src/ui/hover-error.tsx deleted file mode 100644 index 81d3b15b6..000000000 --- a/ui/src/ui/hover-error.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { ICONS } from "@/lib/icons"; -import { Button, Code, Group, HoverCard, Stack, Text } from "@mantine/core"; - -export interface HoverErrorProps { - error: string; - trace: string[]; -} - -export default function HoverError({ error, trace }: HoverErrorProps) { - return ( - - - - - - - - - ERROR: - - {error} - - {trace.length > 0 && ( - - - TRACE: - - {trace.map((error, i) => ( - - - {i + 1}: - - {error} - - ))} - - )} - - - - ); -} diff --git a/ui/src/ui/info-card.tsx b/ui/src/ui/info-card.tsx deleted file mode 100644 index 554514ffc..000000000 --- a/ui/src/ui/info-card.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { - createPolymorphicComponent, - Group, - Stack, - StackProps, - Text, - TextProps, -} from "@mantine/core"; -import { forwardRef, ReactNode } from "react"; - -// https://mantine.dev/guides/polymorphic/#create-your-own-polymorphic-components - -export interface InfoCardProps extends StackProps { - title: string; - titleProps?: TextProps; - info?: ReactNode; -} - -const InfoCard = createPolymorphicComponent<"div", InfoCardProps>( - forwardRef( - ({ title, info, titleProps, children, ...props }, ref) => { - return ( - - - - {title} - - {info} - - {children} - - ); - }, - ), -); - -export default InfoCard; diff --git a/ui/src/ui/page-guard.tsx b/ui/src/ui/page-guard.tsx deleted file mode 100644 index 3e464778d..000000000 --- a/ui/src/ui/page-guard.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Center, CenterProps, Loader, Text } from "@mantine/core"; -import { ReactNode } from "react"; - -export interface PageGuardProps extends CenterProps { - isPending?: boolean; - error?: false | string; - children?: ReactNode; -} - -export default function PageGuard({ - isPending, - error, - children, - ...centerProps -}: PageGuardProps) { - if (isPending) { - return ( -
- -
- ); - } - - if (error) { - return ( -
- {error} -
- ); - } - - return children; -} diff --git a/ui/src/ui/search-input.tsx b/ui/src/ui/search-input.tsx deleted file mode 100644 index 8c44e0b01..000000000 --- a/ui/src/ui/search-input.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { ICONS } from "@/lib/icons"; -import { TextInput, TextInputProps } from "@mantine/core"; - -export interface SearchInputProps extends TextInputProps { - onSearch?: (search: string) => void; -} - -export default function SearchInput({ - onSearch, - onChange, - ...inputProps -}: SearchInputProps) { - return ( - } - w={{ base: "100%", xs: 220 }} - onChange={(e) => { - onChange?.(e); - onSearch?.(e.target.value); - }} - onClick={(e) => e.stopPropagation()} - {...inputProps} - /> - ); -} diff --git a/ui/src/ui/stat-bar.tsx b/ui/src/ui/stat-bar.tsx deleted file mode 100644 index fa92a3136..000000000 --- a/ui/src/ui/stat-bar.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { hexColorByIntention } from "mogh_ui"; -import { Group, Progress, StackProps, Text } from "@mantine/core"; -import { ReactNode } from "react"; -import InfoCard from "./info-card"; - -export interface StatBarProps extends StackProps { - title: string; - icon: ReactNode; - description?: ReactNode; - percentage: number | undefined; - warning: number | undefined; - critical: number | undefined; -} - -export default function StatBar({ - title, - icon, - description, - percentage: _percentage, - warning: _warning, - critical: _critical, - ...props -}: StatBarProps) { - const percentage = _percentage ?? 0; - const warning = _warning ?? 100; - const critical = _critical ?? 100; - const intent = - percentage > critical - ? "Critical" - : percentage > warning - ? "Warning" - : "Good"; - const color = hexColorByIntention(intent); - return ( - - - {percentage.toFixed(2)}% - - {icon} - - } - w={{ base: "100%", lg: 300 }} - gap="0.2rem" - justify="space-between" - {...props} - > - {description && ( - - {description} - - )} - - - ); -} From 4132396f714b4e5aff9b0c15d698e293b8b21afd Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Fri, 3 Apr 2026 12:44:50 -0700 Subject: [PATCH 11/27] move more components to mogh ui --- ui/src/app/index.tsx | 2 +- ui/src/components/alerts/details.tsx | 2 +- .../components/confirm-modal-with-disable.tsx | 2 +- .../components/docker/containers-section.tsx | 2 +- ui/src/components/export-toml.tsx | 2 +- ui/src/components/inspect-section.tsx | 2 +- .../components/permissions/base-section.tsx | 2 +- .../permissions/specific-section.tsx | 2 +- ui/src/components/swarm/services-section.tsx | 2 +- ui/src/components/swarm/tasks-section.tsx | 2 +- ui/src/components/template-switch.tsx | 2 +- ui/src/components/updates/details.tsx | 2 +- ui/src/components/user/delete-group.tsx | 2 +- ui/src/components/user/table.tsx | 2 +- ui/src/pages/alerts.tsx | 2 +- ui/src/pages/dashboard/tables.tsx | 2 +- ui/src/pages/docker/image.tsx | 2 +- ui/src/pages/profile/linked-logins.tsx | 2 +- ui/src/pages/profile/passkey.tsx | 2 +- ui/src/pages/profile/totp.tsx | 2 +- ui/src/pages/resources.tsx | 4 +- ui/src/pages/user-group/delete.tsx | 2 +- ui/src/pages/user-group/index.tsx | 2 +- ui/src/pages/user/index.tsx | 2 +- ui/src/resources/action/config.tsx | 2 +- ui/src/resources/build/config.tsx | 4 +- ui/src/resources/build/info.tsx | 2 +- ui/src/resources/delete.tsx | 2 +- ui/src/resources/deployment/config/index.tsx | 2 +- ui/src/resources/procedure/config/index.tsx | 2 +- ui/src/resources/server/confirm-pubkey.tsx | 2 +- ui/src/resources/server/stats/containers.tsx | 2 +- ui/src/resources/server/stats/disks.tsx | 2 +- ui/src/resources/server/stats/historical.tsx | 2 +- ui/src/resources/server/stats/processes.tsx | 4 +- ui/src/resources/server/table/stats.tsx | 2 +- ui/src/resources/stack/config/index.tsx | 4 +- ui/src/resources/stack/info.tsx | 2 +- ui/src/resources/swarm/docker/nodes/index.tsx | 2 +- .../resources/swarm/docker/nodes/update.tsx | 2 +- ui/src/resources/sync/config.tsx | 2 +- ui/src/resources/sync/info.tsx | 2 +- ui/src/router.tsx | 2 +- ui/src/ui/config/confirm.tsx | 2 +- ui/src/ui/config/item.tsx | 11 +- ui/src/ui/confirm-modal.tsx | 164 ------------------ ui/src/ui/input-list.tsx | 56 ------ ui/src/ui/labelled-switch.tsx | 53 ------ ui/src/ui/labels-group.tsx | 27 --- ui/src/ui/loading-screen.tsx | 15 -- ui/src/ui/show-hide-button.tsx | 25 --- ui/src/ui/stat-cell.tsx | 70 -------- ui/src/ui/table-skeleton.tsx | 17 -- 53 files changed, 55 insertions(+), 479 deletions(-) delete mode 100644 ui/src/ui/confirm-modal.tsx delete mode 100644 ui/src/ui/input-list.tsx delete mode 100644 ui/src/ui/labelled-switch.tsx delete mode 100644 ui/src/ui/labels-group.tsx delete mode 100644 ui/src/ui/loading-screen.tsx delete mode 100644 ui/src/ui/show-hide-button.tsx delete mode 100644 ui/src/ui/stat-cell.tsx delete mode 100644 ui/src/ui/table-skeleton.tsx diff --git a/ui/src/app/index.tsx b/ui/src/app/index.tsx index 51eedf905..4da9a3b2d 100644 --- a/ui/src/app/index.tsx +++ b/ui/src/app/index.tsx @@ -4,7 +4,7 @@ import { Suspense } from "react"; import { Outlet } from "react-router-dom"; import Topbar from "@/app/topbar"; import Sidebar from "@/app/sidebar"; -import LoadingScreen from "@/ui/loading-screen"; +import { LoadingScreen } from "mogh_ui"; import UpdateDetails from "@/components/updates/details"; import AlertDetails from "@/components/alerts/details"; diff --git a/ui/src/components/alerts/details.tsx b/ui/src/components/alerts/details.tsx index 8085c4d0c..5794c45a9 100644 --- a/ui/src/components/alerts/details.tsx +++ b/ui/src/components/alerts/details.tsx @@ -6,7 +6,7 @@ import { ICONS } from "@/lib/icons"; import { Clock, Link2 } from "lucide-react"; import { CopyButton } from "mogh_ui"; import { MonacoEditor } from "@/components/monaco"; -import LoadingScreen from "@/ui/loading-screen"; +import { LoadingScreen } from "mogh_ui"; import { atom, useAtom } from "jotai"; import ResourceLink from "@/resources/link"; import { notifications } from "@mantine/notifications"; diff --git a/ui/src/components/confirm-modal-with-disable.tsx b/ui/src/components/confirm-modal-with-disable.tsx index 4c34d2d6c..368b922c5 100644 --- a/ui/src/components/confirm-modal-with-disable.tsx +++ b/ui/src/components/confirm-modal-with-disable.tsx @@ -1,5 +1,5 @@ import { useRead } from "@/lib/hooks"; -import ConfirmModal, { ConfirmModalProps } from "@/ui/confirm-modal"; +import { ConfirmModal, ConfirmModalProps } from "mogh_ui"; export interface ConfirmModalWithDisableProps extends Omit< ConfirmModalProps, diff --git a/ui/src/components/docker/containers-section.tsx b/ui/src/components/docker/containers-section.tsx index 90a2fc02c..a160bee5e 100644 --- a/ui/src/components/docker/containers-section.tsx +++ b/ui/src/components/docker/containers-section.tsx @@ -4,7 +4,7 @@ import { Prune } from "@/resources/server/executions"; import { ICONS } from "@/lib/icons"; import { DataTable, SortableHeader } from "mogh_ui"; import { Section, SectionProps } from "mogh_ui"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; import { Group } from "@mantine/core"; import { Types } from "komodo_client"; import DockerResourceLink from "./link"; diff --git a/ui/src/components/export-toml.tsx b/ui/src/components/export-toml.tsx index 4e1c4494b..3dcc91ae0 100644 --- a/ui/src/components/export-toml.tsx +++ b/ui/src/components/export-toml.tsx @@ -5,7 +5,7 @@ import { useDisclosure } from "@mantine/hooks"; import { Types } from "komodo_client"; import { MonacoEditor } from "@/components/monaco"; import { CopyButton } from "mogh_ui"; -import LoadingScreen from "@/ui/loading-screen"; +import { LoadingScreen } from "mogh_ui"; export interface ExportTomlProps { targets?: Types.ResourceTarget[]; diff --git a/ui/src/components/inspect-section.tsx b/ui/src/components/inspect-section.tsx index f8fe9db3f..72696f09c 100644 --- a/ui/src/components/inspect-section.tsx +++ b/ui/src/components/inspect-section.tsx @@ -2,7 +2,7 @@ import { ICONS } from "@/lib/icons"; import { Section, SectionProps } from "mogh_ui"; import { useState } from "react"; import { MonacoEditor } from "./monaco"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; import { Box } from "@mantine/core"; import { Types } from "komodo_client"; import { useRead } from "@/lib/hooks"; diff --git a/ui/src/components/permissions/base-section.tsx b/ui/src/components/permissions/base-section.tsx index a09989c72..80330189f 100644 --- a/ui/src/components/permissions/base-section.tsx +++ b/ui/src/components/permissions/base-section.tsx @@ -14,7 +14,7 @@ import { useState } from "react"; import PermissionLevelSelector from "./level-selector"; import SpecificPermissionSelector from "./specific-selector"; import { SearchInput } from "mogh_ui"; -import LabelledSwitch from "@/ui/labelled-switch"; +import { LabelledSwitch } from "mogh_ui"; export interface BasePermissionsSectionProps extends SectionProps { userTarget: Types.UserTarget; diff --git a/ui/src/components/permissions/specific-section.tsx b/ui/src/components/permissions/specific-section.tsx index bb72b04f6..9a030db3e 100644 --- a/ui/src/components/permissions/specific-section.tsx +++ b/ui/src/components/permissions/specific-section.tsx @@ -10,7 +10,7 @@ import { notifications } from "@mantine/notifications"; import { Types } from "komodo_client"; import { useState } from "react"; import ResourceTypeSelector from "../resource-type-selector"; -import LabelledSwitch from "@/ui/labelled-switch"; +import { LabelledSwitch } from "mogh_ui"; import PermissionLevelSelector from "./level-selector"; import SpecificPermissionSelector from "./specific-selector"; diff --git a/ui/src/components/swarm/services-section.tsx b/ui/src/components/swarm/services-section.tsx index 60753cdb3..07eeb9d80 100644 --- a/ui/src/components/swarm/services-section.tsx +++ b/ui/src/components/swarm/services-section.tsx @@ -2,7 +2,7 @@ import { filterBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; import { DataTable, SortableHeader } from "mogh_ui"; import { Section, SectionProps } from "mogh_ui"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; import { Group } from "@mantine/core"; import { Types } from "komodo_client"; import SwarmResourceLink from "./link"; diff --git a/ui/src/components/swarm/tasks-section.tsx b/ui/src/components/swarm/tasks-section.tsx index 20f9eeab7..ab85531f5 100644 --- a/ui/src/components/swarm/tasks-section.tsx +++ b/ui/src/components/swarm/tasks-section.tsx @@ -2,7 +2,7 @@ import { filterMultitermBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; import { DataTable, SortableHeader } from "mogh_ui"; import { Section, SectionProps } from "mogh_ui"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; import { Group } from "@mantine/core"; import { Types } from "komodo_client"; import SwarmResourceLink from "./link"; diff --git a/ui/src/components/template-switch.tsx b/ui/src/components/template-switch.tsx index 5d2e471a3..8ef0f4f3d 100644 --- a/ui/src/components/template-switch.tsx +++ b/ui/src/components/template-switch.tsx @@ -1,6 +1,6 @@ import { useInvalidate, usePermissions, useWrite } from "@/lib/hooks"; import { UsableResource } from "@/resources"; -import LabelledSwitch from "@/ui/labelled-switch"; +import { LabelledSwitch } from "mogh_ui"; import { notifications } from "@mantine/notifications"; import { Types } from "komodo_client"; diff --git a/ui/src/components/updates/details.tsx b/ui/src/components/updates/details.tsx index 882f41832..b4e42933b 100644 --- a/ui/src/components/updates/details.tsx +++ b/ui/src/components/updates/details.tsx @@ -15,7 +15,7 @@ import { } from "mogh_ui"; import { Section } from "mogh_ui"; import { MonacoDiffEditor } from "@/components/monaco"; -import LoadingScreen from "@/ui/loading-screen"; +import { LoadingScreen } from "mogh_ui"; import { atom, useAtom } from "jotai"; import ResourceLink from "@/resources/link"; import { To, useLocation, useNavigate } from "react-router-dom"; diff --git a/ui/src/components/user/delete-group.tsx b/ui/src/components/user/delete-group.tsx index 7bca5b94e..7aefbd88d 100644 --- a/ui/src/components/user/delete-group.tsx +++ b/ui/src/components/user/delete-group.tsx @@ -1,6 +1,6 @@ import { useInvalidate, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; -import ConfirmModal from "@/ui/confirm-modal"; +import { ConfirmModal } from "mogh_ui"; import { notifications } from "@mantine/notifications"; import { Types } from "komodo_client"; import { useNavigate } from "react-router-dom"; diff --git a/ui/src/components/user/table.tsx b/ui/src/components/user/table.tsx index 62b02a978..930f95b6b 100644 --- a/ui/src/components/user/table.tsx +++ b/ui/src/components/user/table.tsx @@ -1,7 +1,7 @@ import { useUser } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { ConfirmButton } from "mogh_ui"; -import ConfirmModal from "@/ui/confirm-modal"; +import { ConfirmModal } from "mogh_ui"; import { DataTable } from "mogh_ui"; import { StatusBadge } from "mogh_ui"; import { Badge, BoxProps } from "@mantine/core"; diff --git a/ui/src/pages/alerts.tsx b/ui/src/pages/alerts.tsx index 9a99d0a78..471c781d6 100644 --- a/ui/src/pages/alerts.tsx +++ b/ui/src/pages/alerts.tsx @@ -9,7 +9,7 @@ import ResourceLink from "@/resources/link"; import ResourceSelector from "@/resources/selector"; import { ICONS } from "@/lib/icons"; import { DataTable } from "mogh_ui"; -import LabelledSwitch from "@/ui/labelled-switch"; +import { LabelledSwitch } from "mogh_ui"; import { Page } from "mogh_ui"; import { StatusBadge } from "mogh_ui"; import { ActionIcon, Group, Pagination, Select, Stack } from "@mantine/core"; diff --git a/ui/src/pages/dashboard/tables.tsx b/ui/src/pages/dashboard/tables.tsx index ec0c71f16..b177d8048 100644 --- a/ui/src/pages/dashboard/tables.tsx +++ b/ui/src/pages/dashboard/tables.tsx @@ -13,7 +13,7 @@ import { Types } from "komodo_client"; import { useState } from "react"; import { Link } from "react-router-dom"; import DashboardNoResources from "./no-resources"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; import { SearchInput } from "mogh_ui"; export default function DashboardTables() { diff --git a/ui/src/pages/docker/image.tsx b/ui/src/pages/docker/image.tsx index 2079017c1..43dc0c21f 100644 --- a/ui/src/pages/docker/image.tsx +++ b/ui/src/pages/docker/image.tsx @@ -9,7 +9,7 @@ import { ConfirmButton, fmtDateWithMinutes, fmtSizeBytes } from "mogh_ui"; import { DataTable } from "mogh_ui"; import { PageGuard } from "mogh_ui"; import { Section } from "mogh_ui"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; import { Box, Center, Group, Text } from "@mantine/core"; import { Types } from "komodo_client"; import { useState } from "react"; diff --git a/ui/src/pages/profile/linked-logins.tsx b/ui/src/pages/profile/linked-logins.tsx index 0df74aa2f..57a3a7598 100644 --- a/ui/src/pages/profile/linked-logins.tsx +++ b/ui/src/pages/profile/linked-logins.tsx @@ -6,7 +6,7 @@ import { notifications } from "@mantine/notifications"; import { useLoginOptions, useManageAuth } from "@/lib/hooks"; import { DataTable } from "mogh_ui"; import { ICONS } from "@/lib/icons"; -import ConfirmModal from "@/ui/confirm-modal"; +import { ConfirmModal } from "mogh_ui"; import { Section } from "mogh_ui"; const useLinkWithExternalLogin = () => { diff --git a/ui/src/pages/profile/passkey.tsx b/ui/src/pages/profile/passkey.tsx index 956541554..ab1b24373 100644 --- a/ui/src/pages/profile/passkey.tsx +++ b/ui/src/pages/profile/passkey.tsx @@ -3,7 +3,7 @@ import { Button } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { MoghAuth, Types } from "komodo_client"; import { Fingerprint, Trash } from "lucide-react"; -import ConfirmModal from "@/ui/confirm-modal"; +import { ConfirmModal } from "mogh_ui"; export const EnrollPasskey = ({ user }: { user: Types.User }) => { const userInvalidate = useUserInvalidate(); diff --git a/ui/src/pages/profile/totp.tsx b/ui/src/pages/profile/totp.tsx index 7da24f62a..2fdf0ecfa 100644 --- a/ui/src/pages/profile/totp.tsx +++ b/ui/src/pages/profile/totp.tsx @@ -13,7 +13,7 @@ import { notifications } from "@mantine/notifications"; import { Types } from "komodo_client"; import { Check, RotateCcwKey, Trash } from "lucide-react"; import { useState } from "react"; -import ConfirmModal from "@/ui/confirm-modal"; +import { ConfirmModal } from "mogh_ui"; export const EnrollTotp = ({ user }: { user: Types.User }) => { const userInvalidate = useUserInvalidate(); diff --git a/ui/src/pages/resources.tsx b/ui/src/pages/resources.tsx index 8d21fe64c..e3652fcc9 100644 --- a/ui/src/pages/resources.tsx +++ b/ui/src/pages/resources.tsx @@ -12,14 +12,14 @@ import { ResourceComponents, UsableResource } from "@/resources"; import { Types } from "komodo_client"; import { Page } from "mogh_ui"; import { Group, Stack } from "@mantine/core"; -import TableSkeleton from "@/ui/table-skeleton"; +import { TableSkeleton } from "mogh_ui"; import TemplateQuerySelector from "@/components/template-query-selector"; import TagsFilter from "@/components/tags/filter"; import ResourceNotFound from "@/resources/not-found"; import ExportToml from "@/components/export-toml"; import ServerShowStats from "@/resources/server/show-stats"; import { SearchInput } from "mogh_ui"; -import LabelledSwitch from "@/ui/labelled-switch"; +import { LabelledSwitch } from "mogh_ui"; export default function Resources({ _type }: { _type?: UsableResource }) { const is_admin = useUser().data?.admin ?? false; diff --git a/ui/src/pages/user-group/delete.tsx b/ui/src/pages/user-group/delete.tsx index 3eeade1de..172a3c6c8 100644 --- a/ui/src/pages/user-group/delete.tsx +++ b/ui/src/pages/user-group/delete.tsx @@ -1,6 +1,6 @@ import { useNavigate } from "react-router-dom"; import { useRead, useUser, useWrite } from "@/lib/hooks"; -import ConfirmModal from "@/ui/confirm-modal"; +import { ConfirmModal } from "mogh_ui"; import { ICONS } from "@/lib/icons"; export default function DeleteUserGroup({ groupId }: { groupId: string }) { diff --git a/ui/src/pages/user-group/index.tsx b/ui/src/pages/user-group/index.tsx index 5ee1d8294..ad99975b0 100644 --- a/ui/src/pages/user-group/index.tsx +++ b/ui/src/pages/user-group/index.tsx @@ -10,7 +10,7 @@ import { Group, Stack, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useParams } from "react-router-dom"; import UserGroupAddUser from "./add-user"; -import LabelledSwitch from "@/ui/labelled-switch"; +import { LabelledSwitch } from "mogh_ui"; import BasePermissionsSection from "@/components/permissions/base-section"; import SpecificPermissionsSection from "@/components/permissions/specific-section"; import DeleteUserGroup from "./delete"; diff --git a/ui/src/pages/user/index.tsx b/ui/src/pages/user/index.tsx index edf799cf3..b2ca29e49 100644 --- a/ui/src/pages/user/index.tsx +++ b/ui/src/pages/user/index.tsx @@ -1,7 +1,7 @@ import { useInvalidate, useRead, useUser, useWrite } from "@/lib/hooks"; import { ConfirmButton } from "mogh_ui"; import EntityPage from "@/ui/entity-page"; -import LabelledSwitch from "@/ui/labelled-switch"; +import { LabelledSwitch } from "mogh_ui"; import { PageGuard } from "mogh_ui"; import { Section } from "mogh_ui"; import { Group, Stack } from "@mantine/core"; diff --git a/ui/src/resources/action/config.tsx b/ui/src/resources/action/config.tsx index 65ce6288e..13d4cf198 100644 --- a/ui/src/resources/action/config.tsx +++ b/ui/src/resources/action/config.tsx @@ -17,7 +17,7 @@ import { ConfigItem, ConfigSwitch } from "@/ui/config/item"; import TimezoneSelector from "@/components/timezone-selector"; import SecretsSearch from "@/components/config/secrets-search"; import WebhookBuilder from "@/components/webhook/builder"; -import LabelledSwitch from "@/ui/labelled-switch"; +import { LabelledSwitch } from "mogh_ui"; import CopyWebhookUrl from "@/components/webhook/copy-url"; import { useFullAction } from "."; diff --git a/ui/src/resources/build/config.tsx b/ui/src/resources/build/config.tsx index 564da832b..bbfaae556 100644 --- a/ui/src/resources/build/config.tsx +++ b/ui/src/resources/build/config.tsx @@ -19,8 +19,8 @@ import { MonacoEditor } from "@/components/monaco"; import SecretsSearch from "@/components/config/secrets-search"; import { Link } from "react-router-dom"; import AddExtraArg from "@/components/config/add-extra-arg"; -import InputList from "@/ui/input-list"; -import ShowHideButton from "@/ui/show-hide-button"; +import { InputList } from "mogh_ui"; +import { ShowHideButton } from "mogh_ui"; import LinkedRepo from "@/components/config/linked-repo"; import { ProviderSelectorConfig } from "@/components/config/provider-selector"; import { AccountSelectorConfig } from "@/components/config/account-selector"; diff --git a/ui/src/resources/build/info.tsx b/ui/src/resources/build/info.tsx index 8ee8e35d0..641b2e4c0 100644 --- a/ui/src/resources/build/info.tsx +++ b/ui/src/resources/build/info.tsx @@ -12,7 +12,7 @@ import { updateLogToHtml } from "@/lib/utils"; import { CopyButton } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import ConfirmUpdate from "@/ui/config/confirm"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; import { MonacoEditor } from "@/components/monaco"; export default function BuildInfo({ diff --git a/ui/src/resources/delete.tsx b/ui/src/resources/delete.tsx index 6abbb0aab..127ae97fe 100644 --- a/ui/src/resources/delete.tsx +++ b/ui/src/resources/delete.tsx @@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom"; import { UsableResource } from "."; import { usePermissions, useRead, useWrite } from "@/lib/hooks"; import { usableResourcePath } from "@/lib/utils"; -import ConfirmModal from "@/ui/confirm-modal"; +import { ConfirmModal } from "mogh_ui"; import { ICONS } from "@/lib/icons"; export default function DeleteResource({ diff --git a/ui/src/resources/deployment/config/index.tsx b/ui/src/resources/deployment/config/index.tsx index 5c43287de..9c4abcc3c 100644 --- a/ui/src/resources/deployment/config/index.tsx +++ b/ui/src/resources/deployment/config/index.tsx @@ -15,7 +15,7 @@ import SecretsSearch from "@/components/config/secrets-search"; import DeploymentRestartSelector from "./restart"; import { Link } from "react-router-dom"; import AddExtraArg from "@/components/config/add-extra-arg"; -import InputList from "@/ui/input-list"; +import { InputList } from "mogh_ui"; import { TerminationSignal, TerminationTimeout } from "./termination"; import { ReactNode } from "react"; import { useFullDeployment } from ".."; diff --git a/ui/src/resources/procedure/config/index.tsx b/ui/src/resources/procedure/config/index.tsx index c716e891c..c3fb4b45c 100644 --- a/ui/src/resources/procedure/config/index.tsx +++ b/ui/src/resources/procedure/config/index.tsx @@ -15,7 +15,7 @@ import { ICONS } from "@/lib/icons"; import { ConfigItem, ConfigSwitch } from "@/ui/config/item"; import TimezoneSelector from "@/components/timezone-selector"; import WebhookBuilder from "@/components/webhook/builder"; -import LabelledSwitch from "@/ui/labelled-switch"; +import { LabelledSwitch } from "mogh_ui"; import CopyWebhookUrl from "@/components/webhook/copy-url"; import { useFullProcedure } from ".."; diff --git a/ui/src/resources/server/confirm-pubkey.tsx b/ui/src/resources/server/confirm-pubkey.tsx index f289d50c9..d1b570623 100644 --- a/ui/src/resources/server/confirm-pubkey.tsx +++ b/ui/src/resources/server/confirm-pubkey.tsx @@ -2,7 +2,7 @@ import { Group, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { CircleOff } from "lucide-react"; import { usePermissions, useWrite } from "@/lib/hooks"; -import ConfirmModal from "@/ui/confirm-modal"; +import { ConfirmModal } from "mogh_ui"; import { useServer } from "."; export default function ConfirmServerPubkey({ id }: { id: string }) { diff --git a/ui/src/resources/server/stats/containers.tsx b/ui/src/resources/server/stats/containers.tsx index 5512e7464..c5df50d05 100644 --- a/ui/src/resources/server/stats/containers.tsx +++ b/ui/src/resources/server/stats/containers.tsx @@ -1,7 +1,7 @@ import { useRead } from "@/lib/hooks"; import { DataTable, SortableHeader } from "mogh_ui"; import { Section } from "mogh_ui"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; import { Group, Text } from "@mantine/core"; import { useLocalStorage } from "@mantine/hooks"; import { useState } from "react"; diff --git a/ui/src/resources/server/stats/disks.tsx b/ui/src/resources/server/stats/disks.tsx index 701acc5be..66a9a6a55 100644 --- a/ui/src/resources/server/stats/disks.tsx +++ b/ui/src/resources/server/stats/disks.tsx @@ -1,7 +1,7 @@ import { ICONS } from "@/lib/icons"; import { DataTable, SortableHeader } from "mogh_ui"; import { Section } from "mogh_ui"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; import { Group, Text } from "@mantine/core"; import { useLocalStorage } from "@mantine/hooks"; import { Types } from "komodo_client"; diff --git a/ui/src/resources/server/stats/historical.tsx b/ui/src/resources/server/stats/historical.tsx index 8ac2026aa..1c62675fc 100644 --- a/ui/src/resources/server/stats/historical.tsx +++ b/ui/src/resources/server/stats/historical.tsx @@ -5,7 +5,7 @@ import { Types } from "komodo_client"; import { hexColorByIntention } from "mogh_ui"; import { useRead } from "@/lib/hooks"; import { ChartLine, Download, Upload } from "lucide-react"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; import { Center, Group, diff --git a/ui/src/resources/server/stats/processes.tsx b/ui/src/resources/server/stats/processes.tsx index 82f7aa215..3a72751e3 100644 --- a/ui/src/resources/server/stats/processes.tsx +++ b/ui/src/resources/server/stats/processes.tsx @@ -4,8 +4,8 @@ import { ICONS } from "@/lib/icons"; import { DataTable, SortableHeader } from "mogh_ui"; import { SearchInput } from "mogh_ui"; import { Section } from "mogh_ui"; -import ShowHideButton from "@/ui/show-hide-button"; -import TableSkeleton from "@/ui/table-skeleton"; +import { ShowHideButton } from "mogh_ui"; +import { TableSkeleton } from "mogh_ui"; import { Group } from "@mantine/core"; import { useState } from "react"; diff --git a/ui/src/resources/server/table/stats.tsx b/ui/src/resources/server/table/stats.tsx index b5a80fda4..221cd091d 100644 --- a/ui/src/resources/server/table/stats.tsx +++ b/ui/src/resources/server/table/stats.tsx @@ -4,7 +4,7 @@ import { DataTable, fmtRateBytes, SortableHeader } from "mogh_ui"; import { BoxProps, Group, Text } from "@mantine/core"; import { Types } from "komodo_client"; import { useServerStats, useServerThresholds } from "@/resources/server/hooks"; -import StatCell from "@/ui/stat-cell"; +import { StatCell } from "mogh_ui"; import ServerVersion from "@/resources/server/version"; import ServerDiskUsage from "../diskUsage"; diff --git a/ui/src/resources/stack/config/index.tsx b/ui/src/resources/stack/config/index.tsx index 2379ea5ab..ab466304b 100644 --- a/ui/src/resources/stack/config/index.tsx +++ b/ui/src/resources/stack/config/index.tsx @@ -22,7 +22,7 @@ import { useLocalStorage } from "@mantine/hooks"; import { Types } from "komodo_client"; import ResourceLink from "@/resources/link"; import ResourceSelector from "@/resources/selector"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; import SecretsSearch from "@/components/config/secrets-search"; import { MonacoEditor } from "@/components/monaco"; import { EnableSwitch } from "mogh_ui"; @@ -30,7 +30,7 @@ import StackConfigFiles from "./config-files"; import SystemCommand from "@/components/config/system-command"; import { Link } from "react-router-dom"; import AddExtraArg from "@/components/config/add-extra-arg"; -import InputList from "@/ui/input-list"; +import { InputList } from "mogh_ui"; import { ProviderSelectorConfig } from "@/components/config/provider-selector"; import { AccountSelectorConfig } from "@/components/config/account-selector"; import LinkedRepo from "@/components/config/linked-repo"; diff --git a/ui/src/resources/stack/info.tsx b/ui/src/resources/stack/info.tsx index c8680ddf4..ed405f4e7 100644 --- a/ui/src/resources/stack/info.tsx +++ b/ui/src/resources/stack/info.tsx @@ -12,7 +12,7 @@ import { updateLogToHtml } from "@/lib/utils"; import { CopyButton } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import ConfirmUpdate from "@/ui/config/confirm"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; import { languageFromPath, MonacoEditor } from "@/components/monaco"; export default function StackInfo({ diff --git a/ui/src/resources/swarm/docker/nodes/index.tsx b/ui/src/resources/swarm/docker/nodes/index.tsx index 89e1067a2..ed129a9ce 100644 --- a/ui/src/resources/swarm/docker/nodes/index.tsx +++ b/ui/src/resources/swarm/docker/nodes/index.tsx @@ -15,7 +15,7 @@ import { SearchInput } from "mogh_ui"; import { RowSelectionState } from "@tanstack/react-table"; import UpdateSwarmNode from "./update"; import { HoverCard } from "@mantine/core"; -import LabelsGroup from "@/ui/labels-group"; +import { LabelsGroup } from "mogh_ui"; export default function SwarmNodes({ id, diff --git a/ui/src/resources/swarm/docker/nodes/update.tsx b/ui/src/resources/swarm/docker/nodes/update.tsx index 7eee8f5f5..01c220311 100644 --- a/ui/src/resources/swarm/docker/nodes/update.tsx +++ b/ui/src/resources/swarm/docker/nodes/update.tsx @@ -15,7 +15,7 @@ import { useDisclosure } from "@mantine/hooks"; import { useMemo, useState } from "react"; import { Types } from "komodo_client"; import { ICONS } from "@/lib/icons"; -import LabelsGroup from "@/ui/labels-group"; +import { LabelsGroup } from "mogh_ui"; export interface UpdateSwarmNodeProps { swarm: string; diff --git a/ui/src/resources/sync/config.tsx b/ui/src/resources/sync/config.tsx index 922c8289c..97566897c 100644 --- a/ui/src/resources/sync/config.tsx +++ b/ui/src/resources/sync/config.tsx @@ -15,7 +15,7 @@ import { } from "@/lib/hooks"; import Config, { ConfigGroupArgs, ConfigProps } from "@/ui/config"; import { ConfigItem, ConfigList, ConfigSwitch } from "@/ui/config/item"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; import { Group, Select, Text } from "@mantine/core"; import { useLocalStorage } from "@mantine/hooks"; import { Types } from "komodo_client"; diff --git a/ui/src/resources/sync/info.tsx b/ui/src/resources/sync/info.tsx index 8eaffff38..741db80c5 100644 --- a/ui/src/resources/sync/info.tsx +++ b/ui/src/resources/sync/info.tsx @@ -11,7 +11,7 @@ import { updateLogToHtml } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; import ConfirmUpdate from "@/ui/config/confirm"; import { DividedChildren } from "mogh_ui"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; import { MonacoEditor } from "@/components/monaco"; export default function ResourceSyncInfo({ diff --git a/ui/src/router.tsx b/ui/src/router.tsx index 9ba8dc7f7..46ba706ff 100644 --- a/ui/src/router.tsx +++ b/ui/src/router.tsx @@ -7,10 +7,10 @@ import { Routes, useLocation, } from "react-router-dom"; +import { LoadingScreen } from "mogh_ui"; import { useAuthState, useUser } from "@/lib/hooks"; import { MoghAuth } from "komodo_client"; import App from "@/app"; -import LoadingScreen from "./ui/loading-screen"; const Login = lazy(() => import("@/pages/login")); const UserDisabled = lazy(() => import("@/pages/user-disabled")); diff --git a/ui/src/ui/config/confirm.tsx b/ui/src/ui/config/confirm.tsx index 46468facc..fafcb2ea2 100644 --- a/ui/src/ui/config/confirm.tsx +++ b/ui/src/ui/config/confirm.tsx @@ -6,7 +6,7 @@ import { useCtrlKeyListener, useKeyListener } from "@/lib/hooks"; import { fmtSnakeCaseToUpperSpaceCase } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import { deepCompare, envToText } from "@/lib/utils"; -import ShowHideButton from "@/ui/show-hide-button"; +import { ShowHideButton } from "mogh_ui"; export default function ConfirmUpdate({ original, diff --git a/ui/src/ui/config/item.tsx b/ui/src/ui/config/item.tsx index b92bb317a..f451cddbb 100644 --- a/ui/src/ui/config/item.tsx +++ b/ui/src/ui/config/item.tsx @@ -1,7 +1,3 @@ -import { fmtSnakeCaseToUpperSpaceCase } from "mogh_ui"; -import { ICONS } from "@/lib/icons"; -import { EnableSwitch } from "mogh_ui"; -import InputList, { InputListProps } from "@/ui/input-list"; import { Button, createPolymorphicComponent, @@ -13,6 +9,13 @@ import { TextInput, TextInputProps, } from "@mantine/core"; +import { + fmtSnakeCaseToUpperSpaceCase, + EnableSwitch, + InputList, + InputListProps, +} from "mogh_ui"; +import { ICONS } from "@/lib/icons"; import { forwardRef, ReactNode } from "react"; // https://mantine.dev/guides/polymorphic/#create-your-own-polymorphic-components diff --git a/ui/src/ui/confirm-modal.tsx b/ui/src/ui/confirm-modal.tsx deleted file mode 100644 index de1fd8578..000000000 --- a/ui/src/ui/confirm-modal.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import { - Button, - ButtonProps, - Group, - Loader, - Modal, - ModalProps, - Stack, - Text, - TextInput, -} from "@mantine/core"; -import { useDisclosure } from "@mantine/hooks"; -import { ReactNode, useState } from "react"; -import { ConfirmButton } from "mogh_ui"; -import { sendCopyNotification } from "mogh_ui"; - -export interface ConfirmModalProps extends Omit< - Omit, "onClose">, - "onClick" -> { - children?: ReactNode; - icon?: ReactNode; - disabled?: boolean; - /** User must enter this text to confirm */ - confirmText: string; - title?: ReactNode; - confirmButtonContent?: ReactNode; - onConfirm?: () => Promise; - loading?: boolean; - additional?: ReactNode; - topAdditonal?: ReactNode; - targetProps?: ButtonProps; - targetNoIcon?: boolean; - confirmProps?: ButtonProps; - /** Converts into ConfirmButton */ - disableModal?: boolean; -} - -export default function ConfirmModal({ - children, - icon, - disabled, - confirmText, - title, - confirmButtonContent, - onConfirm, - loading, - additional, - topAdditonal, - targetProps, - targetNoIcon, - confirmProps, - disableModal, - ...modalProps -}: ConfirmModalProps) { - const [opened, { open, close }] = useDisclosure(); - const [input, setInput] = useState(""); - - if (disableModal) { - return ( - - {children} - - ); - } - - return ( - <> - - {title ?? ( - <> - Confirm {children} - - )} - - } - styles={{ content: { padding: "0.5rem" } }} - size="lg" - onClick={(e) => e.stopPropagation()} - {...modalProps} - > - - {topAdditonal} - - { - navigator.clipboard.writeText(confirmText); - sendCopyNotification(); - }} - style={{ cursor: "pointer" }} - > - Please enter {confirmText} below to confirm this action. - {(location.origin.startsWith("https") || - // For dev - location.origin.startsWith("http://localhost:")) && ( - - You may click the text in bold to copy it - - )} - - - setInput(e.target.value)} - error={input === confirmText ? undefined : "Does not match"} - /> - - {additional} - - - - - - - - - - ); -} diff --git a/ui/src/ui/input-list.tsx b/ui/src/ui/input-list.tsx deleted file mode 100644 index ec57e69cb..000000000 --- a/ui/src/ui/input-list.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { ICONS } from "@/lib/icons"; -import { ActionIcon, TextInput, TextInputProps } from "@mantine/core"; - -export interface InputListProps { - field: keyof T; - values: string[]; - disabled: boolean; - set: (update: Partial) => void; - placeholder?: string; - inputProps?: TextInputProps; -} - -export default function InputList({ - field, - values, - disabled, - set, - placeholder, - inputProps, -}: InputListProps) { - return ( - <> - {values.map((arg, i) => ( - { - set({ - [field]: values.map((v, index) => - i === index ? e.target.value : v, - ), - } as Partial); - }} - disabled={disabled} - w={{ base: 230, md: 400 }} - rightSection={ - !disabled && ( - - set({ - [field]: [...values.filter((_, idx) => idx !== i)], - } as Partial) - } - > - - - ) - } - placeholder={placeholder} - {...inputProps} - /> - ))} - - ); -} diff --git a/ui/src/ui/labelled-switch.tsx b/ui/src/ui/labelled-switch.tsx deleted file mode 100644 index 10dafaa01..000000000 --- a/ui/src/ui/labelled-switch.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { - Group, - GroupProps, - Switch, - SwitchProps, - Text, - TextProps, -} from "@mantine/core"; -import { ReactNode } from "react"; - -export interface LabelledSwitchProps extends SwitchProps { - checked: boolean | undefined; - onCheckedChange: (checked: boolean) => void; - label?: ReactNode; - groupProps?: GroupProps; - labelProps?: TextProps; -} - -export default function LabelledSwitch({ - checked, - onCheckedChange, - label, - groupProps, - labelProps, - ...switchProps -}: LabelledSwitchProps) { - return ( - { - e.preventDefault(); - onCheckedChange(!checked); - }} - className="bordered-light" - px="xs" - py={4} - bdrs="sm" - style={{ cursor: "pointer" }} - justify="space-between" - w={{ base: "100%", xs: "fit-content" }} - {...groupProps} - > - - {label} - - - - ); -} diff --git a/ui/src/ui/labels-group.tsx b/ui/src/ui/labels-group.tsx deleted file mode 100644 index 968b20726..000000000 --- a/ui/src/ui/labels-group.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { Badge, Group, GroupProps } from "@mantine/core"; - -export interface LabelsGroupProps extends GroupProps { - labels: [string, string][]; - showEllipsis?: boolean; -} - -export default function LabelsGroup({ - labels, - showEllipsis, - ...groupProps -}: LabelsGroupProps) { - return ( - - {labels.map(([key, val]) => ( - - {key}={val} - - ))} - {showEllipsis && ( - - ... - - )} - - ); -} diff --git a/ui/src/ui/loading-screen.tsx b/ui/src/ui/loading-screen.tsx deleted file mode 100644 index 8df83df66..000000000 --- a/ui/src/ui/loading-screen.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Center, CenterProps, Loader, LoaderProps } from "@mantine/core"; - -export default function LoadingScreen({ - size = "xl", - mt = "30vh", - ...centerProps -}: { - size?: LoaderProps["size"]; -} & CenterProps) { - return ( -
- -
- ); -} diff --git a/ui/src/ui/show-hide-button.tsx b/ui/src/ui/show-hide-button.tsx deleted file mode 100644 index 094668e8a..000000000 --- a/ui/src/ui/show-hide-button.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Button } from "@mantine/core"; -import { ChevronDown, ChevronUp } from "lucide-react"; - -export default function ShowHideButton({ - show, - setShow, -}: { - show: boolean; - setShow: (show: boolean) => void; -}) { - return ( - - ); -} diff --git a/ui/src/ui/stat-cell.tsx b/ui/src/ui/stat-cell.tsx deleted file mode 100644 index 650e4cd87..000000000 --- a/ui/src/ui/stat-cell.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { ColorIntention, hexColorByIntention } from "mogh_ui"; -import { ICONS } from "@/lib/icons"; -import { - ActionIcon, - FloatingPosition, - Group, - GroupProps, - HoverCard, - Progress, - ProgressProps, - Text, - TextProps, -} from "@mantine/core"; -import { ReactNode } from "react"; - -export interface StatCellProps extends GroupProps { - value: number | undefined; - intent: ColorIntention; - textProps?: TextProps; - barProps?: ProgressProps; - info?: ReactNode; - infoPosition?: FloatingPosition; - infoDisabled?: boolean; -} - -export default function StatCell({ - value, - intent, - textProps, - barProps, - info, - infoPosition = "left-start", - infoDisabled, - ...groupProps -}: StatCellProps) { - const ProgressComponent = ( - - ); - return ( - - - {value === undefined ? "N/A" : value.toFixed(1) + "%"} - - {!info && ProgressComponent} - {info && ( - - - - {ProgressComponent} - - - - - - {info} - - )} - - ); -} diff --git a/ui/src/ui/table-skeleton.tsx b/ui/src/ui/table-skeleton.tsx deleted file mode 100644 index 32adcaef6..000000000 --- a/ui/src/ui/table-skeleton.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Skeleton, Stack } from "@mantine/core"; - -export default function TableSkeleton({ - rows = 6, - rowHeight = "3.5vh", -}: { - rows?: number; - rowHeight?: string | number; -}) { - return ( - - {Array.from({ length: rows }).map((_, i) => ( - - ))} - - ); -} From c1d7e2835b412de6b52f682f4d0aa4b41be7f53e Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Fri, 3 Apr 2026 13:03:33 -0700 Subject: [PATCH 12/27] move entity header / page to mogh ui --- ui/src/app/topbar/keyboard-shortcuts.tsx | 3 +- ui/src/app/topbar/omni-search/index.tsx | 2 +- ui/src/components/config/add-extra-arg.tsx | 3 +- ui/src/components/config/secret-selector.tsx | 3 +- .../components/docker/container-selector.tsx | 3 +- ui/src/components/stack-service-selector.tsx | 4 +- ui/src/components/tags/filter.tsx | 3 +- ui/src/components/tags/new.tsx | 2 +- ui/src/components/tags/selector.tsx | 9 +- ui/src/components/terminal/new.tsx | 3 +- ui/src/components/user/header.tsx | 2 +- ui/src/lib/hooks.ts | 119 +---------------- ui/src/pages/containers.tsx | 4 +- ui/src/pages/profile/index.tsx | 2 +- ui/src/pages/resource.tsx | 2 +- ui/src/pages/settings/providers/index.tsx | 4 +- ui/src/pages/settings/tags/color-selector.tsx | 4 +- ui/src/pages/settings/users/new-group.tsx | 2 +- .../pages/settings/users/new-local-user.tsx | 2 +- .../pages/settings/users/new-service-user.tsx | 2 +- ui/src/pages/settings/variables/index.tsx | 13 +- ui/src/pages/settings/variables/new.tsx | 2 +- ui/src/pages/terminals/new.tsx | 3 +- ui/src/pages/user-group/add-user.tsx | 8 +- ui/src/pages/user-group/index.tsx | 4 +- ui/src/pages/user/add-group.tsx | 2 +- ui/src/pages/user/index.tsx | 2 +- ui/src/resources/deployment/config/image.tsx | 4 +- ui/src/resources/header.tsx | 2 +- ui/src/resources/new.tsx | 2 +- .../procedure/config/execution-selector.tsx | 2 +- ui/src/resources/selector.tsx | 2 +- ui/src/resources/sub-page.tsx | 9 +- ui/src/resources/swarm/new/config.tsx | 2 +- ui/src/resources/swarm/new/secret.tsx | 2 +- ui/src/resources/tags.tsx | 9 +- ui/src/ui/back-button.tsx | 20 --- ui/src/ui/config/confirm.tsx | 2 +- ui/src/ui/create-modal.tsx | 88 ------------ ui/src/ui/entity-header.tsx | 125 ------------------ ui/src/ui/entity-page.tsx | 25 ---- ui/src/ui/shared-text-update.tsx | 90 ------------- 42 files changed, 58 insertions(+), 538 deletions(-) delete mode 100644 ui/src/ui/back-button.tsx delete mode 100644 ui/src/ui/create-modal.tsx delete mode 100644 ui/src/ui/entity-header.tsx delete mode 100644 ui/src/ui/entity-page.tsx delete mode 100644 ui/src/ui/shared-text-update.tsx diff --git a/ui/src/app/topbar/keyboard-shortcuts.tsx b/ui/src/app/topbar/keyboard-shortcuts.tsx index 896924b65..0be7dbbfe 100644 --- a/ui/src/app/topbar/keyboard-shortcuts.tsx +++ b/ui/src/app/topbar/keyboard-shortcuts.tsx @@ -1,4 +1,4 @@ -import { useSettingsView, useShiftKeyListener } from "@/lib/hooks"; +import { useSettingsView } from "@/lib/hooks"; import { ActionIcon, Divider, @@ -10,6 +10,7 @@ import { } from "@mantine/core"; import { useDisclosure } from "@mantine/hooks"; import { Keyboard } from "lucide-react"; +import { useShiftKeyListener } from "mogh_ui"; import { useNavigate } from "react-router-dom"; export default function KeyboardShortcuts() { diff --git a/ui/src/app/topbar/omni-search/index.tsx b/ui/src/app/topbar/omni-search/index.tsx index 8c89cdb1c..c5b8d9ee7 100644 --- a/ui/src/app/topbar/omni-search/index.tsx +++ b/ui/src/app/topbar/omni-search/index.tsx @@ -2,7 +2,7 @@ import { ActionIcon, Badge, Button, Group } from "@mantine/core"; import { Spotlight, spotlight } from "@mantine/spotlight"; import { useOmniSearch } from "./hooks"; import { ICONS } from "@/lib/icons"; -import { useShiftKeyListener } from "@/lib/hooks"; +import { useShiftKeyListener } from "mogh_ui"; import classes from "./index.module.scss"; export default function OmniSearch({}: {}) { diff --git a/ui/src/components/config/add-extra-arg.tsx b/ui/src/components/config/add-extra-arg.tsx index 5fa5a397e..fdf8df6c7 100644 --- a/ui/src/components/config/add-extra-arg.tsx +++ b/ui/src/components/config/add-extra-arg.tsx @@ -1,7 +1,8 @@ -import { useRead, useSearchCombobox } from "@/lib/hooks"; +import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { Button, Combobox } from "@mantine/core"; import { ICONS } from "@/lib/icons"; +import { useSearchCombobox } from "mogh_ui"; export interface AddExtraArgProps { type: "Deployment" | "Build" | "Stack" | "StackBuild"; diff --git a/ui/src/components/config/secret-selector.tsx b/ui/src/components/config/secret-selector.tsx index 987cad3b7..2147930c0 100644 --- a/ui/src/components/config/secret-selector.tsx +++ b/ui/src/components/config/secret-selector.tsx @@ -1,8 +1,9 @@ -import { useSearchCombobox, useSettingsView } from "@/lib/hooks"; +import { useSettingsView } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { filterBySplit } from "@/lib/utils"; import { Button, Combobox, ComboboxProps } from "@mantine/core"; import { notifications } from "@mantine/notifications"; +import { useSearchCombobox } from "mogh_ui"; import { useNavigate } from "react-router-dom"; export interface SecretSelectorProps extends ComboboxProps { diff --git a/ui/src/components/docker/container-selector.tsx b/ui/src/components/docker/container-selector.tsx index 82179f187..3bdf3b750 100644 --- a/ui/src/components/docker/container-selector.tsx +++ b/ui/src/components/docker/container-selector.tsx @@ -10,10 +10,11 @@ import { Text, } from "@mantine/core"; import { Types } from "komodo_client"; -import { useRead, useSearchCombobox } from "@/lib/hooks"; +import { useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { filterBySplit } from "@/lib/utils"; import { DOCKER_LINK_ICONS } from "@/components/docker/link"; +import { useSearchCombobox } from "mogh_ui"; export interface ContainerSelectorProps extends ComboboxProps { serverId: string; diff --git a/ui/src/components/stack-service-selector.tsx b/ui/src/components/stack-service-selector.tsx index 53216a873..594ca69e6 100644 --- a/ui/src/components/stack-service-selector.tsx +++ b/ui/src/components/stack-service-selector.tsx @@ -1,4 +1,4 @@ -import { useRead, useSearchCombobox } from "@/lib/hooks"; +import { useRead } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { ActionIcon, @@ -17,7 +17,7 @@ import { ICONS } from "@/lib/icons"; import { containerStateIntention, swarmStateIntention } from "@/lib/color"; import { SWARM_LINK_ICONS } from "./swarm/link"; import { useStack } from "@/resources/stack"; -import { hexColorByIntention } from "mogh_ui"; +import { hexColorByIntention, useSearchCombobox } from "mogh_ui"; export interface StackServiceSelectorProps extends ComboboxProps { stackId: string; diff --git a/ui/src/components/tags/filter.tsx b/ui/src/components/tags/filter.tsx index a1ddf46e3..dc3c5bca1 100644 --- a/ui/src/components/tags/filter.tsx +++ b/ui/src/components/tags/filter.tsx @@ -1,8 +1,9 @@ -import { useRead, useShiftKeyListener, useTags } from "@/lib/hooks"; +import { useRead, useTags } from "@/lib/hooks"; import { ActionIcon, Group, Stack } from "@mantine/core"; import Tags from "."; import TagSelector from "./selector"; import { ICONS } from "@/lib/icons"; +import { useShiftKeyListener } from "mogh_ui"; export default function TagsFilter() { const { tags, add_tag, remove_tag, clear_tags } = useTags(); diff --git a/ui/src/components/tags/new.tsx b/ui/src/components/tags/new.tsx index bc704e63a..e2c420540 100644 --- a/ui/src/components/tags/new.tsx +++ b/ui/src/components/tags/new.tsx @@ -1,5 +1,5 @@ import { useInvalidate, useWrite } from "@/lib/hooks"; -import CreateModal from "@/ui/create-modal"; +import { CreateModal } from "mogh_ui"; import { TextInput } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useState } from "react"; diff --git a/ui/src/components/tags/selector.tsx b/ui/src/components/tags/selector.tsx index bb0010c32..81e19dd8a 100644 --- a/ui/src/components/tags/selector.tsx +++ b/ui/src/components/tags/selector.tsx @@ -1,10 +1,4 @@ -import { - useInvalidate, - useRead, - useSearchCombobox, - useShiftKeyListener, - useWrite, -} from "@/lib/hooks"; +import { useInvalidate, useRead, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { filterBySplit } from "@/lib/utils"; import { @@ -20,6 +14,7 @@ import { } from "@mantine/core"; import { Types } from "komodo_client"; import { notifications } from "@mantine/notifications"; +import { useSearchCombobox, useShiftKeyListener } from "mogh_ui"; export interface TagSelectorProps extends ComboboxProps { title: string; diff --git a/ui/src/components/terminal/new.tsx b/ui/src/components/terminal/new.tsx index a945c308c..a57416d25 100644 --- a/ui/src/components/terminal/new.tsx +++ b/ui/src/components/terminal/new.tsx @@ -1,4 +1,4 @@ -import { useSearchCombobox, useWrite } from "@/lib/hooks"; +import { useWrite } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; import { @@ -14,6 +14,7 @@ import { useLocalStorage } from "@mantine/hooks"; import { notifications } from "@mantine/notifications"; import { Types } from "komodo_client"; import { useState } from "react"; +import { useSearchCombobox } from "mogh_ui"; export interface NewTerminalProps extends ComboboxProps { target: Types.TerminalTarget; diff --git a/ui/src/components/user/header.tsx b/ui/src/components/user/header.tsx index ecc7b0269..1a70fc6bd 100644 --- a/ui/src/components/user/header.tsx +++ b/ui/src/components/user/header.tsx @@ -1,6 +1,6 @@ import { ICONS } from "@/lib/icons"; import { DividedChildren } from "mogh_ui"; -import EntityHeader from "@/ui/entity-header"; +import { EntityHeader } from "mogh_ui"; import { Box, Group, Stack, Text } from "@mantine/core"; import { Types } from "komodo_client"; import UserAvatar from "@/components/user-avatar"; diff --git a/ui/src/lib/hooks.ts b/ui/src/lib/hooks.ts index d5c8699b6..697de45a8 100644 --- a/ui/src/lib/hooks.ts +++ b/ui/src/lib/hooks.ts @@ -12,7 +12,7 @@ import { useQuery, useQueryClient, } from "@tanstack/react-query"; -import { useCallback, useEffect, useMemo, useState } from "react"; +import { useCallback, useEffect, useMemo } from "react"; import { atom, useAtom } from "jotai"; import { atomFamily } from "jotai-family"; import { atomWithHash } from "jotai-location"; @@ -24,8 +24,6 @@ import { sanitizeQueryInner, } from "@/lib/utils"; import { notifications } from "@mantine/notifications"; -import { useWindowEvent } from "@mantine/hooks"; -import { useCombobox } from "@mantine/core"; export function komodo_client() { return KomodoClient(KOMODO_BASE_URL, { @@ -449,46 +447,6 @@ export function useTagsFilter() { return tags; } -export function useKeyListener( - listenKey: string, - onPress: () => void, - extra?: "shift" | "ctrl", -) { - useWindowEvent("keydown", (e) => { - // This will ignore Shift + listenKey if it is sent from input / textarea / monaco - const target = e.target as HTMLElement | null; - if ( - target?.matches("input") || - target?.matches("textarea") || - target?.matches("select") || - target?.role === "textbox" - ) { - return; - } - - if ( - e.key === listenKey && - (extra === "shift" - ? e.shiftKey - : extra === "ctrl" - ? e.ctrlKey || e.metaKey - : true) - ) { - e.preventDefault(); - onPress(); - } - }); -} - -export function useShiftKeyListener(listenKey: string, onPress: () => void) { - useKeyListener(listenKey, onPress, "shift"); -} - -/** Listens for ctrl (or CMD on mac) + the listenKey */ -export function useCtrlKeyListener(listenKey: string, onPress: () => void) { - useKeyListener(listenKey, onPress, "ctrl"); -} - export type WebhookIntegration = "Github" | "Gitlab"; export type WebhookIntegrations = { [key: string]: WebhookIntegration; @@ -531,28 +489,6 @@ export function useWebhookIdOrName() { return useAtom(WEBHOOK_ID_OR_NAME_ATOM); } -export type Dimensions = { width: number; height: number }; -export function useWindowDimensions() { - const [dimensions, setDimensions] = useState({ - width: 0, - height: 0, - }); - useEffect(() => { - const callback = () => { - setDimensions({ - width: window.screen.availWidth, - height: window.screen.availHeight, - }); - }; - callback(); - window.addEventListener("resize", callback); - return () => { - window.removeEventListener("resize", callback); - }; - }, []); - return dimensions; -} - const selectedResources = atomFamily((_: UsableResource) => atom([])); export function useSelectedResources(type: UsableResource) { return useAtom(selectedResources(type)); @@ -688,27 +624,6 @@ export function useContainerPortsMap(ports: Types.Port[]) { }, [ports]); } -/** - * A custom React hook that debounces a value, delaying its update until after - * a specified period of inactivity. This is useful for performance optimization - * in scenarios like search inputs, form validation, or API calls. - */ -export function useDebounce(value: T, delay: number): T { - const [debouncedValue, setDebouncedValue] = useState(value); - - useEffect(() => { - const handler = setTimeout(() => { - setDebouncedValue(value); - }, delay); - - return () => { - clearTimeout(handler); - }; - }, [value, delay]); - - return debouncedValue; -} - interface DashboardPreferences { showServerStats: boolean; showTables: boolean; @@ -788,35 +703,3 @@ function addUserTargetPermissions( } }); } - -export function useSearchCombobox(props?: { - onOpen?: () => void; - onClose?: () => void; - onSearch?: (search: string) => void; - disableSelectFirst?: boolean; -}) { - const [search, setSearch] = useState(""); - const combobox = useCombobox({ - onDropdownOpen: () => { - combobox.focusSearchInput(); - props?.onOpen?.(); - }, - onDropdownClose: () => { - combobox.resetSelectedOption(); - combobox.focusTarget(); - setSearch(""); - props?.onClose?.(); - }, - }); - useEffect(() => { - if (!props?.disableSelectFirst) { - combobox.selectFirstOption(); - } - props?.onSearch?.(search); - }, [search]); - return { - search, - setSearch, - combobox, - }; -} diff --git a/ui/src/pages/containers.tsx b/ui/src/pages/containers.tsx index 8fd5a1110..2def6741d 100644 --- a/ui/src/pages/containers.tsx +++ b/ui/src/pages/containers.tsx @@ -1,10 +1,10 @@ import ContainerPorts from "@/components/docker/container-ports"; import DockerResourceLink from "@/components/docker/link"; import { containerStateIntention } from "@/lib/color"; -import { useDebounce, useRead } from "@/lib/hooks"; +import { useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { filterBySplit } from "@/lib/utils"; -import { DataTable, SortableHeader } from "mogh_ui"; +import { DataTable, SortableHeader, useDebounce } from "mogh_ui"; import { Page } from "mogh_ui"; import { StatusBadge } from "mogh_ui"; import { Group, MultiSelect, Stack } from "@mantine/core"; diff --git a/ui/src/pages/profile/index.tsx b/ui/src/pages/profile/index.tsx index 68198bad6..5807561dc 100644 --- a/ui/src/pages/profile/index.tsx +++ b/ui/src/pages/profile/index.tsx @@ -15,7 +15,7 @@ import { EnrollPasskey } from "./passkey"; import { EnrollTotp } from "./totp"; import { EnableSwitch } from "mogh_ui"; import { PageGuard } from "mogh_ui"; -import EntityPage from "@/ui/entity-page"; +import { EntityPage } from "mogh_ui"; import ApiKeysSection from "@/components/api-keys/section"; import UserHeader from "@/components/user/header"; import { Section } from "mogh_ui"; diff --git a/ui/src/pages/resource.tsx b/ui/src/pages/resource.tsx index ab0aa6710..4a48f1993 100644 --- a/ui/src/pages/resource.tsx +++ b/ui/src/pages/resource.tsx @@ -19,7 +19,7 @@ import { Section } from "mogh_ui"; import { Group, Stack, Text } from "@mantine/core"; import { Types } from "komodo_client"; import { Link, useParams } from "react-router-dom"; -import EntityPage from "@/ui/entity-page"; +import { EntityPage } from "mogh_ui"; import { usableResourcePath } from "@/lib/utils"; import ResourceDescription from "@/resources/description"; import ResourceNotFound from "@/resources/not-found"; diff --git a/ui/src/pages/settings/providers/index.tsx b/ui/src/pages/settings/providers/index.tsx index e70189e3f..ec28d1f60 100644 --- a/ui/src/pages/settings/providers/index.tsx +++ b/ui/src/pages/settings/providers/index.tsx @@ -16,9 +16,7 @@ import DeleteProviderAccount from "./delete"; import ProvidersFromConfig from "./from-config"; import { CopyButton } from "mogh_ui"; import { Types } from "komodo_client"; -import SharedTextUpdate, { - useSharedTextUpdateData, -} from "@/ui/shared-text-update"; +import { SharedTextUpdate, useSharedTextUpdateData } from "mogh_ui"; import { SearchInput } from "mogh_ui"; export default function SettingsProviders() { diff --git a/ui/src/pages/settings/tags/color-selector.tsx b/ui/src/pages/settings/tags/color-selector.tsx index 72af4cde0..975cae4c5 100644 --- a/ui/src/pages/settings/tags/color-selector.tsx +++ b/ui/src/pages/settings/tags/color-selector.tsx @@ -1,5 +1,5 @@ -import { fmtUpperCamelcase } from "mogh_ui"; -import { useInvalidate, useSearchCombobox, useWrite } from "@/lib/hooks"; +import { fmtUpperCamelcase, useSearchCombobox } from "mogh_ui"; +import { useInvalidate, useWrite } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; import { diff --git a/ui/src/pages/settings/users/new-group.tsx b/ui/src/pages/settings/users/new-group.tsx index eca57bcb4..cf66b72c6 100644 --- a/ui/src/pages/settings/users/new-group.tsx +++ b/ui/src/pages/settings/users/new-group.tsx @@ -1,5 +1,5 @@ import { useInvalidate, useWrite } from "@/lib/hooks"; -import CreateModal from "@/ui/create-modal"; +import { CreateModal } from "mogh_ui"; import { TextInput } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useState } from "react"; diff --git a/ui/src/pages/settings/users/new-local-user.tsx b/ui/src/pages/settings/users/new-local-user.tsx index 3d8ed7911..70f96c2f4 100644 --- a/ui/src/pages/settings/users/new-local-user.tsx +++ b/ui/src/pages/settings/users/new-local-user.tsx @@ -1,5 +1,5 @@ import { useInvalidate, useWrite } from "@/lib/hooks"; -import CreateModal from "@/ui/create-modal"; +import { CreateModal } from "mogh_ui"; import { PasswordInput, TextInput } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useState } from "react"; diff --git a/ui/src/pages/settings/users/new-service-user.tsx b/ui/src/pages/settings/users/new-service-user.tsx index 2e46baab3..e4f31580c 100644 --- a/ui/src/pages/settings/users/new-service-user.tsx +++ b/ui/src/pages/settings/users/new-service-user.tsx @@ -1,5 +1,5 @@ import { useInvalidate, useWrite } from "@/lib/hooks"; -import CreateModal from "@/ui/create-modal"; +import { CreateModal } from "mogh_ui"; import { TextInput } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useState } from "react"; diff --git a/ui/src/pages/settings/variables/index.tsx b/ui/src/pages/settings/variables/index.tsx index 886a4c6fb..7545e425b 100644 --- a/ui/src/pages/settings/variables/index.tsx +++ b/ui/src/pages/settings/variables/index.tsx @@ -9,20 +9,11 @@ import { import { filterBySplit } from "@/lib/utils"; import { CopyButton } from "mogh_ui"; import { DataTable, SortableHeader } from "mogh_ui"; -import { - Badge, - Button, - Group, - Stack, - Switch, - Text, -} from "@mantine/core"; +import { Badge, Button, Group, Stack, Switch, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useState } from "react"; import DeleteVariable from "./delete"; -import SharedTextUpdate, { - useSharedTextUpdateData, -} from "@/ui/shared-text-update"; +import { SharedTextUpdate, useSharedTextUpdateData } from "mogh_ui"; import { CopyText } from "mogh_ui"; import { SearchInput } from "mogh_ui"; diff --git a/ui/src/pages/settings/variables/new.tsx b/ui/src/pages/settings/variables/new.tsx index 35135c318..ee14a9586 100644 --- a/ui/src/pages/settings/variables/new.tsx +++ b/ui/src/pages/settings/variables/new.tsx @@ -1,5 +1,5 @@ import { useInvalidate, useUser, useWrite } from "@/lib/hooks"; -import CreateModal from "@/ui/create-modal"; +import { CreateModal } from "mogh_ui"; import { TextInput } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useState } from "react"; diff --git a/ui/src/pages/terminals/new.tsx b/ui/src/pages/terminals/new.tsx index 7c7507496..65e79b346 100644 --- a/ui/src/pages/terminals/new.tsx +++ b/ui/src/pages/terminals/new.tsx @@ -3,11 +3,12 @@ import { useNavigate } from "react-router-dom"; import { Button, Grid, Popover, Select, Stack, TextInput } from "@mantine/core"; import { useDisclosure } from "@mantine/hooks"; import { Types } from "komodo_client"; -import { useRead, useShiftKeyListener, useWrite } from "@/lib/hooks"; +import { useRead, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import ResourceSelector from "@/resources/selector"; import ContainerSelector from "@/components/docker/container-selector"; import StackServiceSelector from "@/components/stack-service-selector"; +import { useShiftKeyListener } from "mogh_ui"; const TERMINAL_TYPES: Types.TerminalTarget["type"][] = [ "Server", diff --git a/ui/src/pages/user-group/add-user.tsx b/ui/src/pages/user-group/add-user.tsx index 7610aaa7d..30b48cfbe 100644 --- a/ui/src/pages/user-group/add-user.tsx +++ b/ui/src/pages/user-group/add-user.tsx @@ -1,14 +1,10 @@ import UserAvatar from "@/components/user-avatar"; -import { - useInvalidate, - useRead, - useSearchCombobox, - useWrite, -} from "@/lib/hooks"; +import { useInvalidate, useRead, useWrite } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; import { Button, Combobox, ComboboxProps } from "@mantine/core"; import { notifications } from "@mantine/notifications"; +import { useSearchCombobox } from "mogh_ui"; export interface UserGroupAddUserProps extends ComboboxProps { groupId: string; diff --git a/ui/src/pages/user-group/index.tsx b/ui/src/pages/user-group/index.tsx index ad99975b0..a4f33465e 100644 --- a/ui/src/pages/user-group/index.tsx +++ b/ui/src/pages/user-group/index.tsx @@ -2,8 +2,8 @@ import UserTable from "@/components/user/table"; import { useInvalidate, useRead, useUser, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { DividedChildren } from "mogh_ui"; -import EntityHeader from "@/ui/entity-header"; -import EntityPage from "@/ui/entity-page"; +import { EntityHeader } from "mogh_ui"; +import { EntityPage } from "mogh_ui"; import { PageGuard } from "mogh_ui"; import { Section } from "mogh_ui"; import { Group, Stack, Text } from "@mantine/core"; diff --git a/ui/src/pages/user/add-group.tsx b/ui/src/pages/user/add-group.tsx index cfcf35591..ef405f58f 100644 --- a/ui/src/pages/user/add-group.tsx +++ b/ui/src/pages/user/add-group.tsx @@ -1,13 +1,13 @@ import { useInvalidate, useRead, - useSearchCombobox, useWrite, } from "@/lib/hooks"; import { filterBySplit } from "@/lib/utils"; import { ICONS } from "@/lib/icons"; import { Button, Combobox, ComboboxProps, Group, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; +import { useSearchCombobox } from "mogh_ui"; export interface UserAddUserGroupProps extends ComboboxProps { userId: string; diff --git a/ui/src/pages/user/index.tsx b/ui/src/pages/user/index.tsx index b2ca29e49..5d3d1111f 100644 --- a/ui/src/pages/user/index.tsx +++ b/ui/src/pages/user/index.tsx @@ -1,6 +1,6 @@ import { useInvalidate, useRead, useUser, useWrite } from "@/lib/hooks"; import { ConfirmButton } from "mogh_ui"; -import EntityPage from "@/ui/entity-page"; +import { EntityPage } from "mogh_ui"; import { LabelledSwitch } from "mogh_ui"; import { PageGuard } from "mogh_ui"; import { Section } from "mogh_ui"; diff --git a/ui/src/resources/deployment/config/image.tsx b/ui/src/resources/deployment/config/image.tsx index f3e6cf9d1..d07d50f7a 100644 --- a/ui/src/resources/deployment/config/image.tsx +++ b/ui/src/resources/deployment/config/image.tsx @@ -1,5 +1,5 @@ import { fmtVersion } from "@/lib/formatting"; -import { useRead, useSearchCombobox } from "@/lib/hooks"; +import { useRead } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { filterBySplit } from "@/lib/utils"; import ResourceSelector from "@/resources/selector"; @@ -13,7 +13,7 @@ import { } from "@mantine/core"; import { Types } from "komodo_client"; import { ChevronsUpDown } from "lucide-react"; -import { fmtDate } from "mogh_ui"; +import { fmtDate, useSearchCombobox } from "mogh_ui"; export interface DeploymentImageConfigProps { image: Types.DeploymentImage | undefined; diff --git a/ui/src/resources/header.tsx b/ui/src/resources/header.tsx index e59babc43..5e86f043e 100644 --- a/ui/src/resources/header.tsx +++ b/ui/src/resources/header.tsx @@ -1,4 +1,4 @@ -import EntityHeader, { EntityHeaderProps } from "@/ui/entity-header"; +import { EntityHeader, EntityHeaderProps } from "mogh_ui"; import { UsableResource } from "."; import { useInvalidate, useWrite } from "@/lib/hooks"; import { notifications } from "@mantine/notifications"; diff --git a/ui/src/resources/new.tsx b/ui/src/resources/new.tsx index 5b6056ce1..5aa33d716 100644 --- a/ui/src/resources/new.tsx +++ b/ui/src/resources/new.tsx @@ -4,7 +4,7 @@ import { useRead, useWrite } from "@/lib/hooks"; import { UsableResource } from "."; import { notifications } from "@mantine/notifications"; import { usableResourcePath } from "@/lib/utils"; -import CreateModal from "@/ui/create-modal"; +import { CreateModal } from "mogh_ui"; import { Divider, Stack, Text, TextInput } from "@mantine/core"; import ResourceSelector from "./selector"; import { Types } from "komodo_client"; diff --git a/ui/src/resources/procedure/config/execution-selector.tsx b/ui/src/resources/procedure/config/execution-selector.tsx index 3526b77bb..73b83b6b2 100644 --- a/ui/src/resources/procedure/config/execution-selector.tsx +++ b/ui/src/resources/procedure/config/execution-selector.tsx @@ -5,7 +5,7 @@ import { Button, ButtonProps, Combobox, ComboboxProps } from "@mantine/core"; import { ChevronsUpDown } from "lucide-react"; import { fmtUpperCamelcase } from "mogh_ui"; import { ICONS } from "@/lib/icons"; -import { useSearchCombobox } from "@/lib/hooks"; +import { useSearchCombobox } from "mogh_ui"; export interface ProcedureExecutionSelectorProps extends ComboboxProps { type: Types.Execution["type"]; diff --git a/ui/src/resources/selector.tsx b/ui/src/resources/selector.tsx index e9b02524b..a526aeb18 100644 --- a/ui/src/resources/selector.tsx +++ b/ui/src/resources/selector.tsx @@ -15,7 +15,7 @@ import { filterBySplit } from "@/lib/utils"; import { ChevronsUpDown } from "lucide-react"; import { fmtResourceType } from "@/lib/formatting"; import { ICONS } from "@/lib/icons"; -import { useSearchCombobox } from "@/lib/hooks"; +import { useSearchCombobox } from "mogh_ui"; export interface ResourceSelectorProps extends ComboboxProps { type: UsableResource; diff --git a/ui/src/resources/sub-page.tsx b/ui/src/resources/sub-page.tsx index bd6e54559..9b6f4047a 100644 --- a/ui/src/resources/sub-page.tsx +++ b/ui/src/resources/sub-page.tsx @@ -1,7 +1,11 @@ import { UsableResource } from "."; -import EntityHeader, { EntityHeaderProps } from "@/ui/entity-header"; +import { + EntityHeader, + EntityHeaderProps, + EntityPage, + EntityPageProps, +} from "mogh_ui"; import { ReactNode } from "react"; -import EntityPage, { EntityPageProps } from "@/ui/entity-page"; import { Group, Stack, Text } from "@mantine/core"; import { DividedChildren } from "mogh_ui"; import ResourceLink from "./link"; @@ -73,7 +77,6 @@ export default function ResourceSubPage({ {canExecute && executions && (
} my="md" > diff --git a/ui/src/resources/swarm/new/config.tsx b/ui/src/resources/swarm/new/config.tsx index 1568dcb5d..38191d056 100644 --- a/ui/src/resources/swarm/new/config.tsx +++ b/ui/src/resources/swarm/new/config.tsx @@ -1,6 +1,6 @@ import { languageFromPath, MonacoEditor } from "@/components/monaco"; import { useExecute, useInvalidate, usePermissions } from "@/lib/hooks"; -import CreateModal from "@/ui/create-modal"; +import { CreateModal } from "mogh_ui"; import { Stack, Text, TextInput } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useMemo, useState } from "react"; diff --git a/ui/src/resources/swarm/new/secret.tsx b/ui/src/resources/swarm/new/secret.tsx index 443bc7c12..75f93d403 100644 --- a/ui/src/resources/swarm/new/secret.tsx +++ b/ui/src/resources/swarm/new/secret.tsx @@ -1,6 +1,6 @@ import { languageFromPath, MonacoEditor } from "@/components/monaco"; import { useExecute, useInvalidate, usePermissions } from "@/lib/hooks"; -import CreateModal from "@/ui/create-modal"; +import { CreateModal } from "mogh_ui"; import { Stack, Text, TextInput } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useMemo, useState } from "react"; diff --git a/ui/src/resources/tags.tsx b/ui/src/resources/tags.tsx index 6b208e2fd..777d1e8cd 100644 --- a/ui/src/resources/tags.tsx +++ b/ui/src/resources/tags.tsx @@ -1,12 +1,6 @@ import Tags from "@/components/tags"; import { tagColor } from "@/lib/color"; -import { - useInvalidate, - useRead, - useSearchCombobox, - useShiftKeyListener, - useWrite, -} from "@/lib/hooks"; +import { useInvalidate, useRead, useWrite } from "@/lib/hooks"; import { ICONS } from "@/lib/icons"; import { filterBySplit } from "@/lib/utils"; import { @@ -21,6 +15,7 @@ import { import { notifications } from "@mantine/notifications"; import { MinusCircle } from "lucide-react"; import { ResourceComponents, UsableResourceTarget } from "."; +import { useSearchCombobox, useShiftKeyListener } from "mogh_ui"; export const ResourceTags = ({ target, diff --git a/ui/src/ui/back-button.tsx b/ui/src/ui/back-button.tsx deleted file mode 100644 index 2dc4b5abd..000000000 --- a/ui/src/ui/back-button.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { ICONS } from "@/lib/icons"; -import { Button, ButtonProps } from "@mantine/core"; -import { Link } from "react-router-dom"; - -export interface BackButtonProps extends ButtonProps { - to?: string | number; -} - -export default function BackButton({ to = -1, ...props }: BackButtonProps) { - return ( - - ); -} diff --git a/ui/src/ui/config/confirm.tsx b/ui/src/ui/config/confirm.tsx index fafcb2ea2..0851808ab 100644 --- a/ui/src/ui/config/confirm.tsx +++ b/ui/src/ui/config/confirm.tsx @@ -2,7 +2,7 @@ import { MonacoDiffEditor, MonacoLanguage } from "@/components/monaco"; import { useState } from "react"; import { useDisclosure } from "@mantine/hooks"; import { Box, Button, Group, Modal, Stack, Text } from "@mantine/core"; -import { useCtrlKeyListener, useKeyListener } from "@/lib/hooks"; +import { useCtrlKeyListener, useKeyListener } from "mogh_ui"; import { fmtSnakeCaseToUpperSpaceCase } from "mogh_ui"; import { ICONS } from "@/lib/icons"; import { deepCompare, envToText } from "@/lib/utils"; diff --git a/ui/src/ui/create-modal.tsx b/ui/src/ui/create-modal.tsx deleted file mode 100644 index ea6c08b62..000000000 --- a/ui/src/ui/create-modal.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { useShiftKeyListener } from "@/lib/hooks"; -import { ICONS } from "@/lib/icons"; -import { - Button, - ButtonProps, - Group, - Modal, - ModalBaseProps, - Stack, - Text, -} from "@mantine/core"; -import { useDisclosure } from "@mantine/hooks"; -import { ReactNode, useEffect } from "react"; - -export interface CreateModalProps extends ButtonProps { - entityType: string; - configSection: (close: () => void) => ReactNode; - loading?: boolean; - onConfirm: () => Promise; - onOpenChange?: (opened: boolean) => void; - configureLabel?: string; - openShiftKeyListener?: string; - children?: ReactNode; - modalSize?: ModalBaseProps["size"]; -} - -export default function CreateModal({ - entityType, - configSection, - disabled, - loading, - onConfirm, - onOpenChange, - configureLabel = "a unique name", - openShiftKeyListener, - leftSection, - children, - modalSize = "md", - ...targetProps -}: CreateModalProps) { - const [opened, { open, close }] = useDisclosure(); - useEffect(() => onOpenChange?.(opened), [opened]); - useShiftKeyListener( - openShiftKeyListener ?? "___", - () => openShiftKeyListener && !opened && open(), - ); - return ( - <> - - - - Enter {configureLabel} for the new {entityType}. - - - {configSection(close)} - - - - - - - - - - ); -} diff --git a/ui/src/ui/entity-header.tsx b/ui/src/ui/entity-header.tsx deleted file mode 100644 index dbad012f7..000000000 --- a/ui/src/ui/entity-header.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import { ICONS } from "@/lib/icons"; -import { ActionIcon, Group, Stack, Text, TextInput } from "@mantine/core"; -import { ColorIntention, hexColorByIntention } from "mogh_ui"; -import { FC, ReactNode, useEffect, useState } from "react"; - -export interface EntityHeaderProps { - name?: string; - icon: FC<{ size?: string | number; color?: string }>; - intent: ColorIntention; - state?: ReactNode; - status?: ReactNode; - action?: ReactNode; - onRename?: (name: string) => Promise; - renamePending?: boolean; -} - -export default function EntityHeader({ - name, - icon: Icon, - intent, - state, - status, - action, - onRename: _onRename, - renamePending, -}: EntityHeaderProps) { - const [editingName, setEditingName] = useState(false); - const [newName, setNewName] = useState(name); - useEffect(() => { - setNewName(name); - }, [name]); - const color = hexColorByIntention(intent); - const background = color ? color + "25" : undefined; - const onRename = - _onRename && - (() => { - if (!newName) return; - if (name === newName) { - setEditingName(false); - } else { - _onRename(newName).then(() => setEditingName(false)); - } - }); - return ( - - - - - {name && !onRename && ( - - {name} - - )} - {onRename && ( - setEditingName(true)} - style={{ cursor: editingName ? undefined : "pointer" }} - > - {!editingName && ( - <> - - {name} - - - - - - )} - {editingName && ( - <> - setNewName(e.target.value)} - onKeyDown={(e) => e.key === "Enter" && onRename()} - disabled={renamePending} - size="lg" - autoFocus - /> - - - - { - setNewName(name); - setEditingName(false); - }} - > - - - - )} - - )} - - - {state} - - {status} - - - - {action} - - ); -} diff --git a/ui/src/ui/entity-page.tsx b/ui/src/ui/entity-page.tsx deleted file mode 100644 index 74f903782..000000000 --- a/ui/src/ui/entity-page.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Group, Stack, StackProps } from "@mantine/core"; -import BackButton from "./back-button"; -import { ReactNode } from "react"; - -export interface EntityPageProps extends StackProps { - backTo?: string; - actions?: ReactNode; -} - -export default function EntityPage({ - backTo, - actions, - children, - ...props -}: EntityPageProps) { - return ( - - - - {actions && {actions}} - - {children} - - ); -} diff --git a/ui/src/ui/shared-text-update.tsx b/ui/src/ui/shared-text-update.tsx deleted file mode 100644 index 913e311bb..000000000 --- a/ui/src/ui/shared-text-update.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { - Button, - Group, - Modal, - ModalProps, - Stack, - Text, - Textarea, -} from "@mantine/core"; -import { CheckCircle } from "lucide-react"; -import { Dispatch, ReactNode, SetStateAction, useState } from "react"; - -export interface SharedTextUpdateData { - title: string; - value: string; - placeholder: string; - onUpdate: (value: string) => void; - titleRight?: ReactNode; -} - -export function useSharedTextUpdateData() { - return useState(false); -} - -export interface SharedTextUpdateProps extends Omit< - Omit, - "onClose" -> { - data: false | SharedTextUpdateData; - setData: Dispatch>; - disabled?: boolean; -} - -export default function SharedTextUpdate({ - data, - setData, - disabled, - ...modalProps -}: SharedTextUpdateProps) { - return ( - - {data.title} - {data.titleRight} - - ) : ( - {data.title} - )) - } - opened={!!data} - onClose={() => setData(false)} - size="xl" - {...modalProps} - > - {data && ( - -