Add simple server picker mode with version bump
All checks were successful
Build and Deploy Gateway / build-and-push (push) Successful in 15s
Build and Deploy Gateway / deploy (push) Successful in 7s

This commit is contained in:
2026-07-12 14:13:42 +03:00
parent 57330f1c78
commit d9745e9aed
4 changed files with 74 additions and 2 deletions

View File

@@ -1,6 +1,6 @@
export const HARBOR_VERSIONS = Object.freeze({ export const HARBOR_VERSIONS = Object.freeze({
macClient: '0.7.12', macClient: '0.7.13',
gatewayClient: '0.7.12', gatewayClient: '0.7.13',
gatewayBackend: '0.7.1', gatewayBackend: '0.7.1',
}); });

View File

@@ -75,6 +75,7 @@ export function ServerPicker({
onSelect, onSelect,
}) { }) {
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
const [advanced, setAdvanced] = useState(false);
const [view, setView] = useState('all'); const [view, setView] = useState('all');
const [page, setPage] = useState(0); const [page, setPage] = useState(0);
const [favorites, setFavorites] = useState(() => readList(FAVORITES_KEY)); const [favorites, setFavorites] = useState(() => readList(FAVORITES_KEY));
@@ -180,8 +181,48 @@ export function ServerPicker({
/> />
)); ));
if (!advanced) {
const simpleServers = [
...(selected ? [selected] : []),
...servers.filter(({ id }) => id !== selectedServerId),
].slice(0, SERVER_RESULT_WINDOW);
return <section className="client-servers is-scalable" aria-label="Выберите сервер"> return <section className="client-servers is-scalable" aria-label="Выберите сервер">
{prompt && <span className="client-server-prompt">Выберите сервер</span>} {prompt && <span className="client-server-prompt">Выберите сервер</span>}
<button
className="client-server-mode-toggle"
type="button"
aria-expanded="false"
onClick={() => setAdvanced(true)}
>Поиск и фильтры</button>
<div className={`client-server-scroll${leaving ? ' is-leaving' : ''}`} key={`${serverKey}:${revealVersion}`}>
<div className="client-server-grid">
{simpleServers.map((server, index) => <ServerRow
key={server.id}
server={server}
selected={server.id === selectedServerId}
disabled={disabled}
index={index}
onSelect={select}
/>)}
</div>
{servers.length > simpleServers.length && <button
className="client-server-mode-toggle"
type="button"
onClick={() => setAdvanced(true)}
>Ещё {servers.length - simpleServers.length} открыть поиск</button>}
</div>
</section>;
}
return <section className="client-servers is-scalable" aria-label="Выберите сервер">
{prompt && <span className="client-server-prompt">Выберите сервер</span>}
<button
className="client-server-mode-toggle"
type="button"
aria-expanded="true"
onClick={() => setAdvanced(false)}
>Простой список</button>
<div className="client-server-tools"> <div className="client-server-tools">
<input <input
type="search" type="search"

View File

@@ -2706,6 +2706,26 @@ p {
margin-bottom: 14px; margin-bottom: 14px;
} }
.client-server-mode-toggle {
min-height: 32px;
display: block;
margin: 0 auto 8px;
padding: 5px 8px;
border: 0;
background: transparent;
color: var(--client-muted);
font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
cursor: pointer;
}
.client-server-mode-toggle:hover {
color: var(--client-accent);
}
.client-server-scroll > .client-server-mode-toggle {
margin-top: 8px;
}
.client-server-tools input { .client-server-tools input {
width: 100%; width: 100%;
height: 36px; height: 36px;
@@ -2874,6 +2894,7 @@ p {
} }
.client-server-filters button:focus-visible, .client-server-filters button:focus-visible,
.client-server-mode-toggle:focus-visible,
.client-server-group-toggle:focus-visible, .client-server-group-toggle:focus-visible,
.client-server-more:focus-visible, .client-server-more:focus-visible,
.client-server-auto:focus-visible, .client-server-auto:focus-visible,
@@ -3280,6 +3301,7 @@ p {
} }
.client-server-filters button, .client-server-filters button,
.client-server-mode-toggle,
.client-server-group-toggle, .client-server-group-toggle,
.client-server-more, .client-server-more,
.client-server-favorite { .client-server-favorite {
@@ -3375,6 +3397,7 @@ p {
.client-usage > strong, .client-usage > strong,
.client-server, .client-server,
.client-server-auto, .client-server-auto,
.client-server-mode-toggle,
.client-server-favorite, .client-server-favorite,
.client-server-group-toggle, .client-server-group-toggle,
.client-server-more, .client-server-more,

View File

@@ -47,3 +47,11 @@ test('server picker keeps health manual and the rendered result window bounded',
assert.match(picker, /harbor-server-recent/); assert.match(picker, /harbor-server-recent/);
assert.match(picker, /aria-expanded={!isCollapsed}/); assert.match(picker, /aria-expanded={!isCollapsed}/);
}); });
test('server picker starts simple and reveals advanced controls on demand', () => {
assert.match(picker, /const \[advanced, setAdvanced\] = useState\(false\)/);
assert.match(picker, /if \(!advanced\)/);
assert.match(picker, />Поиск и фильтры<\/button>/);
assert.match(picker, />Простой список<\/button>/);
assert.match(picker, /\.slice\(0, SERVER_RESULT_WINDOW\)/);
});