Fix view filter update and deletion propagation (#12082)
# Introduction Diff description: ~500 tests and +500 additions close https://github.com/twentyhq/core-team-issues/issues/731 ## What has been done here In a nutshell on a field metadata type ( `SELECT MULTI_SELECT` ) update, we will be browsing all `ViewFilters` in a post hook searching for some referencing related updated `fieldMetadata` select. In order to update or delete the `viewFilter` depending on the associated mutations. ## How to test: - Add FieldMetadata `SELECT | MULTI_SELECT` to an existing or a new `objectMetadata` - Create a filtered view on created `fieldMetadata` with any options you would like - Remove some options ( in the best of the world some that are selected by the filter ) from the `fieldMetadata` settings page - Go back to the filtered view, removed or updated options should have been hydrated in the `displayValue` and the filtered data should make sense ## All filtered options are deleted edge case If an update implies that a viewFilter does not have any existing related options anymore, then we remove the viewFilter ## Testing ```sh PASS test/integration/metadata/suites/field-metadata/update-one-field-metadata-related-record.integration-spec.ts (27 s) update-one-field-metadata-related-record SELECT ✓ should delete related view filter if all select field options got deleted (2799 ms) ✓ should update related multi selected options view filter (1244 ms) ✓ should update related solo selected option view filter (1235 ms) ✓ should handle partial deletion of selected options in view filter (1210 ms) ✓ should handle reordering of options while maintaining view filter values (1487 ms) ✓ should handle no changes update of options while maintaining existing view filter values (1174 ms) ✓ should handle adding new options while maintaining existing view filter (1174 ms) ✓ should update display value with options label if less than 3 options are selected (1249 ms) ✓ should throw error if view filter value is not a stringified JSON array (1300 ms) MULTI_SELECT ✓ should delete related view filter if all select field options got deleted (1127 ms) ✓ should update related multi selected options view filter (1215 ms) ✓ should update related solo selected option view filter (1404 ms) ✓ should handle partial deletion of selected options in view filter (1936 ms) ✓ should handle reordering of options while maintaining view filter values (1261 ms) ✓ should handle no changes update of options while maintaining existing view filter values (1831 ms) ✓ should handle adding new options while maintaining existing view filter (1610 ms) ✓ should update display value with options label if less than 3 options are selected (1889 ms) ✓ should throw error if view filter value is not a stringified JSON array (1365 ms) Test Suites: 1 passed, 1 total Tests: 18 passed, 18 total Snapshots: 18 passed, 18 total Time: 27.039 s ``` ## Out of scope - We should handle ViewFilter validation when extracting its definition from the metadata https://github.com/twentyhq/core-team-issues/issues/1009 ## Concerns - Are we able through the api to update an RATING fieldMetadata ? ( if yes than that's an issue and we should handle RATING the same way than for SELECT and MULTI_SELECT ) - It's not possible to group a view from a MULTI_SELECT field The above points create a double nor a triple "lecture" to the post hook effect: - ViewGroup -> only SELECT - VIewFilter -> only SELECT || MULTI_SELECT - Rating nothing I think we should determine the scope of all of that --------- Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Paul Rastoin
@ -17,8 +17,8 @@ import { useSetRecoilState } from 'recoil';
|
||||
import { getRecordsFromRecordConnection } from '@/object-record/cache/utils/getRecordsFromRecordConnection';
|
||||
import { RecordGqlConnection } from '@/object-record/graphql/types/RecordGqlConnection';
|
||||
import { useSetRecordGroups } from '@/object-record/record-group/hooks/useSetRecordGroups';
|
||||
import { useApolloMetadataClient } from './useApolloMetadataClient';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { useApolloMetadataClient } from './useApolloMetadataClient';
|
||||
|
||||
export const useUpdateOneFieldMetadataItem = () => {
|
||||
const apolloMetadataClient = useApolloMetadataClient();
|
||||
@ -27,6 +27,7 @@ export const useUpdateOneFieldMetadataItem = () => {
|
||||
useRefreshObjectMetadataItems('network-only');
|
||||
|
||||
const { setRecordGroupsFromViewGroups } = useSetRecordGroups();
|
||||
const cache = useApolloClient().cache;
|
||||
|
||||
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
|
||||
|
||||
@ -113,6 +114,7 @@ export const useUpdateOneFieldMetadataItem = () => {
|
||||
correspondingObjectMetadataItemRefreshed,
|
||||
);
|
||||
}
|
||||
cache.evict({ id: `Views:${view.id}` });
|
||||
}
|
||||
|
||||
return result;
|
||||
|
||||
@ -20,11 +20,11 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
|
||||
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { isNonEmptyString } from '@sniptt/guards';
|
||||
import { MAX_OPTIONS_TO_DISPLAY } from 'twenty-shared/constants';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { MenuItem, MenuItemMultiSelect } from 'twenty-ui/navigation';
|
||||
|
||||
export const EMPTY_FILTER_VALUE = '';
|
||||
export const MAX_OPTIONS_TO_DISPLAY = 3;
|
||||
|
||||
type SelectOptionForFilter = FieldMetadataItemOption & {
|
||||
isSelected: boolean;
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
import { useRichTextV2FieldDisplay } from '@/object-record/record-field/meta-types/hooks/useRichTextV2FieldDisplay';
|
||||
import { getFirstNonEmptyLineOfRichText } from '@/ui/input/editor/utils/getFirstNonEmptyLineOfRichText';
|
||||
import { PartialBlock } from '@blocknote/core';
|
||||
import { parseJson } from '~/utils/parseJson';
|
||||
import { isDefined, parseJson } from 'twenty-shared/utils';
|
||||
|
||||
export const RichTextV2FieldDisplay = () => {
|
||||
const { fieldValue } = useRichTextV2FieldDisplay();
|
||||
|
||||
const blocks = parseJson<PartialBlock[]>(fieldValue?.blocknote);
|
||||
const blocks =
|
||||
isDefined(fieldValue) && isDefined(fieldValue.blocknote)
|
||||
? parseJson<PartialBlock[]>(fieldValue.blocknote)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
@ -2,9 +2,8 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
|
||||
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
|
||||
import { orderWorkflowRunOutput } from '@/object-record/record-field/meta-types/utils/orderWorkflowRunOutput';
|
||||
import { useContext } from 'react';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { isDefined, parseJson } from 'twenty-shared/utils';
|
||||
import { JsonObject, JsonValue } from 'type-fest';
|
||||
import { parseJson } from '~/utils/parseJson';
|
||||
|
||||
export const usePrecomputedJsonDraftValue = ({
|
||||
draftValue,
|
||||
@ -13,7 +12,9 @@ export const usePrecomputedJsonDraftValue = ({
|
||||
}): JsonValue => {
|
||||
const { fieldDefinition } = useContext(FieldContext);
|
||||
|
||||
const parsedJsonValue = parseJson<JsonValue>(draftValue);
|
||||
const parsedJsonValue = isDefined(draftValue)
|
||||
? parseJson<JsonValue>(draftValue)
|
||||
: null;
|
||||
|
||||
if (
|
||||
fieldDefinition.metadata.objectMetadataNameSingular ===
|
||||
|
||||
@ -6,8 +6,8 @@ import { FieldRichTextValue } from '@/object-record/record-field/types/FieldMeta
|
||||
import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata';
|
||||
import { isFieldRichText } from '@/object-record/record-field/types/guards/isFieldRichText';
|
||||
import { PartialBlock } from '@blocknote/core';
|
||||
import { isDefined, parseJson } from 'twenty-shared/utils';
|
||||
import { FieldMetadataType } from '~/generated-metadata/graphql';
|
||||
import { parseJson } from '~/utils/parseJson';
|
||||
import { FieldContext } from '../../contexts/FieldContext';
|
||||
|
||||
export const useRichTextFieldDisplay = () => {
|
||||
@ -26,7 +26,9 @@ export const useRichTextFieldDisplay = () => {
|
||||
fieldName,
|
||||
);
|
||||
|
||||
const fieldValueParsed = parseJson<PartialBlock[]>(fieldValue);
|
||||
const fieldValueParsed = isDefined(fieldValue)
|
||||
? parseJson<PartialBlock[]>(fieldValue)
|
||||
: null;
|
||||
|
||||
return {
|
||||
fieldDefinition,
|
||||
|
||||
@ -8,9 +8,8 @@ import {
|
||||
} from '@/object-record/record-filter/types/RecordFilter';
|
||||
import { FILTER_OPERANDS_MAP } from '@/object-record/record-filter/utils/getRecordFilterOperands';
|
||||
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
|
||||
import { assertUnreachable } from 'twenty-shared/utils';
|
||||
import { assertUnreachable, parseJson } from 'twenty-shared/utils';
|
||||
import { RelationDefinitionType } from '~/generated-metadata/graphql';
|
||||
import { parseJson } from '~/utils/parseJson';
|
||||
|
||||
export const buildValueFromFilter = ({
|
||||
filter,
|
||||
|
||||
@ -3,14 +3,13 @@ import { useFilterableFieldMetadataItems } from '@/object-record/record-filter/h
|
||||
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
|
||||
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
|
||||
import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
|
||||
import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyStateV2';
|
||||
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
|
||||
import { hasInitializedCurrentRecordFiltersComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFiltersComponentFamilyState';
|
||||
import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
|
||||
import { useEffect } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
|
||||
|
||||
export const ViewBarRecordFilterEffect = () => {
|
||||
const currentViewId = useRecoilComponentValueV2(
|
||||
@ -25,47 +24,32 @@ export const ViewBarRecordFilterEffect = () => {
|
||||
}),
|
||||
);
|
||||
|
||||
const [
|
||||
hasInitializedCurrentRecordFilters,
|
||||
setHasInitializedCurrentRecordFilters,
|
||||
] = useRecoilComponentFamilyStateV2(
|
||||
hasInitializedCurrentRecordFiltersComponentFamilyState,
|
||||
{
|
||||
viewId: currentViewId ?? undefined,
|
||||
},
|
||||
);
|
||||
|
||||
const setCurrentRecordFilters = useSetRecoilComponentStateV2(
|
||||
currentRecordFiltersComponentState,
|
||||
);
|
||||
const [currentRecordFilters, setCurrentRecordFilters] =
|
||||
useRecoilComponentStateV2(currentRecordFiltersComponentState);
|
||||
|
||||
const { filterableFieldMetadataItems } = useFilterableFieldMetadataItems(
|
||||
objectMetadataItem.id,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isDefined(currentView) && !hasInitializedCurrentRecordFilters) {
|
||||
if (isDefined(currentView)) {
|
||||
if (currentView.objectMetadataId !== objectMetadataItem.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isDefined(currentView)) {
|
||||
setCurrentRecordFilters(
|
||||
mapViewFiltersToFilters(
|
||||
currentView.viewFilters,
|
||||
filterableFieldMetadataItems,
|
||||
),
|
||||
);
|
||||
|
||||
setHasInitializedCurrentRecordFilters(true);
|
||||
const newRecordFilters = mapViewFiltersToFilters(
|
||||
currentView.viewFilters,
|
||||
filterableFieldMetadataItems,
|
||||
);
|
||||
if (!isDeeplyEqual(currentRecordFilters, newRecordFilters)) {
|
||||
setCurrentRecordFilters(newRecordFilters);
|
||||
}
|
||||
}
|
||||
}, [
|
||||
currentViewId,
|
||||
currentRecordFilters,
|
||||
setCurrentRecordFilters,
|
||||
filterableFieldMetadataItems,
|
||||
hasInitializedCurrentRecordFilters,
|
||||
setHasInitializedCurrentRecordFilters,
|
||||
currentView,
|
||||
objectMetadataItem,
|
||||
]);
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
|
||||
import { createComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilyStateV2';
|
||||
|
||||
export const hasInitializedCurrentRecordFiltersComponentFamilyState =
|
||||
createComponentFamilyStateV2<boolean, { viewId?: string }>({
|
||||
key: 'hasInitializedCurrentRecordFiltersComponentFamilyState',
|
||||
defaultValue: false,
|
||||
componentInstanceContext: RecordFiltersComponentInstanceContext,
|
||||
});
|
||||
Reference in New Issue
Block a user