@capillarytech/creatives-library 8.0.340-0 → 8.0.340-beta.0.1

package/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js

@@ -185,7 +185,7 @@ const RcsPreviewContent = ({
         <CapRow className={`sms-content-overlay sms-content-overlay-${device}`}>
           <CapRow className="sms-loading-container">
             <CapSpin size="large" />
-            <CapRow className="sms-loading-text">
+            <CapRow useLegacy className="sms-loading-text">
               {formatMessage(messages.updatingPreview)}
             </CapRow>
           </CapRow>
@@ -206,10 +206,10 @@ const RcsPreviewContent = ({
         <CapRow className={`sms-content-overlay sms-content-overlay-${device}`}>
           <CapRow className="sms-error-container">
             <CapIcon type="exclamation-circle" className="exclamation-circle" />
-            <CapRow className="sms-error-text">
+            <CapRow useLegacy className="sms-error-text">
               {formatMessage(messages.previewError)}
             </CapRow>
-            <CapRow className="sms-error-message">{error}</CapRow>
+            <CapRow useLegacy className="sms-error-message">{error}</CapRow>
           </CapRow>
         </CapRow>
       </CapRow>
@@ -241,7 +241,7 @@ const RcsPreviewContent = ({
       {/* Content Overlay */}
       <CapRow className={`sms-content-overlay sms-content-overlay-${device} sms-preview sms-${device}`}>
         {/* Navigation Bar - Same as SMS */}
-        <CapRow className={`sms-navigation-bar ${!showHeader ? 'sms-navigation-bar-no-header' : ''}`}>
+        <CapRow useLegacy className={`sms-navigation-bar ${!showHeader ? 'sms-navigation-bar-no-header' : ''}`}>
           <CapIcon type="chevron-left" className="sms-back-arrow" />
           <CapLabel type="label2" className="sms-sender-id">
             {senderId || formatMessage(messages.senderId)}
@@ -250,21 +250,21 @@ const RcsPreviewContent = ({
         </CapRow>
 
         {/* Date Separator - Same as SMS */}
-        <CapRow className="sms-date-separator">
+        <CapRow useLegacy className="sms-date-separator">
           <FormattedMessage {...messages.timeAgo} defaultMessage="Today" />
         </CapRow>
 
         {/* Message Container - Same structure as SMS, only content inside is RCS-specific */}
         <CapRow className="sms-message-container">
-          <CapRow className="sms-message-bubble">
-            <CapRow className="sms-message-text">
+          <CapRow useLegacy className="sms-message-bubble">
+            <CapRow useLegacy className="sms-message-text">
               {/* RCS-specific content rendering */}
-              <CapRow className="message-pop sms">
+              <CapRow useLegacy className="message-pop sms">
                 {contentToRender}
               </CapRow>
             </CapRow>
           </CapRow>
-          <CapRow className="sms-timestamp">
+          <CapRow useLegacy className="sms-timestamp">
             {timestamp}
           </CapRow>
         </CapRow>

package/v2Components/CommonTestAndPreview/UnifiedPreview/SmsPreviewContent.js

@@ -53,7 +53,7 @@ const SmsPreviewContent = ({
         <CapRow className={`sms-content-overlay sms-content-overlay-${device}`}>
           <CapRow className="sms-loading-container">
             <CapSpin size="large" />
-            <CapRow className="sms-loading-text">
+            <CapRow useLegacy className="sms-loading-text">
               {formatMessage(messages.updatingPreview)}
             </CapRow>
           </CapRow>
@@ -74,10 +74,10 @@ const SmsPreviewContent = ({
         <CapRow className={`sms-content-overlay sms-content-overlay-${device}`}>
           <CapRow className="sms-error-container">
             <CapIcon type="exclamation-circle" className="exclamation-circle" />
-            <CapRow className="sms-error-text">
+            <CapRow useLegacy className="sms-error-text">
               {formatMessage(messages.previewError)}
             </CapRow>
-            <CapRow className="sms-error-message">{error}</CapRow>
+            <CapRow useLegacy className="sms-error-message">{error}</CapRow>
           </CapRow>
         </CapRow>
       </CapRow>
@@ -107,26 +107,28 @@ const SmsPreviewContent = ({
       <CapRow className={`sms-content-overlay sms-content-overlay-${device} sms-preview sms-${device}`}>
         {/* Navigation Bar */}
         <CapRow className={`sms-navigation-bar ${!showHeader ? 'sms-navigation-bar-no-header' : ''}`}>
-          <CapIcon type="chevron-left" className="sms-back-arrow" />
-          <CapLabel type="label15" className="sms-sender-id">
-            {senderId || formatMessage(messages.senderId)}
-          </CapLabel>
+          <CapRow type='flex' align='middle' justify='center'>
+            <CapIcon type="chevron-left" className="sms-back-arrow" />
+            <CapLabel type="label15" className="sms-sender-id">
+              {senderId || formatMessage(messages.senderId)}
+            </CapLabel>
+          </CapRow>
           <CapIcon type="more" className="sms-menu-icon" />
         </CapRow>
 
         {/* Date Separator */}
-        <CapRow className="sms-date-separator">
+        <CapRow useLegacy className="sms-date-separator">
           <FormattedMessage {...messages.timeAgo} defaultMessage="Today" />
         </CapRow>
 
         {/* Message Bubble */}
         <CapRow className="sms-message-container">
-          <CapRow className="sms-message-bubble">
-            <CapRow className="sms-message-text">
+          <CapRow useLegacy className="sms-message-bubble">
+            <CapRow useLegacy className="sms-message-text">
               {content || formatMessage(messages.noContent)}
             </CapRow>
           </CapRow>
-          <CapRow className="sms-timestamp">
+          <CapRow useLegacy className="sms-timestamp">
             {timestamp}
           </CapRow>
         </CapRow>

package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js

@@ -68,7 +68,7 @@ const ViberPreviewContent = ({
         <CapRow className={`sms-content-overlay sms-content-overlay-${device} viber-content-overlay`}>
           <CapRow className="sms-loading-container">
             <CapSpin size="large" />
-            <CapRow className="sms-loading-text">
+            <CapRow useLegacy className="sms-loading-text">
               {formatMessage(messages.updatingPreview)}
             </CapRow>
           </CapRow>
@@ -89,10 +89,10 @@ const ViberPreviewContent = ({
         <CapRow className={`sms-content-overlay sms-content-overlay-${device} viber-content-overlay`}>
           <CapRow className="sms-error-container">
             <CapIcon type="exclamation-circle" className="exclamation-circle" />
-            <CapRow className="sms-error-text">
+            <CapRow useLegacy className="sms-error-text">
               {formatMessage(messages.previewError)}
             </CapRow>
-            <CapRow className="sms-error-message">{error}</CapRow>
+            <CapRow useLegacy className="sms-error-message">{error}</CapRow>
           </CapRow>
         </CapRow>
       </CapRow>
@@ -113,9 +113,9 @@ const ViberPreviewContent = ({
       />
 
       {/* Content Overlay */}
-      <CapRow className={`sms-content-overlay sms-content-overlay-${device} ${device === ANDROID ? 'viber-content-overlay' : ''} viber-preview viber-${device}`}>
+      <CapRow useLegacy className={`sms-content-overlay sms-content-overlay-${device} ${device === ANDROID ? 'viber-content-overlay' : ''} viber-preview viber-${device}`}>
         {/* Navigation Bar (same as SMS) */}
-        <CapRow className={`sms-navigation-bar ${device === ANDROID && !showHeader ? 'viber-navigation-bar' : ''}`}>
+        <CapRow useLegacy className={`sms-navigation-bar ${device === ANDROID && !showHeader ? 'viber-navigation-bar' : ''}`}>
           <CapIcon type="chevron-left" className="sms-back-arrow" />
           <CapLabel type="label16" className="sms-sender-id">
             {displayBrandName}
@@ -125,7 +125,7 @@ const ViberPreviewContent = ({
 
         {/* Viber Message Container */}
         {hasContent && (
-          <CapRow className={`viber-message-container ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
+          <CapRow useLegacy className={`viber-message-container ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
             {/* Brand Name Display (from TemplatePreview line 1136) */}
             <CapRow className="msg-container viber-preview">
               {/* Account Icon (from TemplatePreview line 1146-1160) */}
@@ -181,7 +181,7 @@ const ViberPreviewContent = ({
                 <CapLabel type="label1" className="viber-timestamp">
                   {timestamp}
                 </CapLabel>
-                <CapRow className="empty-placeholder" />
+                <CapRow useLegacy className="empty-placeholder" />
               </CapRow>
 
             </CapRow>
@@ -191,9 +191,9 @@ const ViberPreviewContent = ({
 
         {/* No Content State */}
         {!hasContent && (
-          <CapRow className="viber-message-container">
-            <CapRow className="sms-message-bubble">
-              <CapRow className="sms-message-text">
+          <CapRow useLegacy className="viber-message-container">
+            <CapRow useLegacy className="sms-message-bubble">
+              <CapRow useLegacy className="sms-message-text">
                 {formatMessage(messages.noContent)}
               </CapRow>
             </CapRow>

package/v2Components/CommonTestAndPreview/UnifiedPreview/WhatsAppPreviewContent.js

@@ -115,8 +115,8 @@ const WhatsAppPreviewContent = ({
 
   // Render WhatsApp structure (common for all states) - Based on TemplatePreview lines 1229-1328
   const renderWhatsAppStructure = (contentSection) => (
-    <CapRow className="whatsapp-preview-wrapper">
-      <CapRow className="shell-v2-whatsapp align-center">
+    <CapRow useLegacy className="whatsapp-preview-wrapper">
+      <CapRow useLegacy className="shell-v2-whatsapp align-center">
         <CapImage
           className="preview-image"
           src={deviceImage}
@@ -125,11 +125,12 @@ const WhatsAppPreviewContent = ({
         <CapLabel className={`whatsapp-brand-name whatsapp-brand-name-${device}`}>
           {accountName || ''}
         </CapLabel>
-        <CapRow className={`msg-container whatsapp-message-container ${content?.carouselData && 'msg-container-carousel'}`}>
+        <CapRow useLegacy className={`msg-container whatsapp-message-container ${content?.carouselData && 'msg-container-carousel'}`}>
           <CapRow
+            useLegacy
             className={`message-pop align-left whatsapp-message-pop ${content?.carouselData && 'message-pop-carousel'}`}
           >
-            <CapRow className="whatsapp-content">
+            <CapRow useLegacy className="whatsapp-content">
               {contentSection}
             </CapRow>
           </CapRow>
@@ -140,7 +141,7 @@ const WhatsAppPreviewContent = ({
                   key={`carousel-${data?.bodyText || data?.imageSrc || data?.videoPreviewImg || Math.random()}`}
                   className="message-pop align-left message-pop-carousel whatsapp-message-pop-carousel"
                 >
-                  <CapRow className="whatsapp-content">
+                  <CapRow useLegacy className="whatsapp-content">
                     {content?.carouselMediaType === 'image' && (
                       <CapImage
                         src={data?.imageSrc ? data.imageSrc : whatsappImageEmptyPreview}
@@ -187,9 +188,9 @@ const WhatsAppPreviewContent = ({
   if (isUpdating) {
     // Loading state
     contentSection = (
-      <CapRow className="whatsapp-loading-container">
+      <CapRow useLegacy className="whatsapp-loading-container">
         <CapSpin size="large" />
-        <CapRow className="whatsapp-loading-text">
+        <CapRow useLegacy className="whatsapp-loading-text">
           {formatMessage(messages.updatingPreview)}
         </CapRow>
       </CapRow>
@@ -197,12 +198,12 @@ const WhatsAppPreviewContent = ({
   } else if (error) {
     // Error state
     contentSection = (
-      <CapRow className="whatsapp-error-container">
+      <CapRow useLegacy className="whatsapp-error-container">
         <CapIcon type="exclamation-circle" className="exclamation-circle" />
-        <CapRow className="whatsapp-error-text">
+        <CapRow useLegacy className="whatsapp-error-text">
           {formatMessage(messages.previewError)}
         </CapRow>
-        <CapRow className="whatsapp-error-message">{error}</CapRow>
+        <CapRow useLegacy className="whatsapp-error-message">{error}</CapRow>
       </CapRow>
     );
   } else if (content) {
@@ -245,7 +246,7 @@ const WhatsAppPreviewContent = ({
 
         {/* Document Preview */}
         {content?.docPreview && (
-          <CapRow className="whatsapp-image">
+          <CapRow useLegacy className="whatsapp-image">
             {content.docPreview}
           </CapRow>
         )}
@@ -290,7 +291,7 @@ const WhatsAppPreviewContent = ({
   } else {
     // No content state
     contentSection = (
-      <CapRow className="whatsapp-no-content">
+      <CapRow useLegacy className="whatsapp-no-content">
         {formatMessage(messages.noContent)}
       </CapRow>
     );

package/v2Components/CommonTestAndPreview/UnifiedPreview/ZaloPreviewContent.js

@@ -33,23 +33,24 @@ const ZaloPreviewContent = ({
   // Render Zalo preview - exact structure from TemplatePreview (lines 1356-1385)
   return (
     <CapRow
+      useLegacy
       className={`zalo-preview-container ${
         fullMode
           ? "zalo-preview-container-creative"
           : "zalo-preview-container-campaign"
       }`}
     >
-      <CapRow>
+      <CapRow useLegacy>
         <CapLabel className="preview-head">
           {formatMessage(zaloMessages.previewHead)}
         </CapLabel>
       </CapRow>
-      <CapRow>
+      <CapRow useLegacy>
         <CapLabel className="preview-text">
           {formatMessage(zaloMessages.previewText)}
         </CapLabel>
       </CapRow>
-      <CapRow>
+      <CapRow useLegacy>
         <CapLabel
           data-testid="preview-link-button"
           onClick={handlePreview}

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -289,7 +289,8 @@
       .preview-loading-container {
         flex: 1;
         display: flex;
-        flex-direction: column;
+        flex-direction: column !important;
+        flex-flow: column nowrap;
         align-items: center;
         justify-content: center;
         gap: $CAP_SPACE_16;
@@ -508,7 +509,8 @@
 
       .loading-container {
         display: flex;
-        flex-direction: column;
+        flex-direction: column !important;
+        flex-flow: column nowrap;
         align-items: center;
         justify-content: center;
         height: 100%;
@@ -554,11 +556,11 @@
   }
 
   // SMS Preview Content Styles (Phase 7)
-  .sms-device-container {
+  .sms-device-container.ant-row {
     position: relative;
     display: flex;
     justify-content: center;
-    align-items: flex-start;
+    align-items: center !important;
     width: 100%;
     margin: 0 auto;
 
@@ -617,8 +619,9 @@
       // Navigation Bar
       .sms-navigation-bar {
         display: flex;
+        position: relative;
         align-items: center;
-        justify-content: space-between;
+        justify-content: center;
         padding: $CAP_SPACE_12 $CAP_SPACE_16;
         height: $CAP_SPACE_48;
         background: $CAP_G09;
@@ -642,6 +645,8 @@
         }
 
         .sms-menu-icon {
+          position: absolute;
+          right: $CAP_SPACE_20;
           font-size: $FONT_SIZE_L;
           color: #595959;
           cursor: pointer;
@@ -688,6 +693,7 @@
             font-size: $FONT_SIZE_M;
             line-height: 1.4;
             word-wrap: break-word;
+            max-width: 14.286rem;
 
             .message-pop {
               .rcs-image {
@@ -709,7 +715,8 @@
       .sms-loading-container {
         flex: 1;
         display: flex;
-        flex-direction: column;
+        flex-direction: column !important;
+        flex-flow: column nowrap;
         align-items: center;
         justify-content: center;
         gap: $CAP_SPACE_16;
@@ -801,7 +808,8 @@
 
       &.msg-container-carousel {
         display: flex;
-        flex-direction: column;
+        flex-direction: column !important;
+        flex-flow: column nowrap;
 
         .scroll-container {
           overflow-x: auto;
@@ -967,7 +975,8 @@
         color: #ff4d4f;
       }
       display: flex;
-      flex-direction: column;
+      flex-direction: column !important;
+      flex-flow: column nowrap;
       align-items: center;
       justify-content: center;
       gap: $CAP_SPACE_16;

package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js

@@ -282,7 +282,7 @@ const UnifiedPreview = ({
       )}
 
       {/* Channel-specific preview content */}
-      <CapRow className={`preview-content-container ${!showHeader ? 'preview-content-container-no-header' : ''}`}>
+      <CapRow useLegacy className={`preview-content-container ${!showHeader ? 'preview-content-container-no-header' : ''}`}>
         {[CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.WHATSAPP, CHANNELS.RCS, CHANNELS.INAPP, CHANNELS.MOBILEPUSH, CHANNELS.VIBER].includes(channel) ? (
           renderChannelContent()
         ) : (

package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -31,10 +31,8 @@
 /* Customer creation modal content – avoid inline styles */
 .common-test-preview-modal.common-test-preview-modal {
   color: $CAP_G01;
-  width: 32.571em;
   margin-left: auto;
   margin-right: auto;
-  max-width: 32.571em;
 
   .ant-modal-footer {
     text-align: left;
@@ -302,7 +300,8 @@
 
   .loading-container {
     display: flex;
-    flex-direction: column;
+    flex-direction: column !important;
+    flex-flow: column nowrap;
     align-items: center;
     justify-content: center;
     padding: $CAP_SPACE_32;
@@ -365,6 +364,7 @@
         user-select: none;
         min-width: $CAP_SPACE_40;
         flex-shrink: 0;
+        flex-direction: column;
 
         .line-number {
           text-align: right;
@@ -522,6 +522,7 @@
           padding: $CAP_SPACE_12 $CAP_SPACE_16;
           color: #333;
           word-break: break-all;
+          max-width: 10rem;
         }
 
         .tag-input {
@@ -529,6 +530,11 @@
           padding: $CAP_SPACE_08 $CAP_SPACE_16;
           display: flex;
           align-items: center;
+          
+          input {
+            height: $CAP_SPACE_32;
+            font-size: $FONT_SIZE_M
+          }
         }
       }
     }
@@ -581,6 +587,10 @@
       color: #666;
     }
 
+    .ant-collapse-borderless {
+      background-color: transparent;
+    }
+
     .ant-collapse-header {
       padding-left: 0;
     }
@@ -589,14 +599,24 @@
       padding-left: 0 !important;
     }
 
+    .accordion-content-wrapper {
+      padding-left: $CAP_SPACE_08;
+    }
+
     .send-test-content {
       flex-direction: column;
       align-items: stretch;
       gap: 0;
     }
 
+    .cap-tree-select-v2-select-slot {
+      height: $CAP_SPACE_40;
+      max-height: 21.429rem;
+    }
+
     .test-customers-tree-select {
       width: 100%;
+      height: 100% !important;
       min-width: 18rem;
       /* Consistent dropdown width in campaigns and creatives */
       min-height: $CAP_SPACE_40;
@@ -607,6 +627,10 @@
         min-height: $CAP_SPACE_40;
         height: auto !important;
       }
+
+      .ant-select-content {
+        height: 100%;
+      }
     }
 
     .send-test-content .ant-btn {
@@ -635,7 +659,7 @@
 
 .test-customer-add-btn {
   width: 100%;
-  &.ant-btn.cap-button-v2.flat-btn {
+  &.ant-btn.cap-button-v2.ant-btn-link {
     background-color: transparent;
     color: $FONT_COLOR_05;
   }
@@ -708,7 +732,8 @@
       padding: $CAP_SPACE_06 $CAP_SPACE_08;
       border-radius: $CAP_SPACE_08;
 
-      .anticon {
+      .anticon,
+      .cap-icon-v2 {
         padding: $CAP_SPACE_04;
         border-radius: $CAP_SPACE_04;
         cursor: pointer;

package/v2Components/CommonTestAndPreview/index.js

@@ -2959,7 +2959,7 @@ const CommonTestAndPreview = (props) => {
 
   // Header content for the slidebox
   const slideboxHeader = (
-    <CapRow className="test-preview-header">
+    <CapRow type="flex" align="middle" className="test-preview-header">
       <CapIcon type="arrow-left" onClick={handleClose} className="back-icon" />
       <CapHeader title={<FormattedMessage {...messages.testAndPreviewHeader} />} />
     </CapRow>
@@ -2981,9 +2981,9 @@ const CommonTestAndPreview = (props) => {
           className={`common-test-preview-lookup-spin ${isCustomerDataLoading ? 'common-test-preview-customer-loading' : ''}`}
         >
           <CapRow className="test-preview-container">
-            <CapRow className="test-and-preview-panels">
+            <CapRow type="flex" align="stretch" className="test-and-preview-panels">
               {/* Left Panel */}
-              <CapRow className="left-panel">
+              <CapRow useLegacy className="left-panel">
                 {channel === CHANNELS.ZALO ? null : renderLeftPanelContent()}
                 <CapDivider className="panel-divider" />
 

package/v2Components/CustomerSearchSection/_customerSearch.scss

@@ -3,7 +3,8 @@
 .customer-search-section {
   margin-top: $CAP_SPACE_08;
   display: flex;
-  flex-direction: column;
+  flex-direction: column !important;
+  flex-flow: column nowrap;
   gap: $CAP_SPACE_04;
   padding: 0;
   position: relative;

package/v2Components/CustomerSearchSection/index.js

@@ -183,9 +183,9 @@ const CustomerSearchSection = ({
   };
 
   return (
-    <CapRow className="customer-search-section">
+    <CapRow useLegacy className="customer-search-section">
       <div ref={searchContainerRef}>
-        <CapRow className="search-container">
+        <CapRow useLegacy className="search-container">
           {selectedCustomer ? (
             <SelectedCustomerView
               customer={selectedCustomer}
@@ -203,7 +203,7 @@ const CustomerSearchSection = ({
             />
           )}
           {showDropdown && !selectedCustomer && (
-            <CapRow className="search-dropdown-container">
+            <CapRow useLegacy className="search-dropdown-container">
               <CapRow type="flex" justify="center" align="middle">
                 {(processedSearchData?.length === 0 && customerSearchValue != null && !isSearchingCustomer) && (
                   <CapCard className="validation-card">
@@ -214,7 +214,7 @@ const CustomerSearchSection = ({
                 )}
                 {(isSearchingCustomer) && (
                   <CapCard className="validation-card">
-                    <CapRow className="spin-card-align">
+                    <CapRow useLegacy className="spin-card-align">
                       <CapSpin />
                     </CapRow>
                   </CapCard>
@@ -232,12 +232,12 @@ const CustomerSearchSection = ({
                               className="search-results-height link-result"
                               title={(
                                 <>
-                                  <CapRow type="flex" align="middle" gutter={16}>
+                                  <CapRow type="flex" align="middle" gap={16}>
                                     <CapColumn data-testid="namingIcon">
                                       <CapRow className="customer-common-profile">{getNamingIcon(d?.name)}</CapRow>
                                     </CapColumn>
                                     <CapColumn>
-                                      <CapRow type="flex" gutter={12}>
+                                      <CapRow type="flex" gap={12}>
                                         <CapColumn data-testid="searchResultName">
                                           <CapHeading className="search-text" type="h4">
                                             {d?.name}
@@ -279,7 +279,7 @@ const SearchInput = ({
   disabled,
   placeholder,
 }) => (
-  <CapRow className="search-input-container">
+  <CapRow useLegacy className="search-input-container">
     <CapInput
       value={value}
       onChange={onChange}
@@ -290,7 +290,7 @@ const SearchInput = ({
       autoComplete="off"
     />
     {error && (
-      <CapRow className="search-error">
+      <CapRow useLegacy className="search-error">
         <CapAlert
           message={error}
           type="error"
@@ -304,7 +304,7 @@ const SearchInput = ({
 
 const SelectedCustomerView = ({ customer, onClear, showIdentifiers }) => (
   <div className="selected-customer-view">
-    <CapRow type="flex" align="middle" gutter={8}>
+    <CapRow type="flex" align="middle" gap={8}>
       <CapColumn>
         <CapRow className="customer-common-profile">{getNamingIcon(customer?.name)}</CapRow>
       </CapColumn>

package/v2Components/EmailMobilePreview/index.js

@@ -89,7 +89,7 @@ class EmailMobilePreview extends React.Component {
                   <div className="email-preview-container">
                     {enableShowAllDevices && (
                       <CapButton
-                        type="flat"
+                        type="link"
                         onClick={this.onClickShowInAllDevices}
                       >
                         View in all devices