Friendlier post-setup page #3318
Conversation
johnnyaug
added
the
include-changelog
| <Alert variant="warning"> | ||
| <div className={"ml-2 row mt-4"}> | ||
| <div className={"col-3"}>Access Key ID:</div> | ||
| <div className={"col-7"}><code>{setupData.access_key_id}</code>   <ClipboardButton className={"copy-button"} variant="outline-dark" text={setupData.access_key_id} tooltip="Copy"/></div> |
There was a problem hiding this comment.
Why not push the variant="outline-dark" to the css if it's shared between the 2 usages?
There was a problem hiding this comment.
The variant is a react attribute, you can't apply it using CSS
webui/src/pages/setup/index.jsx
Outdated
| {' '} | ||
| <Button variant="link" onClick={() => router.push({pathname: "/auth/login", query: {next}})}>Go To Login</Button> | ||
| <div className={"mt-4"} style={{textAlign: "center"}}> | ||
| <Button className={"p-2 pl-3 pr-3 after-setup-btn"} onClick={() => window.open("/auth/login", "_blank")}>Go To Login</Button> |
There was a problem hiding this comment.
This changes the current behaviour by creating a new tab, right?
There was a problem hiding this comment.
Yes, good catch! I was thinking it's better that to have the credentials still available in the previous tab.
| ); | ||
| } | ||
| return ( | ||
| <Row> | ||
| <Col md={{offset: 2, span: 8}}> | ||
| <Card className="setup-widget"> | ||
| <Card className="setup-widget"> |
There was a problem hiding this comment.
Also not related here - but it's an indentation fix.
| .table .tree-entry-row .change-entry-row-actions .btn-link, | ||
| .actions-runs-list .table tbody tr td .clipboard-copy button, | ||
| .actions-runs-list .table tbody tr td .run-filter .link { | ||
| .table .tree-entry-row .change-entry-row-actions .btn-link { | ||
| visibility: hidden; | ||
| font-size: 0.7rem; | ||
| } | ||
| .table .change-entry-row:hover .change-entry-row-actions .btn-link, | ||
| .table .tree-entry-row:hover .change-entry-row-actions .btn-link, | ||
| .table .tree-entry-row:focus .change-entry-row-actions .btn-link, | ||
| .actions-runs-list .table tbody tr:hover td .clipboard-copy button , | ||
| .actions-runs-list .table tbody tr:focus td .clipboard-copy button , | ||
| .actions-runs-list .table tbody tr:hover td .run-filter .link , | ||
| .actions-runs-list .table tbody tr:focus td .run-filter .link { | ||
| .table .tree-entry-row:focus .change-entry-row-actions .btn-link { |
There was a problem hiding this comment.
Are these changes related?
There was a problem hiding this comment.
Not really, just a cleanup.
| @@ -218,7 +218,7 @@ export const TooltipButton = ({ onClick, variant, children, tooltip, className=" | |||
| ); | |||
| }; | |||
|
|
|||
| export const ClipboardButton = ({ text, variant, onSuccess, icon = <ClippyIcon/>, onError, tooltip = "Copy to clipboard"}) => { | |||
| export const ClipboardButton = ({ text, variant, onSuccess, icon = <ClippyIcon/>, onError, tooltip = "Copy to clipboard", ...rest}) => { | |||
There was a problem hiding this comment.
I don't understand where you're passing the ...rest.
There was a problem hiding this comment.
I use it to on the internal button itself. The goal is for the attributes from to be passed to the internal button. For example, when using className - pass it to the underlying button.
| <Card className="mt-5"> | ||
| <Card.Body className={"after-setup-card"}> | ||
| <h5>Configure lakectl</h5> | ||
| <div>Use the command-line tool to perform Git-like operations on your data. Save the configuration file under <code>~/.lakectl.yaml</code>:</div> |
There was a problem hiding this comment.
Minor: path is valid for POSIX only.
Before:
After
