Skip to content

[Logs onboarding] StepsFooter outside of main panel #156686

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

Merged
yngrdyn merged 2 commits into from
May 4, 2023
Merged

[Logs onboarding] StepsFooter outside of main panel #156686

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e801389
StepsFooter outside of main panel
yngrdyn May 4, 2023
fe6d439
Merge branch 'main' into stepFooter-as-slot
yngrdyn May 4, 2023
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
26 changes: 15 additions & 11 deletions ...lugins/observability_onboarding/public/components/app/custom_logs/wizard/collect_logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,21 @@ export function CollectLogs() {
}

return (
<StepPanel title="">
<StepPanel
title=""
panelFooter={
<StepPanelFooter
items={[
<EuiButton color="ghost" fill onClick={onBack}>
Back
</EuiButton>,
<EuiButton color="primary" fill onClick={onContinue}>
Continue
</EuiButton>,
]}
/>
}
>
<StepPanelContent>
<EuiText color="subdued">
<p>
Expand Down Expand Up @@ -90,16 +104,6 @@ export function CollectLogs() {
</EuiFlexItem>
</EuiFlexGroup>
</StepPanelContent>
<StepPanelFooter
items={[
<EuiButton color="ghost" fill onClick={onBack}>
Back
</EuiButton>,
<EuiButton color="primary" fill onClick={onContinue}>
Continue
</EuiButton>,
]}
/>
</StepPanel>
);
}
36 changes: 20 additions & 16 deletions ...gins/observability_onboarding/public/components/app/custom_logs/wizard/configure_logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,26 @@ export function ConfigureLogs() {
}

return (
<StepPanel title="Choose what logs to collect">
<StepPanel
title="Choose what logs to collect"
panelFooter={
<StepPanelFooter
items={[
<EuiButton color="ghost" fill onClick={onBack}>
Back
</EuiButton>,
<EuiButton
color="primary"
fill
onClick={onContinue}
isDisabled={!(logsType && uploadType)}
>
Continue
</EuiButton>,
]}
/>
}
>
<StepPanelContent>
<LogsTypeSection
title="System logs"
Expand Down Expand Up @@ -152,21 +171,6 @@ export function ConfigureLogs() {
</EuiFlexGroup>
</LogsTypeSection>
</StepPanelContent>
<StepPanelFooter
items={[
<EuiButton color="ghost" fill onClick={onBack}>
Back
</EuiButton>,
<EuiButton
color="primary"
fill
onClick={onContinue}
isDisabled={!(logsType && uploadType)}
>
Continue
</EuiButton>,
]}
/>
</StepPanel>
);
}
Expand Down
26 changes: 15 additions & 11 deletions ...plugins/observability_onboarding/public/components/app/custom_logs/wizard/import_data.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,21 @@ export function CollectLogs() {
}

return (
<StepPanel title="">
<StepPanel
title=""
panelFooter={
<StepPanelFooter
items={[
<EuiButton color="ghost" fill onClick={onBack}>
Back
</EuiButton>,
<EuiButton color="primary" fill onClick={onContinue}>
Continue
</EuiButton>,
]}
/>
}
>
<StepPanelContent>
<EuiText color="subdued">
<p>
Expand Down Expand Up @@ -90,16 +104,6 @@ export function CollectLogs() {
</EuiFlexItem>
</EuiFlexGroup>
</StepPanelContent>
<StepPanelFooter
items={[
<EuiButton color="ghost" fill onClick={onBack}>
Back
</EuiButton>,
<EuiButton color="primary" fill onClick={onContinue}>
Continue
</EuiButton>,
]}
/>
</StepPanel>
);
}
20 changes: 12 additions & 8 deletions x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/inspect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,18 @@ import { useWizard } from '.';
export function Inspect() {
const { goBack, getState, getPath, getUsage } = useWizard();
return (
<StepPanel title="Inspect wizard">
<StepPanel
title="Inspect wizard"
panelFooter={
<StepPanelFooter
items={[
<EuiButton color="ghost" fill onClick={goBack}>
Back
</EuiButton>,
]}
/>
}
>
<StepPanelContent>
<EuiTitle size="s">
<h3>State</h3>
Expand All @@ -34,13 +45,6 @@ export function Inspect() {
</EuiTitle>
<pre>{JSON.stringify(getUsage(), null, 4)}</pre>
</StepPanelContent>
<StepPanelFooter
items={[
<EuiButton color="ghost" fill onClick={goBack}>
Back
</EuiButton>,
]}
/>
</StepPanel>
);
}
26 changes: 15 additions & 11 deletions ...servability_onboarding/public/components/app/custom_logs/wizard/install_elastic_agent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,21 @@ export function InstallElasticAgent() {
}

return (
<StepPanel title="Install the Elastic Agent">
<StepPanel
title="Install the Elastic Agent"
panelFooter={
<StepPanelFooter
items={[
<EuiButton color="ghost" fill onClick={onBack}>
Back
</EuiButton>,
<EuiButton color="primary" fill onClick={onContinue}>
Continue
</EuiButton>,
]}
/>
}
>
<StepPanelContent>
<EuiText color="subdued">
<p>
Expand Down Expand Up @@ -130,16 +144,6 @@ export function InstallElasticAgent() {
</EuiFlexGroup>
</LogsTypeSection>
</StepPanelContent>
<StepPanelFooter
items={[
<EuiButton color="ghost" fill onClick={onBack}>
Back
</EuiButton>,
<EuiButton color="primary" fill onClick={onContinue}>
Continue
</EuiButton>,
]}
/>
</StepPanel>
);
}
Expand Down
36 changes: 20 additions & 16 deletions ...k/plugins/observability_onboarding/public/components/app/custom_logs/wizard/name_logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,26 @@ export function NameLogs() {
}

return (
<StepPanel title="Give your logs a name">
<StepPanel
title="Give your logs a name"
panelFooter={
<StepPanelFooter
items={[
<EuiButtonEmpty href="/app/observability/overview">
Skip for now
</EuiButtonEmpty>,
<EuiButton
color="primary"
fill
onClick={onContinue}
isDisabled={!datasetName}
>
Save and Continue
</EuiButton>,
]}
/>
}
>
<StepPanelContent>
<EuiText color="subdued">
<p>Pick a name for your logs, this will become your dataset name.</p>
Expand All @@ -52,21 +71,6 @@ export function NameLogs() {
</EuiFormRow>
</EuiForm>
</StepPanelContent>
<StepPanelFooter
items={[
<EuiButtonEmpty href="/app/observability/overview">
Skip for now
</EuiButtonEmpty>,
<EuiButton
color="primary"
fill
onClick={onContinue}
isDisabled={!datasetName}
>
Save and Continue
</EuiButton>,
]}
/>
</StepPanel>
);
}
22 changes: 12 additions & 10 deletions ...plugins/observability_onboarding/public/components/app/custom_logs/wizard/select_logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,18 @@ export function SelectLogs() {
defaultMessage: 'What logs do you want to collect?',
}
)}
panelFooter={
<StepPanelFooter
items={[
<EuiButton color="ghost" fill onClick={onBack}>
{i18n.translate('xpack.observability_onboarding.steps.back', {
defaultMessage: 'Back',
})}
</EuiButton>,
<></>,
]}
/>
}
>
<StepPanelContent>
<EuiFlexGroup>
Expand Down Expand Up @@ -187,16 +199,6 @@ export function SelectLogs() {
</EuiLink>
</LogsTypeSection>
</StepPanelContent>
<StepPanelFooter
items={[
<EuiButton color="ghost" fill onClick={onBack}>
{i18n.translate('xpack.observability_onboarding.steps.back', {
defaultMessage: 'Back',
})}
</EuiButton>,
<></>,
]}
/>
</StepPanel>
);
}
Expand Down
28 changes: 17 additions & 11 deletions x-pack/plugins/observability_onboarding/public/components/shared/step_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,29 +11,35 @@ import {
EuiFlexItem,
EuiPanel,
EuiPanelProps,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';

interface StepPanelProps {
title: string;
panelProps?: EuiPanelProps;
panelFooter?: ReactNode;
children?: ReactNode;
}

export function StepPanel(props: StepPanelProps) {
const { title, children } = props;
const { title, children, panelFooter } = props;
const panelProps = props.panelProps ?? null;
return (
<EuiPanel {...panelProps}>
<EuiFlexGroup direction="column">
<EuiFlexItem>
<EuiTitle size="m">
<h2>{title}</h2>
</EuiTitle>
</EuiFlexItem>
{children}
</EuiFlexGroup>
</EuiPanel>
<>
<EuiPanel {...panelProps}>
<EuiFlexGroup direction="column">
<EuiFlexItem>
<EuiTitle size="m">
<h2>{title}</h2>
</EuiTitle>
</EuiFlexItem>
{children}
</EuiFlexGroup>
</EuiPanel>
<EuiSpacer size="l" />
{panelFooter}
</>
);
}

Expand Down