FilterToken not rendering proper summary string

[nuwen]

Hello I'm trying to utilize the FilterToken component to render out a date type expression in the example below

<FilterToken
  name="Age"
  expressionType="date"
  expression="10 month"
/>

However it renders an empty string within my application, I have tested the code block above on the StoryBook example sandbox and it correctly does render there as

but when used in my extension application it shows up as

in addition I also did try the summary function provided from @looker/filter-expressions shown in the docs on https://www.npmjs.com/package/@looker/filter-expressions, however again an empty string is rendered. Example code below

summary('date', '7 month')}
summary('number', '[0,20],>30') // example from docs did not work either

I do have both the following packages installed

@looker/filter-components
@looker/filter-expressions

I would also like to add a note that internationalization of Filter does not appear to be working either

                      <ComponentsProvider resources={i18nResources}>
                          <Filter
                            expression={dateFilterExpression}
                            expressionType="date"
                            onChange={(value) => {
                              console.log(value.expression);
                            }}
                          />
                      </ComponentsProvider>

Thank you

[mdodgelooker]

Hi @nuwen thanks for posting the issue. Sounds like it has something to do with localization. Are you seeing any errors in the console? Can you create a reproduction on codesandbox?

Here's an example where the summary and localization are working: https://codesandbox.io/s/zen-frog-8khlf

[nuwen]

Hi @mdodgelooker thanks for your response and the codesandbox for reference it did help me solve a few things.

I did copy your example, commented out my code, and made sure I had up to date versions for my dependencies. The mentioned steps did resolve the empty string, however the translations did not work unfortunately.

One key difference I have is that I have the example code wrapped in an <ExtensionProvider2 /> component from @looker/extension-sdk-react

<ExtensionProvider2 type={Looker40SDK}>
  <ComponentsProvider resources={i18nResources} locale="de-DE">
    <FilterToken name="Age" expressionType="date" expression="10 month" />
  </ComponentsProvider>
</ExtensionProvider2>

I don't think there would be any configuration needed from the manifest/lookML to implement whats written for the ComponentsProvider is there?

Thank You

[mdodgelooker]

Hi @nuwen I'm glad to hear the empty string issue is resolved. As for localization, I have a couple questions:

1. Is i18nResources being imported from @looker/filter-components specifically? The other packages have this export as well but it's a small subset of the translations required for filters.
2. Is i18nInit() being called separately. Earlier versions of the package required this but it is no longer required, and calling it without the intended locale would overwrite the localeProp passed to ComponentsProvider.
3. I'm curious if you're targeting one or two specific languages or if your app needs to support all languages? If the former, there's another option that would improve your bundle size.

[nuwen]

Hi @mdodgelooker

Your question in #2 pointed me in the right direction, we were loading i18n in HOC further up the tree, was able to integrate i18nResources with our translations.

Thank you so much