Skip to content

Commit

Permalink
Added Settings Dialog with configurable extension settings, fixed top…
Browse files Browse the repository at this point in the history
…ic issue in subscribe view disconnection. (#16)

* Updated to match vsc style, closes #8

* added automatic broker disconnection on inactivity + Settings Context

* 0.0.5

* Added Settings Dialog, closes #13 + prevent from losing topics on disconnect

* 0.0.6

* minor updates
  • Loading branch information
cyrus2281 authored Oct 17, 2024
1 parent 671b768 commit 80e45be
Show file tree
Hide file tree
Showing 10 changed files with 294 additions and 88 deletions.
15 changes: 9 additions & 6 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,20 @@

All notable changes to the "solace-try-me-vsc-extension" extension will be documented in this file.

## [0.0.5] - 2024-10-17
- Added color theme sync with VS Code, added automatic broker disconnection on inactivity, other small enhancements and bug fixes
## [0.0.6] - 2024-10-17
- Added Settings Dialog with configurable extension settings, fixed topic issue in subscribe view disconnection.

## [0.0.5] - 2024-10-16
- Added color theme sync with VS Code, added automatic broker disconnection on inactivity, other small enhancements and bug fixes.

## [0.0.4] - 2024-10-15
- Added support to open multiple SolaceTryMe Tabs in new windows
- Added support to open multiple SolaceTryMe Tabs in new windows.

## [0.0.3] - 2024-10-12
- Added support for config sync across multiple windows
- Added support for config sync across multiple windows.

## [0.0.2] - 2024-10-11
- Added JSON pretty print + Fix Ctrl+C/V/A issue + Fix modal force focus issue + Removed Max width from messages
- Added JSON pretty print + Fix Ctrl+C/V/A issue + Fix modal force focus issue + Removed Max width from messages.

## [0.0.1] - 2024-10-10
- Initial release of solace-try-me-vsc-extension
- Initial release of solace-try-me-vsc-extension.
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "solace-try-me-vsc-extension",
"displayName": "Solace Try Me VSC Extension",
"description": "VSC built-in tool to visualize and observe events flowing through Solace PubSub+ Broker.",
"version": "0.0.5",
"version": "0.0.6",
"publisher": "solace-tools",
"author": {
"name": "Cyrus Mobini"
Expand Down
4 changes: 2 additions & 2 deletions webview/src/ConfigView/ConfigModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,10 @@ const ConfigModal = ({
<ModalContent>
{(onModalClose) => (
<>
<ModalHeader className="flex flex-col gap-1">
<ModalHeader>
Add Solace Broker Configuration
</ModalHeader>
<ModalBody>
<ModalBody className="flex flex-col gap-4">
<Input
type="text"
label="Title"
Expand Down
85 changes: 58 additions & 27 deletions webview/src/ConfigView/ConfigView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,22 @@ import {
TableCell,
Tooltip,
} from "@nextui-org/react";
import { Pencil, Trash2, RefreshCcw } from "lucide-react";
import { Pencil, Trash2, RefreshCcw, Settings } from "lucide-react";

import { BrokerConfig } from "../Shared/interfaces";
import { getVscConfig, setVscConfig } from "../Shared/utils";
import ConfigModal from "./ConfigModal";
import SettingsView from "./SettingsView";
import { useSettings } from "../Shared/components/SettingsContext";

const ConfigView = () => {
const { setSettings } = useSettings();
const [brokerConfigs, setBrokerConfigs] = useState<BrokerConfig[]>([]);
const [selectedConfig, setSelectedConfig] = useState<BrokerConfig | null>(
null
);
const [showModal, setShowModal] = useState(false);
const [showBrokerModal, setShowBrokerModal] = useState(false);
const [showSettingsModal, setShowSettingsModal] = useState(false);

useEffect(() => {
getVscConfig().then((state) => {
Expand All @@ -47,30 +51,55 @@ const ConfigView = () => {
<div className="flex justify-between align-center mb-2">
<h2>Solace Broker Configurations</h2>
<div className="flex gap-2 flex-wrap">
<Button radius="sm"
size="sm"
isIconOnly
onClick={() => {
getVscConfig().then((state) => {
setBrokerConfigs(state?.brokerConfigs || []);
});
}}
>
<RefreshCcw size={14} />
</Button>
<Button radius="sm"
size="sm"
onClick={() => {
setSelectedConfig(null);
setShowModal(true);
}}
>
New Config
</Button>
<div className="flex gap-2 justify-between w-full">
<Tooltip content="Sync Configurations">
<Button
radius="sm"
size="sm"
isIconOnly
className="w-full"
onClick={() => {
getVscConfig().then((state) => {
if (state?.brokerConfigs)
setBrokerConfigs(state.brokerConfigs);
if (state?.settings) setSettings(state.settings);
});
}}
>
<RefreshCcw size={14} />
</Button>
</Tooltip>
<Tooltip content="Extension Settings">
<Button
radius="sm"
size="sm"
isIconOnly
className="w-full"
onClick={() => setShowSettingsModal(true)}
>
<Settings size={14} />
</Button>
</Tooltip>
</div>
<Button
radius="sm"
size="sm"
className="w-full"
onClick={() => {
setSelectedConfig(null);
setShowBrokerModal(true);
}}
>
New Config
</Button>
</div>
</div>
<SettingsView
show={showSettingsModal}
onClose={() => setShowSettingsModal(false)}
/>
<ConfigModal
show={showModal}
show={showBrokerModal}
initialConfig={selectedConfig}
onClose={(newConfig) => {
if (newConfig) {
Expand All @@ -85,7 +114,7 @@ const ConfigView = () => {
}
}
setSelectedConfig(null);
setShowModal(false);
setShowBrokerModal(false);
}}
/>
<Table
Expand All @@ -110,20 +139,22 @@ const ConfigView = () => {
<TableCell>{broker.username}</TableCell>
<TableCell className="flex gap-2">
<Tooltip content="Edit Broker Config">
<Button radius="sm"
<Button
radius="sm"
isIconOnly
className="text-default-400 active:opacity-50"
variant="light"
onClick={() => {
setSelectedConfig(broker);
setShowModal(true);
setShowBrokerModal(true);
}}
>
<Pencil />
</Button>
</Tooltip>
<Tooltip color="danger" content="Delete Broker Config">
<Button radius="sm"
<Button
radius="sm"
isIconOnly
className="text-danger active:opacity-50"
variant="light"
Expand Down
135 changes: 135 additions & 0 deletions webview/src/ConfigView/SettingsView.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
import { Button, Input } from "@nextui-org/react";

import {
ModalBody,
Modal,
ModalContent,
ModalFooter,
ModalHeader,
} from "../Shared/components/Modal";
import { useSettings } from "../Shared/components/SettingsContext";
import { DEFAULT_SETTINGS } from "../Shared/constants";

const getInteger = (value: string, min=0) => {
return Math.max(Math.abs(parseInt(value) || 0), min);
};

const SettingsView = ({
show,
onClose,
}: {
show: boolean;
onClose: () => void;
}) => {
const {
settings: {
maxDisplayMessages,
maxPayloadLength,
maxPropertyLength,
brokerDisconnectTimeout,
},
setSettings,
} = useSettings();

const resetSettings = () => {
setSettings(DEFAULT_SETTINGS);
};

return (
<Modal
isOpen={show}
placement="center"
onOpenChange={(open) => {
if (!open) {
onClose();
}
}}
>
<ModalContent>
{(onModalClose) => (
<>
<ModalHeader>
Solace Try Me Extension Settings
</ModalHeader>
<ModalBody className="flex flex-col gap-4">
<Input
type="number"
label="Maximum number of visible messages"
value={maxDisplayMessages.toString()}
onChange={(e) =>
setSettings((prev) => ({
...prev,
maxDisplayMessages: getInteger(e.target.value, 1),
}))
}
max={1000}
min={1}
step={1}
/>
<Input
type="number"
label="Maximum visible payload length"
value={maxPayloadLength.toString()}
onChange={(e) =>
setSettings((prev) => ({
...prev,
maxPayloadLength: getInteger(e.target.value, 1),
}))
}
min={100}
step={50}
/>
<Input
type="number"
label="Maximum visible property length"
value={maxPropertyLength.toString()}
onChange={(e) =>
setSettings((prev) => ({
...prev,
maxPropertyLength: getInteger(e.target.value, 5),
}))
}
min={5}
step={5}
/>
<Input
type="number"
className="no-wrap"
label="Automatic broker disconnection after inactivity (minutes) "
value={(brokerDisconnectTimeout / 1000 / 60).toString()}
onChange={(e) =>
setSettings((prev) => ({
...prev,
brokerDisconnectTimeout: getInteger(e.target.value, 1) * 1000 * 60,
}))
}
min={1}
step={1}
/>
</ModalBody>
<ModalFooter>
<Button
radius="sm"
color="danger"
variant="light"
onPress={onModalClose}
>
Close
</Button>
<Button
radius="sm"
color="secondary"
variant="light"
onPress={resetSettings}
>
Reset to Default
</Button>
</ModalFooter>
</>
)}
</ModalContent>
</Modal>
);
};

export default SettingsView;
Loading

0 comments on commit 80e45be

Please sign in to comment.