Chore(deps): Bump adaptivecards from 1.2.3 to 2.10.0 (#1612)

microsoftgraph · Jan 2, 2025 · f069989 · f069989
1 parent 742fcca
commit f069989
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,14 +14,9 @@
                 "@microsoft/microsoft-graph-client": "2.1.0",
                 "@monaco-editor/react": "4.4.1",
                 "@ms-ofb/officebrowserfeedbacknpm": "file:packages/officebrowserfeedbacknpm-1.6.6.tgz",
-                "@reduxjs/toolkit": "2.4.0",
-                "adaptive-expressions": "4.23.1",
-                "adaptivecards": "3.0.2",
-                "adaptivecards-templating": "2.3.1",
-                "ajv": "8.17.1",
-                "ajv-keywords": "5.1.0",
-                "apg-js": "4.3.0",
-                "babel-loader": "9.2.1",
+                "adaptivecards": "2.10.0",
+                "adaptivecards-templating": "1.4.0",
+                "babel-loader": "8.2.3",
                 "babel-preset-react-app": "10.0.1",
                 "bfj": "8.0.0",
                 "bootstrap": "5.3.3",

diff --git a/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx b/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx
@@ -136,6 +136,75 @@ const AdaptiveCard = (props: any) => {
       const handleCopy = async () => {
         trackedGenericCopy(JSON.stringify(cardContent!.data?.template, null, 4),
           componentNames.JSON_SCHEMA_COPY_BUTTON, sampleQuery);
+        }
+        return (
+          <Pivot className='pivot-response' onLinkClick={(pivotItem) => onPivotItemClick(sampleQuery, pivotItem)}>
+            <PivotItem
+              itemKey='card'
+              ariaLabel={translateMessage('card')}
+              headerText={translateMessage('card')}
+              className={classes.card}
+              headerButtonProps={{
+                'aria-controls': 'card-tab'
+              }}
+            >
+              <div id={'card-tab'}
+                ref={(n) => {
+                  if (n && !n.firstChild) {
+                    n.appendChild(renderedCard as HTMLElement);
+                  } else {
+                    if (n && n.firstChild) {
+                      n.replaceChild(renderedCard as HTMLElement, n.firstChild);
+                    }
+                  }
+                }}
+              />
+            </PivotItem>
+            <PivotItem
+              itemKey='JSON-schema'
+              ariaLabel={translateMessage('JSON Schema')}
+              headerText={translateMessage('JSON Schema')}
+              headerButtonProps={{
+                'aria-controls': 'json-schema-tab'
+              }}
+            >
+              <div id={'json-schema-tab'}>
+                <MessageBar messageBarType={MessageBarType.info}>
+                  <FormattedMessage id='Get started with adaptive cards on' />
+                  <a href={'https://docs.microsoft.com/en-us/adaptive-cards/templating/sdk'}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    tabIndex={0}
+                    className={classes.link}
+                  >
+                    <FormattedMessage id='Adaptive Cards Templating SDK' />
+                  </a>
+                  <FormattedMessage id='and experiment on' />
+                  <a href={'https://adaptivecards.io/designer/'}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    tabIndex={0}
+                    className={classes.link}
+                  >
+                    <FormattedMessage id='Adaptive Cards designer' />
+                  </a>
+                </MessageBar>
+                <CopyButton
+                  className={classes.copyIcon}
+                  handleOnClick={handleCopy}
+                  isIconButton={true}
+                />
+                <Monaco
+                  language='json'
+                  body={data.template}
+                  height={'800px'}
+                />
+              </div>
+            </PivotItem>
+          </Pivot>
+        );
+      } catch (err : any) {
+        return <div style={{ color: 'red' }}>{err.message}</div>;
       }
 
       return (