Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit5b9c404

Browse files
authored
feat: add form_type error (#18067)
Normally parameters had red text for error diagnostics. The goal here isto make errors more obvious when the form_type is error meaning theparameter could not be processed correctly.<img width="543" alt="Screenshot 2025-05-27 at 18 35 50"src="https://github.com/user-attachments/assets/2265553e-34a3-4526-8209-6253d541f784"/>
1 parent9fc3329 commit5b9c404

File tree

3 files changed

+82
-50
lines changed

3 files changed

+82
-50
lines changed

‎site/src/modules/workspaces/DynamicParameter/DynamicParameter.stories.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,32 @@ export const Slider: Story = {
156156
},
157157
};
158158

159+
exportconstErrorFormType:Story={
160+
args:{
161+
parameter:{
162+
...MockPreviewParameter,
163+
form_type:"error",
164+
type:"string",
165+
diagnostics:[
166+
{
167+
severity:"error",
168+
summary:"This is an error",
169+
detail:
170+
"This is a longer error message. This is a longer error message. This is a longer error message. This is a longer error message. This is a longer error message. This is a longer error message.",
171+
extra:{code:""},
172+
},
173+
{
174+
severity:"error",
175+
summary:"This is an error",
176+
detail:
177+
"This is a longer error message. This is a longer error message. This is a longer error message. This is a longer error message. This is a longer error message. This is a longer error message.",
178+
extra:{code:""},
179+
},
180+
],
181+
},
182+
},
183+
};
184+
159185
exportconstDisabled:Story={
160186
args:{
161187
parameter:{

‎site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,13 @@ import {
3434
}from"components/Tooltip/Tooltip";
3535
import{useDebouncedValue}from"hooks/debounce";
3636
import{useEffectEvent}from"hooks/hookPolyfills";
37-
import{Info,LinkIcon,Settings,TriangleAlert}from"lucide-react";
37+
import{
38+
CircleAlert,
39+
Info,
40+
LinkIcon,
41+
Settings,
42+
TriangleAlert,
43+
}from"lucide-react";
3844
import{typeFC,useEffect,useId,useRef,useState}from"react";
3945
importtype{AutofillBuildParameter}from"utils/richParameters";
4046
import*asYupfrom"yup";
@@ -89,7 +95,9 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
8995
/>
9096
)}
9197
</div>
92-
<ParameterDiagnosticsdiagnostics={parameter.diagnostics}/>
98+
{parameter.form_type!=="error"&&(
99+
<ParameterDiagnosticsdiagnostics={parameter.diagnostics}/>
100+
)}
93101
</div>
94102
);
95103
};
@@ -508,6 +516,8 @@ const ParameterField: FC<ParameterFieldProps> = ({
508516
<spanclassName="w-4 font-medium">{parameter.value.value}</span>
509517
</div>
510518
);
519+
case"error":
520+
return<Diagnosticsdiagnostics={parameter.diagnostics}/>;
511521
}
512522
};
513523

@@ -832,3 +842,45 @@ const parameterError = (
832842
(match)=>r.get(match)||"",
833843
);
834844
};
845+
846+
interfaceDiagnosticsProps{
847+
diagnostics:PreviewParameter["diagnostics"];
848+
}
849+
850+
// Displays a diagnostic with a border, icon and background color
851+
exportconstDiagnostics:FC<DiagnosticsProps>=({ diagnostics})=>{
852+
return(
853+
<divclassName="flex flex-col gap-4">
854+
{diagnostics.map((diagnostic,index)=>(
855+
<div
856+
key={`diagnostic-${diagnostic.summary}-${index}`}
857+
className={`text-xs font-semibold flex flex-col rounded-md border px-3.5 py-3.5 border-solid
858+
${
859+
diagnostic.severity==="error"
860+
?"text-content-primary border-border-destructive bg-content-destructive/15"
861+
:"text-content-primary border-border-warning bg-content-warning/15"
862+
}`}
863+
>
864+
<divclassName="flex flex-row items-start">
865+
{diagnostic.severity==="error"&&(
866+
<CircleAlert
867+
className="me-2 inline-flex shrink-0 text-content-destructive size-icon-sm"
868+
aria-hidden="true"
869+
/>
870+
)}
871+
{diagnostic.severity==="warning"&&(
872+
<TriangleAlert
873+
className="me-2 inline-flex shrink-0 text-content-warning size-icon-sm"
874+
aria-hidden="true"
875+
/>
876+
)}
877+
<divclassName="flex flex-col gap-3">
878+
<pclassName="m-0">{diagnostic.summary}</p>
879+
{diagnostic.detail&&<pclassName="m-0">{diagnostic.detail}</p>}
880+
</div>
881+
</div>
882+
</div>
883+
))}
884+
</div>
885+
);
886+
};

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx

Lines changed: 2 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,9 @@ import {
2626
}from"components/Tooltip/Tooltip";
2727
import{UserAutocomplete}from"components/UserAutocomplete/UserAutocomplete";
2828
import{typeFormikContextType,useFormik}from"formik";
29-
import{
30-
ArrowLeft,
31-
CircleAlert,
32-
CircleHelp,
33-
TriangleAlert,
34-
Undo2,
35-
}from"lucide-react";
29+
import{ArrowLeft,CircleHelp,Undo2}from"lucide-react";
3630
import{useSyncFormParameters}from"modules/hooks/useSyncFormParameters";
31+
import{Diagnostics}from"modules/workspaces/DynamicParameter/DynamicParameter";
3732
import{
3833
DynamicParameter,
3934
getInitialParameterValues,
@@ -665,44 +660,3 @@ export const CreateWorkspacePageViewExperimental: FC<
665660
</>
666661
);
667662
};
668-
669-
interfaceDiagnosticsProps{
670-
diagnostics:PreviewParameter["diagnostics"];
671-
}
672-
673-
constDiagnostics:FC<DiagnosticsProps>=({ diagnostics})=>{
674-
return(
675-
<divclassName="flex flex-col gap-4">
676-
{diagnostics.map((diagnostic,index)=>(
677-
<div
678-
key={`diagnostic-${diagnostic.summary}-${index}`}
679-
className={`text-xs font-semibold flex flex-col rounded-md border px-3.5 py-3.5 border-solid
680-
${
681-
diagnostic.severity==="error"
682-
?"text-content-primary border-border-destructive bg-content-destructive/15"
683-
:"text-content-primary border-border-warning bg-content-warning/15"
684-
}`}
685-
>
686-
<divclassName="flex flex-row items-start">
687-
{diagnostic.severity==="error"&&(
688-
<CircleAlert
689-
className="me-2 inline-flex shrink-0 text-content-destructive size-icon-sm"
690-
aria-hidden="true"
691-
/>
692-
)}
693-
{diagnostic.severity==="warning"&&(
694-
<TriangleAlert
695-
className="me-2 inline-flex shrink-0 text-content-warning size-icon-sm"
696-
aria-hidden="true"
697-
/>
698-
)}
699-
<divclassName="flex flex-col gap-3">
700-
<pclassName="m-0">{diagnostic.summary}</p>
701-
{diagnostic.detail&&<pclassName="m-0">{diagnostic.detail}</p>}
702-
</div>
703-
</div>
704-
</div>
705-
))}
706-
</div>
707-
);
708-
};

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp