Novy GoodData writer

[jancermak]

Tady jsem dal dohromady z čeho se momentálně skládá a jak by se mělo upravit na základě změn API: https://www.evernote.com/l/AATpbjJdn-5Kg6_FyYQJoWAJgIYcGBx9r5k

Ostatní bych nechal spíš na tobě. Pokud bys potřeboval něco dovysvětlit, tak se ptej. Díky!

[jancermak]

Ahoj @JakubMatejka — posilam video pruchodu prototypem na gooddata writer + samotny prototyp. Upravil jsem nekolik veci i s ohledem na to co jsem probiral s @ondrejhlavacek . —Ohledne unifikace editace, ukladani. —Dale je tam zapracovano i tema odstraneni bucketu a zobrazovani rovnou tabulek —Pak jsem upravil vyber dimension - predelal jsem to na select, modal ukazuju az v okamziku —vytvareni nove time dimense —dale jsem urpavil fact grain — pokud jsem dobre pochopil co tam je ted, lze nahradit necim co uz v KBC (castecne) pouzivame a bude to mnohem prehlednejsi. —a zkusil jsem to cely vice z flatit (viz navrh @Halama ) —a jeste mentionuju @janmichek :-)

video: http://take.ms/2YxHY prototyp: https://invis.io/W3FV2MIMV59

[kacurez]

ui gooddata writeru mam v meritku - mozem to ked tak naimplementovat s nejakym "dummy" markupom a potom by sa to cez @janmichek okraslilo :)

[janmichek]

Dobra prace pane Jacek, dik za fresh video xD Let's make gooddata writer great again!

Pisu moje postrehy (nerikam ze to musis hned zapracovat, proste na zamysleni)

Obecne: 1- Gooddata wr byl vzdycky custom, ale nabizi se otazka - kdyz jsme ted delali na univerzalnim UI (pro ex-s3-aws) jestl to nezkusit nacpat do toho ui. Ano, obsluhuje to trochu jinou vec (config rows) ale vidim tam dost podobnych patternu. Tak treba to ui muzem o par veci doplnit - ale tak aby ty doplnene veci mohly byt znovupouzitelne.

2- Predpokladam ze ten flat style je showcase a writer bude prozatim ve starym kabatu. Potom az to bude nekdo vykonavat, tak to bude chtit spis videt ve starych stylech.

3- celkove chci zkrotit tvoji vlhkosti a prozatim donutit znovupouzivat stavajici patterny, a snizit celkovou entropii UI uz pri navrhu

Konkretne: 4- description ala devportal se mi libi. Jak to zamyslis? Jen pro tuto komponentu nebo pro vsechny?

5- include time ikony - tohle uz jsme resili, myslim ze jsme se uplne neshodli .] Ja jsem za to, ze podle ikonky bys mel poznat kontext aniz by ses dival na header tabulky. Navrh: misto checkmark / pomlcky -> zeleny hodinky / sedy hodinky. Obzvlast potom to pouzivas v tom dropdownu, kde to ztraci kontext. Taky to souvisi s vizualnim rozlisenim ikon pro akce, ikon pro state.

6- Date dimension layout - Ja jsem za presun ze sidebaru (uplne novy UI pattern) do modalu. V detailu potom na stejnou vec stejne pouzivas modal. Nerikam ze je to vyhra, ale pripada mi to konzistentnejsi.

7- Detail Tabulky - tady mi to prijde trochu divocarna xD Nabizi se ty akce (Load, Include, project upload) presunout do levyho sidebaru jako v beznych komponentach (modre linky). Vnimam ze se pak muze svest boj o sirku tabulky.

8- 'project upload' mi prijde trochu matouci (pokud to neni terminus technicus), vic by se mi tam libilo Include / Exclude to project

9- naming konvence: + New [entity] -> vyplnim form -> Create [entity] - je to na vice mistech

10- Dimension dropdown - proc ten 'Add' custom style? Nebude stacit ten zakladni? Chapu ze to dela trochu neco jinyho

11- Fact grain - proc ma ten dropdown checkboxy? taky myslim ze by stacil zaklad. Co vyberes zmizi z nabidky. Domnivam se ze ten sedivej blok neni nutnej, bohate by stacil border -> zjednoduseni

12- Nahod nam take prosim empty stavy

13- New configuration form je taky docela rozpadlej, mrkni.

[jancermak]

@janmichek Ahoj ocisloval jsem tvoje komenty.

1) presne nevim co myslis muzes mi poslat nejakej screenshoot abych se zorientoval

2) ano ten flat styl je test jak to vypada jak to funguje, vyuzil jsem tuty storky abych videl jak to vypada kdyz ho pouzijeme a zaroven abyste to videli i vy — ted pouzit stavajici styl

3) dobre delas

4) Chtel bych to pro vsechny komponenty — duvody vizualni propojeni s developer portalem, rychle osvezeni vzhledu.

5) ano na tuto mam jiny nazor nez ty, vychazim ze zkusensosti pokud mam seznam funkci v sloupcich tabulky a ve radcich pod sebou mam polozky — a potrebuju vyznacit zda ta polozka ma ci nema tu funkci je pro me lepsi pouzivat fajfku za ma/ pomlucku ze nema. Takhle jsem to pred lety resil — http://take.ms/JuMrq . Rozumim ze tady je to jedna polozka a ikonka muze byt pochopitelna. Tady jsem udelal jednoduchy A/B porovnani — http://take.ms/7FRMb a hodli to slack k vselidovemu hlasovani http://take.ms/G98v6

6) souhlas to dava smysl. jestli dobre rozumim vlezu do date dimension a mam tabulku s jejich seznam po kliknuti na btn pridat — se mi otevre modal http://take.ms/ZyMl4 co pouzivam v detailu.

7) to jsem taky resil — mel jsem v rukavu jeste takovoudle skicu — http://take.ms/AYr7HE , ktery by zachovala sitku tabulky

8) project upload nevidim? myslis upload table? http://take.ms/ioPU6

9) koukam na to a v tutom konkretnim navrhu jsem se striktne drzel a cistil to do jednoho "Add new..."

10) mas na mysli tuto? http://take.ms/atUHQ — to add je tam proto pokud mi nevyhovuje zadna z jiz hotovych dimensi, muzu si rychle vytvorit novou. Zakladni mas na mysli ze pokud mi nic nevyhovuje abych se vratil na screen s vypisem tabulek a tam vlez do data dimension a tam dal add new???

11) protoze muzes vybrat vice polozek z toho dropdownu klidne vsechy . Zaklad myslis co? POkud by to byl dropdown v nemz klikam na polozky a ty se mi nahoru davaji jako "labely s krizkem" tak je to pro me ok. Me jenom prijde hoodne divnej stavajici stav http://take.ms/Oc7vX

12) ok

13) new configuration jsem resil v tomto prototypu (ten jsem testoval s uzivatelema) — https://invis.io/HP8YQSJAZ#/194995487_Goodata_Writer_Section_4

[jancermak]

6) navrh upravy — http://take.ms/f9n9H — modal http://take.ms/bl3M4

[jancermak]

Ver2: video s průchodem — https://youtu.be/MQdDFS1aX3U prototyp — https://invis.io/W3FV2MIMV59#/282068391_KBC-Writer-Gd

@JakubMatejka @janmichek

[ondrejhlavacek]

Komentář k videu

1) Pod ikonkou Incremental load in last 3 days bych vůbec nečekal nějakej konfigurační dialog. Přijde mi to jako nastavení konfigurace a tak bych ho čekal v hlavní části stránky. Podobně jsme řešili sekci AWS Credentials u novýho AWS S3 writeru a Jan u novýho Pigeonu.

2) To stejný mě vede k datovejm dimenzím na seznamu tabulek. Tím by se z pravýho panelu odstranila navigace a nastavení a zbyly by tam jen čistě akční tlačítka.

A mohla by v tom writeru až bude hotovej ta muzika hrát furt? :-)

[ondrejhlavacek]

Ještě jsem teď zahlédl v seznamu tabulek tlačítko pro upload, nešlo by použít obyčejný tlačítko Run, který je vidět třeba v tom gifu?

Technickej dotaz - dává smysl mít možnost těm tabulkám určovat pořadí, v jakém se mají nahrávat? Současnej S3 extraktor to umí, pokud to smysl dává, mělo by to tam být taky. Technicky to hotový máme.

[janmichek]

Caues, pisu dalsi postrehy po updatu. Na co nereaguju jsem spokojenej - nadsenej. Vychazim z tohoto commentu https://github.com/keboola/indigo-ui/issues/40#issuecomment-367358411

1 - mam na mysli to co tu postoval Najlos https://github.com/keboola/indigo-ui/issues/40#issuecomment-369299713 koukam ze ma i stejnej point jako ja

2 - rozumim, mame na to vlastne i Let's Flat issue https://github.com/keboola/indigo-ui/issues/33 Prioritizuj jak chces

4 - ok, jsem pro idealne kdyz zalozis novou issue, kde to podrobneji popises a hodis na nekoho z nas.

5 - účelovka! to vubec nebyl muj point. Takhle bych taky hlasoval stejne jako ostatni. Udelam novej poll, ktery reflektuje realny stav veci .]

7 - fajn, na tom videu to jeste vypada trochu jinak - divoceji. Je tam toho hodne, chapu. Chtelo by to nejaky elegantni reseni jak s toho ven, momentalne me nic nenapada. Ty labely mi tam serou xD

8 - nope, myslel jsem tohle. Neni uplne pochopitelny co to dela. Kdyby tam byl dynamickej label 'Include / exclude to project'

9 - rozumim, nepoustel ses do prejmenovavani. Slo mi o to, kdyz uz to predelavame, tak se drzet novych guidelines a sjednotit to se zbytkem aplikace.

10 - nn slo mi o zakladni styly ad http://jedwatson.github.io/react-select/ 11 - to same jako vyse http://jedwatson.github.io/react-select/

[jancermak]

@janmichek 1 - rozumim 2 - ok 4 -jack, zalozi issue a doni nahraje pravidla jak to ma vypada a "fungovat" 5 - uctenkovka!! - takze jsem te blbe pochopil? 7- ano na videu, je sablonovita verze kdy pravou stranu mame pro akce. Posli mi prosim image co myslim tema labelama co te serou? 8 - k tomu jeste najlos napsal tuto "Ještě jsem teď zahlédl v seznamu tabulek tlačítko pro upload, nešlo by použít obyčejný tlačítko Run, který je vidět třeba v tom gifu?" 9 - souhlas 10 - myslis tuten vid http://take.ms/9NgYc — jop ten by byl asi ok, subjektivne u nej narazim zda pochopim ze si muzu vytvorit i novou dimensi. 11 - upraveno viz video https://youtu.be/MQdDFS1aX3U?t=1m21s udelano podle tutoho — http://take.ms/AII0m

[jancermak]

@JakubMatejka , @ondrejhlavacek , @janmichek Ahoj zapracoval jsem komenty k uprave gooddata writeru: video (na prani jsem opet doplnil epesni muzikou, dnes jsem to vzal od podlahy :nerd_face: ): https://youtu.be/xJ-J3pmH3p8 prototyp: https://invis.io/W3FV2MIMV59#/283575847_KBC-Writer-Gd

[janmichek]

4 - cool, pak mi na to hod mention. Bude potreba nejdriv projit vsechny descriptions, co to vsechno obsahuje za custom kreativy .] 5 - nahodim poll 7 - tema labelama myslim ty labely pred inputy v tabulce. Vizualne se tam nemam ceho chytnout, je to hodne dynamicky. Uplne nevim jak z toho ven. 8 - nedokazu posoudit 9 - fajn, ale v novym navrhu to nevidim xD 10 - se spravnym wordingem myslim ze by to mohlo fungovat 11 - ok, cool

[ondrejhlavacek]

pár rychlejch

a) popisek v detailu tabulky by měl bejt nahoře, pod title a identifier, konzistentně by to měla asi bejt vždycky první věc b) v detailu tabuky je tlačítko na smazání, měl by tam bejt popisek "Delete" nebo "Delete table". "Move to Trash" je možnej pouze o úroveň výš. Pokud bych chtěl vrátit smazanou tabulku, nejdu do koše, ale musím jít do verzí a vrátit verzi celý konfigurace. na funkcionalitě a umístění tlačítka to ale nic nemění.

[Halama]

Jste si jistý tím editačním tlačítkem v té hlavičce na stránce detailu tabulky? Přijde mi že je tam uplně mimo kontext toho co má ukládat. Přišlo by mi lepší pokud by bylo nějak přímo u toho hlavního obsahu. Nebo možná lépe kdyby se každá ta část (Title+Idenitier, Load Type, Columns) ukládala samostatně (pořád samozřejmě bez statického stavu).

[ondrejhlavacek]

@Halama Na druhou stranu máš to tlačítko zase vždycky dostupný. Víc save tlačítek na stránce se snažíme vyhodit - není pak úplně jasný, jaký k čemu patří. (Tím to neobhajuju, jenom jsem těmhle argumentům v diskusi s Jackem ustoupil)

[jancermak]

@janmichek 4 - ok, mam zalozenou issue, kam to nasypu - nejspis jenom obecny pravidlo jak to ma fungovat vypadat, dle toho co zjistim jak porobehnu hlavicky komponent 7 - zkusim nahodit jine reseni tabulky 8 - predelal jsem na RUN po diskuzi s najlosem 9 - nekdy mi to chvili trva nez mi to dojde ale uz to docvaklo :-) :-)

@ondrejhlavacek a) upraveno — b)upraveno —

@Halama jistej si nejsem nicim :-) myslenka zatim je sjednoceni ovladani, ktery nam vypadlo pri diskuzi s najlosem a janem. Vlezu do detailu mam zaple ze mohu editovat - z edituju a bud ulozim nebo canceluju (zruseni uprav) . Umisteni vpravo nahore v navigacni liste — vzniklo z potreby najit pozici, ktera dava smysl pres ruzne komponety, vyuziti. Takto je tlacitko stale s tebou ve fixovane hlavicce.

[jancermak]

@janmichek 7 - nahodil jsem dalsi reseni vzhledu tabulky (hlasovani na slacku) — https://invis.io/W3FV2MIMV59#/286442031_KBC-Writer-Gd-Detail-Konfigurace-Detail_Tabulky_Copy_32

[janmichek]

@jancermak jj urcite lepsi, dik za zprehledneni. Hele jeste jsem vyhrabal nejaky starsi poznamky a uzivatelsky feedbacky k gdwr

https://paper.dropbox.com/doc/Vysledky-testovani-GD-writeru-pripominky-ke-KBC-xouRPcUTayggYrHIDgYKU

https://docs.google.com/document/d/1jqpal1uvpJ1ivA2ex31h7jQvWC_pPJ6vhy3qyt73r6Q/edit?ts=59197854

a co vlastne tahle vec? https://projects.invisionapp.com/d/main#/console/8989684/195044503/preview

[jancermak]

@janmichek

—https://paper.dropbox.com/doc/Vysledky-testovani-GD-writeru-pripominky-ke-KBC-xouRPcUTayggYrHIDgYKU — tuto projit jestli je tam neco co by se hodilo

—ten google docs mi nejde otevrit posilam zadost o pristup

—a ten prototyp je wizard na pridavani nove konfigurace writeru. Pousti se to tady http://take.ms/X17Aq ale pokud se nemylim tak s tim co tam ted delam to nesouvisi.

[jancermak]

@kacurez —pushnul jsem do grafiky, to co mas v kodu - zmena poradi tabulek — http://take.ms/oLcRC

[kacurez]

alpha verzia UI je naimplementovana a k dispozicii na linku https://connection.keboola.com/admin/projects/<PROJECT_D>/writers/keboola.gooddata-writer

Nakoniec to neni v config rows ale vlastne custom ui(viac infa v https://github.com/keboola/kbc-ui/pull/2124#issue-220101803). Ten povodny "config rows" prototyp posluzil na big query writer(https://github.com/keboola/kbc-ui/pull/1834) https://connection.keboola.com/admin/projects/<PROJECT_ID>/writers/keboola.wr-google-bigquery.

Snazil som sa drzat tohto navrhu ale aj vdaka tomu ze sa to pri rieseni big query writeru od toho odklonilo(hlavne Load Type sekce) tak som nakoniec od toho striktneho dodrzania navrhu upustil. Kazdopadne tato implmentacia ui obsahuje vsetku funkcnost ktoru writer ponuka.

Poprosim teda o dalsiu iteraciu designu, pocitam ze nasledna implementacia pojde rychlo. Do pozornosti davam spominany big query writer ktory beriem ze je "current state of art" writer ui(v config rows) takze gooddata writer ui by sa mohol stymto zladit.

Co je oproti povodnemu navrhu navyse

Sekcia GoodData Project aka Credentials

Nedaval som to do praveho sidebaru pretoze to je komplexnejsie, viac ovladacich prvkov(create modal, refresh modal)

Sekcia Load Type Settings na index stranke

Zaroven do run modalov som pridal checkbox(https://github.com/keboola/kbc-ui/pull/2124#issuecomment-430311733) pre load data only load. K tomu Najlos dobre poznamenal ze by to bolo lepsie rozbit na 2 radio button skupiny: " tohle bych asi přehodil na dvě sady radio buttonů nebo to nějak jinak pojmeoval

Update type
 [ ] Update model and load data
 [ ] Load data only

Load type
 [ ] Multiload
 [ ] Separate loads

"

Co chyba oproti povodnemu navrhu

• tym ze to neni config rows tak v detaile tabulky odpadol takmer cely pravy siderbar(versions, latest jobs) a description.

Na report bugov funkcnosti zavediem separatnu issue v kbc-ui: https://github.com/keboola/kbc-ui/issues/2254

[JakubMatejka]

Tohle by se dalo ještě poladit:

[janmichek]

@kacurez Projel jsem si to, mam k tomu vic drobnosti. Jinak celkove fajn, uz se zacinaji rodit vizualne jednotnejsi komponenty, toho mam radost. Dobre ze jsi pouzit react-bootstrap componenty

Funkcionalita: 1) Obcas se stalo, kdyz jsem si ridal novou tabulku, tak se ui seklo s touhle hlaskou v konzoli. Nedokazal jsem to vic identifikovat, treba ti to bude neco rikat

Uncaught TypeError: Cannot read property 'componentWillUnmount' of null
    at unmountComponent (https://assets-cdn.keboola.com/kbc-ui/6c3e14d/bundle.min.js:117:21920)
    at Object.unmountComponent (https://assets-cdn.keboola.com/kbc-ui/6c3e14d/bundle.min.js:33:73118)
    at unmountComponent (https://assets-cdn.keboola.com/kbc-ui/6c3e14d/bundle.min.js:117:21969)

2) ted uz jsem si vystrilel vsechny zalozeni demo projektu, ale kdyz jsem poprvy resetoval project s remove moznosti a pak zalozil novy se stejnym nazvem, tak to loadovalo do nekonecna.

Setup Modal

3) UI selectu funguje uzivatelsky nejlip od 4 a vic moznosti. Jestli to neni voser, zkus to predelat na ToggleButtonGroup . Low prio.

4) [x] Button -> 'Create Project' v pripade tvoreni novyho projectu.

Data Dimension Modal

[x] 5) elementy nejsou alignovany - mas tam zbytecne 2x f\vnoreny form-group [x] 6) header 'NewDate Dimension' [x] 7) button 'Create Date Dimension' [x] 8) po pridani novy Date Dimension se zebali sekce. To je zadouci chovani? Nebo typicky uzivatele budou chtit pridat vic datovych dimenzi pri konfiguraci? Ja nevim, myslim si ze ano. [x] 9) tabulka: akci delete bych zarovnal doprava (jako na detailu bucketu) + tooltip 'Delete' (viz 18)) [x] 10) delete date dimension - vzhledem k tomu ze je akce nevratna, bylo by dobry tam dat confirm modal 11) delete table: 'delete' -> 'Delete' + pridelat akci vraceni, nebo link na 'Show versions' ala ex-aws-s3 nebo confirm modal [x] 12) Table Modal - header 'New Table', button 'Create Table' 13) column inputy vypadaji fajn v tom layoutu, dobre sis poradil. Moc se mi tam teda nelibi ty inline styly, to ses mel ozvat, ze ti chybi UI k naplneni. 14) nepodarilo se mi rozhcodit fact grain, dej mi prosim navod. 15) layout detailu tabulky - tam je videt ze to odstava. Pls fixni to, kdybys nevedel, tak to klidne hod na me. Ten horizontalni scroll neres, to uz resime jinde. 16) Load table settings - nejak se mi tam nezda to 'if checked'. Neda se to naformulovat jinak? If checked muzes teoreticky psat u popisku kazdyho checkboxu. Pokud to potrebuje vic vysvetleni, pripada mi lepsi moznost radio. 17) Load table settings - moc se mi nelibi layout toho formu. Jestli te napadne nejaky prihodny label at je to jednotny? Low prio 18) umisteny nekterych buttonu mi prijde divocarna. zkusim to sjednotit v nasledujicim sketchi. I s ohledem ze vedle sebe muzou pribyvat akce + do budoucna tam vidim sticky featuru pro ty buttony, kdyz bude moc obsahu. Klidne by ten obsah obslouzil i static formular (low prio) 19) Gooddata Project - na co je tam Project Id? Pokud to uzivatele budou vykopirovavat, hodilo by se 'copy to clipboard'

[kacurez]

@janmichek ad 1. - nedari sa mi to nasimulovat, tak ked nato znova narazis skus si zapamatat postup alebo nieco navyse co by mohlo pomoct. Kazdopadne taketo bugy prosim reportuj sem: https://github.com/keboola/kbc-ui/issues/2254

k zbytku sa este vyjadrim ked to cele preberiem

[kacurez]

si odlozim - narazil som na bug ktory @janmichek spomina v 1. https://github.com/keboola/indigo-ui/issues/40#issuecomment-435908729 - jeho fix je v https://github.com/keboola/kbc-ui/pull/2396