Skip to content

Commit

Permalink
refactor: split suites page into components
Browse files Browse the repository at this point in the history
  • Loading branch information
@shadowusr
shadowusr committed Aug 16, 2024
1 parent 680ec77 commit 92c06cf
Show file tree
Hide file tree
Showing 13 changed files with 207 additions and 431 deletions.
196 changes: 2 additions & 194 deletions lib/static/gui.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,210 +3,18 @@ import {createRoot} from 'react-dom/client';
import {Provider} from 'react-redux';
import store from './modules/store';
import Gui from './components/gui';
import {Button, Icon, RadioButton, Select, TextInput, ThemeProvider, Popover} from '@gravity-ui/uikit';
import {AsideHeader} from '@gravity-ui/navigation';
import TestplaneIcon from './icons/testplane.svg';

import Split from 'react-split';
import {ThemeProvider} from '@gravity-ui/uikit';

import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';

import {CircleDashed, SquareCheck, ListCheck, Eye, CircleInfo, Sliders, Check, Xmark, ArrowRotateLeft, BarsDescendingAlignLeftArrowDown, Layers3Diagonal, ChevronsExpandVertical, Globe, Ban, ArrowsRotateLeft, CloudCheck} from '@gravity-ui/icons';
import {unstable_ListContainerView as ListContainerView, unstable_ListItemView as ListItemView} from '@gravity-ui/uikit/unstable';
import {AutoSizer} from 'react-virtualized';
import {VariableSizeList} from 'react-window';

const rootEl = document.getElementById('app');
const root = createRoot(rootEl);

root.render(
<ThemeProvider theme='light'>
<Provider store={store}>
<AsideHeader logo={{text: 'Testplane UI', iconSrc: TestplaneIcon, iconSize: 32}} compact={true} headerDecoration={true} menuItems={[
{id: 'suites', title: 'Suites', icon: ListCheck, current: true},
{id: 'visual-checks', title: 'Visual Checks', icon: Eye},
{id: 'info', title: 'Info', icon: CircleInfo}
]} renderContent={
(...args) => {
console.log(args);
const treeItems = [
{id: 'id-1', title: 'hey'},
{id: 'id-2', title: 'hey2'}
];

return <Split direction={'horizontal'} className={'split'} minSize={0} snapOffset={300}>
<div>
<div className='controls'>
<div className="controls-row">
<h2 className="controls-row__heading text-display-1">Suites</h2>
<div>
<Popover placement={'bottom-end'} hasArrow={false} content={
<div>
<h4 className={'text-subheader-3'}>Options</h4>
<TextInput label={'Base URL'} placeholder={'https://example.com'}></TextInput>
</div>
} openOnHover={false}><Button view={'flat'}><Icon data={Sliders} size={16}/></Button></Popover>
<Select
popupPlacement={['bottom-end']}
renderControl={({onClick, onKeyDown, ref}) => {
return (
<Button
ref={ref}
view="flat"
onClick={onClick}
extraProps={{
onKeyDown
}}
>
<Icon data={BarsDescendingAlignLeftArrowDown} size={16}/>
</Button>
);
}}
>
<Select.Option value="val1" content="Value1" />
<Select.Option value="val2" content="Value2" />
<Select.Option value="val3" content="Value3" />
<Select.Option value="val4" content="Value4" />
<Select.Option value="val5" content="Some long value" />
</Select>
<Select
popupPlacement={['bottom-end']}
renderControl={({onClick, onKeyDown, ref}) => {
return (
<Button
ref={ref}
view="flat"
onClick={onClick}
extraProps={{
onKeyDown
}}
>
<Icon data={Layers3Diagonal} size={16}/>
</Button>
);
}}
>
<Select.Option value="val1" content="Value1" />
<Select.Option value="val2" content="Value2" />
<Select.Option value="val3" content="Value3" />
<Select.Option value="val4" content="Value4" />
<Select.Option value="val5" content="Some long value" />
</Select>
<Select
popupPlacement={['bottom-end']}
renderControl={({onClick, onKeyDown, ref}) => {
return (
<Button
ref={ref}
view="flat"
onClick={onClick}
extraProps={{
onKeyDown
}}
>
<Icon data={SquareCheck} size={16}/>
</Button>
);
}}
>
<Select.Option value="val1" content="Value1" />
<Select.Option value="val2" content="Value2" />
<Select.Option value="val3" content="Value3" />
<Select.Option value="val4" content="Value4" />
<Select.Option value="val5" content="Some long value" />
</Select>
<Select
popupPlacement={['bottom-end']}
renderControl={({onClick, onKeyDown, ref}) => {
return (
<Button
ref={ref}
view="flat"
onClick={onClick}
extraProps={{
onKeyDown
}}
>
<Icon data={ChevronsExpandVertical} size={16}/>
</Button>
);
}}
>
<Select.Option value="val1" content="Value1" />
<Select.Option value="val2" content="Value2" />
<Select.Option value="val3" content="Value3" />
<Select.Option value="val4" content="Value4" />
<Select.Option value="val5" content="Some long value" />
</Select>
</div>
</div>
<div className="controls-row">
<TextInput placeholder={'Search and filter'}></TextInput>
<Select
popupPlacement={['bottom-end']}
renderControl={({onClick, onKeyDown, ref}) => {
return (
<Button
ref={ref}
view="outlined"
onClick={onClick}
extraProps={{
onKeyDown
}}
>
<Icon data={Globe} size={16}/>
</Button>
);
}}
>
<Select.Option value="val1" content="Value1" />
<Select.Option value="val2" content="Value2" />
<Select.Option value="val3" content="Value3" />
<Select.Option value="val4" content="Value4" />
<Select.Option value="val5" content="Some long value" />
</Select>
</div>
<div className="controls-row">
<RadioButton className='status-switcher' width={'max'} options={[
{value: 'all', content: <div className='status-switcher__option'><CircleDashed/><span>20,256</span></div>},
{value: 'passed', content: <div className='status-switcher__option'><Check/><span>10,123</span></div>},
{value: 'failed', content: <div className='status-switcher__option'><Xmark/><span>10,453</span></div>},
{value: 'retried', content: <div className='status-switcher__option'><ArrowRotateLeft/><span>792</span></div>},
{value: 'skipped', content: <div className='status-switcher__option'><Ban/><span>132</span></div>},
{value: 'updated', content: <div className='status-switcher__option'><ArrowsRotateLeft/><span>256</span></div>},
{value: 'commited', content: <div className='status-switcher__option'><CloudCheck/><span>10</span></div>}
]}></RadioButton>

</div>
<ListContainerView>
<AutoSizer>
{({width, height}) => (
<VariableSizeList
overscanCount={10}
width={width}
height={height}
itemCount={treeItems.length}
itemData={treeItems}
itemSize={() => 30}
>
{({index, style, data}) => (
<div style={style} key={index} className='testing-1'>
<ListItemView id={index} title={JSON.stringify(data[index])} hasSelectionIcon={false} expanded={false} activeOnHover={true} />
</div>
)}
</VariableSizeList>
)}
</AutoSizer>
</ListContainerView>
</div>
</div>
<div>
<Gui/>
</div>
</Split>;
}
} hideCollapseButton={true} />
<Gui/>
</Provider>
</ThemeProvider>
);
15 changes: 0 additions & 15 deletions lib/static/new-ui.css
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,5 @@
.g-root {
--g-font-family-sans: 'Jost', sans-serif;

/*--g-text-header-font-weight: 600;*/
/*--g-text-subheader-font-weight: 600;*/
/*--g-text-display-font-weight: 600;*/
/*--g-text-accent-font-weight: 600;*/

/*--g-color-base-brand: rgb(117, 155, 255);*/
/*--g-color-base-brand-hover: rgb(99, 143, 255);*/
/*--g-color-base-selection: rgba(82, 130, 255, 0.05);*/
/*--g-color-base-selection-hover: rgba(82, 130, 255, 0.1);*/
/*--g-color-line-brand: rgb(117, 155, 255);*/
/*--g-color-text-brand: rgb(117, 155, 255);*/
/*--g-color-text-brand-contrast: rgb(255, 255 ,255);*/
/*--g-color-text-link: rgb(117, 155, 255);*/
/*--g-color-text-link-hover: rgb(82, 130, 255);*/
}

.report {
Expand Down
4 changes: 2 additions & 2 deletions lib/static/new-ui/app/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {ThemeProvider} from '@gravity-ui/uikit';
import React, {StrictMode} from 'react';
import React, {ReactNode, StrictMode} from 'react';
import {MainLayout} from '../components/MainLayout';
import {HashRouter, Navigate, Route, Routes} from 'react-router-dom';
import {CircleInfo, Eye, ListCheck} from '@gravity-ui/icons';
Expand All @@ -13,7 +13,7 @@ import '../../new-ui.css';
import {Provider} from 'react-redux';
import store from '../../modules/store';

export function App(): JSX.Element {
export function App(): ReactNode {
const pages = [
{
title: 'Suites',
Expand Down
4 changes: 2 additions & 2 deletions lib/static/new-ui/app/gui.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useEffect} from 'react';
import React, {ReactNode, useEffect} from 'react';
import {createRoot} from 'react-dom/client';
import {App} from './App';
import store from '../../modules/store';
Expand All @@ -7,7 +7,7 @@ import {finGuiReport, initGuiReport} from '../../modules/actions';
const rootEl = document.getElementById('app') as HTMLDivElement;
const root = createRoot(rootEl);

function Gui(): React.JSX.Element {
function Gui(): ReactNode {
useEffect(() => {
store.dispatch(initGuiReport());

Expand Down
4 changes: 2 additions & 2 deletions lib/static/new-ui/app/report.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useEffect} from 'react';
import React, {ReactNode, useEffect} from 'react';
import {createRoot} from 'react-dom/client';
import {App} from './App';
import store from '../../modules/store';
Expand All @@ -7,7 +7,7 @@ import {initStaticReport, finStaticReport} from '../../modules/actions';
const rootEl = document.getElementById('app') as HTMLDivElement;
const root = createRoot(rootEl);

function Gui(): React.JSX.Element {
function Gui(): ReactNode {
useEffect(() => {
store.dispatch(initStaticReport());

Expand Down
1 change: 0 additions & 1 deletion .../suites/components/ImageWithMagnifier.tsx → .../new-ui/components/ImageWithMagnifier.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ export function ImageWithMagnifier({
useEffect(() => {
setMagnifierStyle({
display: showMagnifier ? '' : 'none',
// position: 'absolute',
position: 'fixed',
pointerEvents: 'none',
height: `${magnifierHeight}px`,
Expand Down
42 changes: 0 additions & 42 deletions lib/static/new-ui/features/suites/components/StatusFilter.tsx
View file

This file was deleted.

4 changes: 0 additions & 4 deletions lib/static/new-ui/features/suites/components/SuitesPage/index.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@
}

.tree-view {
/*--g-text-subheader-1-font-size: 50px;*/
/*--g-text-subheader-1-line-height: 50px;*/
/*font-size: var(--g-text-body-3-font-size);*/
/*user-select: none;*/
margin-top: var(--g-spacing-2);
}
.tree-view__container {
Expand Down
Loading

0 comments on commit 92c06cf

Please sign in to comment.