[POC] Edit dashboard

superset-frontend/config.ts

@@ -0,0 +1,27 @@
+const Config = {
+  // Local
+  // supersetClientClass: {
+  //   baseUrl: 'http://localhost:8080/proxy',
+  //   host: 'localhost:8080/proxy',
+  //   port: '8080',
+  // },
+  // chartConfig: {
+  //   host: 'localhost',
+  //   path: '/proxy',
+  //   port: '8080',
+  // },
+
+  // QA
+  supersetClientClass: {
+    baseUrl: 'https://testops-g3-ra-bff.qa.katalon.com/proxy',
+    host: 'testops-g3-ra-bff.qa.katalon.com/proxy',
+    port: '',
+  },
+  chartConfig: {
+    host: 'testops-g3-ra-bff.qa.katalon.com',
+    path: '/proxy',
+    port: '',
+  },
+};
+
+export default Config;

superset-frontend/packages/superset-ui-core/src/connection/SupersetClientClass.ts

@@ -32,6 +32,7 @@ import {
   ParseMethod,
 } from './types';
 import { DEFAULT_FETCH_RETRY_OPTIONS, DEFAULT_BASE_URL } from './constants';
+import Config from '../../../../config';
 
 const defaultUnauthorizedHandler = () => {
   if (!window.location.pathname.startsWith('/login')) {
@@ -72,7 +73,7 @@ export default class SupersetClientClass {
     protocol,
     headers = {},
     fetchRetryOptions = {},
-    mode = 'same-origin',
+    mode = 'cors',
     timeout,
     credentials = undefined,
     csrfToken = undefined,
@@ -88,8 +89,10 @@ export default class SupersetClientClass {
       // as the base of baseUrl
       window.location.href,
     );
-    this.baseUrl = url.href.replace(/\/+$/, ''); // always strip trailing slash
-    this.host = url.host;
+    // this.baseUrl = url.href.replace(/\/+$/, ''); // always strip trailing slash
+    this.baseUrl = Config.supersetClientClass.baseUrl;
+    // this.host = url.host;
+    this.host = Config.supersetClientClass.host;
     this.protocol = url.protocol as Protocol;
     this.headers = { Accept: 'application/json', ...headers }; // defaulting accept to json
     this.mode = mode;
@@ -198,13 +201,24 @@ export default class SupersetClientClass {
     ignoreUnauthorized = false,
     ...rest
   }: RequestConfig & { parseMethod?: T }) {
-    await this.ensureAuth();
+    // await this.ensureAuth();
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const projectId = urlParams.get('projectId');
+    const accessToken = urlParams.get('accessToken');
+    const combinedHeaders = {
+      ...this.headers,
+      ...headers,
+      ...(projectId && { 'x-project-id': projectId }),
+      ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
+    };
+
     return callApiAndParseWithTimeout({
       ...rest,
       credentials: credentials ?? this.credentials,
       mode: mode ?? this.mode,
       url: this.getUrl({ endpoint, host, url }),
-      headers: { ...this.headers, ...headers },
+      headers: combinedHeaders,
       timeout: timeout ?? this.timeout,
       fetchRetryOptions: fetchRetryOptions ?? this.fetchRetryOptions,
     }).catch(res => {

superset-frontend/packages/superset-ui-core/src/connection/callApi/callApi.ts

@@ -66,7 +66,7 @@ export default async function callApi({
   fetchRetryOptions,
   headers,
   method = 'GET',
-  mode = 'same-origin',
+  mode = 'cors',
   postPayload,
   jsonPayload,
   redirect = 'follow',

superset-frontend/src/components/PageHeaderWithActions/index.tsx

@@ -20,6 +20,8 @@ import React, { ReactNode, ReactElement } from 'react';
 import { css, SupersetTheme, t, useTheme } from '@superset-ui/core';
 import { AntdDropdown, AntdDropdownProps } from 'src/components';
 import { TooltipPlacement } from 'src/components/Tooltip';
+import { getUrlParam } from 'src/utils/urlUtils';
+import { URL_PARAMS } from 'src/constants';
 import {
   DynamicEditableTitle,
   DynamicEditableTitleProps,
@@ -134,24 +136,31 @@ export const PageHeaderWithActions = ({
   tooltipProps,
 }: PageHeaderWithActionsProps) => {
   const theme = useTheme();
+  const isKatalonEmbeddedDashboard = getUrlParam(
+    URL_PARAMS.isKatalonEmbeddedMode,
+  );
   return (
     <div css={headerStyles} className="header-with-actions">
       <div className="title-panel">
-        <DynamicEditableTitle {...editableTitleProps} />
-        {showTitlePanelItems && (
-          <div css={buttonsStyles}>
-            {certificatiedBadgeProps?.certifiedBy && (
-              <CertifiedBadge {...certificatiedBadgeProps} />
+        {!isKatalonEmbeddedDashboard && (
+          <>
+            <DynamicEditableTitle {...editableTitleProps} />
+            {showTitlePanelItems && (
+              <div css={buttonsStyles}>
+                {certificatiedBadgeProps?.certifiedBy && (
+                  <CertifiedBadge {...certificatiedBadgeProps} />
+                )}
+                {showFaveStar && <FaveStar {...faveStarProps} />}
+                {titlePanelAdditionalItems}
+              </div>
             )}
-            {showFaveStar && <FaveStar {...faveStarProps} />}
-            {titlePanelAdditionalItems}
-          </div>
+          </>
         )}
       </div>
       <div className="right-button-panel">
         {rightPanelAdditionalItems}
         <div css={additionalActionsContainerStyles}>
-          {showMenuDropdown && (
+          {!isKatalonEmbeddedDashboard && showMenuDropdown && (
             <AntdDropdown
               trigger={['click']}
               overlay={additionalActionsMenu}

superset-frontend/src/constants.ts

@@ -111,6 +111,18 @@ export const URL_PARAMS = {
     name: 'focused_chart',
     type: 'number',
   },
+  isKatalonEmbeddedMode: {
+    name: 'isKatalonEmbeddedMode',
+    type: 'boolean',
+  },
+  projectId: {
+    name: 'projectId',
+    type: 'string',
+  },
+  accessToken: {
+    name: 'accessToken',
+    type: 'string',
+  },
 } as const;
 
 export const RESERVED_CHART_URL_PARAMS: string[] = [

superset-frontend/src/dashboard/actions/dashboardState.js

@@ -54,6 +54,8 @@ import { getActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
 import { safeStringify } from 'src/utils/safeStringify';
 import { logEvent } from 'src/logger/actions';
 import { LOG_ACTIONS_CONFIRM_OVERWRITE_DASHBOARD_METADATA } from 'src/logger/LogUtils';
+import { getUrlParam } from 'src/utils/urlUtils';
+import { URL_PARAMS } from 'src/constants';
 import { UPDATE_COMPONENTS_PARENTS_LIST } from './dashboardLayout';
 import {
   saveChartConfiguration,
@@ -342,11 +344,20 @@ export function saveDashboardRequest(data, id, saveType) {
         dispatch(saveDashboardRequestSuccess(lastModifiedTime));
       }
       dispatch(saveDashboardFinished());
+
+      const isKatalonEmbeddedDashboard = getUrlParam(
+        URL_PARAMS.isKatalonEmbeddedMode,
+      );
+      const projectId = getUrlParam(URL_PARAMS.projectId);
+      const accessToken = getUrlParam(URL_PARAMS.accessToken);
+
       // redirect to the new slug or id
       window.history.pushState(
         { event: 'dashboard_properties_changed' },
         '',
-        `/superset/dashboard/${slug || id}/`,
+        `/superset/dashboard/${
+          slug || id
+        }/?isKatalonEmbeddedMode=${isKatalonEmbeddedDashboard}&projectId=${projectId}&accessToken=${accessToken}`,
       );
 
       dispatch(addSuccessToast(t('This dashboard was saved successfully.')));

superset-frontend/src/dashboard/components/Header/index.jsx

@@ -28,6 +28,7 @@
   t,
   getSharedLabelColor,
   getExtensionsRegistry,
+  SupersetClient,
 } from '@superset-ui/core';
 import { Global } from '@emotion/react';
 import {
@@ -466,10 +467,12 @@
       logEvent,
     } = this.props;
 
-    const userCanEdit =
-      dashboardInfo.dash_edit_perm && !dashboardInfo.is_managed_externally;
+    // const userCanEdit =
+    //   dashboardInfo.dash_edit_perm && !dashboardInfo.is_managed_externally;
+    const userCanEdit = true;
     const userCanShare = dashboardInfo.dash_share_perm;
-    const userCanSaveAs = dashboardInfo.dash_save_perm;
+    // const userCanSaveAs = dashboardInfo.dash_save_perm;
+    const userCanSaveAs = true;
     const userCanCurate =
       isFeatureEnabled(FeatureFlag.EMBEDDED_SUPERSET) &&
       findPermission('can_set_embedded', 'Dashboard', user.roles);

superset-frontend/src/dashboard/components/SliceAdder.jsx

@@ -45,6 +45,8 @@ import { slicePropShape } from 'src/dashboard/util/propShapes';
 import { debounce, pickBy } from 'lodash';
 import Checkbox from 'src/components/Checkbox';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
+import { getUrlParam } from 'src/utils/urlUtils';
+import { URL_PARAMS } from 'src/constants';
 import AddSliceCard from './AddSliceCard';
 import AddSliceDragPreview from './dnd/AddSliceDragPreview';
 import DragDroppable from './dnd/DragDroppable';
@@ -331,13 +333,25 @@ class SliceAdder extends React.Component {
           <NewChartButton
             buttonStyle="link"
             buttonSize="xsmall"
-            onClick={() =>
-              window.open(
-                `/chart/add?dashboard_id=${this.props.dashboardId}`,
-                '_blank',
-                'noopener noreferrer',
-              )
-            }
+            onClick={() => {
+              const isKatalonEmbeddedDashboard = getUrlParam(
+                URL_PARAMS.isKatalonEmbeddedMode,
+              );
+              const projectId = getUrlParam(URL_PARAMS.projectId);
+              const accessToken = getUrlParam(URL_PARAMS.accessToken);
+
+              if (isKatalonEmbeddedDashboard) {
+                window.location.assign(
+                  `/explore/?dashboard_id=${this.props.dashboardId}&isKatalonEmbeddedMode=true&projectId=${projectId}&accessToken=${accessToken}`,
+                );
+              } else {
+                window.open(
+                  `/chart/add?dashboard_id=${this.props.dashboardId}`,
+                  '_blank',
+                  'noopener noreferrer',
+                );
+              }
+            }}
           >
             <Icons.PlusSmall />
             {t('Create new chart')}

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

@@ -37,6 +37,8 @@ import Icons from 'src/components/Icons';
 import { RootState } from 'src/dashboard/types';
 import { getSliceHeaderTooltip } from 'src/dashboard/util/getSliceHeaderTooltip';
 import { DashboardPageIdContext } from 'src/dashboard/containers/DashboardPage';
+import { getUrlParam } from 'src/utils/urlUtils';
+import { URL_PARAMS } from 'src/constants';
 
 const extensionsRegistry = getExtensionsRegistry();
 
@@ -195,6 +197,8 @@ const SliceHeader: FC<SliceHeaderProps> = ({
 
   const exploreUrl = `/explore/?dashboard_page_id=${dashboardPageId}&slice_id=${slice.slice_id}`;
 
+  const isKatalonEmbeddedMode = getUrlParam(URL_PARAMS.isKatalonEmbeddedMode);
+
   return (
     <ChartHeaderStyles data-test="slice-header" ref={innerRef}>
       <div className="header-title" ref={headerRef}>
@@ -258,10 +262,10 @@ const SliceHeader: FC<SliceHeaderProps> = ({
                 <CrossFilterIcon iconSize="m" />
               </Tooltip>
             )}
-            {!uiConfig.hideChartControls && (
+            {!isKatalonEmbeddedMode && !uiConfig.hideChartControls && (
               <FiltersBadge chartId={slice.slice_id} />
             )}
-            {!uiConfig.hideChartControls && (
+            {!isKatalonEmbeddedMode && !uiConfig.hideChartControls && (
               <SliceHeaderControls
                 slice={slice}
                 isCached={isCached}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx

@@ -56,6 +56,7 @@ import DropdownContainer, {
   Ref as DropdownContainerRef,
 } from 'src/components/DropdownContainer';
 import Icons from 'src/components/Icons';
+import FilterExtension from 'src/katalon/CustomFilter/FilterExtension';
 import { FiltersOutOfScopeCollapsible } from '../FiltersOutOfScopeCollapsible';
 import { useFilterControlFactory } from '../useFilterControlFactory';
 import { FiltersDropdownContent } from '../FiltersDropdownContent';
@@ -215,6 +216,7 @@ const FilterControls: FC<FilterControlsProps> = ({
     if (isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS)) {
       const nativeFiltersInScope = filtersInScope.map((filter, index) => ({
         id: filter.id,
+        name: filter.name,
         element: (
           <div
             className="filter-item-wrapper"
@@ -316,6 +318,8 @@ const FilterControls: FC<FilterControlsProps> = ({
     }
   }, [outlinedFilterId, lastUpdated, popoverRef, overflowedIds]);
 
+  const renderFilterExtension = () => <FilterExtension items={items} />;
+
   return (
     <>
       {portalNodes
@@ -332,7 +336,9 @@ const FilterControls: FC<FilterControlsProps> = ({
       {filterBarOrientation === FilterBarOrientation.VERTICAL &&
         renderVerticalContent()}
       {filterBarOrientation === FilterBarOrientation.HORIZONTAL &&
-        renderHorizontalContent()}
+        renderFilterExtension()}
+      {/* {filterBarOrientation === FilterBarOrientation.HORIZONTAL &&
+        renderHorizontalContent()} */}
     </>
   );
 };

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx

@@ -48,6 +48,7 @@ import { logEvent } from 'src/logger/actions';
 import { LOG_ACTIONS_CHANGE_DASHBOARD_FILTER } from 'src/logger/LogUtils';
 import { FilterBarOrientation, RootState } from 'src/dashboard/types';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
+import KatalonHorizontal from 'src/katalon/CustomFilter/KatalonHorizontal';
 import { checkIsApplyDisabled } from './utils';
 import { FiltersBarProps } from './types';
 import {
@@ -287,7 +288,7 @@ const FilterBar: React.FC<FiltersBarProps> = ({
 
   const filterBarComponent =
     orientation === FilterBarOrientation.HORIZONTAL ? (
-      <Horizontal
+      <KatalonHorizontal
         actions={actions}
         canEdit={canEdit}
         dashboardId={dashboardId}

superset-frontend/src/explore/actions/saveModalActions.js

@@ -20,6 +20,8 @@
 import { SupersetClient, t } from '@superset-ui/core';
 import { addSuccessToast } from 'src/components/MessageToasts/actions';
 import { isEmpty } from 'lodash';
+import { getUrlParam } from 'src/utils/urlUtils';
+import { URL_PARAMS } from 'src/constants';
 import { buildV1ChartDataPayload } from '../exploreUtils';
 import { Operators } from '../constants';