fix: revert padding change for kebab menu ff

also improve style and spacing within dashboard tiles to prevent analytics chart from expanding past the bounds of its container
Kong · Nov 26, 2024 · 923fbf9 · 923fbf9
1 parent efd22b9
commit 923fbf9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue b/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue
@@ -88,6 +88,6 @@ const onChartData = (data: ExploreResultV4) => {
 
 <style scoped lang="scss">
 .analytics-chart {
-  height: v-bind('`${height}px`');
+  height: 100%;
 }
 </style>
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -48,7 +48,7 @@ import {
   TIMEFRAME_TOKEN,
 } from '../constants'
 import { useAnalyticsConfigStore } from '@kong-ui-public/analytics-config-store'
-import { KUI_SPACE_70, KUI_SPACE_30 } from '@kong/design-tokens'
+import { KUI_SPACE_70 } from '@kong/design-tokens'
 
 const props = defineProps<{
   context: DashboardRendererContext,
@@ -73,9 +73,6 @@ if (!queryBridge) {
   console.warn('https://github.com/Kong/public-ui-components/blob/main/packages/analytics/dashboard-renderer/README.md#requirements')
 }
 
-const { evaluateFeatureFlag } = composables.useEvaluateFeatureFlag()
-const hasKebabMenuAccess = evaluateFeatureFlag('ma-3043-analytics-chart-kebab-menu', false)
-
 const configStore = useAnalyticsConfigStore()
 
 const timeSpec = computed<TimeRangeV4>(() => {
@@ -185,7 +182,7 @@ defineExpose({ refresh: refreshTiles })
     border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
     height: 100%;
-    padding: v-bind('!hasKebabMenuAccess ? KUI_SPACE_70 : KUI_SPACE_30');
+    padding: var(--kui-space-70, $kui-space-70);
   }
 }
 </style>
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -69,12 +69,14 @@
         @toggle-modal="setExportModalVisibility"
       />
     </div>
-    <component
-      :is="componentData.component"
-      v-if="componentData"
-      v-bind="componentData.rendererProps"
-      @chart-data="onChartData"
-    />
+    <div class="tile-content">
+      <component
+        :is="componentData.component"
+        v-if="componentData"
+        v-bind="componentData.rendererProps"
+        @chart-data="onChartData"
+      />
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -189,6 +191,8 @@ const exportCsv = () => {
 
 <style lang="scss" scoped>
 .tile-boundary {
+  display: flex;
+  flex-direction: column;
   height: v-bind('`${height}px`');
 
   .tile-header {
@@ -246,5 +250,9 @@ const exportCsv = () => {
       }
     }
   }
+
+  .tile-content {
+    flex-grow: 1;
+  }
 }
 </style>