Add simple server picker mode with version bump
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
export const HARBOR_VERSIONS = Object.freeze({
|
||||
macClient: '0.7.12',
|
||||
gatewayClient: '0.7.12',
|
||||
macClient: '0.7.13',
|
||||
gatewayClient: '0.7.13',
|
||||
gatewayBackend: '0.7.1',
|
||||
});
|
||||
|
||||
|
||||
@@ -75,6 +75,7 @@ export function ServerPicker({
|
||||
onSelect,
|
||||
}) {
|
||||
const [query, setQuery] = useState('');
|
||||
const [advanced, setAdvanced] = useState(false);
|
||||
const [view, setView] = useState('all');
|
||||
const [page, setPage] = useState(0);
|
||||
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="Выберите сервер">
|
||||
{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">
|
||||
<input
|
||||
type="search"
|
||||
|
||||
@@ -2706,6 +2706,26 @@ p {
|
||||
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 {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
@@ -2874,6 +2894,7 @@ p {
|
||||
}
|
||||
|
||||
.client-server-filters button:focus-visible,
|
||||
.client-server-mode-toggle:focus-visible,
|
||||
.client-server-group-toggle:focus-visible,
|
||||
.client-server-more:focus-visible,
|
||||
.client-server-auto:focus-visible,
|
||||
@@ -3280,6 +3301,7 @@ p {
|
||||
}
|
||||
|
||||
.client-server-filters button,
|
||||
.client-server-mode-toggle,
|
||||
.client-server-group-toggle,
|
||||
.client-server-more,
|
||||
.client-server-favorite {
|
||||
@@ -3375,6 +3397,7 @@ p {
|
||||
.client-usage > strong,
|
||||
.client-server,
|
||||
.client-server-auto,
|
||||
.client-server-mode-toggle,
|
||||
.client-server-favorite,
|
||||
.client-server-group-toggle,
|
||||
.client-server-more,
|
||||
|
||||
@@ -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, /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\)/);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user