[Snapshot + Restore] Migrate to new page layout structure (elastic#10…

…1811)

src/plugins/es_ui_shared/__packages_do_not_import__/authorization/components/authorization_provider.tsx

@@ -11,9 +11,7 @@ import React, { createContext, useContext } from 'react';
 
 import { useRequest } from '../../../public';
 
-import { Error as CustomError } from './section_error';
-
-import { Privileges } from '../types';
+import { Privileges, Error as CustomError } from '../types';
 
 interface Authorization {
   isLoading: boolean;

src/plugins/es_ui_shared/__packages_do_not_import__/authorization/components/index.ts

@@ -16,4 +16,6 @@ export { WithPrivileges } from './with_privileges';
 
 export { NotAuthorizedSection } from './not_authorized_section';
 
-export { Error, SectionError } from './section_error';
+export { SectionError } from './section_error';
+
+export { PageError } from './page_error';

src/plugins/es_ui_shared/__packages_do_not_import__/authorization/components/page_error.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EuiSpacer, EuiEmptyPrompt, EuiPageContent } from '@elastic/eui';
+import React from 'react';
+import { APP_WRAPPER_CLASS } from '../../../../../../src/core/public';
+import { Error } from '../types';
+
+interface Props {
+  title: React.ReactNode;
+  error: Error;
+  actions?: JSX.Element;
+  isCentered?: boolean;
+}
+
+/*
+ * A reusable component to handle full page errors.
+ * This is based on Kibana design guidelines related
+ * to the new management navigation structure.
+ * In some scenarios, it replaces the usage of <SectionError />.
+ */
+
+export const PageError: React.FunctionComponent<Props> = ({
+  title,
+  error,
+  actions,
+  isCentered,
+  ...rest
+}) => {
+  const {
+    error: errorString,
+    cause, // wrapEsError() on the server adds a "cause" array
+    message,
+  } = error;
+
+  const errorContent = (
+    <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+      <EuiEmptyPrompt
+        title={<h2>{title}</h2>}
+        body={
+          <>
+            {cause ? message || errorString : <p>{message || errorString}</p>}
+            {cause && (
+              <>
+                <EuiSpacer size="s" />
+                <ul>
+                  {cause.map((causeMsg, i) => (
+                    <li key={i}>{causeMsg}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </>
+        }
+        iconType="alert"
+        actions={actions}
+        {...rest}
+      />
+    </EuiPageContent>
+  );
+
+  if (isCentered) {
+    return <div className={APP_WRAPPER_CLASS}>{errorContent}</div>;
+  }
+
+  return errorContent;
+};

src/plugins/es_ui_shared/__packages_do_not_import__/authorization/components/section_error.tsx

@@ -8,12 +8,7 @@
 
 import { EuiCallOut, EuiSpacer } from '@elastic/eui';
 import React, { Fragment } from 'react';
-
-export interface Error {
-  error: string;
-  cause?: string[];
-  message?: string;
-}
+import { Error } from '../types';
 
 interface Props {
   title: React.ReactNode;

src/plugins/es_ui_shared/__packages_do_not_import__/authorization/index.ts

@@ -12,8 +12,8 @@ export {
   AuthorizationProvider,
   AuthorizationContext,
   SectionError,
-  Error,
+  PageError,
   useAuthorizationContext,
 } from './components';
 
-export { Privileges, MissingPrivileges } from './types';
+export { Privileges, MissingPrivileges, Error } from './types';

src/plugins/es_ui_shared/__packages_do_not_import__/authorization/types.ts

@@ -14,3 +14,9 @@ export interface Privileges {
   hasAllPrivileges: boolean;
   missingPrivileges: MissingPrivileges;
 }
+
+export interface Error {
+  error: string;
+  cause?: string[];
+  message?: string;
+}

src/plugins/es_ui_shared/public/authorization/index.ts

@@ -14,6 +14,7 @@ export {
   NotAuthorizedSection,
   Privileges,
   SectionError,
+  PageError,
   useAuthorizationContext,
   WithPrivileges,
 } from '../../__packages_do_not_import__/authorization';

src/plugins/es_ui_shared/public/index.ts

@@ -40,6 +40,7 @@ export {
   Privileges,
   MissingPrivileges,
   SectionError,
+  PageError,
   Error,
   useAuthorizationContext,
 } from './authorization';

x-pack/plugins/snapshot_restore/public/application/app.tsx

@@ -10,14 +10,16 @@ import { Redirect, Route, Switch } from 'react-router-dom';
 import { EuiPageContent } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
+import { APP_WRAPPER_CLASS } from '../../../../../src/core/public';
+
 import { APP_REQUIRED_CLUSTER_PRIVILEGES } from '../../common';
 import {
   useAuthorizationContext,
-  SectionError,
+  PageError,
   WithPrivileges,
   NotAuthorizedSection,
 } from '../shared_imports';
-import { SectionLoading } from './components';
+import { PageLoading } from './components';
 import { DEFAULT_SECTION, Section } from './constants';
 import {
   RepositoryAdd,
@@ -42,7 +44,7 @@ export const App: React.FunctionComponent = () => {
   const sectionsRegex = sections.join('|');
 
   return apiError ? (
-    <SectionError
+    <PageError
       title={
         <FormattedMessage
           id="xpack.snapshotRestore.app.checkingPrivilegesErrorMessage"
@@ -55,14 +57,14 @@ export const App: React.FunctionComponent = () => {
     <WithPrivileges privileges={APP_REQUIRED_CLUSTER_PRIVILEGES.map((name) => `cluster.${name}`)}>
       {({ isLoading, hasPrivileges, privilegesMissing }) =>
         isLoading ? (
-          <SectionLoading>
+          <PageLoading>
             <FormattedMessage
               id="xpack.snapshotRestore.app.checkingPrivilegesDescription"
               defaultMessage="Checking privileges…"
             />
-          </SectionLoading>
+          </PageLoading>
         ) : hasPrivileges ? (
-          <div data-test-subj="snapshotRestoreApp">
+          <div data-test-subj="snapshotRestoreApp" className={APP_WRAPPER_CLASS}>
             <Switch>
               <Route exact path="/add_repository" component={RepositoryAdd} />
               <Route exact path="/edit_repository/:name*" component={RepositoryEdit} />
@@ -84,7 +86,7 @@ export const App: React.FunctionComponent = () => {
             </Switch>
           </div>
         ) : (
-          <EuiPageContent>
+          <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
             <NotAuthorizedSection
               title={
                 <FormattedMessage

x-pack/plugins/snapshot_restore/public/application/components/index.ts

@@ -11,7 +11,7 @@ export { RepositoryDeleteProvider } from './repository_delete_provider';
 export { RepositoryForm } from './repository_form';
 export { RepositoryVerificationBadge } from './repository_verification_badge';
 export { RepositoryTypeLogo } from './repository_type_logo';
-export { SectionLoading } from './section_loading';
+export { SectionLoading, InlineLoading, PageLoading } from './loading';
 export { SnapshotDeleteProvider } from './snapshot_delete_provider';
 export { RestoreSnapshotForm } from './restore_snapshot_form';
 export { PolicyExecuteProvider } from './policy_execute_provider';

x-pack/plugins/snapshot_restore/public/application/components/loading.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import {
+  EuiEmptyPrompt,
+  EuiLoadingSpinner,
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTextColor,
+  EuiPageContent,
+} from '@elastic/eui';
+
+interface Props {
+  inline?: boolean;
+  children: React.ReactNode;
+  [key: string]: any;
+}
+
+export const InlineLoading: React.FunctionComponent<Props> = ({ children, ...rest }) => {
+  return (
+    <EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="s">
+      <EuiFlexItem grow={false}>
+        <EuiLoadingSpinner size="m" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiText {...rest}>
+          <EuiTextColor color="subdued">{children}</EuiTextColor>
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+export const SectionLoading: React.FunctionComponent<Props> = ({ children }) => {
+  return (
+    <EuiEmptyPrompt
+      title={<EuiLoadingSpinner size="xl" />}
+      body={<EuiText color="subdued">{children}</EuiText>}
+      data-test-subj="sectionLoading"
+    />
+  );
+};
+
+/*
+ * Loading component used for full page loads.
+ * For tabbed sections, or within the context of a wizard,
+ * the <SectionLoading/> component may be more appropriate
+ */
+export const PageLoading: React.FunctionComponent<Props> = ({ children }) => {
+  return (
+    <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+      <EuiEmptyPrompt
+        title={<EuiLoadingSpinner size="xl" />}
+        body={<EuiText color="subdued">{children}</EuiText>}
+        data-test-subj="sectionLoading"
+      />
+    </EuiPageContent>
+  );
+};

x-pack/plugins/snapshot_restore/public/application/components/policy_form/steps/step_logistics.tsx

@@ -30,7 +30,7 @@ import { useCore, useServices } from '../../../app_context';
 import { DEFAULT_POLICY_SCHEDULE, DEFAULT_POLICY_FREQUENCY } from '../../../constants';
 import { useLoadRepositories } from '../../../services/http';
 import { linkToAddRepository } from '../../../services/navigation';
-import { SectionLoading } from '../../';
+import { InlineLoading } from '../../';
 import { StepProps } from './';
 
 import { reactRouterNavigate } from '../../../../../../../../src/plugins/kibana_react/public';
@@ -174,12 +174,12 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
   const renderRepositorySelect = () => {
     if (isLoadingRepositories) {
       return (
-        <SectionLoading inline={true}>
+        <InlineLoading>
           <FormattedMessage
             id="xpack.snapshotRestore.policyForm.loadingRepositoriesDescription"
             defaultMessage="Loading repositories…"
           />
-        </SectionLoading>
+        </InlineLoading>
       );
     }