BUGFIX: Define selection context based on selected asset source

packages/asset-collections/src/components/AddTagButton.tsx

@@ -6,14 +6,16 @@ import { Button, Icon } from '@neos-project/react-ui-components';
 import { useIntl } from '@media-ui/core';
 import { useConfigQuery } from '@media-ui/core/src/hooks';
 import { createTagDialogState, selectedTagIdState } from '@media-ui/feature-asset-tags';
+import { selectedAssetSourceIdState } from '@media-ui/feature-asset-sources';
 
 import classes from './AddTagButton.module.css';
 
 const AddTagButton: React.FC = () => {
     const { translate } = useIntl();
     const { config } = useConfigQuery();
     const setCreateTagDialogState = useSetRecoilState(createTagDialogState);
-    const selectedTagId = useRecoilValue(selectedTagIdState);
+    const assetSourceId = useRecoilValue(selectedAssetSourceIdState);
+    const selectedTagId = useRecoilValue(selectedTagIdState(assetSourceId));
 
     const onClickCreate = useCallback(() => {
         setCreateTagDialogState({

packages/asset-collections/src/components/AssetCollectionTreeNode.tsx

@@ -7,7 +7,7 @@ import dndTypes from '@media-ui/core/src/constants/dndTypes';
 import { selectedAssetCollectionAndTagState } from '@media-ui/core/src/state';
 import { IconStack } from '@media-ui/core/src/components';
 import { useConfigQuery } from '@media-ui/core/src/hooks';
-import { selectedAssetSourceState } from '@media-ui/feature-asset-sources';
+import { selectedAssetSourceIdState } from '@media-ui/feature-asset-sources';
 
 import TagTreeNode from './TagTreeNode';
 import { useAssetCollectionQuery, UNASSIGNED_COLLECTION_ID } from '../hooks/useAssetCollectionQuery';
@@ -33,14 +33,14 @@ const AssetCollectionTreeNode: React.FC<AssetCollectionTreeNodeProps> = ({
     renderChildCollections = true,
 }) => {
     const { config } = useConfigQuery();
-    const selectedAssetSourceId = useRecoilValue(selectedAssetSourceState);
-    const { assetCollection } = useAssetCollectionQuery(assetCollectionId, selectedAssetSourceId);
-    const { assetCollections } = useAssetCollectionsQuery(selectedAssetSourceId);
+    const assetSourceId = useRecoilValue(selectedAssetSourceIdState);
+    const { assetCollection } = useAssetCollectionQuery(assetCollectionId, assetSourceId);
+    const { assetCollections } = useAssetCollectionsQuery(assetSourceId);
     const [collapsed, setCollapsed] = useRecoilState(assetCollectionTreeCollapsedItemState(assetCollectionId));
-    const selectAssetCollectionAndTag = useSetRecoilState(selectedAssetCollectionAndTagState);
-    const isFocused = useRecoilValue(assetCollectionFocusedState(assetCollectionId));
+    const selectAssetCollectionAndTag = useSetRecoilState(selectedAssetCollectionAndTagState(assetSourceId));
+    const isFocused = useRecoilValue(assetCollectionFocusedState({ assetCollectionId, assetSourceId }));
     const isFavourite = useRecoilValue(assetCollectionFavouriteState(assetCollectionId));
-    const isActive = useRecoilValue(assetCollectionActiveState(assetCollectionId));
+    const isActive = useRecoilValue(assetCollectionActiveState({ assetCollectionId, assetSourceId }));
 
     const { currentlyDraggedNodes, handeEndDrag, handleDrag, handleDrop, acceptsDraggedNode } = useAssetCollectionDnd();
 

packages/asset-collections/src/components/DeleteButton.tsx

@@ -7,7 +7,7 @@ import { useIntl, useMediaUi, useNotify } from '@media-ui/core';
 import { useConfigQuery } from '@media-ui/core/src/hooks';
 import { selectedAssetCollectionAndTagState } from '@media-ui/core/src/state';
 import { useDeleteTag, useSelectedTag } from '@media-ui/feature-asset-tags';
-import { selectedAssetSourceState } from '@media-ui/feature-asset-sources';
+import { selectedAssetSourceIdState } from '@media-ui/feature-asset-sources';
 
 import useDeleteAssetCollection from '../hooks/useDeleteAssetCollection';
 import useSelectedAssetCollection from '../hooks/useSelectedAssetCollection';
@@ -17,12 +17,14 @@ const DeleteButton: React.FC = () => {
     const { config } = useConfigQuery();
     const Notify = useNotify();
     const { approvalAttainmentStrategy } = useMediaUi();
-    const selectedAssetSourceId = useRecoilValue(selectedAssetSourceState);
+    const selectedAssetSourceId = useRecoilValue(selectedAssetSourceIdState);
     const selectedAssetCollection = useSelectedAssetCollection();
     const selectedTag = useSelectedTag();
     const { deleteTag } = useDeleteTag();
     const { deleteAssetCollection } = useDeleteAssetCollection();
-    const setSelectedAssetCollectionAndTag = useSetRecoilState(selectedAssetCollectionAndTagState);
+    const setSelectedAssetCollectionAndTag = useSetRecoilState(
+        selectedAssetCollectionAndTagState(selectedAssetSourceId)
+    );
 
     const onClickDelete = useCallback(async () => {
         if (selectedTag) {

packages/asset-collections/src/components/FavouriteButton.tsx

@@ -7,10 +7,12 @@ import { useIntl } from '@media-ui/core';
 
 import { selectedAssetCollectionIdState } from '../state/selectedAssetCollectionIdState';
 import { assetCollectionFavouriteState } from '../state/assetCollectionFavouritesState';
+import { selectedAssetSourceIdState } from '@media-ui/feature-asset-sources';
 
 const FavouriteButton: React.FC = () => {
     const { translate } = useIntl();
-    const selectedAssetCollectionId = useRecoilValue(selectedAssetCollectionIdState);
+    const assetSourceId = useRecoilValue(selectedAssetSourceIdState);
+    const selectedAssetCollectionId = useRecoilValue(selectedAssetCollectionIdState(assetSourceId));
     const [isFavourite, setIsFavourite] = useRecoilState(assetCollectionFavouriteState(selectedAssetCollectionId));
 
     const toggleFavourite = useCallback(() => {

packages/asset-collections/src/components/TagTreeNode.tsx

@@ -7,6 +7,7 @@ import dndTypes from '@media-ui/core/src/constants/dndTypes';
 import { selectedAssetCollectionAndTagState } from '@media-ui/core/src/state';
 import { selectedAssetCollectionIdState } from '@media-ui/feature-asset-collections';
 import { selectedTagIdState } from '@media-ui/feature-asset-tags';
+import { selectedAssetSourceIdState } from '@media-ui/feature-asset-sources';
 
 export interface TagTreeNodeProps extends TreeNodeProps {
     tagId: string;
@@ -18,12 +19,16 @@ export interface TagTreeNodeProps extends TreeNodeProps {
 }
 
 // This state selector provides the focused state for each individual asset collection
-const tagFocusedState = selectorFamily<boolean, { assetCollectionId: string; tagId: string }>({
+const tagFocusedState = selectorFamily<
+    boolean,
+    { assetCollectionId: string; tagId: string; assetSourceId: AssetSourceId }
+>({
     key: 'TagFocusedState',
     get:
-        ({ assetCollectionId, tagId }) =>
+        ({ assetCollectionId, tagId, assetSourceId }) =>
         ({ get }) =>
-            get(selectedAssetCollectionIdState) === assetCollectionId && get(selectedTagIdState) === tagId,
+            get(selectedAssetCollectionIdState(assetSourceId)) === assetCollectionId &&
+            get(selectedTagIdState(assetSourceId)) === tagId,
 });
 
 const TagTreeNode: React.FC<TagTreeNodeProps> = ({
@@ -34,8 +39,9 @@ const TagTreeNode: React.FC<TagTreeNodeProps> = ({
     icon = 'tag',
     customIconComponent,
 }: TagTreeNodeProps) => {
-    const selectAssetCollectionAndTag = useSetRecoilState(selectedAssetCollectionAndTagState);
-    const isFocused = useRecoilValue(tagFocusedState({ assetCollectionId, tagId }));
+    const assetSourceId = useRecoilValue(selectedAssetSourceIdState);
+    const selectAssetCollectionAndTag = useSetRecoilState(selectedAssetCollectionAndTagState(assetSourceId));
+    const isFocused = useRecoilValue(tagFocusedState({ assetCollectionId, tagId, assetSourceId }));
 
     return (
         <Tree.Node className="TagTreeNode">

packages/asset-collections/src/hooks/useSelectedAssetCollection.ts

@@ -1,6 +1,8 @@
 import { useRecoilValue } from 'recoil';
 import { useQuery } from '@apollo/client';
 
+import { selectedAssetSourceIdState } from '@media-ui/feature-asset-sources';
+
 import { selectedAssetCollectionIdState } from '../state/selectedAssetCollectionIdState';
 import { ASSET_COLLECTION } from '../queries/assetCollection';
 
@@ -10,8 +12,8 @@ interface AssetCollectionQueryResult {
 }
 
 const useSelectedAssetCollection = (): AssetCollection => {
-    const assetSourceId = useRecoilValue(selectedAssetCollectionIdState);
-    const selectedAssetCollectionId = useRecoilValue(selectedAssetCollectionIdState);
+    const assetSourceId = useRecoilValue(selectedAssetSourceIdState);
+    const selectedAssetCollectionId = useRecoilValue(selectedAssetCollectionIdState(assetSourceId));
 
     const { data } = useQuery<AssetCollectionQueryResult>(ASSET_COLLECTION, {
         variables: { id: selectedAssetCollectionId, assetSourceId },

packages/asset-collections/src/provider/AssetCollectionTreeDndProvider.tsx

@@ -4,7 +4,7 @@ import HTML5Backend from 'react-dnd-html5-backend';
 import { useRecoilValue } from 'recoil';
 
 import { useIntl, useNotify } from '@media-ui/core';
-import { selectedAssetSourceState } from '@media-ui/feature-asset-sources';
+import { selectedAssetSourceIdState } from '@media-ui/feature-asset-sources';
 
 import { useSetAssetCollectionParent } from '../hooks/useSetAssetCollectionParent';
 import useAssetCollectionsQuery from '../hooks/useAssetCollectionsQuery';
@@ -29,7 +29,7 @@ export const useAssetCollectionDnd = (): AssetCollectionTreeDndProviderValues =>
 export function AssetCollectionTreeDndProvider({ children }: AssetCollectionTreeDndProviderProps) {
     const { translate } = useIntl();
     const Notify = useNotify();
-    const selectedAssetSourceId = useRecoilValue(selectedAssetSourceState);
+    const selectedAssetSourceId = useRecoilValue(selectedAssetSourceIdState);
     const { assetCollections } = useAssetCollectionsQuery(selectedAssetSourceId);
     const [currentlyDraggedNodes, setCurrentlyDraggedNodes] = useState<string[]>([]);
     const { setAssetCollectionParent } = useSetAssetCollectionParent();

packages/asset-collections/src/state/assetCollectionActiveState.ts

@@ -3,13 +3,16 @@ import { selectorFamily } from 'recoil';
 import { selectedAssetCollectionAndTagState } from '@media-ui/core/src/state';
 
 // This state selector provides the active state for each individual asset collection based on its tags
-export const assetCollectionActiveState = selectorFamily<boolean, string>({
+export const assetCollectionActiveState = selectorFamily<
+    boolean,
+    { assetCollectionId: AssetCollectionId; assetSourceId: AssetSourceId }
+>({
     key: 'AssetCollectionActiveState',
     get:
-        (assetCollectionId) =>
+        ({ assetCollectionId, assetSourceId }) =>
         ({ get }) => {
             const { assetCollectionId: selectedAssetCollectionId, tagId: selectedTagId } = get(
-                selectedAssetCollectionAndTagState
+                selectedAssetCollectionAndTagState(assetSourceId)
             );
             return assetCollectionId === selectedAssetCollectionId && !!selectedTagId;
         },

packages/asset-collections/src/state/assetCollectionFocusedState.ts

@@ -3,10 +3,13 @@ import { selectorFamily } from 'recoil';
 import { selectedAssetCollectionIdState } from './selectedAssetCollectionIdState';
 
 // This state selector provides the focused state for each individual asset collection
-export const assetCollectionFocusedState = selectorFamily<boolean, string>({
+export const assetCollectionFocusedState = selectorFamily<
+    boolean,
+    { assetCollectionId: AssetCollectionId; assetSourceId: AssetSourceId }
+>({
     key: 'AssetCollectionFocusedState',
     get:
-        (assetCollectionId) =>
+        ({ assetCollectionId, assetSourceId }) =>
         ({ get }) =>
-            get(selectedAssetCollectionIdState) === assetCollectionId,
+            get(selectedAssetCollectionIdState(assetSourceId)) === assetCollectionId,
 });

packages/asset-collections/src/state/selectedAssetCollectionIdState.ts

@@ -1,7 +1,7 @@
-import { atom } from 'recoil';
+import { atomFamily } from 'recoil';
 import { localStorageEffect } from '@media-ui/core/src/state';
 
-export const selectedAssetCollectionIdState = atom<string | null>({
+export const selectedAssetCollectionIdState = atomFamily<AssetCollectionId | null, AssetSourceId>({
     key: 'SelectedAssetCollectionIdState',
     default: null,
     effects: [localStorageEffect('SelectedAssetCollectionIdState')],

packages/asset-sources/src/components/AssetSourceList.tsx

@@ -9,17 +9,17 @@ import { IconLabel } from '@media-ui/core/src/components';
 import { selectedAssetIdState } from '@media-ui/core/src/state';
 import { selectedAssetCollectionIdState } from '@media-ui/feature-asset-collections';
 
-import { selectedAssetSourceState } from '../state/selectedAssetSourceState';
+import { selectedAssetSourceIdState } from '../state/selectedAssetSourceIdState';
 import { useAssetSourcesQuery } from '../hooks/useAssetSourcesQuery';
 
 import classes from './AssetSourceList.module.css';
 
 const AssetSourceList: React.FC = () => {
     const { assetSources } = useAssetSourcesQuery();
     const { translate } = useIntl();
-    const [selectedAssetSourceId, setSelectedAssetSourceId] = useRecoilState(selectedAssetSourceState);
+    const [selectedAssetSourceId, setSelectedAssetSourceId] = useRecoilState(selectedAssetSourceIdState);
     const setSelectedAsset = useSetRecoilState(selectedAssetIdState);
-    const setSelectedAssetCollection = useSetRecoilState(selectedAssetCollectionIdState);
+    const setSelectedAssetCollection = useSetRecoilState(selectedAssetCollectionIdState(selectedAssetSourceId));
 
     const chooseSelectedAssetSource = useCallback(
         (assetSourceId: AssetSourceId) => {

packages/asset-sources/src/hooks/useSelectedAssetSource.ts

@@ -2,10 +2,10 @@ import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { useAssetSourcesQuery } from './useAssetSourcesQuery';
-import { selectedAssetSourceState } from '../state/selectedAssetSourceState';
+import { selectedAssetSourceIdState } from '../state/selectedAssetSourceIdState';
 
 export const useSelectedAssetSource = (): AssetSource => {
-    const selectedAssetSourceId = useRecoilValue(selectedAssetSourceState);
+    const selectedAssetSourceId = useRecoilValue(selectedAssetSourceIdState);
     const { assetSources } = useAssetSourcesQuery();
     return useMemo(
         () => assetSources.find((assetSource) => assetSource.id === selectedAssetSourceId),

packages/asset-sources/src/index.ts

@@ -3,4 +3,4 @@ export { default as AssetSourceList } from './components/AssetSourceList';
 export { ASSET_SOURCE_FRAGMENT } from './fragments/assetSource';
 export { useAssetSourcesQuery } from './hooks/useAssetSourcesQuery';
 export { useSelectedAssetSource } from './hooks/useSelectedAssetSource';
-export { selectedAssetSourceState, NEOS_ASSET_SOURCE } from './state/selectedAssetSourceState';
+export { selectedAssetSourceIdState, NEOS_ASSET_SOURCE } from './state/selectedAssetSourceIdState';

packages/asset-sources/src/state/selectedAssetSourceState.ts → packages/asset-sources/src/state/selectedAssetSourceIdState.ts

@@ -5,16 +5,19 @@ import { clipboardVisibleState } from '@media-ui/feature-clipboard';
 
 export const NEOS_ASSET_SOURCE = 'neos';
 
-const selectedAssetSourceIdState = atom<AssetSourceId>({
-    key: 'SelectedAssetSourceIdState',
+const selectedAssetSourceIdInternalState = atom<AssetSourceId>({
+    key: 'SelectedAssetSourceIdInternalState',
     default: NEOS_ASSET_SOURCE,
     effects: [localStorageEffect('SelectedAssetSourceIdState')],
 });
 
-export const selectedAssetSourceState = selector<AssetSourceId>({
-    key: 'SelectedAssetSourceState',
+/**
+ * Provides the selected asset source id with a fallback based on the constraints
+ */
+export const selectedAssetSourceIdState = selector<AssetSourceId>({
+    key: 'SelectedAssetSourceIdState',
     get: ({ get }) => {
-        const selectedAssetSourceId = get(selectedAssetSourceIdState);
+        const selectedAssetSourceId = get(selectedAssetSourceIdInternalState);
         const constraints = get(constraintsState);
 
         if (constraints.assetSources?.length > 0 && !constraints.assetSources.includes(selectedAssetSourceId)) {
@@ -23,7 +26,7 @@ export const selectedAssetSourceState = selector<AssetSourceId>({
         return selectedAssetSourceId;
     },
     set: ({ set }, newValue) => {
-        set(selectedAssetSourceIdState, newValue);
+        set(selectedAssetSourceIdInternalState, newValue);
         // Reset the current page to 1 when switching asset sources
         set(currentPageState, 1);
         // Hide the clipboard when switching asset sources

packages/asset-tags/src/components/CreateTagDialog.tsx

@@ -12,12 +12,12 @@ import { Dialog } from '@media-ui/core/src/components';
 import createTagDialogState from '../state/createTagDialogState';
 
 import classes from './CreateTagDialog.module.css';
-import { selectedAssetSourceState } from '@media-ui/feature-asset-sources';
+import { selectedAssetSourceIdState } from '@media-ui/feature-asset-sources';
 
 const CreateTagDialog: React.FC = () => {
     const { translate } = useIntl();
     const Notify = useNotify();
-    const selectedAssetSourceId = useRecoilValue(selectedAssetSourceState);
+    const selectedAssetSourceId = useRecoilValue(selectedAssetSourceIdState);
     const selectedAssetCollection = useSelectedAssetCollection();
     const [dialogState, setDialogState] = useRecoilState(createTagDialogState);
     const { createTag } = useCreateTag();

packages/asset-tags/src/hooks/useDeleteTag.ts

@@ -1,7 +1,8 @@
 import { useMutation } from '@apollo/client';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { ASSET_COLLECTIONS } from '@media-ui/feature-asset-collections';
+import { selectedAssetSourceIdState } from '@media-ui/feature-asset-sources';
 
 import selectedTagIdState from '../state/selectedTagIdState';
 import TAGS from '../queries/tags';
@@ -14,7 +15,8 @@ interface DeleteTagVariables {
 
 export default function useDeleteTag() {
     const [action, { error, data }] = useMutation<{ deleteTag: MutationResult }, DeleteTagVariables>(DELETE_TAG);
-    const [selectedTagId, setSelectedTagId] = useRecoilState(selectedTagIdState);
+    const assetSourceId = useRecoilValue(selectedAssetSourceIdState);
+    const [selectedTagId, setSelectedTagId] = useRecoilState(selectedTagIdState(assetSourceId));
 
     const deleteTag = (id: TagId, assetSourceId: AssetSourceId) =>
         action({

packages/asset-tags/src/hooks/useSelectedTag.ts

@@ -3,16 +3,16 @@ import { useQuery } from '@apollo/client';
 
 import selectedTagIdState from '../state/selectedTagIdState';
 import TAG from '../queries/tag';
-import { selectedAssetSourceState } from '@media-ui/feature-asset-sources';
+import { selectedAssetSourceIdState } from '@media-ui/feature-asset-sources';
 
 interface TagQueryResult {
     tag: Tag;
     assetSourceId: AssetSourceId;
 }
 
 const useSelectedTag = (): Tag => {
-    const assetSourceId = useRecoilValue(selectedAssetSourceState);
-    const selectedTagId = useRecoilValue(selectedTagIdState);
+    const assetSourceId = useRecoilValue(selectedAssetSourceIdState);
+    const selectedTagId = useRecoilValue(selectedTagIdState(assetSourceId));
 
     const { data } = useQuery<TagQueryResult>(TAG, {
         variables: { id: selectedTagId, assetSourceId },

packages/asset-tags/src/state/selectedTagIdState.ts

@@ -1,7 +1,7 @@
-import { atom } from 'recoil';
+import { atomFamily } from 'recoil';
 import { localStorageEffect } from '@media-ui/core/src/state';
 
-const selectedTagIdState = atom<string>({
+const selectedTagIdState = atomFamily<TagId, AssetSourceId>({
     key: 'SelectedTagIdState',
     default: null,
     effects: [localStorageEffect('SelectedTagIdState')],

packages/asset-upload/src/hooks/useUploadFile.ts

@@ -3,13 +3,15 @@ import { useRecoilValue } from 'recoil';
 
 import { selectedTagIdState } from '@media-ui/feature-asset-tags';
 import { selectedAssetCollectionIdState } from '@media-ui/feature-asset-collections';
+import { selectedAssetSourceIdState } from '@media-ui/feature-asset-sources';
 
 import { UPLOAD_FILE } from '../mutations';
 
 export default function useUploadFile() {
     const [action, { error, data, loading }] = useMutation<{ uploadFile: FileUploadResult }>(UPLOAD_FILE);
-    const tagId = useRecoilValue(selectedTagIdState);
-    const assetCollectionId = useRecoilValue(selectedAssetCollectionIdState);
+    const assetSourceId = useRecoilValue(selectedAssetSourceIdState);
+    const tagId = useRecoilValue(selectedTagIdState(assetSourceId));
+    const assetCollectionId = useRecoilValue(selectedAssetCollectionIdState(assetSourceId));
 
     const uploadFile = (file: File) =>
         action({