Skip to content

Commit 359b173

Browse files
fstasifstasi
committed
polishing
1 parent 628b373 commit 359b173

File tree

4 files changed

+87
-36
lines changed

4 files changed

+87
-36
lines changed

‎arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-component.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,11 +117,14 @@ export const CertificateUploaderComponent = ({
117117
updatableFqbns={updatableFqbns}
118118
onBoardSelect={onBoardSelect}
119119
selectedBoard={selectedBoard}
120+
busy={installFeedback === 'installing'}
120121
/>
121122
</div>
123+
</div>
124+
<div className="dialogRow">
122125
<button
123126
type="button"
124-
className="theia-button primary"
127+
className="theia-button primary install-cert-btn"
125128
onClick={installCertificates}
126129
disabled={selectedCerts.length === 0 || !selectedBoard}
127130
>

‎arduino-ide-extension/src/browser/dialogs/certificate-uploader/select-board-components.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,13 @@ export const SelectBoardComponent = ({
99
updatableFqbns,
1010
onBoardSelect,
1111
selectedBoard,
12+
busy,
1213
}: {
1314
availableBoards: AvailableBoard[];
1415
updatableFqbns: string[];
1516
onBoardSelect: (board: AvailableBoard | null) => void;
1617
selectedBoard: AvailableBoard | null;
18+
busy: boolean;
1719
}): React.ReactElement => {
1820
const [selectOptions, setSelectOptions] = React.useState<BoardOption[]>([]);
1921

@@ -32,6 +34,11 @@ export const SelectBoardComponent = ({
3234
);
3335

3436
React.useEffect(() => {
37+
// if there is activity going on, skip updating the boards (avoid flickering)
38+
if (busy) {
39+
return;
40+
}
41+
3542
let placeholderTxt = 'Select a board...';
3643
let selBoard = -1;
3744
const updatableBoards = availableBoards.filter(
@@ -61,13 +68,13 @@ export const SelectBoardComponent = ({
6168
}
6269

6370
selectOption(boardsList[selBoard] || null);
64-
}, [availableBoards, selectOption, updatableFqbns, selectedBoard]);
71+
}, [busy, availableBoards, selectOption, updatableFqbns, selectedBoard]);
6572

6673
return (
6774
<ArduinoSelect
6875
id="board-select"
6976
menuPosition="fixed"
70-
isDisabled={selectOptions.length === 0}
77+
isDisabled={selectOptions.length === 0 || busy}
7178
placeholder={selectBoardPlaceholder}
7279
options={selectOptions}
7380
value={

‎arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-component.tsx‎

Lines changed: 69 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ export const FirmwareUploaderComponent = ({
2020
}): React.ReactElement => {
2121
// boolean states for buttons
2222
const [firmwaresFetching, setFirmwaresFetching] = React.useState(false);
23-
const [installingFw, setInstallingFw] = React.useState(false);
23+
2424
const [installFeedback, setInstallFeedback] = React.useState<
25-
'ok' | 'fail' | null
25+
'ok' | 'fail' | 'installing' | null
2626
>(null);
2727

2828
const [selectedBoard, setSelectedBoard] =
@@ -63,8 +63,7 @@ export const FirmwareUploaderComponent = ({
6363
}, [firmwareUploader, selectedBoard]);
6464

6565
const installFirmware = React.useCallback(async () => {
66-
setInstallFeedback(null);
67-
setInstallingFw(true);
66+
setInstallFeedback('installing');
6867

6968
const firmwareToFlash = availableFirmwares.find(
7069
(firmware) => firmware.firmware_version === selectedFirmware?.value
@@ -80,10 +79,8 @@ export const FirmwareUploaderComponent = ({
8079
));
8180

8281
setInstallFeedback((installStatus && 'ok') || 'fail');
83-
setInstallingFw(false);
8482
} catch {
8583
setInstallFeedback('fail');
86-
setInstallingFw(false);
8784
}
8885
}, [firmwareUploader, selectedBoard, selectedFirmware, availableFirmwares]);
8986

@@ -114,12 +111,17 @@ export const FirmwareUploaderComponent = ({
114111
updatableFqbns={updatableFqbns}
115112
onBoardSelect={onBoardSelect}
116113
selectedBoard={selectedBoard}
114+
busy={installFeedback === 'installing'}
117115
/>
118116
</div>
119117
<button
120118
type="button"
121119
className="theia-button secondary"
122-
disabled={selectedBoard === null || firmwaresFetching}
120+
disabled={
121+
selectedBoard === null ||
122+
firmwaresFetching ||
123+
installFeedback === 'installing'
124+
}
123125
onClick={fetchFirmwares}
124126
>
125127
Check Updates
@@ -136,7 +138,11 @@ export const FirmwareUploaderComponent = ({
136138
<ArduinoSelect
137139
id="firmware-select"
138140
menuPosition="fixed"
139-
isDisabled={!selectedBoard || firmwaresFetching || installingFw}
141+
isDisabled={
142+
!selectedBoard ||
143+
firmwaresFetching ||
144+
installFeedback === 'installing'
145+
}
140146
options={firmwareOptions}
141147
value={selectedFirmware}
142148
tabSelectsValue={false}
@@ -151,7 +157,9 @@ export const FirmwareUploaderComponent = ({
151157
type="button"
152158
className="theia-button primary"
153159
disabled={
154-
selectedFirmware === null || firmwaresFetching || installingFw
160+
selectedFirmware === null ||
161+
firmwaresFetching ||
162+
installFeedback === 'installing'
155163
}
156164
onClick={installFirmware}
157165
>
@@ -160,30 +168,58 @@ export const FirmwareUploaderComponent = ({
160168
</div>
161169
</div>
162170
<div className="dialogSection">
163-
<div className="dialogRow warn">
164-
<svg
165-
className="status-icon"
166-
width="18"
167-
height="18"
168-
viewBox="0 0 18 18"
169-
fill="none"
170-
xmlns="http://www.w3.org/2000/svg"
171-
>
172-
<path
173-
d="M16.9373 17.125H1.06225C0.955444 17.1246 0.850534 17.0968 0.757532 17.0442C0.66453 16.9917 0.586538 16.9162 0.531 16.825C0.476145 16.73 0.447266 16.6222 0.447266 16.5125C0.447266 16.4028 0.476145 16.295 0.531 16.2L8.4685 0.57501C8.52095 0.472634 8.60063 0.386718 8.69878 0.326724C8.79692 0.26673 8.90972 0.234985 9.02475 0.234985C9.13978 0.234985 9.25258 0.26673 9.35072 0.326724C9.44887 0.386718 9.52855 0.472634 9.581 0.57501L17.5185 16.2C17.5734 16.295 17.6022 16.4028 17.6022 16.5125C17.6022 16.6222 17.5734 16.73 17.5185 16.825C17.4588 16.9238 17.3729 17.0042 17.2703 17.0571C17.1677 17.1101 17.0524 17.1336 16.9373 17.125ZM2.081 15.875H15.9185L8.99975 2.25626L2.081 15.875Z"
174-
fill="#C11F09"
175-
/>
176-
<path
177-
d="M9 14.625C9.51777 14.625 9.9375 14.2053 9.9375 13.6875C9.9375 13.1697 9.51777 12.75 9 12.75C8.48223 12.75 8.0625 13.1697 8.0625 13.6875C8.0625 14.2053 8.48223 14.625 9 14.625Z"
178-
fill="#C11F09"
179-
/>
180-
<path
181-
d="M9 11.5C8.83424 11.5 8.67527 11.4342 8.55806 11.3169C8.44085 11.1997 8.375 11.0408 8.375 10.875V6.5C8.375 6.33424 8.44085 6.17527 8.55806 6.05806C8.67527 5.94085 8.83424 5.875 9 5.875C9.16576 5.875 9.32473 5.94085 9.44194 6.05806C9.55915 6.17527 9.625 6.33424 9.625 6.5V10.875C9.625 11.0408 9.55915 11.1997 9.44194 11.3169C9.32473 11.4342 9.16576 11.5 9 11.5Z"
182-
fill="#C11F09"
183-
/>
184-
</svg>
185-
Installation will overwrite the Sketch on the board.
186-
</div>
171+
{installFeedback === null && (
172+
<div className="dialogRow warn">
173+
<svg
174+
className="status-icon"
175+
width="18"
176+
height="18"
177+
viewBox="0 0 18 18"
178+
fill="none"
179+
xmlns="http://www.w3.org/2000/svg"
180+
>
181+
<path
182+
d="M16.9373 17.125H1.06225C0.955444 17.1246 0.850534 17.0968 0.757532 17.0442C0.66453 16.9917 0.586538 16.9162 0.531 16.825C0.476145 16.73 0.447266 16.6222 0.447266 16.5125C0.447266 16.4028 0.476145 16.295 0.531 16.2L8.4685 0.57501C8.52095 0.472634 8.60063 0.386718 8.69878 0.326724C8.79692 0.26673 8.90972 0.234985 9.02475 0.234985C9.13978 0.234985 9.25258 0.26673 9.35072 0.326724C9.44887 0.386718 9.52855 0.472634 9.581 0.57501L17.5185 16.2C17.5734 16.295 17.6022 16.4028 17.6022 16.5125C17.6022 16.6222 17.5734 16.73 17.5185 16.825C17.4588 16.9238 17.3729 17.0042 17.2703 17.0571C17.1677 17.1101 17.0524 17.1336 16.9373 17.125ZM2.081 15.875H15.9185L8.99975 2.25626L2.081 15.875Z"
183+
fill="#C11F09"
184+
/>
185+
<path
186+
d="M9 14.625C9.51777 14.625 9.9375 14.2053 9.9375 13.6875C9.9375 13.1697 9.51777 12.75 9 12.75C8.48223 12.75 8.0625 13.1697 8.0625 13.6875C8.0625 14.2053 8.48223 14.625 9 14.625Z"
187+
fill="#C11F09"
188+
/>
189+
<path
190+
d="M9 11.5C8.83424 11.5 8.67527 11.4342 8.55806 11.3169C8.44085 11.1997 8.375 11.0408 8.375 10.875V6.5C8.375 6.33424 8.44085 6.17527 8.55806 6.05806C8.67527 5.94085 8.83424 5.875 9 5.875C9.16576 5.875 9.32473 5.94085 9.44194 6.05806C9.55915 6.17527 9.625 6.33424 9.625 6.5V10.875C9.625 11.0408 9.55915 11.1997 9.44194 11.3169C9.32473 11.4342 9.16576 11.5 9 11.5Z"
191+
fill="#C11F09"
192+
/>
193+
</svg>
194+
Installation will overwrite the Sketch on the board.
195+
</div>
196+
)}
197+
{installFeedback === 'installing' && (
198+
<div className="dialogRow success">
199+
<svg
200+
className="status-icon"
201+
width="18"
202+
height="18"
203+
viewBox="0 0 18 18"
204+
fill="none"
205+
xmlns="http://www.w3.org/2000/svg"
206+
>
207+
<path
208+
d="M9 17.75C7.26942 17.75 5.57769 17.2368 4.13876 16.2754C2.69983 15.3139 1.57832 13.9473 0.916058 12.3485C0.253791 10.7496 0.080512 8.9903 0.418133 7.29296C0.755753 5.59563 1.58911 4.03653 2.81282 2.81282C4.03653 1.58911 5.59563 0.755753 7.29296 0.418133C8.9903 0.080512 10.7496 0.253791 12.3485 0.916058C13.9473 1.57832 15.3139 2.69983 16.2754 4.13876C17.2368 5.57769 17.75 7.26942 17.75 9C17.75 11.3206 16.8281 13.5462 15.1872 15.1872C13.5462 16.8281 11.3206 17.75 9 17.75ZM9 1.5C7.51664 1.5 6.0666 1.93987 4.83323 2.76398C3.59986 3.58809 2.63856 4.75943 2.07091 6.12988C1.50325 7.50032 1.35473 9.00832 1.64411 10.4632C1.9335 11.918 2.64781 13.2544 3.6967 14.3033C4.7456 15.3522 6.08197 16.0665 7.53683 16.3559C8.99168 16.6453 10.4997 16.4968 11.8701 15.9291C13.2406 15.3614 14.4119 14.4001 15.236 13.1668C16.0601 11.9334 16.5 10.4834 16.5 9C16.5 7.01088 15.7098 5.10323 14.3033 3.6967C12.8968 2.29018 10.9891 1.5 9 1.5Z"
209+
fill="#1DA086"
210+
/>
211+
<path
212+
d="M8.6875 5.875C9.20527 5.875 9.625 5.45527 9.625 4.9375C9.625 4.41973 9.20527 4 8.6875 4C8.16973 4 7.75 4.41973 7.75 4.9375C7.75 5.45527 8.16973 5.875 8.6875 5.875Z"
213+
fill="#1DA086"
214+
/>
215+
<path
216+
d="M12.125 12.75C12.125 12.9158 12.0592 13.0747 11.9419 13.1919C11.8247 13.3092 11.6658 13.375 11.5 13.375H6.5C6.33424 13.375 6.17527 13.3092 6.05806 13.1919C5.94085 13.0747 5.875 12.9158 5.875 12.75C5.875 12.5842 5.94085 12.4253 6.05806 12.3081C6.17527 12.1908 6.33424 12.125 6.5 12.125H8.375V8.375H7.125C6.95924 8.375 6.80027 8.30915 6.68306 8.19194C6.56585 8.07473 6.5 7.91576 6.5 7.75C6.5 7.58424 6.56585 7.42527 6.68306 7.30806C6.80027 7.19085 6.95924 7.125 7.125 7.125H9C9.16576 7.125 9.32473 7.19085 9.44194 7.30806C9.55915 7.42527 9.625 7.58424 9.625 7.75V12.125H11.5C11.6658 12.125 11.8247 12.1908 11.9419 12.3081C12.0592 12.4253 12.125 12.5842 12.125 12.75Z"
217+
fill="#1DA086"
218+
/>
219+
</svg>
220+
Installing firmware...
221+
</div>
222+
)}
187223
{installFeedback === 'ok' && (
188224
<div className="dialogRow success">
189225
<svg

‎arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@
1414
margin-right: 3px;
1515
}
1616

17+
18+
.certificate-uploader-dialog .dialogRow .install-cert-btn {
19+
margin-left: auto;
20+
}
21+
1722
.certificate-uploader-dialog .certificate-list {
1823
border: 1px solid #BDC7C7;
1924
border-radius: 2px;;

0 commit comments

Comments
 (0)