Skip to content

A
amundsen_dev
Unverified Commit 4e24bfe1 authored by Tamika Tannis's avatar Tamika Tannis Committed by GitHub
Browse files
Options

Search UI Cleanup Tasks (#319) 

* no border on home link hover

* more padding so column type doesn't look squished

* Prevent navbar styles from affectiing dropdown; Add presto logo

* Add a send icon to request form button

* Add a test; Improve the config doc
parent d5754b45
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 14 deletions
amundsen_application/static/css/_icons.scss
View file @ 4e24bfe1
......@@ -96,6 +96,11 @@ img.icon {
background-color: transparent;
}
&.icon-presto {
content: url('/static/images/icons/logo-presto.svg');
background-color: transparent;
}
&.icon-preview {
-webkit-mask-image: url('/static/images/icons/Preview.svg');
mask-image: url('/static/images/icons/Preview.svg');
......@@ -121,6 +126,11 @@ img.icon {
mask-image: url('/static/images/icons/Search.svg');
}
&.icon-send {
-webkit-mask-image: url('/static/images/icons/Send.svg');
mask-image: url('/static/images/icons/Send.svg');
}
&.icon-slack {
-webkit-mask-image: url('/static/images/icons/slack.svg');
mask-image: url('/static/images/icons/slack.svg');
......
amundsen_application/static/images/icons/Send.svg 0 → 100644
View file @ 4e24bfe1
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-send"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
\ No newline at end of file
amundsen_application/static/images/icons/logo-presto.svg 0 → 100644
View file @ 4e24bfe1
<svg width="2500" height="2500" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><rect width="256" height="256" rx="18"/><path d="M230.118 128.531c0 7.047-5.713 12.76-12.761 12.76-7.047 0-12.76-5.713-12.76-12.76 0-7.048 5.713-12.761 12.76-12.761 7.048 0 12.761 5.713 12.761 12.761" fill="#669CFE"/><path d="M203.806 154.531c0 7.047-5.713 12.76-12.761 12.76-7.048 0-12.761-5.713-12.761-12.76 0-7.048 5.713-12.761 12.761-12.761 7.048 0 12.761 5.713 12.761 12.761" fill="#3FE7FE"/><path d="M177.451 181.072c0 7.048-5.713 12.761-12.76 12.761-7.048 0-12.761-5.713-12.761-12.761 0-7.047 5.713-12.76 12.761-12.76 7.047 0 12.76 5.713 12.76 12.76" fill="#FFF"/><path d="M202.993 102.336c0 6.597-5.348 11.944-11.944 11.944-6.597 0-11.945-5.347-11.945-11.944s5.348-11.945 11.945-11.945c6.596 0 11.944 5.348 11.944 11.945" fill="#669CFE"/><path d="M176.738 128.298c0 6.597-5.348 11.945-11.944 11.945-6.597 0-11.945-5.348-11.945-11.945s5.348-11.945 11.945-11.945c6.596 0 11.944 5.348 11.944 11.945" fill="#3FE7FE"/><path d="M150.569 154.642c0 6.597-5.347 11.945-11.944 11.945s-11.945-5.348-11.945-11.945 5.348-11.944 11.945-11.944 11.944 5.347 11.944 11.944" fill="#FFF"/><path d="M175.743 76.235c0 5.991-4.857 10.849-10.849 10.849s-10.849-4.858-10.849-10.849c0-5.992 4.857-10.849 10.849-10.849s10.849 4.857 10.849 10.849" fill="#669CFE"/><path d="M149.522 102.191c0 5.991-4.858 10.849-10.85 10.849-5.991 0-10.849-4.858-10.849-10.849 0-5.992 4.858-10.85 10.849-10.85 5.992 0 10.85 4.858 10.85 10.85" fill="#3FE7FE"/><path d="M123.253 128.618c0 5.992-4.857 10.849-10.849 10.849s-10.849-4.857-10.849-10.849c0-5.991 4.857-10.849 10.849-10.849s10.849 4.858 10.849 10.849" fill="#FFF"/><path d="M148.618 50.008c0 5.386-4.366 9.752-9.752 9.752-5.386 0-9.752-4.366-9.752-9.752 0-5.387 4.366-9.753 9.752-9.753 5.386 0 9.752 4.366 9.752 9.753" fill="#669CFE"/><path d="M122.297 76.089c0 5.386-4.366 9.753-9.752 9.753-5.386 0-9.752-4.367-9.752-9.753s4.366-9.752 9.752-9.752c5.386 0 9.752 4.366 9.752 9.752" fill="#3FE7FE"/><path d="M96.06 102.471c0 5.386-4.367 9.752-9.753 9.752s-9.752-4.366-9.752-9.752c0-5.386 4.366-9.753 9.752-9.753 5.386 0 9.753 4.367 9.753 9.753" fill="#FFF"/><path d="M95.06 154.721a8.67 8.67 0 1 1-17.338-.002 8.67 8.67 0 0 1 17.338.002M121.185 180.846a8.67 8.67 0 1 1-17.338-.002 8.67 8.67 0 0 1 17.338.002M147.268 206.929a8.669 8.669 0 0 1-8.669 8.669 8.669 8.669 0 0 1-8.669-8.669 8.669 8.669 0 0 1 8.669-8.669 8.669 8.669 0 0 1 8.669 8.669M95.185 206.929a8.67 8.67 0 1 1-17.339 0 8.67 8.67 0 0 1 17.339 0M42.601 206.929a8.67 8.67 0 1 1-17.337 0 8.67 8.67 0 0 1 17.337 0M68.726 180.804a8.67 8.67 0 1 1-17.337 0 8.67 8.67 0 0 1 17.337 0" fill="#6A9EFE"/><path d="M95.172 50.032a9.06 9.06 0 0 1-18.118 0 9.06 9.06 0 1 1 18.118 0" fill="#3FE7FE"/><path d="M68.799 76.538a9.06 9.06 0 1 1-18.12 0 9.06 9.06 0 0 1 18.12 0M41.174 49.663a7.31 7.31 0 1 1-14.62 0 7.31 7.31 0 0 1 14.62 0" fill="#FFF"/></svg>
\ No newline at end of file
amundsen_application/static/images/icons/presto-logo.svg 0 → 100644
View file @ 4e24bfe1
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="3000px" height="3000px" viewBox="0 0 3000 3000" enable-background="new 0 0 3000 3000" xml:space="preserve">
<title>Presto logo</title>
<g>
<path d="M211.76,1825.824c-38.583,0-74.229-15.579-92.034-30.429v155.865H57.373v-501.755h52.694l5.199,37.115
c17.075-23.762,57.154-44.54,100.955-44.54c108.352,0,136.555,87.592,136.555,191.502
C352.776,1749.369,314.183,1825.824,211.76,1825.824z M119.726,1746.404c18.562,14.841,48.243,28.942,83.123,28.942
c71.995,0,87.583-56.397,87.583-142.493c0-86.105-13.354-140.295-83.123-140.295c-37.115,0-66.786,17.823-87.583,36.376V1746.404
L119.726,1746.404z M617.001,1501.47c-41.557,8.164-83.87,22.266-115.047,38.602v277.58h-62.344v-368.137h51.216l6.668,43.044
c22.274-22.256,63.102-43.782,111.344-48.242L617.001,1501.47L617.001,1501.47z M714.974,1661.048
c3.722,77.933,23.013,115.047,97.981,115.047c39.331,0,80.157-9.659,108.36-20.778l9.65,47.485
c-30.428,12.615-78.689,22.283-118.759,22.283c-132.861,0-159.587-90.565-159.587-193.728c0-106.126,34.88-189.267,147.711-189.267
c100.197,0,141.764,70.517,141.764,158.848v60.118H714.974V1661.048z M714.974,1612.075h167.002v-13.372
c0-68.291-21.518-109.848-82.393-109.848C730.572,1488.855,715.722,1538.585,714.974,1612.075z M1118.738,1825.095
c-37.114,0-84.618-8.173-116.533-24.51l11.875-48.972c28.203,13.354,69.031,23.013,101.694,23.013
c48.972,0,74.968-13.372,74.968-54.929c0-39.358-26.726-51.216-76.455-63.101c-80.896-19.292-111.325-47.504-111.325-110.587
c0-69.039,37.854-103.919,123.94-103.919c35.619,0,73.49,6.686,99.459,18.543l-10.39,49.748
c-23.004-9.659-58.641-17.823-87.583-17.823c-46.765,0-64.578,12.615-64.578,49.738c0,38.593,17.813,46.018,70.508,60.109
c71.994,19.301,117.272,42.305,117.272,112.831C1251.59,1792.413,1195.175,1825.095,1118.738,1825.095z M1517.313,1813.948
c-15.588,5.929-51.964,11.137-75.698,11.137c-63.093,0-89.809-34.897-89.809-92.052v-233.041h-63.831v-50.486h63.831v-89.809
l62.344-8.902v98.711h104.649l-5.189,50.486h-99.459v230.095c0,34.132,8.164,44.539,42.305,44.539
c14.85,0,36.367-2.982,55.668-7.442L1517.313,1813.948z M1723.637,1825.095c-106.885,0-155.135-80.158-155.135-191.502
c0-111.335,48.25-191.503,155.135-191.503c106.875,0,155.125,80.158,155.125,191.503
C1878.762,1744.927,1830.512,1825.095,1723.637,1825.095z M1723.637,1492.559c-77.193,0-92.791,63.083-92.791,141.034
c0,77.932,15.598,141.033,92.791,141.033c77.184,0,92.781-63.102,92.781-141.033
C1816.418,1555.642,1800.82,1492.559,1723.637,1492.559z"/>
<ellipse fill="#5B87DA" cx="2537.919" cy="1090.998" rx="42.259" ry="42.259"/>
<ellipse fill="#5B87DA" cx="2654.086" cy="1207.173" rx="46.947" ry="46.947"/>
<ellipse transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 3793.394 4217.9663)" fill="#5B87DA" cx="2770.25" cy="1323.36" rx="51.626" ry="51.636"/>
<ellipse transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 3909.4766 4498.1318)" fill="#5B87DA" cx="2886.308" cy="1439.408" rx="56.315" ry="56.323"/>
<ellipse fill="#1EDCFF" cx="2305.7" cy="1090.998" rx="37.571" ry="37.571"/>
<ellipse fill="#1EDCFF" cx="2421.865" cy="1207.176" rx="42.26" ry="42.26"/>
<ellipse fill="#1EDCFF" cx="2537.924" cy="1323.23" rx="46.947" ry="46.947"/>
<ellipse fill="#1EDCFF" cx="2654.046" cy="1439.342" rx="51.636" ry="51.636"/>
<ellipse transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 3629.1636 4614.3926)" fill="#1EDCFF" cx="2770.237" cy="1555.585" rx="56.315" ry="56.325"/>
<ellipse cx="2073.607" cy="1091.132" rx="32.882" ry="32.882"/>
<ellipse cx="2189.595" cy="1207.103" rx="37.571" ry="37.571"/>
<ellipse cx="2305.818" cy="1323.357" rx="42.259" ry="42.259"/>
<ellipse cx="2421.924" cy="1439.459" rx="46.947" ry="46.947"/>
<ellipse transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 3232.7944 4450.2061)" cx="2538.03" cy="1555.595" rx="51.627" ry="51.635"/>
<ellipse transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 3348.8352 4730.2148)" cx="2654.052" cy="1671.559" rx="56.315" ry="56.324"/>
<g>
<ellipse fill="#5B87DA" cx="2305.717" cy="1555.418" rx="37.57" ry="37.57"/>
<ellipse fill="#5B87DA" cx="2189.618" cy="1671.521" rx="37.571" ry="37.571"/>
<ellipse fill="#5B87DA" cx="2073.547" cy="1787.714" rx="37.57" ry="37.57"/>
<ellipse fill="#5B87DA" cx="2305.729" cy="1787.648" rx="37.571" ry="37.571"/>
<ellipse fill="#5B87DA" cx="2537.971" cy="1787.735" rx="37.57" ry="37.57"/>
<ellipse fill="#5B87DA" cx="2421.819" cy="1671.518" rx="37.571" ry="37.571"/>
</g>
</g>
</svg>
amundsen_application/static/js/components/NavBar/index.tsx
View file @ 4e24bfe1
......@@ -59,7 +59,7 @@ export class NavBar extends React.Component<NavBarProps> {
<div className="row">
<div className="nav-bar">
<div id="nav-bar-left" className="nav-bar-left">
<Link to={`/`}>
<Link to={`/`} className="no-border-on-hover">
{
AppConfig.logoPath &&
<img id="logo-icon" className="logo-icon" src={AppConfig.logoPath} />
......@@ -86,7 +86,7 @@ export class NavBar extends React.Component<NavBarProps> {
<div>{this.props.loggedInUser.email}</div>
</div>
<li>
<Link id="nav-bar-avatar-link" to={`/user/${this.props.loggedInUser.user_id}?source=navbar`}>
<Link id="nav-bar-avatar-link" className="no-border-on-hover" to={`/user/${this.props.loggedInUser.user_id}?source=navbar`}>
My Profile
</Link>
</li>
......
amundsen_application/static/js/components/NavBar/styles.scss
View file @ 4e24bfe1
......@@ -5,7 +5,6 @@
background: $nav-bar-color;
padding: 0px 32px 1px 32px;
color: $white;
display: flex;
flex-direction: row;
align-items: center;
......@@ -28,6 +27,13 @@
border-bottom: 4px solid $white;
}
&.no-border-on-hover {
&:hover {
/* override border-bottom style */
border-bottom: none;
}
}
&.nav-bar-avatar-link {
margin-top: -4px;
padding-left: 4px;
......
amundsen_application/static/js/components/TableDetail/RequestMetadataForm/index.tsx
View file @ 4e24bfe1
......@@ -180,7 +180,8 @@ export class RequestMetadataForm extends React.Component<RequestMetadataProps, R
{ defaultComment }
</textarea>
</div>
<button id="submit-request-button" className="btn btn-primary" type="submit">
<button id="submit-request-button" className="btn btn-primary submit-request-button" type="submit">
<img className='icon icon-send'/>
{SEND_BUTTON}
</button>
</form>
......
amundsen_application/static/js/components/TableDetail/RequestMetadataForm/styles.scss
View file @ 4e24bfe1
......@@ -29,6 +29,13 @@
font-weight: $font-weight-body-regular;
}
.submit-request-button {
img.icon {
margin: 0 12px 0 0;
transform: rotate(45deg);
}
}
input,
textarea {
color: $text-secondary;
......
amundsen_application/static/js/components/TableDetail/RequestMetadataForm/tests/index.spec.tsx
View file @ 4e24bfe1
......@@ -204,9 +204,10 @@ describe('RequestMetadataForm', () => {
expect(textArea.props().placeholder).toBe(COMMENT_PLACEHOLDER_DEFAULT);
});
it('renders submit button with correct text', () => {
it('renders submit button with correct text and icon', () => {
element = wrapper.find('#submit-request-button');
expect(element.text()).toEqual(SEND_BUTTON);
expect(element.find('img').props().className).toEqual('icon icon-send');
});
});
......
amundsen_application/static/js/components/common/ResourceListItem/styles.scss
View file @ 4e24bfe1
......@@ -31,6 +31,7 @@
display: flex;
flex: 7;
min-width: 0px;
margin-right: 24px;
.resource-info-text {
max-width: calc(100% - 32px);
......@@ -68,6 +69,7 @@
flex-wrap: wrap;
margin-top: auto;
margin-bottom: auto;
margin-left: 24px;
.flag {
margin: 4px;
......
amundsen_application/static/js/config/config-default.ts
View file @ 4e24bfe1
......@@ -46,6 +46,10 @@ const configDefault: AppConfig = {
displayName: 'Hive',
iconClass: 'icon-hive',
},
'presto': {
displayName: 'Presto',
iconClass: 'icon-presto',
},
'postgres': {
displayName: 'Postgres',
iconClass: 'icon-postgres',
......
docs/application_config.md
View file @ 4e24bfe1
......@@ -17,6 +17,11 @@ _TODO: Please add doc_
_TODO: Please add doc_
## Index Users
In Amundsen, users themselves are data resources and user metadata helps to facilitate network based discovery. When users are indexed they will show up in search results, and selecting a user surfaces a profile page that displays that user's relationships with different data resources.
After ingesting user metadata into the search and metadata services, set `IndexUsersConfig.enabled` to `true` on the application configuration to display the UI for the aforementioned features.
## Mail Client Features
Amundsen has two features that leverage the custom mail client -- the feedback tool and notifications.
......@@ -34,16 +39,13 @@ _TODO: Please add doc_
## Resource Configurations
### Datasets
We provide a `datasets` option on our `ResourceConfig`. This can be used for the following customizations:
1. You can configure custom icons to be used throughout the UI when representing datasets from particular sources/databases. On the `ResourceConfig.datasets` object, add an entry with the `id` used to reference that database and set the `iconClass`. This `iconClass` should be defined in [icons.scss](https://github.com/lyft/amundsenfrontendlibrary/blob/master/amundsen_application/static/css/_icons.scss).
2. You can configure a specific display name to be used throughout the UI when representing datasets from particular sources/databases. On the `ResourceConfig.datasets` object, add an entry with the `id` used to reference that database and set the `displayName`.
#### Custom Icons
You can configure custom icons to be used throughout the UI when representing datasets from particular sources/databases. On the `ResourceConfig.datasets` object, add an entry with the `id` used to reference that database and set the `iconClass`. This `iconClass` should be defined in [icons.scss](https://github.com/lyft/amundsenfrontendlibrary/blob/master/amundsen_application/static/css/_icons.scss).
#### Display Names
_TODO: Please add doc_
You can configure a specific display name to be used throughout the UI when representing datasets from particular sources/databases. On the `ResourceConfig.datasets` object, add an entry with the `id` used to reference that database and set the `displayName`.
## Table Lineage
......@@ -52,7 +54,3 @@ _TODO: Please add doc_
## Table Profile
_TODO: Please add doc*_
## Feature Flags
_TODO: Please add doc_
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment