Task/lut migrate

graylog2-web-interface/src/components/common/InputDescription.tsx

@@ -15,7 +15,6 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import { HelpBlock } from 'components/bootstrap';
@@ -30,8 +29,8 @@ const HelpMessage = styled.span<{ hasError: boolean }>(({ theme, hasError }) =>
 
 type Props = {
   className?: string,
-  error?: React.ReactElement,
-  help?: React.ReactNode,
+  error?: React.ReactElement | string,
+  help?: React.ReactNode | string,
 };
 
 /**
@@ -60,18 +59,6 @@ const InputDescription = ({ className, error, help }: Props) => {
   );
 };
 
-InputDescription.propTypes = {
-  className: PropTypes.string,
-  error: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.string,
-  ]),
-  help: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.string,
-  ]),
-};
-
 InputDescription.defaultProps = {
   className: undefined,
   error: undefined,

graylog2-web-interface/src/components/common/PaginatedList.tsx

@@ -14,7 +14,6 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-import PropTypes from 'prop-types';
 import * as React from 'react';
 
 import IfInteractive from 'views/components/dashboard/IfInteractive';
@@ -60,38 +59,39 @@ const PaginatedList = ({
   useQueryParameter,
 }: Props) => {
   const { page, setPage, pageSize: queryParamPageSize, setPageSize } = usePaginationQueryParameter(pageSizes);
-  const currentPage = useQueryParameter ? page : Math.max(activePage, INITIAL_PAGE);
-  const pageSize = (useQueryParameter && showPageSizeSelect) ? queryParamPageSize : propPageSize;
 
-  const numberPages = pageSize > 0 ? Math.ceil(totalItems / pageSize) : 0;
+  const [{ currentPage, currentPageSize }, setPagination] = React.useState({
+    currentPage: useQueryParameter ? page : Math.max(activePage, INITIAL_PAGE),
+    currentPageSize: (useQueryParameter && showPageSizeSelect) ? queryParamPageSize : propPageSize,
+  });
+
+  const numberPages = React.useMemo(() => (
+    currentPageSize > 0 ? Math.ceil(totalItems / currentPageSize) : 0
+  ), [currentPageSize, totalItems]);
 
   const _onChangePageSize = (event: React.ChangeEvent<HTMLOptionElement>) => {
     event.preventDefault();
     const newPageSize = Number(event.target.value);
 
-    if (useQueryParameter) {
-      setPageSize(newPageSize);
-    }
-
-    if (onChange) {
-      onChange(INITIAL_PAGE, newPageSize);
-    }
+    setPagination({ currentPage: INITIAL_PAGE, currentPageSize: newPageSize });
+    if (useQueryParameter) setPageSize(newPageSize);
+    if (onChange) onChange(INITIAL_PAGE, newPageSize);
   };
 
-  const _onChangePage = (pageNum: number) => {
-    if (useQueryParameter) {
-      setPage(pageNum);
-    }
+  const _onChangePage = React.useCallback((pageNum: number) => {
+    setPagination({ currentPage: pageNum, currentPageSize });
+    if (useQueryParameter) setPage(pageNum);
+    if (onChange) onChange(pageNum, currentPageSize);
+  }, [useQueryParameter, setPage, onChange, currentPageSize]);
 
-    if (onChange) {
-      onChange(pageNum, pageSize);
-    }
-  };
+  React.useEffect(() => {
+    if (numberPages > 0 && currentPage > numberPages) _onChangePage(numberPages);
+  }, [currentPage, numberPages, _onChangePage]);
 
   return (
     <>
       {showPageSizeSelect && (
-        <PageSizeSelect pageSizes={pageSizes} pageSize={pageSize} onChange={_onChangePageSize} />
+        <PageSizeSelect pageSizes={pageSizes} pageSize={currentPageSize} onChange={_onChangePageSize} />
       )}
 
       {children}
@@ -109,32 +109,6 @@ const PaginatedList = ({
   );
 };
 
-PaginatedList.propTypes = {
-  /** The active page number. If not specified the active page number will be tracked internally. */
-  activePage: PropTypes.number,
-  /** React element containing items of the current selected page. */
-  children: PropTypes.node.isRequired,
-  /**
-   * Function that will be called when the page changes.
-   * It receives the current page and the page size as arguments.
-   */
-  onChange: PropTypes.func,
-  /** boolean flag to hide first and last page links */
-  hideFirstAndLastPageLinks: PropTypes.bool,
-  /**  boolean flag to hide previous and next page links */
-  hidePreviousAndNextPageLinks: PropTypes.bool,
-  /** Array of different items per page that are allowed. */
-  pageSizes: PropTypes.arrayOf(PropTypes.number),
-  /** Number of items per page. */
-  pageSize: PropTypes.number,
-  /** Whether to show the page size selector or not. */
-  showPageSizeSelect: PropTypes.bool,
-  /** Total amount of items in all pages. */
-  totalItems: PropTypes.number.isRequired,
-  /** boolean flag that enables saving and using page and pageSize from query parameters. Enabled by default. */
-  useQueryParameter: PropTypes.bool,
-};
-
 PaginatedList.defaultProps = {
   activePage: 1,
   className: undefined,

graylog2-web-interface/src/components/lookup-tables/Cache.tsx

@@ -24,12 +24,7 @@ import useScopePermissions from 'hooks/useScopePermissions';
 import type { LookupTableCache } from 'logic/lookup-tables/types';
 
 import type { CachePluginType } from './types';
-import {
-  SummaryContainer,
-  SummaryRow,
-  Title,
-  Value,
-} from './caches/SummaryComponents.styled';
+import ConfigSummaryDefinitionListWrapper from './ConfigSummaryDefinitionListWrapper';
 
 type Props = {
   cache: LookupTableCache,
@@ -50,16 +45,18 @@ const Cache = ({ cache }: Props) => {
 
   return (
     <Row className="content">
-      <Col md={12}>
+      <Col md={6}>
         <h2>{cache.title} <small>({plugin.displayName})</small></h2>
-        <SummaryContainer>
-          <SummaryRow>
-            <Title>Description:</Title>
-            <Value>{cache.description || <em>No description.</em>}</Value>
-          </SummaryRow>
-        </SummaryContainer>
+        <ConfigSummaryDefinitionListWrapper>
+          <dl>
+            <dt>Description</dt>
+            <dd>{cache.description || <em>No description.</em>}</dd>
+          </dl>
+        </ConfigSummaryDefinitionListWrapper>
         <h4>Configuration</h4>
-        <div>{React.createElement(plugin.summaryComponent, { cache: cache })}</div>
+        <ConfigSummaryDefinitionListWrapper>
+          {React.createElement(plugin.summaryComponent, { cache: cache })}
+        </ConfigSummaryDefinitionListWrapper>
         {(!loadingScopePermissions && scopePermissions?.is_mutable) && (
           <Button bsStyle="success"
                   onClick={handleEdit(cache.name)}

graylog2-web-interface/src/components/lookup-tables/CacheCreate.tsx

@@ -15,12 +15,11 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
-import type { LookupTableCache, validationErrorsType } from 'src/logic/lookup-tables/types';
 
+import type { LookupTableCache, validationErrorsType, LUTTypesType } from 'logic/lookup-tables/types';
 import usePluginEntities from 'hooks/usePluginEntities';
 import { Row, Col, Input } from 'components/bootstrap';
 import { Select } from 'components/common';
-import { defaultCompare as naturalSort } from 'logic/DefaultCompare';
 
 import CacheForm from './CacheForm';
 import type { CachePluginType } from './types';
@@ -34,11 +33,11 @@ const INIT_CACHE: LookupTableCache = {
 };
 
 type TypesType = { type?: string, lable?: string };
-type cacheTypeOptionsType = { value: string, label: string }
+type OptionType = { value: string, label: string }
 
 type Props = {
   saved: () => void,
-  types: TypesType[],
+  types: LUTTypesType,
   validate: () => void,
   validationErrors: validationErrorsType,
 };
@@ -58,7 +57,12 @@ const CacheCreate = ({ saved, types, validate, validationErrors }: Props) => {
   const cacheTypes = React.useMemo(() => (
     Object.values(types)
       .map((inType: TypesType) => ({ value: inType.type, label: plugins[inType.type].displayName }))
-      .sort((a: cacheTypeOptionsType, b: cacheTypeOptionsType) => naturalSort(a.label.toLowerCase(), b.label.toLowerCase()))
+      .sort((a: OptionType, b: OptionType) => {
+        if (a.label.toLowerCase() > b.label.toLowerCase()) return 1;
+        if (a.label.toLowerCase() < b.label.toLowerCase()) return -1;
+
+        return 0;
+      })
   ), [types, plugins]);
 
   const cache = React.useMemo(() => {

graylog2-web-interface/src/components/lookup-tables/CacheForm.test.tsx

@@ -50,10 +50,8 @@ const renderedCache = ({
   inCache = { ...createLookupTableCache() },
   create = false,
   withConfig = true,
-  // eslint-disable-next-line no-console
-  validate = () => { console.log('validation called'); },
-  // eslint-disable-next-line no-console
-  saved = () => { console.log('saved called'); },
+  validate = () => {},
+  saved = () => {},
   validationErrors = {},
 }) => {
   const mockCache = {
@@ -118,7 +116,7 @@ describe('CacheForm', () => {
 
     renderedCache({ scope: 'DEFAULT', inCache: cache, withConfig: false });
 
-    const titleInput = screen.queryByLabelText('* Title');
+    const titleInput = screen.queryByLabelText('Title');
     fireEvent.blur(titleInput);
     const requiredErrorMessages = await screen.findAllByText('Required');
 
@@ -140,7 +138,7 @@ describe('CacheForm', () => {
       validationErrors: { name: ['The cache name is already in use.'] },
     });
 
-    const titleInput = screen.queryByLabelText('* Title');
+    const titleInput = screen.queryByLabelText('Title');
     fireEvent.blur(titleInput);
 
     const dupNameError = await screen.findByText('The cache name is already in use.');
@@ -164,8 +162,8 @@ describe('CacheForm', () => {
       saved: mockSaved,
     });
 
-    const titleEle = await screen.findByLabelText('* Title');
-    const nameEle = await screen.findByLabelText('* Name');
+    const titleEle = await screen.findByLabelText('Title');
+    const nameEle = await screen.findByLabelText('Name');
     const submitButton = await findSubmitButton();
 
     fireEvent.change(titleEle, { target: { value: '' } });
@@ -193,8 +191,8 @@ describe('CacheForm', () => {
       saved: mockSaved,
     });
 
-    const titleEle = await screen.findByLabelText('* Title');
-    const nameEle = await screen.findByLabelText('* Name');
+    const titleEle = await screen.findByLabelText('Title');
+    const nameEle = await screen.findByLabelText('Name');
     const submitButton = await findSubmitButton();
 
     fireEvent.change(titleEle, { target: { value: 'Test title' } });

graylog2-web-interface/src/components/lookup-tables/CacheForm.tsx

@@ -17,9 +17,9 @@
 import * as React from 'react';
 import _ from 'lodash';
 import { Formik, Form } from 'formik';
-import { PluginStore } from 'graylog-web-plugin/plugin';
-import type { LookupTableCache, validationErrorsType } from 'src/logic/lookup-tables/types';
 
+import usePluginEntities from 'hooks/usePluginEntities';
+import type { LookupTableCache, validationErrorsType } from 'logic/lookup-tables/types';
 import { Col, Row } from 'components/bootstrap';
 import { FormikFormGroup, FormSubmit } from 'components/common';
 import { LookupTableCachesActions } from 'stores/lookup-tables/LookupTableCachesStore';
@@ -48,30 +48,28 @@ const INIT_CACHE: LookupTableCache = {
   title: '',
   description: '',
   name: '',
-  config: {},
+  config: { type: 'none' },
 };
 
 type Props = {
   type: string,
-  saved: () => void,
   title: string,
+  saved: () => void,
   create?: boolean,
   cache?: LookupTableCache,
   validate?: (arg: LookupTableCache) => void,
   validationErrors?: validationErrorsType,
 };
 
-const CacheForm = ({ type, saved, title, create, cache, validate, validationErrors }: Props) => {
+const CacheForm = ({ type, title, saved, create, cache, validate, validationErrors }: Props) => {
   const configRef = React.useRef(null);
   const [generateName, setGenerateName] = React.useState<boolean>(create);
   const { loadingScopePermissions, scopePermissions } = useScopePermissions(cache);
 
-  const plugin = React.useMemo(() => {
-    return PluginStore.exports('lookupTableCaches').find((p) => p.type === type);
-  }, [type]);
-
+  const plugin = usePluginEntities('lookupTableCaches').find((p) => p.type === type);
   const pluginName = React.useMemo(() => (plugin.displayName || type), [plugin, type]);
   const DocComponent = React.useMemo(() => (plugin.documentationComponent), [plugin]);
+
   const configFieldSet = React.useMemo(() => {
     if (plugin) {
       return React.createElement(
@@ -108,7 +106,7 @@ const CacheForm = ({ type, saved, title, create, cache, validate, validationErro
       validate(values);
     }
 
-    if (values.config.type !== 'none') {
+    if (values.config.type !== 'none' && configRef.current && typeof configRef.current.validate !== 'undefined') {
       const confErrors = configRef.current?.validate() || {};
       if (!_.isEmpty(confErrors)) errors.config = confErrors;
     }
@@ -121,7 +119,7 @@ const CacheForm = ({ type, saved, title, create, cache, validate, validationErro
       ? LookupTableCachesActions.create(values)
       : LookupTableCachesActions.update(values);
 
-    return promise.then(() => saved());
+    promise.then(() => saved());
   };
 
   const onCancel = () => history.push(Routes.SYSTEM.LOOKUPTABLES.CACHES.OVERVIEW);
@@ -144,7 +142,7 @@ const CacheForm = ({ type, saved, title, create, cache, validate, validationErro
                 <fieldset>
                   <FormikFormGroup type="text"
                                    name="title"
-                                   label="* Title"
+                                   label="Title"
                                    required
                                    help={errors.title ? null : 'A short title for this cache.'}
                                    onChange={handleTitleChange(values, setValues)}
@@ -159,18 +157,17 @@ const CacheForm = ({ type, saved, title, create, cache, validate, validationErro
                                    wrapperClassName="col-sm-9" />
                   <FormikFormGroup type="text"
                                    name="name"
-                                   label="* Name"
+                                   label="Name"
                                    required
                                    error={validationErrors.name ? validationErrors.name[0] : null}
                                    onChange={() => setGenerateName(false)}
                                    help={
                                     (errors.name || validationErrors.name)
                                       ? null
                                       : 'The name that is being used to refer to this cache. Must be unique.'
-                                  }
+                                   }
                                    labelClassName="col-sm-3"
                                    wrapperClassName="col-sm-9" />
-
                 </fieldset>
                 {configFieldSet}
                 <fieldset>