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

Polish Create From Template Overlay #13424

Merged
merged 14 commits into from
Apr 16, 2019
Merged

Polish Create From Template Overlay #13424

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1e14d89
Move and rename components
alexpaxton Apr 15, 2019
8e14b26
Break overlay into subcomponents
alexpaxton Apr 15, 2019
d59c371
Create empty state with link when no templates exist
alexpaxton Apr 15, 2019
ea29307
Break down template overlay components further
alexpaxton Apr 15, 2019
fe13397
Merge branch 'master' into polish/create-from-template-overlay
alexpaxton Apr 15, 2019
c4bdeef
Enable scrolling in overlay
alexpaxton Apr 16, 2019
f20698d
Updoot changelog
alexpaxton Apr 16, 2019
dee2745
Fix e2e test
alexpaxton Apr 16, 2019
c24888c
Improve readability of code
alexpaxton Apr 16, 2019
771efd2
Import types from src/types instead of directly from client
alexpaxton Apr 16, 2019
278d3e9
Import type from src/types instead of directly from client
alexpaxton Apr 16, 2019
5d88883
Do not display version of template in details panel
alexpaxton Apr 16, 2019
b855a87
WIP import types from src/types instead of directly from client
alexpaxton Apr 16, 2019
7d7f20e
Fix template types
ebb-tide Apr 16, 2019
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
Next Next commit
Move and rename components
  • Loading branch information
@alexpaxton
alexpaxton committed Apr 15, 2019
commit 1e14d89987489b96906ee8f39a16a084bbe603f3
9 changes: 3 additions & 6 deletions ...s/DashboardImportFromTemplateOverlay.scss → ...y/DashboardCreateFromTemplateOverlay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
@import 'src/style/modules';

.import-template-overlay {
display: flex;
flex-direction: row;
width: 90%;
justify-content: center;
align-items: stretch;
height: 500px;
}

.import-template-overlay--details {
min-width: 65%;
flex: 3 0 0;
margin-left: $ix-marg-c;
}

Expand Down
17 changes: 12 additions & 5 deletions ...ts/DashboardImportFromTemplateOverlay.tsx → ...ay/DashboardCreateFromTemplateOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
EmptyState,
ComponentSize,
} from '@influxdata/clockface'
import {Overlay, ResponsiveGridSizer} from 'src/clockface'
import {Overlay, ResponsiveGridSizer, ComponentStatus} from 'src/clockface'
import {
TemplateSummary,
ITemplate,
Expand Down Expand Up @@ -70,15 +70,15 @@ class DashboardImportFromTemplateOverlay extends PureComponent<

return (
<Overlay visible={true}>
<Overlay.Container maxWidth={800}>
<Overlay.Container maxWidth={900}>
<Overlay.Heading
title="Import Dashboard from a Template"
title="Create Dashboard from a Template"
onDismiss={this.onDismiss}
/>
<Overlay.Body>
<div className="import-template-overlay">
<GetResources resource={ResourceTypes.Templates}>
<ResponsiveGridSizer columns={3}>
<ResponsiveGridSizer columns={2}>
{this.templates}
</ResponsiveGridSizer>
</GetResources>
Expand Down Expand Up @@ -130,6 +130,12 @@ class DashboardImportFromTemplateOverlay extends PureComponent<
}

private get buttons(): JSX.Element[] {
const {selectedTemplate} = this.state

const submitStatus = selectedTemplate
? ComponentStatus.Default
: ComponentStatus.Disabled

return [
<Button text="Cancel" onClick={this.onDismiss} key="cancel-button" />,
<Button
Expand All @@ -138,6 +144,7 @@ class DashboardImportFromTemplateOverlay extends PureComponent<
key="submit-button"
testID="create-dashboard-button"
color={ComponentColor.Primary}
status={submitStatus}
/>,
]
}
Expand All @@ -159,7 +166,7 @@ class DashboardImportFromTemplateOverlay extends PureComponent<
<Panel className="import-template-overlay--empty">
<Panel.Body>
<EmptyState size={ComponentSize.Medium}>
<EmptyState.Text text="Select a Template on the left" />
<EmptyState.Text text="Select a Template from the left" />
</EmptyState>
</Panel.Body>
</Panel>
Expand Down
4 changes: 2 additions & 2 deletions ui/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import DashboardPage from 'src/dashboards/components/DashboardPage'
import DashboardsIndex from 'src/dashboards/components/dashboard_index/DashboardsIndex'
import DashboardExportOverlay from 'src/dashboards/components/DashboardExportOverlay'
import DashboardImportOverlay from 'src/dashboards/components/DashboardImportOverlay'
import DashboardImportFromTemplateOverlay from 'src/dashboards/components/DashboardImportFromTemplateOverlay'
import DashboardCreateFromTemplateOverlay from 'src/dashboards/components/createFromTemplateOverlay/DashboardCreateFromTemplateOverlay'
import CreateVariableOverlay from 'src/variables/components/CreateVariableOverlay'
import DataExplorerPage from 'src/dataExplorer/components/DataExplorerPage'
import SaveAsOverlay from 'src/dataExplorer/components/SaveAsOverlay'
Expand Down Expand Up @@ -152,7 +152,7 @@ class Root extends PureComponent {
/>
<Route
path="import/template"
component={DashboardImportFromTemplateOverlay}
component={DashboardCreateFromTemplateOverlay}
/>
<Route
path=":dashboardID/export"
Expand Down
2 changes: 1 addition & 1 deletion ui/src/style/chronograf.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
@import 'src/dataLoaders/components/DataLoadersOverlay.scss';
@import 'src/shared/components/EmptyGraphError.scss';
@import 'src/shared/components/dapperScrollbars/DapperScrollbars.scss';
@import 'src/dashboards/components/DashboardImportFromTemplateOverlay.scss';
@import 'src/dashboards/components/createFromTemplateOverlay/DashboardCreateFromTemplateOverlay.scss';

// External
@import '../../node_modules/@influxdata/react-custom-scrollbars/dist/styles.css';