Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Friendlier post-setup page #3318

Merged
merged 4 commits into from
May 9, 2022
Merged

Friendlier post-setup page #3318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d0ab765
Friendlier post-setup page
johnnyaug May 5, 2022
f817669
newline
johnnyaug May 5, 2022
ad04cbb
revert comment out
johnnyaug May 5, 2022
94fb4d5
Merge branch 'master' into feature/friendly_post_setup
johnnyaug May 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/understand/branching-model.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ At its core, lakeFS uses a Git-like branching model.

### Repositories

In lakeFS, a _repository_ a logical namespace used to group together objects, branches and commits.
In lakeFS, a _repository_ is a logical namespace used to group together objects, branches and commits.
It can be considered the lakeFS analog of a bucket in an object store. Since it has version control qualities, it is also analogous to a repository in Git.

### Branches
Expand Down
4 changes: 2 additions & 2 deletions webui/src/lib/components/controls.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand where you're passing the ...rest.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


const [show, setShow] = useState(false);
const [copied, setCopied] = useState(false);
Expand Down Expand Up @@ -248,7 +248,7 @@ export const ClipboardButton = ({ text, variant, onSuccess, icon = <ClippyIcon/>
if (target.current !== null) setCopied(false)
}, 1000);
copyTextToClipboard(text, onSuccess, onError);
}}>
}} {...rest}>
{currentIcon}
</Button>
</>
Expand Down
61 changes: 35 additions & 26 deletions webui/src/pages/setup/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,48 +53,57 @@ server:
endpoint_url: ${window.location.protocol}//${window.location.host}${API_ENDPOINT}
`);
return (
<>
<Row>
<Col md={{offset: 2, span: 8}}>
<Card className="setup-widget">
<Card.Header>Congratulations</Card.Header>
<Card.Body>
<Card.Body className={"after-setup-card"}>
<h2>You&apos;re all set!</h2>
<Card.Text>
Database was initialized and admin user was created.<br/>
Here are your credentials:<br/>
Here are the credentials for your first user:<br/>
</Card.Text>
<hr/>
<Table borderless hover>
<tbody>
<tr>
<td>Key ID</td>
<td><code>{setupData.access_key_id}</code> <ClipboardButton variant="link" text={setupData.access_key_id} tooltip="Copy key ID"/></td>
</tr>
<tr>
<td>Secret Key</td>
<td><code>{setupData.secret_access_key}</code> <ClipboardButton variant="link" text={setupData.secret_access_key} tooltip="Copy secret key"/></td>
</tr>
</tbody>
</Table>
<Card.Text>
Download the initial client configuration under your <code>$HOME/.lakectl.yaml</code> and keep a copy of the data for your login into the system<br/>
</Card.Text>
<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> &#160;&#160;<ClipboardButton className={"copy-button"} variant="outline-dark" text={setupData.access_key_id} tooltip="Copy"/></div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not push the variant="outline-dark" to the css if it's shared between the 2 usages?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The variant is a react attribute, you can't apply it using CSS

</div>
<div className={"ml-2 row mt-2"}>
<div className={"col-3"}>Secret Access Key:</div>
<div className={"col-7"}><code>{setupData.secret_access_key}</code> &#160;&#160;<ClipboardButton className={"copy-button"} variant="outline-dark" text={setupData.secret_access_key} tooltip="Copy"/></div>
</div>
<Alert className={"mt-4"} variant="warning">
This is the <strong>only</strong> time that the secret access keys can be viewed or downloaded. You cannot recover them later.
</Alert>
<hr/>
<Button variant="success" href={downloadContent} taget="_blank" download="lakectl.yaml"><DownloadIcon />Download Configuration </Button>
{' '}
<Button variant="link" onClick={() => router.push({pathname: "/auth/login", query: router.query})}>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(router.query && router.query.next ? `/auth/login?next=${router.query.next}` : '/auth/login', "_blank")}>Go To Login</Button>
</div>
</Card.Body>
</Card>
</Col>
</Row>
<Row>
<Col md={{offset: 2, span: 8}}>
<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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor: path is valid for POSIX only.

<div className={"mt-3"} style={{textAlign: "center"}}>
<Button className={"p-2 pl-3 pr-3 after-setup-btn"} href={downloadContent}
taget="_blank" download="lakectl.yaml"><DownloadIcon/> Download Configuration
</Button>
</div>
<div className={"mt-3"}>
To use lakectl, you will need to download the binary. <a href="https://www.youtube.com/watch?v=8nO7RT411nA" rel="noreferrer" target={"_blank"}>Learn more</a>.
</div>
</Card.Body>
</Card>
</Col>
</Row></>
);
}
return (
<Row>
<Col md={{offset: 2, span: 8}}>
<Card className="setup-widget">
<Card className="setup-widget">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Undo

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also not related here - but it's an indentation fix.

<Card.Header>Initial Setup</Card.Header>
<Card.Body>
<Card.Text>
Expand Down
31 changes: 23 additions & 8 deletions webui/src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,19 +314,13 @@
}

.table .change-entry-row .change-entry-row-actions .btn-link,
.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 {
Comment on lines -317 to +323
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these changes related?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really, just a cleanup.

visibility: visible;
display: inline-block;
}
Expand Down Expand Up @@ -500,3 +494,24 @@ td .form-group {
.action-bar .btn.cancel-create-user {
background-color: #7e7e7e;
}

.after-setup-btn {
width: 250px;
margin-top: 7px;
background-color: #0fa276;
border: 0;
}
.after-setup-btn:hover {
background-color: #4e555b;
}

.after-setup-card code {
color: #4e555b;
}

.copy-button {
display: inline-flex;
align-items: center;
height: 100%;
padding: 0 5px 0;
}