Fix issue when non visible items are selected in change field type (#…

…20616)

changelog/unreleased/issue-20592.toml

@@ -0,0 +1,5 @@
+type = "fixed"
+message = "Fix that non visible items are selected in index sets table when changing field type"
+
+issues = ["20592"]
+pulls = ["20616"]

graylog2-web-interface/src/components/indices/helpers/isIndexFieldTypeChangeAllowed.ts

@@ -18,6 +18,7 @@
 import type { IndexSet } from 'stores/indices/IndexSetsStore';
 
 const TEMPLATE_TYPES = ['failures', 'events', 'illuminate_content'];
-const isIndexFieldTypeChangeAllowed = (indexSet: IndexSet) => !TEMPLATE_TYPES.includes(indexSet?.index_template_type);
+export const isTemplateTypeAllowsFieldTypeChang = (type: string) => !TEMPLATE_TYPES.includes(type);
+const isIndexFieldTypeChangeAllowed = (indexSet: IndexSet) => isTemplateTypeAllowsFieldTypeChang(indexSet?.index_template_type);
 
 export default isIndexFieldTypeChangeAllowed;

graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldType.test.tsx

@@ -58,7 +58,7 @@ describe('ChangeFieldType', () => {
   useViewsPlugin();
 
   beforeAll(() => {
-    asMock(useInitialSelection).mockReturnValue(['id-1', 'id-2']);
+    asMock(useInitialSelection).mockReturnValue({ list: ['id-1', 'id-2'], isLoading: false });
     asMock(useFieldTypeUsages).mockReturnValue(paginatedFieldUsage);
   });
 

graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldType.tsx

@@ -34,13 +34,14 @@ const ChangeFieldType = ({
     onClose();
   }, [onClose]);
 
-  const initialSelection = useInitialSelection();
+  const { list, isLoading } = useInitialSelection();
 
   return show ? (
-    <ChangeFieldTypeModal initialSelectedIndexSets={initialSelection}
+    <ChangeFieldTypeModal initialSelectedIndexSets={list}
                           onClose={handleOnClose}
                           initialData={{ fieldName: field }}
-                          show />
+                          show
+                          initialSelectionDataLoaded={!isLoading} />
   ) : null;
 };
 

graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldTypeModal.tsx

@@ -63,7 +63,8 @@ type Props = {
   initialData?: {
     type?: string,
     fieldName?: string
-  }
+  },
+  initialSelectionDataLoaded?: boolean,
 }
 
 const FailureStreamLink = () => {
@@ -86,6 +87,7 @@ const ChangeFieldTypeModal = ({
   showSelectionTable,
   showFieldSelect,
   initialData,
+  initialSelectionDataLoaded,
 }: Props) => {
   const [{ fieldName, type }, setModalData] = useState<{ fieldName?: string, type?: string }>(initialData);
   const { data: { fieldTypes }, isLoading: isLoadingFieldTypes } = useFieldTypesForMappings();
@@ -185,7 +187,7 @@ const ChangeFieldTypeModal = ({
                         inputProps={{ 'aria-label': 'Select Field Type For Field' }}
                         required />
         </Input>
-        {showSelectionTable && (
+        {showSelectionTable && initialSelectionDataLoaded && (
           <>
             <StyledLabel>Select Targeted Index Sets</StyledLabel>
             <p>
@@ -214,6 +216,7 @@ ChangeFieldTypeModal.defaultProps = {
   onSubmitCallback: undefined,
   showFieldSelect: false,
   initialData: { fieldName: undefined, type: undefined },
+  initialSelectionDataLoaded: true,
 };
 
 export default ChangeFieldTypeModal;

graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/hooks/useAllIndexSetIds.ts

@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import { useQuery } from '@tanstack/react-query';
+
+import UserNotification from 'util/UserNotification';
+import fetch from 'logic/rest/FetchProvider';
+import { qualifyUrl } from 'util/URLUtils';
+
+export type SimpleIndexSet = { id: string, type: string };
+type IndexSetsState = Array<SimpleIndexSet>;
+const INITIAL_DATA: IndexSetsState = [];
+
+const url = qualifyUrl('system/indices/index_sets/types/index_sets_with_field_type_change_support');
+
+const fetchAllIndexSetIds = async (streams: Array<string>): Promise<IndexSetsState> => fetch<Array<{index_set_id: string, type: string }>>('POST', url, streams?.length ? streams : undefined).then(
+  (elements) => {
+    const list: Array<SimpleIndexSet> = elements.map((element) => ({
+      id: element.index_set_id,
+      type: element.type,
+    }));
+
+    return list;
+  },
+);
+
+const useAllIndexSetIds = (streams: Array<string>): {
+  data: IndexSetsState,
+  isLoading: boolean,
+  refetch: () => void,
+} => {
+  const { data, isLoading, refetch } = useQuery(
+    ['allIndexSetIds', ...streams],
+    () => fetchAllIndexSetIds(streams),
+    {
+      onError: (errorThrown) => {
+        UserNotification.error(`Loading index sets with field type change support failed with status: ${errorThrown}`,
+          'Could not load index sets with field type change support');
+      },
+    },
+  );
+
+  return ({
+    data: data ?? INITIAL_DATA,
+    isLoading,
+    refetch,
+  });
+};
+
+export default useAllIndexSetIds;

graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/hooks/useInitialSelection.tsx

@@ -16,35 +16,19 @@
  */
 import { useMemo } from 'react';
 
-import { useStore } from 'stores/connect';
-import type { Stream } from 'views/stores/StreamsStore';
-import { StreamsStore } from 'views/stores/StreamsStore';
 import useCurrentStream from 'views/logic/fieldactions/ChangeFieldType/hooks/useCurrentStream';
-import type { IndexSet } from 'stores/indices/IndexSetsStore';
-import isIndexFieldTypeChangeAllowed from 'components/indices/helpers/isIndexFieldTypeChangeAllowed';
-import useIndexSetsList from 'components/indices/hooks/useIndexSetsList';
-
-const streamsMapper = ({ streams }) => streams.map((stream: Stream) => ({ indexSet: stream.index_set_id, id: stream.id }));
-
-const indexSetsMapper = (indexSets: Array<IndexSet>): Record<string, IndexSet> => {
-  if (!indexSets) return null;
-
-  return Object.fromEntries(indexSets.map((indexSet) => ([indexSet.id, indexSet])));
-};
+import {
+  isTemplateTypeAllowsFieldTypeChang,
+} from 'components/indices/helpers/isIndexFieldTypeChangeAllowed';
+import useAllIndexSetIds from 'views/logic/fieldactions/ChangeFieldType/hooks/useAllIndexSetIds';
 
 const useInitialSelection = () => {
   const currentStreams = useCurrentStream();
+  const { data, isLoading } = useAllIndexSetIds(currentStreams);
 
-  const availableStreams: Array<{ indexSet: string, id: string }> = useStore(StreamsStore, streamsMapper);
-  const { data } = useIndexSetsList();
-  const indexSets = useMemo(() => indexSetsMapper(data.indexSets), [data.indexSets]);
-
-  return useMemo(() => {
-    const currentStreamSet = new Set(currentStreams);
-    const filterFn = currentStreamSet.size > 0 ? ({ id, indexSet }) => currentStreamSet.has(id) && isIndexFieldTypeChangeAllowed(indexSets[indexSet]) : () => true;
+  const list = useMemo(() => data.filter(({ type }) => isTemplateTypeAllowsFieldTypeChang(type)).map(({ id }) => id), [data]);
 
-    return indexSets ? availableStreams.filter(filterFn).map(({ indexSet }) => indexSet) : [];
-  }, [availableStreams, currentStreams, indexSets]);
+  return ({ list, isLoading });
 };
 
 export default useInitialSelection;