chore(dashboard): Add filter_scopes warning message for json metadata…

… editor (apache#21543)

Co-authored-by: John Bodley <4567245+john-bodley@users.noreply.github.com>

superset-frontend/src/dashboard/components/PropertiesModal/index.tsx

@@ -36,6 +36,7 @@ import Modal from 'src/components/Modal';
 import { JsonEditor } from 'src/components/AsyncAceEditor';
 
 import ColorSchemeControlWrapper from 'src/dashboard/components/ColorSchemeControlWrapper';
+import FilterScopeModal from 'src/dashboard/components/filterscope/FilterScopeModal';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
 import withToasts from 'src/components/MessageToasts/withToasts';
 import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
@@ -658,6 +659,23 @@ const PropertiesModal = ({
                   {t(
                     'This JSON object is generated dynamically when clicking the save or overwrite button in the dashboard view. It is exposed here for reference and for power users who may want to alter specific parameters.',
                   )}
+                  {onlyApply && (
+                    <>
+                      {' '}
+                      {t(
+                        'Please DO NOT overwrite the "filter_scopes" key.',
+                      )}{' '}
+                      <FilterScopeModal
+                        triggerNode={
+                          <span className="alert-link">
+                            {t('Use "%(menuName)s" menu instead.', {
+                              menuName: t('Set filter mapping'),
+                            })}
+                          </span>
+                        }
+                      />
+                    </>
+                  )}
                 </p>
               </>
             )}

superset-frontend/src/views/routes.test.tsx

@@ -16,13 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+import React from 'react';
 import { isFrontendRoute, routes } from './routes';
 
 jest.mock('src/featureFlags', () => ({
   ...jest.requireActual<object>('src/featureFlags'),
   isFeatureEnabled: jest.fn().mockReturnValue(true),
 }));
+jest.mock('src/views/CRUD/welcome/Welcome', () => () => (
+  <div data-test="mock-welcome" />
+));
 
 describe('isFrontendRoute', () => {
   it('returns true if a route matches', () => {