Skip to content

Commit 2093ded

Browse files
SpicyPeteSpicyPete
committed
More polishing
1 parent b2d2fcb commit 2093ded

5 files changed

Lines changed: 72 additions & 73 deletions

File tree

‎frontend/src/components/pages/rp-connect/onboarding/add-secrets-dialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const AddSecretsDialog = ({
4040

4141
return (
4242
<Dialog onOpenChange={onClose} open={isOpen}>
43-
<DialogContent>
43+
<DialogContent size="lg">
4444
<DialogHeader>
4545
<DialogTitle>Add secrets</DialogTitle>
4646
<DialogDescription>Add secrets to your pipeline.</DialogDescription>

‎frontend/src/components/pages/rp-connect/pipeline/list.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -334,24 +334,25 @@ const createColumns = ({
334334
}: CreateColumnsOptions): ColumnDef<Pipeline>[] => [
335335
{
336336
accessorKey: 'name',
337-
header: 'Pipeline Name',
337+
header: 'Pipeline',
338338
filterFn: createFilterFn('text'),
339339
cell: ({ row }) => {
340-
const description = row.original.description?.trim();
340+
const id = row.original.id;
341+
const name = row.getValue('name') as string;
341342
return (
342343
<div className="flex max-w-[200px] flex-col gap-0.5 overflow-hidden">
343344
<Link
344345
as={TanStackRouterLink}
345346
className="block truncate text-base text-primary"
346-
params={{ pipelineId: encodeURIComponent(row.original.id) }}
347-
title={row.getValue('name')}
347+
params={{ pipelineId: encodeURIComponent(id) }}
348+
title={name}
348349
to="/rp-connect/$pipelineId"
349350
>
350-
{row.getValue('name')}
351+
{name}
351352
</Link>
352-
{description ? (
353-
<span className="truncate text-muted-foreground text-xs" title={description}>
354-
{description}
353+
{id !== name ? (
354+
<span className="truncate font-mono text-muted-foreground text-xs" title={id}>
355+
{id}
355356
</span>
356357
) : null}
357358
</div>

‎frontend/src/components/pages/rp-connect/pipelines-create.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -391,6 +391,15 @@ export const PipelineEditor = (p: {
391391
};
392392
}, [secretAutocomplete, contextualVarsAutocomplete]);
393393

394+
// Monaco reads `defaultValue` only at mount, so external updates (applying a
395+
// template, restoring stashed YAML) must be pushed in imperatively. The guard
396+
// skips normal typing, where `p.yaml` already equals the editor's content.
397+
useEffect(() => {
398+
if (editorInstance && editorInstance.getValue() !== p.yaml) {
399+
editorInstance.setValue(p.yaml);
400+
}
401+
}, [editorInstance, p.yaml]);
402+
394403
return (
395404
<Tabs
396405
tabs={[
@@ -406,9 +415,9 @@ export const PipelineEditor = (p: {
406415
defaultValue={p.yaml}
407416
language="yaml"
408417
onChange={(e) => {
409-
if (e) {
410-
p.onChange?.(e);
411-
}
418+
// Propagate empty content too — clearing the editor must
419+
// flip `isEditorPristine` so the template CTA can re-appear.
420+
p.onChange?.(e ?? '');
412421
}}
413422
onMount={async (editorRef, monacoInst) => {
414423
setEditorInstance(editorRef);

‎frontend/src/components/pages/rp-connect/pipelines-list.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ class RpConnectPipelinesList extends PageComponent<{}> {
214214
size: 100,
215215
},
216216
{
217-
header: 'Pipeline Name',
217+
header: 'Pipeline',
218218
cell: ({ row: { original } }) => (
219219
<Link
220220
params={{ pipelineId: encodeURIComponentPercents(original.id) }}

‎frontend/src/components/ui/secret/quick-add-secrets.tsx‎

Lines changed: 49 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { Alert, AlertDescription, AlertTitle } from 'components/redpanda-ui/comp
1818
import { Button } from 'components/redpanda-ui/components/button';
1919
import { Card, CardContent, CardHeader, CardTitle, CardVariant } from 'components/redpanda-ui/components/card';
2020
import { Field, FieldDescription, FieldError, FieldLabel } from 'components/redpanda-ui/components/field';
21-
import { Input, InputEnd } from 'components/redpanda-ui/components/input';
21+
import { Input } from 'components/redpanda-ui/components/input';
2222
import { Text } from 'components/redpanda-ui/components/typography';
2323
import { Check, Key, Loader2, Plus, X } from 'lucide-react';
2424
import { CreateSecretRequestSchema } from 'protogen/redpanda/api/console/v1alpha1/secret_pb';
@@ -281,58 +281,45 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
281281
</AlertDescription>
282282
</Alert>
283283

284-
<div className="space-y-4">
285-
<div className="flex flex-col gap-2">
286-
<form key={formKey} className="space-y-5" onSubmit={form.handleSubmit(handleCreateSecrets)}>
287-
{missingSecrets.map((normalizedSecretName) => {
288-
const fieldName = `${normalizedSecretName}.value` as keyof SecretFormData;
289-
const error = form.formState.errors[normalizedSecretName]?.value;
290-
const nameId = `secret-name-${normalizedSecretName}`;
291-
const valueId = `secret-value-${normalizedSecretName}`;
292-
293-
return (
294-
<div className="flex flex-col gap-2" key={normalizedSecretName}>
295-
<Field>
296-
<FieldLabel className="font-medium text-muted-foreground text-xs" htmlFor={nameId}>
297-
Secret name
298-
</FieldLabel>
299-
<Input className="font-mono" disabled id={nameId} readOnly value={normalizedSecretName} />
300-
</Field>
301-
<Field data-invalid={!!error}>
302-
<FieldLabel className="font-medium text-muted-foreground text-xs" htmlFor={valueId}>
303-
Secret value
304-
</FieldLabel>
305-
<Input
306-
id={valueId}
307-
placeholder="Enter the secret value"
308-
type="password"
309-
{...form.register(fieldName)}
310-
aria-describedby={error ? `${valueId}-error` : undefined}
311-
aria-invalid={!!error}
312-
/>
313-
{!!error && <FieldError id={`${valueId}-error`}>{error.message}</FieldError>}
314-
</Field>
315-
</div>
316-
);
317-
})}
318-
319-
<Button className="w-full" disabled={form.formState.isSubmitting} type="submit" variant="primary">
320-
{form.formState.isSubmitting ? (
321-
<div className="flex items-center gap-2">
322-
<Loader2 className="h-4 w-4 animate-spin" />
323-
<Text as="span">Creating...</Text>
324-
</div>
325-
) : (
326-
<>
327-
<Plus className="h-4 w-4" />
328-
Create {missingSecrets.length} secret
329-
{missingSecrets.length > 1 ? 's' : ''}
330-
</>
331-
)}
332-
</Button>
333-
</form>
334-
</div>
335-
</div>
284+
<form key={formKey} className="space-y-4" onSubmit={form.handleSubmit(handleCreateSecrets)}>
285+
{missingSecrets.map((normalizedSecretName) => {
286+
const fieldName = `${normalizedSecretName}.value` as keyof SecretFormData;
287+
const error = form.formState.errors[normalizedSecretName]?.value;
288+
const valueId = `secret-value-${normalizedSecretName}`;
289+
290+
return (
291+
<Field data-invalid={!!error} key={normalizedSecretName}>
292+
<FieldLabel className="font-medium font-mono text-sm" htmlFor={valueId}>
293+
{normalizedSecretName}
294+
</FieldLabel>
295+
<Input
296+
id={valueId}
297+
placeholder="Enter value"
298+
type="password"
299+
{...form.register(fieldName)}
300+
aria-describedby={error ? `${valueId}-error` : undefined}
301+
aria-invalid={!!error}
302+
/>
303+
{!!error && <FieldError id={`${valueId}-error`}>{error.message}</FieldError>}
304+
</Field>
305+
);
306+
})}
307+
308+
<Button className="w-full" disabled={form.formState.isSubmitting} type="submit" variant="primary">
309+
{form.formState.isSubmitting ? (
310+
<div className="flex items-center gap-2">
311+
<Loader2 className="h-4 w-4 animate-spin" />
312+
<Text as="span">Creating...</Text>
313+
</div>
314+
) : (
315+
<>
316+
<Plus className="h-4 w-4" />
317+
Create {missingSecrets.length} secret
318+
{missingSecrets.length > 1 ? 's' : ''}
319+
</>
320+
)}
321+
</Button>
322+
</form>
336323
</>
337324
);
338325

@@ -341,14 +328,16 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
341328
{/* Display newly created secrets */}
342329
{newlyCreatedSecrets.length > 0 && (
343330
<div className="space-y-2">
344-
<Text className="font-medium text-muted-foreground text-sm">Created secrets:</Text>
345-
<div className="space-y-2">
331+
<Text className="font-medium text-muted-foreground text-sm">Created secrets</Text>
332+
<div className="flex flex-col gap-1.5">
346333
{newlyCreatedSecrets.map((secretName) => (
347-
<Input className="font-mono" disabled key={secretName} readOnly value={secretName}>
348-
<InputEnd>
349-
<Check className="h-4 w-4 text-green-600" />
350-
</InputEnd>
351-
</Input>
334+
<div
335+
className="flex items-center gap-2 rounded-md border border-green-600/30 bg-green-600/5 px-3 py-2"
336+
key={secretName}
337+
>
338+
<Check className="h-4 w-4 shrink-0 text-green-600" />
339+
<Text className="font-mono text-sm">{secretName}</Text>
340+
</div>
352341
))}
353342
</div>
354343
</div>

0 commit comments

Comments
 (0)