Skip to content

Commit

Permalink
EDSC-4252: Update the Application header to match the design in post …
Browse files Browse the repository at this point in the history 
…tophat2 update

* EDSC-4252: Adjust the size of the panel width; conditional classnames for borders around the ma

* EDSC-4252: Fix icons and some of the look

* EDSC-4252: fix some tests remove header and improve styling

* EDSC-4252: Remove not needed components; clean up colormap, banner placement, and scale-control placement

* EDSC-4252: fixing sizing of height; and removing extra renders

* EDSC-4252: Clean up; fix height issues when error banner was up

* EDSC-4252: Update color and spacing more cleanup

* EDSC-4252: Fixes timeline test

* EDSC-4252: Ensure all links from anywhere to tophat work as expected

* EDSC-4232: Adding wrapping container to fix banner mismatch tour is having issues

* EDSC-4252: Cleaning up the container wrapper

* EDSC-4252: Fix background color for not-found page; error page no longer needs logic, fix state for initial project value

* EDSC-4252: Putting map styling with container wrapper in the correct spot

* EDSC-4252: Updating panel width max after conversation fixing more playwright tests

* EDSC-4252: fix comment; for now skip map tests these will be refined in subsequent ticket

* EDSC-4252: Skip map tests and some search.spec tests

---------

Co-authored-by: Matthew Crouch <[email protected]>
Co-authored-by: Trevor Lang <[email protected]>
Co-authored-by: Matthew Crouch <[email protected]>
  • Loading branch information
@eudoroolivares2016 @macrouch @trevorlang
4 people authored Oct 30, 2024
1 parent ecf5fdb commit 4b77b15
Show file tree
Hide file tree
Showing 44 changed files with 750 additions and 880 deletions.
4 changes: 3 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -350,7 +350,9 @@ <h3 class="fallback-page__heading">Your browser is out of date</h3>
src="https://cdn.earthdata.nasa.gov/tophat2/tophat2.js"
async="async"
defer="defer"
data-show-fbm="false"
data-show-fbm="true"
data-app-title="Search"
data-app-link="/"
data-show-status="true"
data-status-api-url="https://status.earthdata.nasa.gov/api/v1/notifications"
data-show-outage-banner="true">
Expand Down
10 changes: 10 additions & 0 deletions static/src/css/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* > button,
* > input,
* > textarea,
.dropdown-toggle,
.btn {
&:focus {
box-shadow: none;
Expand All @@ -15,6 +16,10 @@
border-color: transparent;
outline: 1px dashed $color__nasa-blue;
outline-offset: 0.125rem;

&.focus-light {
outline: 1px dashed $color__spacesuit-white;
}
}

&.disabled,
Expand Down Expand Up @@ -48,6 +53,11 @@ body.is-panels-will-minimize {
}
}

// Prevent tophat from resizing on page load
body .th-wrapper {
font-size: 1rem;
}

@include media-breakpoint-up(xl) {
html {
font-size: 102%;
Expand Down
2 changes: 1 addition & 1 deletion static/src/css/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
.route-wrapper--content-page & {
justify-content: flex-start;
overflow-x: hidden;
overflow-y: scroll;
overflow-y: auto;
}

.route-wrapper--content-page-centered & {
Expand Down
1 change: 1 addition & 0 deletions static/src/css/vendor/bootstrap/_overrides.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,4 @@ $container-max-widths: (
xl: 1200px,
xxl: 1900px
);

6 changes: 3 additions & 3 deletions static/src/css/vendor/leaflet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
position: absolute;
}

Reduce the font size on the scale elements
// Reduce the font size on the scale elements
.leaflet-control-scale-line {
font-weight: 400;
}
Expand All @@ -96,7 +96,7 @@
border-radius: 2px;

label {
margin-bottom: 5px;
margin-bottom: 15px;

&:last-child {
margin-bottom: 0;
Expand Down Expand Up @@ -193,7 +193,7 @@
border-top-right-radius: 4px;
}

.leaflet-bottom .leaflet-control-scale {
.leaflet-bottom {
margin-bottom: 10px;
}

Expand Down
261 changes: 132 additions & 129 deletions static/src/js/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ import Project from './routes/Project/Project'
import Search from './routes/Search/Search'

// Components and Containers
import SecondaryToolbarContainer from './containers/SecondaryToolbarContainer/SecondaryToolbarContainer'
import AboutCSDAModalContainer from './containers/AboutCSDAModalContainer/AboutCSDAModalContainer'
import AboutCwicModalContainer from './containers/AboutCwicModalContainer/AboutCwicModalContainer'
import AppHeader from './components/AppHeader/AppHeader'
import AuthCallbackContainer from './containers/AuthCallbackContainer/AuthCallbackContainer'
import AuthRequiredContainer from './containers/AuthRequiredContainer/AuthRequiredContainer'
import AuthTokenContainer from './containers/AuthTokenContainer/AuthTokenContainer'
Expand All @@ -47,6 +47,7 @@ import ShapefileUploadModalContainer from './containers/ShapefileUploadModalCont
import Spinner from './components/Spinner/Spinner'
import TooManyPointsModalContainer from './containers/TooManyPointsModalContainer/TooManyPointsModalContainer'
import UrlQueryContainer from './containers/UrlQueryContainer/UrlQueryContainer'
import WrappingContainer from './containers/WrappingContainer/WrappingContainer'

// Required for toast notification system
window.reactToastProvider = React.createRef()
Expand Down Expand Up @@ -121,137 +122,139 @@ class App extends Component {
<ErrorBannerContainer />
<AuthTokenContainer>
<UrlQueryContainer>
<AppHeader />
<Switch>
<Route
path="/admin"
render={
() => (
<AuthRequiredContainer>
<WrappingContainer>
<SecondaryToolbarContainer />
<Switch>
<Route
path="/admin"
render={
() => (
<AuthRequiredContainer>
<Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--small" />}>
<Admin />
</Suspense>
</AuthRequiredContainer>
)
}
/>
<Route
path={this.portalPaths('/contact-info')}
render={
() => (
<AuthRequiredContainer>
<Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--small" />}>
<ContactInfo />
</Suspense>
</AuthRequiredContainer>
)
}
/>
<Route
path={this.portalPaths('/preferences')}
render={
() => (
<AuthRequiredContainer>
<Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--small" />}>
<Preferences />
</Suspense>
</AuthRequiredContainer>
)
}
/>
<Route
path={this.portalPaths('/earthdata-download-callback')}
render={
() => (
<Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--small" />}>
<Admin />
<EarthdataDownloadRedirect />
</Suspense>
</AuthRequiredContainer>
)
}
/>
<Route
path={this.portalPaths('/contact-info')}
render={
() => (
<AuthRequiredContainer>
<Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--small" />}>
<ContactInfo />
</Suspense>
</AuthRequiredContainer>
)
}
/>
<Route
path={this.portalPaths('/preferences')}
render={
() => (
<AuthRequiredContainer>
<Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--small" />}>
<Preferences />
</Suspense>
</AuthRequiredContainer>
)
}
/>
<Route
path={this.portalPaths('/earthdata-download-callback')}
render={
() => (
<Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--small" />}>
<EarthdataDownloadRedirect />
</Suspense>
)
}
/>
<Route
path={this.portalPaths('/subscriptions')}
render={
() => (
<AuthRequiredContainer>
<Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--small" />}>
<Subscriptions />
</Suspense>
</AuthRequiredContainer>
)
}
/>
<Redirect exact from="/data/retrieve/:retrieval_id" to="/downloads/:retrieval_id" />
<Redirect exact from="/data/status" to="/downloads" />
<Route
path={this.portalPaths('/downloads')}
render={
() => (
<AuthRequiredContainer>
<Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--small" />}>
<Downloads />
</Suspense>
</AuthRequiredContainer>
)
}
/>
<Route
path={this.portalPaths('/projects')}
render={
() => (
<AuthRequiredContainer>
<Project />
</AuthRequiredContainer>
)
}
/>
<Redirect exact from="/portal/:portalId/" to="/portal/:portalId/search" />
<Redirect exact from="/" to="/search" />
<Route
path={this.portalPaths('/search')}
render={
() => (
<>
<SearchTour />
<Search />
<Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--white spinner--small" />}>
<EdscMapContainer />
</Suspense>
</>
)
}
/>
<Route
exact
path="/auth_callback"
render={
() => (
<AuthCallbackContainer />
)
}
/>
<Route component={NotFound} />
</Switch>
)
}
/>
<Route
path={this.portalPaths('/subscriptions')}
render={
() => (
<AuthRequiredContainer>
<Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--small" />}>
<Subscriptions />
</Suspense>
</AuthRequiredContainer>
)
}
/>
<Redirect exact from="/data/retrieve/:retrieval_id" to="/downloads/:retrieval_id" />
<Redirect exact from="/data/status" to="/downloads" />
<Route
path={this.portalPaths('/downloads')}
render={
() => (
<AuthRequiredContainer>
<Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--small" />}>
<Downloads />
</Suspense>
</AuthRequiredContainer>
)
}
/>
<Route
path={this.portalPaths('/projects')}
render={
() => (
<AuthRequiredContainer>
<Project />
</AuthRequiredContainer>
)
}
/>
<Redirect exact from="/portal/:portalId/" to="/portal/:portalId/search" />
<Redirect exact from="/" to="/search" />
<Route
path={this.portalPaths('/search')}
render={
() => (
<>
<SearchTour />
<Search />
<Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--white spinner--small" />}>
<EdscMapContainer />
</Suspense>
</>
)
}
/>
<Route
exact
path="/auth_callback"
render={
() => (
<AuthCallbackContainer />
)
}
/>
<Route component={NotFound} />
</Switch>
<Switch>
<Route path={this.portalPaths('/')}>
<AboutCSDAModalContainer />
<AboutCwicModalContainer />
<EditSubscriptionModalContainer />
<ChunkedOrderModalContainer />
<DeprecatedParameterModalContainer />
<KeyboardShortcutsModalContainer />
<ShapefileDropzoneContainer />
<ShapefileUploadModalContainer />
<TooManyPointsModalContainer />
</Route>
<Route path={this.portalPaths('/projects')}>
<AboutCSDAModalContainer />
</Route>
<Route path={this.portalPaths('/downloads')}>
<AboutCSDAModalContainer />
</Route>
</Switch>
</WrappingContainer>
<FooterContainer />
<Switch>
<Route path={this.portalPaths('/')}>
<AboutCSDAModalContainer />
<AboutCwicModalContainer />
<EditSubscriptionModalContainer />
<ChunkedOrderModalContainer />
<DeprecatedParameterModalContainer />
<KeyboardShortcutsModalContainer />
<ShapefileDropzoneContainer />
<ShapefileUploadModalContainer />
<TooManyPointsModalContainer />
</Route>
<Route path={this.portalPaths('/projects')}>
<AboutCSDAModalContainer />
</Route>
<Route path={this.portalPaths('/downloads')}>
<AboutCSDAModalContainer />
</Route>
</Switch>
</UrlQueryContainer>
</AuthTokenContainer>
</ConnectedRouter>
Expand Down
6 changes: 0 additions & 6 deletions static/src/js/__tests__/App.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,12 +83,6 @@ jest.mock('../containers/AboutCwicModalContainer/AboutCwicModalContainer', () =>
return MockedAboutCwicModalContainer
})

jest.mock('../components/AppHeader/AppHeader', () => {
const MockedAppHeader = () => <div data-testid="mocked-app-header" />

return MockedAppHeader
})

jest.mock('../containers/AuthCallbackContainer/AuthCallbackContainer', () => {
const MockedAuthCallbackContainer = () => <div data-testid="mocked-auth-callback-container" />

Expand Down
7 changes: 5 additions & 2 deletions static/src/js/components/AdminPreferencesMetrics/__tests__/AdminPreferencesMetrics.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,11 @@ const setup = () => {
preferencesMetrics
}

// https://testing-library.com/docs/example-react-router/
render(<AdminPreferencesMetrics {...props} />, { wrapper: MemoryRouter })
render(
<MemoryRouter>
<AdminPreferencesMetrics {...props} />
</MemoryRouter>
)

return {
preferencesMetrics
Expand Down
Loading

0 comments on commit 4b77b15

Please sign in to comment.