From 8c18dda0c0e1f23dce933ec1976479fa602e5944 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rub=C3=A9n=20Torrero=20Marijnissen?= Date: Wed, 30 Mar 2022 10:08:30 +0100 Subject: [PATCH] Use the store to persist tags UI state --- assets/js/components/ClustersList.jsx | 15 +++++++++++++-- .../DatabasesOverview/DatabasesOverview.jsx | 14 +++++++++++--- assets/js/components/HostsList.jsx | 16 +++++++++++++--- .../SapSystemsOverview/SapSystemsOverview.jsx | 15 ++++++++++++--- assets/js/state/sapSystems.js | 2 -- 5 files changed, 49 insertions(+), 13 deletions(-) diff --git a/assets/js/components/ClustersList.jsx b/assets/js/components/ClustersList.jsx index 370979c14d..395efc4043 100644 --- a/assets/js/components/ClustersList.jsx +++ b/assets/js/components/ClustersList.jsx @@ -5,6 +5,7 @@ import { Menu, Transition } from '@headlessui/react'; import axios from 'axios'; import Table from './Table'; import Tags from './Tags'; +import { addTagToCluster, removeTagFromCluster } from '@state/clusters'; import { EOS_EDIT, EOS_RUN_CIRCLE, EOS_LUNCH_DINING } from 'eos-icons-react'; @@ -101,8 +102,18 @@ const ClustersList = () => { {}} - onAdd={(tag) => addTag(tag, item.id)} - onRemove={(tag) => removeTag(tag, item.id)} + onAdd={(tag) => { + addTag(tag, item.id); + dispatch( + addTagToCluster({ tags: [{ value: tag }], id: item.id }) + ); + }} + onRemove={(tag) => { + removeTag(tag, item.id); + dispatch( + removeTagFromCluster({ tags: [{ value: tag }], id: item.id }) + ); + }} /> ), }, diff --git a/assets/js/components/DatabasesOverview/DatabasesOverview.jsx b/assets/js/components/DatabasesOverview/DatabasesOverview.jsx index bf5cbdc43c..b29908c293 100644 --- a/assets/js/components/DatabasesOverview/DatabasesOverview.jsx +++ b/assets/js/components/DatabasesOverview/DatabasesOverview.jsx @@ -1,11 +1,12 @@ import React from 'react'; -import { useSelector } from 'react-redux'; +import { useSelector, useDispatch } from 'react-redux'; import { Link } from 'react-router-dom'; import axios from 'axios'; import HealthIcon from '@components/Health'; import Table from '@components/Table'; import DatabaseItemOverview from './DatabaseItemOverview'; import Tags from '@components/Tags'; +import { addTagToDatabase, removeTagFromDatabase } from '@state/databases'; import { logError } from '@lib/log'; @@ -31,6 +32,7 @@ const DatabasesOverview = () => { const { databases, databaseInstances, loading } = useSelector( (state) => state.databasesList ); + const dispatch = useDispatch(); const config = { columns: [ { @@ -99,8 +101,14 @@ const DatabasesOverview = () => { {}} - onAdd={(tag) => addTag(tag, item.id)} - onRemove={(tag) => removeTag(tag, item.id)} + onAdd={(tag) => { + addTag(tag, item.id); + dispatch(addTagToDatabase(tag, item.id)); + }} + onRemove={(tag) => { + removeTag(tag, item.id); + dispatch(removeTagFromDatabase(tag, item.id)); + }} /> ), }, diff --git a/assets/js/components/HostsList.jsx b/assets/js/components/HostsList.jsx index a9152e3a14..cbb936680f 100644 --- a/assets/js/components/HostsList.jsx +++ b/assets/js/components/HostsList.jsx @@ -3,8 +3,9 @@ import { Link } from 'react-router-dom'; import axios from 'axios'; import Table from './Table'; import Tags from './Tags'; +import { addTagToHost, removeTagFromHost } from '@state/hosts'; -import { useSelector } from 'react-redux'; +import { useSelector, useDispatch } from 'react-redux'; import { EOS_LENS_FILLED } from 'eos-icons-react'; @@ -40,6 +41,7 @@ const removeTag = (tag, hostId) => { const HostsList = () => { const hosts = useSelector((state) => state.hostsList.hosts); const clusters = useSelector((state) => state.clustersList.clusters); + const dispatch = useDispatch(); const config = { columns: [ @@ -99,8 +101,16 @@ const HostsList = () => { {}} - onAdd={(tag) => addTag(tag, item.id)} - onRemove={(tag) => removeTag(tag, item.id)} + onAdd={(tag) => { + addTag(tag, item.id); + dispatch(addTagToHost({ tags: [{ value: tag }], id: item.id })); + }} + onRemove={(tag) => { + removeTag(tag, item.id); + dispatch( + removeTagFromHost({ tags: [{ value: tag }], id: item.id }) + ); + }} /> ), }, diff --git a/assets/js/components/SapSystemsOverview/SapSystemsOverview.jsx b/assets/js/components/SapSystemsOverview/SapSystemsOverview.jsx index f4f8e026d3..5e035245f8 100644 --- a/assets/js/components/SapSystemsOverview/SapSystemsOverview.jsx +++ b/assets/js/components/SapSystemsOverview/SapSystemsOverview.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useSelector } from 'react-redux'; +import { useSelector, useDispatch } from 'react-redux'; import { Link } from 'react-router-dom'; import axios from 'axios'; import HealthIcon from '@components/Health'; @@ -7,6 +7,8 @@ import Table from '@components/Table'; import SAPSystemItemOverview from '@components/SapSystemsOverview/SapSystemItemOverview'; import Tags from '@components/Tags'; +import { addTagToSAPSystem, removeTagFromSAPSystem } from '@state/sapSystems'; + import { logError } from '@lib/log'; const bySapSystem = (id) => (instance) => instance.sap_system_id === id; @@ -30,6 +32,7 @@ const removeTag = (tag, sapSystemId) => { const SapSystemsOverview = () => { const { sapSystems, applicationInstances, databaseInstances, loading } = useSelector((state) => state.sapSystemsList); + const dispatch = useDispatch(); const config = { columns: [ { @@ -86,8 +89,14 @@ const SapSystemsOverview = () => { {}} - onAdd={(tag) => addTag(tag, item.id)} - onRemove={(tag) => removeTag(tag, item.id)} + onAdd={(tag) => { + addTag(tag, item.id); + dispatch(addTagToSAPSystem(tag, item.id)); + }} + onRemove={(tag) => { + removeTag(tag, item.id); + dispatch(removeTagFromSAPSystem(tag, item.id)); + }} /> ), }, diff --git a/assets/js/state/sapSystems.js b/assets/js/state/sapSystems.js index 5bb832d3a7..bd983dd15d 100644 --- a/assets/js/state/sapSystems.js +++ b/assets/js/state/sapSystems.js @@ -70,7 +70,6 @@ export const sapSystemsListSlice = createSlice({ }, addTagToSAPSystem: (state, action) => { state.sapSystems = state.sapSystems.map((sapSystem) => { - console.log('sapSystem: ', sapSystem); if (sapSystem.id === action.payload.id) { sapSystem.tags = [...sapSystem.tags, ...action.payload.tags]; } @@ -79,7 +78,6 @@ export const sapSystemsListSlice = createSlice({ }, removeTagFromSAPSystem: (state, action) => { state.sapSystems = state.sapSystems.map((sapSystem) => { - console.log('sapSystem: ', sapSystem); if (sapSystem.id === action.payload.id) { sapSystem.tags = sapSystem.tags.filter( (tag) => tag.value !== action.payload.tags[0].value