[SR] Refactor proposal

x-pack/plugins/snapshot_restore/common/constants.ts

@@ -19,3 +19,13 @@ export const PLUGIN = {
 };
 
 export const API_BASE_PATH = '/api/snapshot_restore/';
+
+export enum REPOSITORY_TYPES {
+  fs = 'fs',
+  url = 'url',
+  source = 'source',
+  s3 = 's3',
+  hdfs = 'hdfs',
+  azure = 'azure',
+  gcs = 'gcs',
+}

x-pack/plugins/snapshot_restore/common/types/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './repository';

x-pack/plugins/snapshot_restore/common/types/repository_types.ts → x-pack/plugins/snapshot_restore/common/types/repository.ts

@@ -12,16 +12,6 @@ export type HDFSRepositoryType = 'hdfs';
 export type AzureRepositoryType = 'azure';
 export type GCSRepositoryType = 'gcs';
 
-export enum RepositoryTypes {
-  fs = 'fs',
-  url = 'url',
-  source = 'source',
-  s3 = 's3',
-  hdfs = 'hdfs',
-  azure = 'azure',
-  gcs = 'gcs',
-}
-
 export type RepositoryType =
   | FSRepositoryType
   | ReadonlyRepositoryType
@@ -31,17 +21,6 @@ export type RepositoryType =
   | AzureRepositoryType
   | GCSRepositoryType;
 
-export enum RepositoryDocPaths {
-  default = 'modules-snapshots.html',
-  fs = 'modules-snapshots.html#_shared_file_system_repository',
-  url = 'modules-snapshots.html#_read_only_url_repository',
-  source = 'modules-snapshots.html#_source_only_repository',
-  s3 = 'repository-s3.html',
-  hdfs = 'repository-hdfs.html',
-  azure = 'repository-azure.html',
-  gcs = 'repository-gcs.html',
-}
-
 export interface FSRepository {
   name: string;
   type: FSRepositoryType;

x-pack/plugins/snapshot_restore/public/app/components/repository_delete_provider.tsx

@@ -4,16 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment, useState } from 'react';
-import { Repository } from '../../../common/types/repository_types';
+import React, { useState } from 'react';
+import { Repository } from '../../../common/types';
 
 interface Props {
-  children: (deleteRepository: DeleteRepository) => React.ReactNode;
+  children: (deleteRepository: DeleteRepository) => React.ReactElement;
 }
 
 type DeleteRepository = (names: Array<Repository['name']>) => void;
 
-export const RepositoryDeleteProvider = ({ children }: Props) => {
+export const RepositoryDeleteProvider: React.FunctionComponent<Props> = ({ children }) => {
   const [repositoryNames, setRepositoryNames] = useState<Array<Repository['name']>>([]);
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const deleteRepository: DeleteRepository = names => {
@@ -25,5 +25,5 @@ export const RepositoryDeleteProvider = ({ children }: Props) => {
     /* placeholder */
   }
 
-  return <Fragment>{children(deleteRepository)}</Fragment>;
+  return children(deleteRepository);
 };

x-pack/plugins/snapshot_restore/public/app/components/repository_type_name.tsx

@@ -5,61 +5,60 @@
  */
 
 import React, { Fragment } from 'react';
-import { RepositoryType, RepositoryTypes } from '../../../common/types/repository_types';
-import { AppStateInterface, useAppState } from '../services/app_context';
+import { REPOSITORY_TYPES } from '../../../common/constants';
+import { RepositoryType } from '../../../common/types';
+import { useAppDependencies } from '../index';
 
 interface Props {
   type: RepositoryType;
   delegateType?: RepositoryType;
 }
 
-export const RepositoryTypeName = ({ type, delegateType }: Props) => {
-  const [
-    {
-      core: {
-        i18n: { FormattedMessage },
-      },
+export const RepositoryTypeName: React.FunctionComponent<Props> = ({ type, delegateType }) => {
+  const {
+    core: {
+      i18n: { FormattedMessage },
     },
-  ] = useAppState() as [AppStateInterface];
+  } = useAppDependencies();
 
   const typeNameMap: { [key in RepositoryType]: JSX.Element } = {
-    [RepositoryTypes.fs]: (
+    [REPOSITORY_TYPES.fs]: (
       <FormattedMessage
         id="xpack.snapshotRestore.repositoryType.fileSystemTypeName"
         defaultMessage="Shared File System"
       />
     ),
-    [RepositoryTypes.url]: (
+    [REPOSITORY_TYPES.url]: (
       <FormattedMessage
         id="xpack.snapshotRestore.repositoryType.readonlyTypeName"
         defaultMessage="Read-only URL"
       />
     ),
-    [RepositoryTypes.s3]: (
+    [REPOSITORY_TYPES.s3]: (
       <FormattedMessage
         id="xpack.snapshotRestore.repositoryType.s3TypeName"
         defaultMessage="AWS S3"
       />
     ),
-    [RepositoryTypes.hdfs]: (
+    [REPOSITORY_TYPES.hdfs]: (
       <FormattedMessage
         id="xpack.snapshotRestore.repositoryType.hdfsTypeName"
         defaultMessage="HDFS File System"
       />
     ),
-    [RepositoryTypes.azure]: (
+    [REPOSITORY_TYPES.azure]: (
       <FormattedMessage
         id="xpack.snapshotRestore.repositoryType.azureTypeName"
         defaultMessage="Azure"
       />
     ),
-    [RepositoryTypes.gcs]: (
+    [REPOSITORY_TYPES.gcs]: (
       <FormattedMessage
         id="xpack.snapshotRestore.repositoryType.gcsTypeName"
         defaultMessage="Google Cloud Storage"
       />
     ),
-    [RepositoryTypes.source]: (
+    [REPOSITORY_TYPES.source]: (
       <FormattedMessage
         id="xpack.snapshotRestore.repositoryType.sourceTypeName"
         defaultMessage="Source"
@@ -71,7 +70,7 @@ export const RepositoryTypeName = ({ type, delegateType }: Props) => {
     return typeNameMap[repositoryType] || <Fragment>{type}</Fragment>;
   };
 
-  if (type === RepositoryTypes.source && delegateType) {
+  if (type === REPOSITORY_TYPES.source && delegateType) {
     return (
       <Fragment>
         <FormattedMessage

x-pack/plugins/snapshot_restore/public/app/components/section_error.tsx

@@ -18,7 +18,7 @@ interface Props {
   };
 }
 
-export function SectionError({ title, error }: Props) {
+export const SectionError: React.FunctionComponent<Props> = ({ title, error }) => {
   const {
     error: errorString,
     cause, // wrapEsError() on the server adds a "cause" array
@@ -40,4 +40,4 @@ export function SectionError({ title, error }: Props) {
       )}
     </EuiCallOut>
   );
-}
+};

x-pack/plugins/snapshot_restore/public/app/components/section_loading.tsx

@@ -12,7 +12,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-export function SectionLoading({ children }: Props) {
+export const SectionLoading: React.FunctionComponent<Props> = ({ children }) => {
   return (
     <EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="s">
       <EuiFlexItem grow={false}>
@@ -26,4 +26,4 @@ export function SectionLoading({ children }: Props) {
       </EuiFlexItem>
     </EuiFlexGroup>
   );
-}
+};

x-pack/plugins/snapshot_restore/public/app/constants/index.ts

@@ -6,3 +6,14 @@
 
 export const BASE_PATH = '/management/elasticsearch/snapshot_restore';
 export type Section = 'repositories' | 'snapshots';
+
+export enum REPOSITORY_DOC_PATHS {
+  default = 'modules-snapshots.html',
+  fs = 'modules-snapshots.html#_shared_file_system_repository',
+  url = 'modules-snapshots.html#_read_only_url_repository',
+  source = 'modules-snapshots.html#_source_only_repository',
+  s3 = 'repository-s3.html',
+  hdfs = 'repository-hdfs.html',
+  azure = 'repository-azure.html',
+  gcs = 'repository-gcs.html',
+}

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

@@ -3,34 +3,43 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useReducer } from 'react';
+import React, { createContext, useContext, useReducer } from 'react';
 import { render } from 'react-dom';
 import { HashRouter } from 'react-router-dom';
 
-import { AppCore, AppPlugins } from '../shim';
 import { App } from './app';
-import { AppStateInterface, AppStateProvider } from './services/app_context';
+import { AppStateProvider, initialState, reducer } from './services/state';
+import { AppCore, AppDependencies, AppPlugins } from './types';
 
 export { BASE_PATH as CLIENT_BASE_PATH } from './constants';
 
-// Placeholder reducer in case we need it for any app state data
-const appStateReducer = (state: any, action: any) => {
-  switch (action.type) {
-    default:
-      return state;
-  }
-};
+/**
+ * App dependencies
+ */
+let DependenciesContext: React.Context<AppDependencies>;
 
-const ReactApp = ({ appState }: { appState: AppStateInterface }) => {
+export const useAppDependencies = () => useContext<AppDependencies>(DependenciesContext);
+
+const ReactApp: React.FunctionComponent<AppDependencies> = ({ core, plugins }) => {
   const {
     i18n: { Context: I18nContext },
-  } = appState.core;
+  } = core;
+
+  const appDependencies: AppDependencies = {
+    core,
+    plugins,
+  };
+
+  DependenciesContext = createContext<AppDependencies>(appDependencies);
+
   return (
     <I18nContext>
       <HashRouter>
-        <AppStateProvider value={useReducer(appStateReducer, appState)}>
-          <App />
-        </AppStateProvider>
+        <DependenciesContext.Provider value={appDependencies}>
+          <AppStateProvider value={useReducer(reducer, initialState)}>
+            <App />
+          </AppStateProvider>
+        </DependenciesContext.Provider>
       </HashRouter>
     </I18nContext>
   );
@@ -41,13 +50,5 @@ export const renderReact = async (
   core: AppCore,
   plugins: AppPlugins
 ): Promise<void> => {
-  render(
-    <ReactApp
-      appState={{
-        core,
-        plugins,
-      }}
-    />,
-    elem
-  );
+  render(<ReactApp core={core} plugins={plugins} />, elem);
 };

x-pack/plugins/snapshot_restore/public/app/sections/home/home.tsx

@@ -10,7 +10,7 @@ import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { EuiPageBody, EuiPageContent, EuiSpacer, EuiTab, EuiTabs, EuiTitle } from '@elastic/eui';
 
 import { BASE_PATH, Section } from '../../constants';
-import { AppStateInterface, useAppState } from '../../services/app_context';
+import { useAppDependencies } from '../../index';
 
 import { RepositoryList } from './repository_list';
 import { SnapshotList } from './snapshot_list';
@@ -21,20 +21,19 @@ interface MatchParams {
 
 interface Props extends RouteComponentProps<MatchParams> {}
 
-export const SnapshotRestoreHome = ({
+export const SnapshotRestoreHome: React.FunctionComponent<Props> = ({
   match: {
     params: { section },
   },
   history,
-}: Props) => {
+}) => {
   const [activeSection, setActiveSection] = useState<Section>(section);
 
-  const [
-    {
-      core: { i18n, chrome },
-      plugins: { management },
-    },
-  ] = useAppState() as [AppStateInterface];
+  const {
+    core: { i18n, chrome },
+    plugins: { management },
+  } = useAppDependencies();
+
   const { FormattedMessage } = i18n;
 
   const tabs = [

x-pack/plugins/snapshot_restore/public/app/sections/home/repository_list/repository_details/repository_details.tsx

@@ -5,11 +5,12 @@
  */
 import React, { Fragment } from 'react';
 
-import { AppStateInterface, useAppState } from '../../../../services/app_context';
-import { getRepositoryTypeDocUrl } from '../../../../services/documentation_links';
-import { useRequest } from '../../../../services/use_request';
+import { useAppDependencies } from '../../../../index';
+import { getRepositoryTypeDocUrl } from '../../../../services/documentation';
+import { useRequest } from '../../../../services/http';
 
-import { Repository, RepositoryTypes } from '../../../../../../common/types/repository_types';
+import { REPOSITORY_TYPES } from '../../../../../../common/constants';
+import { Repository } from '../../../../../../common/types';
 import {
   RepositoryDeleteProvider,
   RepositoryTypeName,
@@ -36,15 +37,14 @@ interface Props {
   onClose: () => void;
 }
 
-export const RepositoryDetails = ({ repositoryName, onClose }: Props) => {
-  const [
-    {
-      core: {
-        i18n,
-        documentation: { esDocBasePath, esPluginDocBasePath },
-      },
+export const RepositoryDetails: React.FunctionComponent<Props> = ({ repositoryName, onClose }) => {
+  const {
+    core: {
+      i18n,
+      documentation: { esDocBasePath, esPluginDocBasePath },
     },
-  ] = useAppState() as [AppStateInterface];
+  } = useAppDependencies();
+
   const { FormattedMessage } = i18n;
   const { error, loading, data: repository } = useRequest({
     path: `repositories/${repositoryName}`,
@@ -117,7 +117,7 @@ export const RepositoryDetails = ({ repositoryName, onClose }: Props) => {
               </h3>
             </EuiTitle>
             <EuiSpacer size="s" />
-            {type === RepositoryTypes.source ? (
+            {type === REPOSITORY_TYPES.source ? (
               <RepositoryTypeName type={type} delegateType={repository.settings.delegate_type} />
             ) : (
               <RepositoryTypeName type={type} />