fix(chart): control issue (#24)

Co-authored-by: MacBook Pro <[email protected]>
allclinics · Oct 4, 2024 · f2860fc · f2860fc
1 parent 070fd27
commit f2860fc
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 68 deletions.
diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/MapBox.css b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/MapBox.css
@@ -27,7 +27,7 @@
 .zoom-controls {
   position: absolute;
   right: 10px;
-  bottom: 15px;
+  bottom: 20px;
   display: flex;
   flex-direction: column;
   background-color: white;

diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/ScatterPlotGlowOverlay.jsx b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/ScatterPlotGlowOverlay.jsx
@@ -106,7 +106,7 @@ class ScatterPlotGlowOverlay extends React.PureComponent {
       const hrefValue = hrefMatch ? hrefMatch[1] : null;
 
       if (hrefValue) {
-        window.open(hrefValue, '_blank');
+        window.open(hrefValue, '_self');
       }
     }
   }

diff --git a/superset-frontend/src/assets/images/icons/video_play.svg b/superset-frontend/src/assets/images/icons/video_play.svg
diff --git a/superset-frontend/src/components/Icons/index.tsx b/superset-frontend/src/components/Icons/index.tsx
@@ -167,6 +167,7 @@ const IconFileNames = [
   'dropdown',
   'setting',
   'information',
+  'video_play',
 ];
 
 const iconOverrides: Record<string, React.FC<IconType>> = {};

diff --git a/superset-frontend/src/components/PageHeaderWithActions/index.tsx b/superset-frontend/src/components/PageHeaderWithActions/index.tsx
@@ -60,15 +60,19 @@ export const menuTriggerStyles = (theme: SupersetTheme) => css`
   }
 `;
 
-const headerStyles = (theme: SupersetTheme, isFiltersOpen: boolean) => css`
+const headerStyles = (
+  theme: SupersetTheme,
+  isFiltersOpen: boolean,
+  userCanEdit: boolean,
+) => css`
   display: flex;
   flex-direction: row;
   align-items: center;
   flex-wrap: nowrap;
   justify-content: space-between;
   background-color: #f5f6fa;
-  height: ${theme.gridUnit * 24}px;
-  padding: ${theme.gridUnit * 6}px;
+  height: ${theme.gridUnit * (userCanEdit ? 24 : 6)}px;
+  padding: ${userCanEdit ? theme.gridUnit * 6 : 0}px;
   padding-left: ${theme.gridUnit * (isFiltersOpen ? 6 : 14.5)}px;
 
   .editable-title {
@@ -102,14 +106,17 @@ const headerStyles = (theme: SupersetTheme, isFiltersOpen: boolean) => css`
 
   .collapse-button {
     background: #fff;
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
+    width: 32px;
+    height: 84px;
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-right: 24px;
-    cusrsor: pointer;
+    cursor: pointer;
+    position: fixed;
+    top: 24px;
+    left: 0px;
   }
 
   .expend {
@@ -174,7 +181,7 @@ export const PageHeaderWithActions = ({
   const theme = useTheme();
   return (
     <div
-      css={headerStyles(theme, !!isFiltersOpen)}
+      css={headerStyles(theme, !!isFiltersOpen, !!userCanEdit)}
       className="header-with-actions"
     >
       <div className="title-panel">
@@ -191,7 +198,7 @@ export const PageHeaderWithActions = ({
             />
           </div>
         )}
-        <DynamicEditableTitle {...editableTitleProps} />
+        {userCanEdit && <DynamicEditableTitle {...editableTitleProps} />}
         {showTitlePanelItems && (
           <div css={buttonsStyles}>
             {certificatiedBadgeProps?.certifiedBy && (

diff --git a/superset-frontend/src/components/Tabs/Tabs.tsx b/superset-frontend/src/components/Tabs/Tabs.tsx
@@ -98,6 +98,7 @@ const StyledTabs = ({
       }
       .ant-tabs-ink-bar {
         background: ${theme.colors.primary.base};
+        z-index: 1;
       }
     `}
   />
@@ -207,9 +208,9 @@ export const StyledLineEditableTabs = styled(EditableTabs)<{
   }
 
   .ant-tabs-nav {
-    padding-right: 24px;
+    padding-right: ${({ isChild }) => (isChild ? '0px' : '24px')};
     position: ${({ isChild }) => (isChild ? 'unset' : 'sticky')};
-    top: ${({ isChild }) => (isChild ? 'unset' : '95px')};
+    top: ${({ isChild }) => (isChild ? 'unset' : '24px')};
     z-index: ${({ isChild }) => (isChild ? 'unset' : '100')};
     background: ${({ isChild }) => (isChild ? 'unset' : 'white')};
     border-top-left-radius: ${({ isChild }) => (isChild ? 'unset' : '20px')};

diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -97,6 +97,7 @@ const LoadingWrapper = styled.div`
   width: 100vw;
   height: 100vh;
   background: #f7f7f7;
+  z-index: 100;
 `;
 
 // @z-index-above-dashboard-charts + 1 = 11
@@ -305,8 +306,9 @@ const DashboardContentWrapper = styled.div`
 const StyledDashboardContent = styled.div<{
   editMode: boolean;
   marginLeft: number;
+  dashboardFiltersOpen: boolean;
 }>`
-  ${({ theme, editMode }) => css`
+  ${({ theme, editMode, dashboardFiltersOpen }) => css`
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
@@ -323,7 +325,9 @@ const StyledDashboardContent = styled.div<{
       width: 0;
       flex: 1;
       position: relative;
-      margin: 0px 24px 24px 24px;
+      margin: ${dashboardFiltersOpen
+        ? '0px 24px 24px 24px'
+        : '0px 24px 24px 48px'};
 
       ${editMode &&
       `
@@ -758,6 +762,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
           <StyledDashboardContent
             className="dashboard-content"
             editMode={editMode}
+            dashboardFiltersOpen={dashboardFiltersOpen}
             marginLeft={dashboardContentMarginLeft}
           >
             {showDashboard ? (

diff --git a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
@@ -231,37 +231,36 @@ const SliceHeader: FC<SliceHeaderProps> = ({
           <CrossFilterIcon iconSize="m" />
         </Tooltip>
       )}
-      {!uiConfig.hideChartControls && (
-        <SliceHeaderControls
-          slice={slice}
-          isCached={isCached}
-          isExpanded={isExpanded}
-          cachedDttm={cachedDttm}
-          updatedDttm={updatedDttm}
-          toggleExpandSlice={toggleExpandSlice}
-          forceRefresh={forceRefresh}
-          logExploreChart={logExploreChart}
-          logEvent={logEvent}
-          exportCSV={exportCSV}
-          exportFullCSV={exportFullCSV}
-          exportXLSX={exportXLSX}
-          exportFullXLSX={exportFullXLSX}
-          supersetCanExplore={supersetCanExplore}
-          supersetCanShare={supersetCanShare}
-          supersetCanCSV={supersetCanCSV}
-          componentId={componentId}
-          dashboardId={dashboardId}
-          addSuccessToast={addSuccessToast}
-          addDangerToast={addDangerToast}
-          handleToggleFullSize={handleToggleFullSize}
-          isFullSize={isFullSize}
-          isDescriptionExpanded={isExpanded}
-          chartStatus={chartStatus}
-          formData={formData}
-          exploreUrl={exploreUrl}
-          crossFiltersEnabled={isCrossFiltersEnabled}
-        />
-      )}
+      <SliceHeaderControls
+        slice={slice}
+        hideChartControls={uiConfig.hideChartControls}
+        isCached={isCached}
+        isExpanded={isExpanded}
+        cachedDttm={cachedDttm}
+        updatedDttm={updatedDttm}
+        toggleExpandSlice={toggleExpandSlice}
+        forceRefresh={forceRefresh}
+        logExploreChart={logExploreChart}
+        logEvent={logEvent}
+        exportCSV={exportCSV}
+        exportFullCSV={exportFullCSV}
+        exportXLSX={exportXLSX}
+        exportFullXLSX={exportFullXLSX}
+        supersetCanExplore={supersetCanExplore}
+        supersetCanShare={supersetCanShare}
+        supersetCanCSV={supersetCanCSV}
+        componentId={componentId}
+        dashboardId={dashboardId}
+        addSuccessToast={addSuccessToast}
+        addDangerToast={addDangerToast}
+        handleToggleFullSize={handleToggleFullSize}
+        isFullSize={isFullSize}
+        isDescriptionExpanded={isExpanded}
+        chartStatus={chartStatus}
+        formData={formData}
+        exploreUrl={exploreUrl}
+        crossFiltersEnabled={isCrossFiltersEnabled}
+      />
     </>
   );
 

diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx
@@ -97,6 +97,7 @@ const createProps = (viz_type = 'sunburst_v2') =>
     supersetCanShare: true,
     formData: { slice_id: 1, datasource: '58__table', viz_type: 'sunburst_v2' },
     exploreUrl: '/explore',
+    hideChartControls: true,
   }) as SliceHeaderControlsProps;
 
 const renderWrapper = (

diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
@@ -173,7 +173,7 @@ export interface SliceHeaderControlsProps {
     slice_description: string;
     datasource: string;
   };
-
+  hideChartControls: boolean;
   componentId: string;
   dashboardId: number;
   chartStatus: string;
@@ -605,7 +605,7 @@ const SliceHeaderControls = (props: SliceHeaderControlsPropsWithRouter) => {
 
   return (
     <Wrapper>
-      {isFullSize && (
+      {isFullSize && !props?.hideChartControls && (
         <Icons.FullscreenExitOutlined
           style={{ fontSize: 22 }}
           onClick={() => {
@@ -656,25 +656,30 @@ const SliceHeaderControls = (props: SliceHeaderControlsPropsWithRouter) => {
           </Popover>
         </InfoWrapper>
       )}
-      <NoAnimationDropdown
-        overlay={menu}
-        overlayStyle={dropdownOverlayStyle}
-        trigger={['click']}
-        placement="bottomRight"
-      >
-        <span
-          css={css`
-            display: flex;
-            align-items: center;
-          `}
-          id={`slice_${slice.slice_id}-controls`}
-          role="button"
-          aria-label="More Options"
-        >
-          <HorizontalDotsTrigger />
-        </span>
-      </NoAnimationDropdown>
-      {canEditCrossFilters && scopingModal}
+      <Icons.VideoPlay />
+      {!props?.hideChartControls && (
+        <>
+          <NoAnimationDropdown
+            overlay={menu}
+            overlayStyle={dropdownOverlayStyle}
+            trigger={['click']}
+            placement="bottomRight"
+          >
+            <span
+              css={css`
+                display: flex;
+                align-items: center;
+              `}
+              id={`slice_${slice.slice_id}-controls`}
+              role="button"
+              aria-label="More Options"
+            >
+              <HorizontalDotsTrigger />
+            </span>
+          </NoAnimationDropdown>
+          {canEditCrossFilters && scopingModal}
+        </>
+      )}
     </Wrapper>
   );
 };