feat(AdaptiveCard): display fallback text if the version of the adap…

…tive card is not supported
webex · Feb 16, 2022 · dc7e135 · dc7e135
1 parent fb08024
commit dc7e135
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx
@@ -4,6 +4,8 @@ import {Template} from 'adaptivecards-templating';
 import webexComponentClasses from '../../helpers';
 import AdaptiveCardContext from '../context/adaptive-card-context';
 import {mapValues} from '../../../util';
+import {formatDateTime} from '../util';
+import Markdown from '../Markdown/Markdown';
 
 import Component, {acPropTypes, registerComponent} from '../Component/Component';
 import '../ActionOpenURL/ActionOpenUrl';
@@ -42,6 +44,7 @@ function AdaptiveCardInternal({
   action, data, className, inherited, style,
 }) {
   const [cssClasses] = webexComponentClasses('adaptive-card', [className, 'wxc-ac-container--has-padding']);
+  let showFallbackText = false;
 
   if (data.$schema && data.$schema !== 'http://adaptivecards.io/schemas/adaptive-card.json') {
     console.warn('Unknown AdaptiveCard schema:', data.$schema);
@@ -54,11 +57,13 @@ function AdaptiveCardInternal({
       console.warn(`Invalid version ${data.version}`);
     } else if (version > 1.2) {
       console.warn(`Adaptive card requires version ${data.version}, this renderer only supports version 1.2`);
+      showFallbackText = true;
     }
   }
 
   return (
     <div className={cssClasses} {...action} style={style}>
+      {showFallbackText && <Markdown>{formatDateTime(data.fallbackText)}</Markdown>}
       {data.body?.map((item, index) => <Component data={item} inherited={inherited} key={index} />)}
       {data.actions && <Component data={{type: 'ActionSet', actions: data.actions}} inherited={inherited} />}
     </div>

diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories.js b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories.js
@@ -17,7 +17,8 @@ const Template = (args) => (
 const exampleAdaptiveCard = {
   $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
   type: 'AdaptiveCard',
-  version: '1.2',
+  version: '1.5',
+  fallbackText: 'This card requires version **1.5** but your renderer does not support it.',
   body: [
     {
       type: 'ColumnSet',

diff --git a/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot b/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot
@@ -6,6 +6,14 @@ Array [
     className="wxc wxc-adaptive-card wxc wxc-ac wxc-ac-container--vertical wxc-ac-container--has-padding"
     style={Object {}}
   >
+    <div
+      className="wxc wxc-markdown"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "This card requires version <strong>1.5</strong> but your renderer does not support it.",
+        }
+      }
+    />
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={