Es ui shared updates (#46570) (#46716)

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

@@ -21,6 +21,7 @@ export {
   SendRequestConfig,
   SendRequestResponse,
   UseRequestConfig,
+  UseRequestResponse,
   sendRequest,
   useRequest,
 } from './request';

src/plugins/es_ui_shared/public/request/request.ts

@@ -27,7 +27,7 @@ export interface SendRequestConfig {
 
 export interface SendRequestResponse {
   data: any;
-  error: Error;
+  error: Error | null;
 }
 
 export interface UseRequestConfig extends SendRequestConfig {
@@ -36,20 +36,29 @@ export interface UseRequestConfig extends SendRequestConfig {
   deserializer?: (data: any) => any;
 }
 
+export interface UseRequestResponse {
+  isInitialRequest: boolean;
+  isLoading: boolean;
+  error: null | unknown;
+  data: any;
+  sendRequest: (...args: any[]) => Promise<SendRequestResponse>;
+}
+
 export const sendRequest = async (
   httpClient: ng.IHttpService,
   { path, method, body }: SendRequestConfig
-): Promise<Partial<SendRequestResponse>> => {
+): Promise<SendRequestResponse> => {
   try {
     const response = await (httpClient as any)[method](path, body);
 
     if (typeof response.data === 'undefined') {
       throw new Error(response.statusText);
     }
 
-    return { data: response.data };
+    return { data: response.data, error: null };
   } catch (e) {
     return {
+      data: null,
       error: e.response ? e.response : e,
     };
   }
@@ -65,7 +74,7 @@ export const useRequest = (
     initialData,
     deserializer = (data: any): any => data,
   }: UseRequestConfig
-) => {
+): UseRequestResponse => {
   // Main states for tracking request status and data
   const [error, setError] = useState<null | any>(null);
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -112,7 +121,7 @@ export const useRequest = (
     // If an outdated request has resolved, DON'T update state, but DO allow the processData handler
     // to execute side effects like update telemetry.
     if (isOutdatedRequest) {
-      return;
+      return { data: null, error: null };
     }
 
     setError(responseError);
@@ -123,6 +132,8 @@ export const useRequest = (
     // If we're on an interval, we need to schedule the next request. This also allows us to reset
     // the interval if the user has manually requested the data, to avoid doubled-up requests.
     scheduleRequest();
+
+    return { data: serializedResponseData, error: responseError };
   };
 
   useEffect(() => {

src/plugins/es_ui_shared/static/forms/components/fields/index.ts

@@ -24,3 +24,4 @@ export * from './combobox_field';
 export * from './multi_select_field';
 export * from './select_field';
 export * from './toggle_field';
+export * from './text_area_field';

src/plugins/es_ui_shared/static/forms/components/fields/text_area_field.tsx

@@ -0,0 +1,56 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { EuiFormRow, EuiTextArea } from '@elastic/eui';
+
+import { FieldHook } from '../../hook_form_lib';
+import { getFieldValidityAndErrorMessage } from '../helpers';
+
+interface Props {
+  field: FieldHook;
+  euiFieldProps?: Record<string, any>;
+  idAria?: string;
+  [key: string]: any;
+}
+
+export const TextAreaField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  return (
+    <EuiFormRow
+      label={field.label}
+      helpText={field.helpText}
+      error={errorMessage}
+      isInvalid={isInvalid}
+      fullWidth
+      data-test-subj={rest['data-test-subj']}
+      describedByIds={rest.idAria ? [rest.idAria] : undefined}
+    >
+      <EuiTextArea
+        isInvalid={isInvalid}
+        value={field.value as string}
+        onChange={field.onChange}
+        fullWidth
+        data-test-subj="input"
+        {...euiFieldProps}
+      />
+    </EuiFormRow>
+  );
+};

tsconfig.json

@@ -12,7 +12,7 @@
       ],
       "test_utils/*": [
         "src/test_utils/public/*"
-      ],
+      ]
     },
     // Support .tsx files and transform JSX into calls to React.createElement
     "jsx": "react",

x-pack/legacy/plugins/index_management/public/components/index.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { SectionError } from './section_error';
+export { SectionError, Error } from './section_error';
 export { SectionLoading } from './section_loading';
 export { NoMatch } from './no_match';
 export { PageErrorForbidden } from './page_error';

x-pack/legacy/plugins/index_management/public/components/section_error.tsx

@@ -7,15 +7,17 @@
 import { EuiCallOut, EuiSpacer } from '@elastic/eui';
 import React, { Fragment } from 'react';
 
+export interface Error {
+  data: {
+    error: string;
+    cause?: string[];
+    message?: string;
+  };
+}
+
 interface Props {
   title: React.ReactNode;
-  error: {
-    data: {
-      error: string;
-      cause?: string[];
-      message?: string;
-    };
-  };
+  error: Error;
 }
 
 export const SectionError: React.FunctionComponent<Props> = ({ title, error, ...rest }) => {

x-pack/legacy/plugins/index_management/public/sections/home/template_list/template_details/template_details.tsx

@@ -31,18 +31,19 @@ import {
   UIM_TEMPLATE_DETAIL_PANEL_ALIASES_TAB,
 } from '../../../../../common/constants';
 import { Template } from '../../../../../common/types';
-import { TemplateDeleteModal, SectionLoading, SectionError } from '../../../../components';
+import { TemplateDeleteModal, SectionLoading, SectionError, Error } from '../../../../components';
 import { loadIndexTemplate } from '../../../../services/api';
 import { decodePath } from '../../../../services/routing';
 import { trackUiMetric, METRIC_TYPE } from '../../../../services/track_ui_metric';
+import { SendRequestResponse } from '../../../../shared_imports';
 import { TabSummary, TabMappings, TabSettings, TabAliases } from './tabs';
 
 interface Props {
   templateName: Template['name'];
   onClose: () => void;
   editTemplate: (templateName: Template['name']) => void;
   cloneTemplate: (templateName: Template['name']) => void;
-  reload: () => Promise<void>;
+  reload: () => Promise<SendRequestResponse>;
 }
 
 const SUMMARY_TAB_ID = 'summary';
@@ -128,7 +129,7 @@ export const TemplateDetails: React.FunctionComponent<Props> = ({
             defaultMessage="Error loading template"
           />
         }
-        error={error}
+        error={error as Error}
         data-test-subj="sectionError"
       />
     );

x-pack/legacy/plugins/index_management/public/sections/home/template_list/template_list.tsx

@@ -16,7 +16,7 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
 } from '@elastic/eui';
-import { SectionError, SectionLoading } from '../../../components';
+import { SectionError, SectionLoading, Error } from '../../../components';
 import { TemplateTable } from './template_table';
 import { loadIndexTemplates } from '../../../services/api';
 import { Template } from '../../../../common/types';
@@ -87,7 +87,7 @@ export const TemplateList: React.FunctionComponent<RouteComponentProps<MatchPara
             defaultMessage="Error loading templates"
           />
         }
-        error={error}
+        error={error as Error}
       />
     );
   } else if (Array.isArray(templates) && templates.length === 0) {

x-pack/legacy/plugins/index_management/public/sections/home/template_list/template_table/template_table.tsx

@@ -13,10 +13,11 @@ import { BASE_PATH, UIM_TEMPLATE_SHOW_DETAILS_CLICK } from '../../../../../commo
 import { TemplateDeleteModal } from '../../../../components';
 import { trackUiMetric, METRIC_TYPE } from '../../../../services/track_ui_metric';
 import { getTemplateDetailsLink } from '../../../../services/routing';
+import { SendRequestResponse } from '../../../../shared_imports';
 
 interface Props {
   templates: TemplateListItem[];
-  reload: () => Promise<void>;
+  reload: () => Promise<SendRequestResponse>;
   editTemplate: (name: Template['name']) => void;
   cloneTemplate: (name: Template['name']) => void;
 }

x-pack/legacy/plugins/index_management/public/sections/template_clone/template_clone.tsx

@@ -7,7 +7,7 @@ import React, { useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiPageBody, EuiPageContent, EuiSpacer, EuiTitle } from '@elastic/eui';
-import { TemplateForm, SectionLoading, SectionError } from '../../components';
+import { TemplateForm, SectionLoading, SectionError, Error } from '../../components';
 import { setBreadcrumbs } from '../../services/set_breadcrumbs';
 import { decodePath, getTemplateDetailsLink } from '../../services/routing';
 import { Template } from '../../../common/types';
@@ -77,7 +77,7 @@ export const TemplateClone: React.FunctionComponent<RouteComponentProps<MatchPar
             defaultMessage="Error loading template to clone"
           />
         }
-        error={templateToCloneError}
+        error={templateToCloneError as Error}
         data-test-subj="sectionError"
       />
     );

x-pack/legacy/plugins/index_management/public/sections/template_edit/template_edit.tsx

@@ -10,7 +10,7 @@ import { EuiPageBody, EuiPageContent, EuiTitle, EuiSpacer, EuiCallOut } from '@e
 import { setBreadcrumbs } from '../../services/set_breadcrumbs';
 import { loadIndexTemplate, updateTemplate } from '../../services/api';
 import { decodePath, getTemplateDetailsLink } from '../../services/routing';
-import { SectionLoading, SectionError, TemplateForm } from '../../components';
+import { SectionLoading, SectionError, TemplateForm, Error } from '../../components';
 import { Template } from '../../../common/types';
 
 interface MatchParams {
@@ -73,7 +73,7 @@ export const TemplateEdit: React.FunctionComponent<RouteComponentProps<MatchPara
             defaultMessage="Error loading template"
           />
         }
-        error={error}
+        error={error as Error}
         data-test-subj="sectionError"
       />
     );

x-pack/legacy/plugins/index_management/public/services/use_request.ts

@@ -13,7 +13,7 @@ import {
 } from '../shared_imports';
 import { getHttpClient } from './api';
 
-export const sendRequest = (config: SendRequestConfig): Promise<Partial<SendRequestResponse>> => {
+export const sendRequest = (config: SendRequestConfig): Promise<SendRequestResponse> => {
   return _sendRequest(getHttpClient(), config);
 };
 

x-pack/legacy/plugins/snapshot_restore/public/app/components/index.ts

@@ -10,7 +10,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 { SectionError } from './section_error';
+export { SectionError, Error } from './section_error';
 export { SectionLoading } from './section_loading';
 export { SnapshotDeleteProvider } from './snapshot_delete_provider';
 export { RestoreSnapshotForm } from './restore_snapshot_form';

x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/step_one.tsx

@@ -30,7 +30,7 @@ import { documentationLinksService } from '../../services/documentation';
 import { useLoadRepositoryTypes } from '../../services/http';
 import { textService } from '../../services/text';
 import { RepositoryValidation } from '../../services/validation';
-import { SectionError, SectionLoading, RepositoryTypeLogo } from '../';
+import { SectionError, SectionLoading, RepositoryTypeLogo, Error } from '../';
 
 interface Props {
   repository: Repository | EmptyRepository;
@@ -177,7 +177,7 @@ export const RepositoryFormStepOne: React.FunctionComponent<Props> = ({
               defaultMessage="Error loading repository types"
             />
           }
-          error={repositoryTypesError}
+          error={repositoryTypesError as Error}
         />
       );
     }

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

@@ -7,15 +7,17 @@
 import { EuiCallOut, EuiSpacer } from '@elastic/eui';
 import React, { Fragment } from 'react';
 
+export interface Error {
+  data: {
+    error: string;
+    cause?: string[];
+    message?: string;
+  };
+}
+
 interface Props {
   title: React.ReactNode;
-  error: {
-    data: {
-      error: string;
-      cause?: string[];
-      message?: string;
-    };
-  };
+  error: Error;
   actions?: JSX.Element;
 }
 

x-pack/legacy/plugins/snapshot_restore/public/app/lib/authorization/components/authorization_provider.tsx

@@ -54,7 +54,7 @@ export const AuthorizationProvider = ({ privilegesEndpoint, children }: Props) =
     isLoading,
     privileges: isLoading ? { hasAllPrivileges: true, missingPrivileges: {} } : privilegesData,
     apiError: error ? error : null,
-  };
+  } as Authorization;
 
   return <AuthorizationContext.Provider value={value}>{children}</AuthorizationContext.Provider>;
 };

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

@@ -37,6 +37,7 @@ import {
   SectionLoading,
   PolicyExecuteProvider,
   PolicyDeleteProvider,
+  Error,
 } from '../../../../components';
 import { TabSummary, TabHistory } from './tabs';
 
@@ -144,7 +145,7 @@ export const PolicyDetails: React.FunctionComponent<Props> = ({
   };
 
   const renderError = () => {
-    const notFound = error.status === 404;
+    const notFound = (error as any).status === 404;
     const errorObject = notFound
       ? {
           data: {
@@ -168,7 +169,7 @@ export const PolicyDetails: React.FunctionComponent<Props> = ({
             defaultMessage="Error loading policy"
           />
         }
-        error={errorObject}
+        error={errorObject as Error}
       />
     );
   };

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

@@ -10,7 +10,7 @@ import { RouteComponentProps } from 'react-router-dom';
 import { EuiEmptyPrompt, EuiButton, EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { SlmPolicy } from '../../../../../common/types';
 import { APP_SLM_CLUSTER_PRIVILEGES } from '../../../../../common/constants';
-import { SectionError, SectionLoading } from '../../../components';
+import { SectionError, SectionLoading, Error } from '../../../components';
 import { BASE_PATH, UIM_POLICY_LIST_LOAD } from '../../../constants';
 import { useAppDependencies } from '../../../index';
 import { useLoadPolicies, useLoadRetentionSettings } from '../../../services/http';
@@ -102,7 +102,7 @@ export const PolicyList: React.FunctionComponent<RouteComponentProps<MatchParams
             defaultMessage="Error loading policies"
           />
         }
-        error={error}
+        error={error as Error}
       />
     );
   } else if (policies && policies.length === 0) {