From ddcf4617497ae45302aa4f9ae68aee618326425d Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Mon, 28 Jun 2021 13:35:14 +0300
Subject: [PATCH] fix(native-filters): show human readable time grain label in
 indicator (#15411)

* fix(native-filters): show human readable time grain label in indicator

* lint

* simplify
---
 .../TimeGrain/TimeGrainFilterPlugin.tsx           | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx b/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx
index 1cde951a6..a2c4a185a 100644
--- a/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx
@@ -24,7 +24,7 @@ import {
   TimeGranularity,
   tn,
 } from '@superset-ui/core';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Select } from 'src/common/components';
 import { Styles, StyledSelect } from '../common';
 import { PluginFilterTimeGrainProps } from './types';
@@ -52,10 +52,22 @@ export default function PluginFilterTimegrain(
   const { defaultValue, inputRef } = formData;
 
   const [value, setValue] = useState<string[]>(defaultValue ?? []);
+  const durationMap = useMemo(
+    () =>
+      data.reduce(
+        (agg, { duration, name }: { duration: string; name: string }) => ({
+          ...agg,
+          [duration]: name,
+        }),
+        {} as { [key in string]: string },
+      ),
+    [JSON.stringify(data)],
+  );
 
   const handleChange = (values: string[] | string | undefined | null) => {
     const resultValue: string[] = ensureIsArray<string>(values);
     const [timeGrain] = resultValue;
+    const label = timeGrain ? durationMap[timeGrain] : undefined;
 
     const extraFormData: ExtraFormData = {};
     if (timeGrain) {
@@ -65,6 +77,7 @@ export default function PluginFilterTimegrain(
     setDataMask({
       extraFormData,
       filterState: {
+        label,
         value: resultValue.length ? resultValue : null,
       },
     });