Save plot validation

build/lib/stylelint/vscode-known-variables.json

@@ -574,7 +574,6 @@
 		"--vscode-positronModalDialog-defaultButtonForeground",
 		"--vscode-positronModalDialog-defaultButtonHoverBackground",
 		"--vscode-positronModalDialog-foreground",
-		"--vscode-positronModalDialog-formBorder",
 		"--vscode-positronModalDialog-separator",
 		"--vscode-positronModalDialog-textInputBackground",
 		"--vscode-positronModalDialog-textInputBorder",

src/vs/base/browser/ui/positronComponents/progressBar.css

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2024 Posit Software, PBC. All rights reserved.
+ *--------------------------------------------------------------------------------------------*/
+
+.progress-bar-item {
+	height: 2px;
+	width: 100%;
+}

src/vs/base/browser/ui/positronComponents/progressBar.tsx

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2022 Posit Software, PBC. All rights reserved.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as React from 'react';
+import 'vs/css!./progressBar';
+
+export interface ProgressBarProps {
+	value?: number;
+}
+
+export const ProgressBar = (props: ProgressBarProps) => {
+	return (
+		<progress className='progress-bar-item' value={props.value} />
+	);
+};

src/vs/workbench/browser/positronComponents/positronModalDialog/components/labeledFolderInput.css

@@ -43,6 +43,8 @@
 	outline: 1px solid var(--vscode-focusBorder) !important;
 }
 
-.positron-modal-dialog-box .labeled-folder-input div.error {
+.positron-modal-dialog-box .labeled-folder-input span.error {
 	color: var(--vscode-errorForeground);
+	height: 1em;
+	display: block
 }

src/vs/workbench/browser/positronComponents/positronModalDialog/components/labeledFolderInput.tsx

@@ -8,6 +8,7 @@ import 'vs/css!./labeledFolderInput';
 // React.
 import * as React from 'react';
 import { ChangeEventHandler } from 'react'; // eslint-disable-line no-duplicate-imports
+import { localize } from 'vs/nls';
 
 // Other dependencies.
 import { Button } from 'vs/base/browser/ui/positronComponents/button/button';
@@ -18,7 +19,10 @@ import { Button } from 'vs/base/browser/ui/positronComponents/button/button';
 export interface LabeledFolderInputProps {
 	label: string;
 	value: string;
-	error?: string;
+	error?: boolean;
+	placeholder?: string;
+	readOnlyInput?: boolean;
+	inputRef?: React.RefObject<HTMLInputElement>;
 	onBrowse: VoidFunction;
 	onChange: ChangeEventHandler<HTMLInputElement>;
 }
@@ -32,15 +36,18 @@ export const LabeledFolderInput = (props: LabeledFolderInputProps) => {
 	return (
 		<div className='labeled-folder-input'>
 			<label>
-				{props.label}: {props.error && <span className='error'>{props.error}</span>}
+				{props.label}
 				<div className='folder-input'>
-					<input className='text-input' readOnly type='text' value={props.value} onChange={props.onChange} />
+					<input className='text-input' readOnly={props.readOnlyInput} placeholder={props.placeholder} type='text' value={props.value} onChange={props.onChange} />
 					<Button className='browse-button' onPressed={props.onBrowse}>
-						Browse...
+					{localize('positronFolderInputBrowse', 'Browse...')}
 					</Button>
 				</div>
 			</label>
 		</div>
 	);
 };
 
+LabeledFolderInput.defaultProps = {
+	readOnlyInput: true
+};

src/vs/workbench/browser/positronComponents/positronModalDialog/components/labeledTextInput.css

@@ -6,14 +6,21 @@
 	width: 100%;
 }
 
+.positron-modal-dialog-box .labeled-text-input label {
+	display: flex;
+	flex-direction: column;
+}
+
 .positron-modal-dialog-box .labeled-text-input .text-input {
 	margin-top: 4px;
 }
 
-.positron-modal-dialog-box .labeled-text-input div.error {
+.positron-modal-dialog-box .labeled-text-input span.error {
 	color: var(--vscode-errorForeground);
+	height: 1em;
+	display: block;
 }
 
 .positron-modal-dialog-box .labeled-text-input input.error {
-	border-color: var(--vscode-inputValidation-errorBorder);
+	border-color: var(--vscode-errorForeground);
 }

src/vs/workbench/browser/positronComponents/positronModalDialog/components/labeledTextInput.tsx

@@ -20,7 +20,7 @@ export interface LabeledTextInputProps {
 	max?: number;
 	min?: number;
 	type?: 'text' | 'number';
-	error?: string;
+	error?: boolean;
 	onChange: ChangeEventHandler<HTMLInputElement>;
 }
 
@@ -31,8 +31,8 @@ export const LabeledTextInput = forwardRef<HTMLInputElement, LabeledTextInputPro
 	// Render.
 	return (
 		<div className='labeled-text-input'>
-			<label>
-				{props.label}: {props.error && <span className='error'>{props.error}</span>}
+			<label className='label'>
+				{props.label}
 				<input className={positronClassNames('text-input', { 'error': props.error })} ref={ref} type={props.type} value={props.value}
 					autoFocus={props.autoFocus} onChange={props.onChange} max={props.max} min={props.min} />
 			</label>

src/vs/workbench/contrib/positronPlots/browser/modalDialogs/savePlotModalDialog.css

@@ -4,37 +4,49 @@
 
 .plot-preview-input {
 	height: 100%;
-	grid-template-columns: repeat(2, 1fr);
-	grid-template-rows: 1fr 2fr 0.5fr 9fr;
+	grid-template-rows: 1fr 2fr 4px 9fr;
 	grid-template-areas:
-		"browse browse"
-		"resolution dpi"
-		"preview-progress preview-progress"
-		"preview preview";
+		"browse"
+		"plot-input"
+		"preview-progress"
+		"preview";
 	grid-gap: 10px;
 	display: grid;
 }
 
-.plot-preview-input .browse {
-	grid-area: browse;
+.plot-preview-input .plot-input {
+	grid-area: plot-input;
+	display: grid;
+	grid-template-columns: repeat(3, auto);
+	grid-template-areas:
+		"input input input"
+		"error error error";
+	justify-content: space-between;
 }
 
-.plot-preview-input .resolution {
-	grid-area: resolution;
-	width: 70px;
+.plot-input input {
+	grid-area: input;
 }
 
-.plot-preview-input .dpi {
-	grid-area: dpi;
-	width: 70px;
+.plot-input div.error {
+	padding-top: 4px;
+	grid-column: 1 / span 3;
+	display: flex;
+	flex-direction: column;
+	color: var(--vscode-errorForeground);
 }
 
-.plot-preview-input .preview {
-	grid-area: preview;
+.plot-preview-input .labeled-text-input {
+	width: auto;
+}
+
+.plot-preview-input .labeled-text-input input {
+	width: 100px;
 }
 
 .plot-preview-input .preview-progress {
 	grid-area: preview-progress;
+	display: flex;
 }
 
 .plot-preview-container {
@@ -72,20 +84,7 @@ img.plot-preview {
 .plot-preview-image-container {
 	overflow: hidden;
 	padding: 2px;
-}
-
-.plot-preview-image-container fieldset {
-	height: 100%;
-	border-color: var(--vscode-positronModalDialog-formBorder);
-	border-width: thin;
-	border-radius: 4px;
-	background-color: var(--vscode-positronModalDialog-contrastBackground);
-}
-
-div.plot-preview-image-wrapper {
-	height: 100%;
-	overflow: hidden;
-	padding: 4px;
+	grid-area: preview;
 }
 
 .plot-save-dialog-action-bar .left,