Change "see issue #5613" to "see details" (#6657)

* change to see details and add stories to EstimationCard * fix * fix
electricitymaps · Apr 15, 2024 · 32814d2 · 32814d2
1 parent c23e04d
commit 32814d2
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/web/public/locales/en.json b/web/public/locales/en.json
@@ -121,6 +121,7 @@
   },
   "estimation-card": {
     "link": "Read about our estimation models",
+    "outage-details": "See details",
     "estimated_time_slicer_average": {
       "title": "Data is currently estimated",
       "pill": "Unavailable",

diff --git a/web/src/features/panels/zone/EstimationCard.stories.tsx b/web/src/features/panels/zone/EstimationCard.stories.tsx
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { I18nextProvider } from 'react-i18next';
+import i18n from 'translation/i18n';
+
+import EstimationCard from './EstimationCard';
+
+const meta: Meta<typeof EstimationCard> = {
+  title: 'EstimationCard',
+  component: EstimationCard,
+};
+
+export default meta;
+type Story = StoryObj<typeof EstimationCard>;
+const instance: { message: string; issue: string } = {
+  message: 'Some outage message.',
+  issue: '5613',
+};
+const queryClient = new QueryClient();
+
+export const All: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <I18nextProvider i18n={i18n}>
+        <QueryClientProvider client={queryClient}>
+          <EstimationCard cardType="outage" outageMessage={instance} />
+
+          <EstimationCard cardType="estimated" outageMessage={instance} />
+
+          <EstimationCard
+            cardType="estimated"
+            outageMessage={instance}
+            estimationMethod="estimated_mode_breakdown"
+          />
+
+          <EstimationCard
+            cardType="aggregated"
+            outageMessage={instance}
+            estimatedPercentage={20}
+          />
+
+          <EstimationCard cardType="aggregated" outageMessage={instance} />
+        </QueryClientProvider>
+      </I18nextProvider>
+    </div>
+  ),
+};
diff --git a/web/src/features/panels/zone/EstimationCard.tsx b/web/src/features/panels/zone/EstimationCard.tsx
@@ -241,17 +241,17 @@ function OutageMessage({
   if (!outageData || !outageData.message) {
     return null;
   }
+  const { t } = useTranslation();
   return (
     <span className="inline overflow-hidden">
       {truncateString(outageData.message, 300)}{' '}
       {outageData?.issue && outageData.issue != 'None' && (
         <span className="mt-1 inline-flex">
-          See{' '}
           <a
             className="inline-flex text-sm font-semibold text-black underline dark:text-white"
             href={`https://github.com/electricitymaps/electricitymaps-contrib/issues/${outageData.issue}`}
           >
-            <span className="pl-1 underline">issue #{outageData.issue}</span>
+            <span className="pl-1 underline">{t('estimation-card.outage-details')}</span>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="18"