Merge pull request #11 from TykTechnologies/update-main

Update main to latest release

src/assets/javascripts/components/interactive.js

@@ -86,6 +86,14 @@ function Toggle({element, onChange, index, contentWrapper, stepsSelector, conten
     stepsCollection?.forEach(s => {
       s.classList.remove('active');
       stepsCollection[stepIndex].classList.add('active');
+      let footer = document.querySelector("footer");
+      let activeTab = stepsCollection[stepIndex];
+      let redoc = document.getElementById("redoc-wrapper");
+      if (activeTab && activeTab.innerHTML != "API SPECIFICATIONS") {
+        footer.style.marginTop = "0px";
+      }else if (activeTab && activeTab.innerHTML == "API SPECIFICATIONS" && redoc){
+        footer.style.marginTop = redoc.clientHeight + "px";
+      }
     });
     if (stepIndex > 0) {
       SetMarkdownContent(`set-markdown-content-${stepIndex}`);
@@ -114,27 +122,35 @@ function handleContent(element, content) {
   }
   element.appendChild(content);
 }
+function getURLValue(urlArr) {
+  if (urlArr.length > 1 ) {
+    return urlArr.join("-");
+  }
+  return urlArr[0];
+}
+
 export function HandleApiSpecSelect({selectorId, downloadSelectorId, displaySelectorId}) {
   let selector = document.getElementById(selectorId);
   let downloadSelector = document.getElementById(downloadSelectorId);
   let displaySelector = document.getElementById(displaySelectorId);
   let oasTemplate = selector?.getAttribute("data-template");
   let path = downloadSelector?.getAttribute("data-path");
-  let value = selector?.value.split("-");
+  let [, ...docURL] = selector && selector.value ? selector.value.split("-") : [];
   let tmplIsRedoc = isRedoc(oasTemplate);
-  if (selector && isOAS(value[1]) &&  tmplIsRedoc) {
-    Redoc?.init(value[1])
+  let url = getURLValue(docURL);
+  if (selector && isOAS(url) &&  tmplIsRedoc) {
+    initRedoc(url);
   } 
-
   selector?.addEventListener('change', (e) => {
-    let value = e.target.value.split("-");
-    downloadSelector.action = `${path}/${value[0]}/docs/download`;
-    if (tmplIsRedoc && isOAS(value[1])) {
-      Redoc?.init(value[1]) 
+    let [apiID, ...docURL] = e.target.value.split("-");
+    let url = getURLValue(docURL);
+    downloadSelector.action = `${path}/${apiID}/docs/download`;
+    if (tmplIsRedoc && isOAS(url)) {
+      initRedoc(url);
       return
     }
     let elementsApi = document.createElement('elements-api');
-    elementsApi.setAttribute('apiDescriptionUrl', value[1]);
+    elementsApi.setAttribute('apiDescriptionUrl', url);
     elementsApi.setAttribute('router', 'hash');
     elementsApi.setAttribute('layout', 'sidebar');
     elementsApi.setAttribute('hideExport', 'true');
@@ -152,4 +168,45 @@ export function SetMarkdownContent(id) {
 		content.innerHTML = html;
     content.setAttribute("converted", "true");
 	}
+}
+
+function initRedoc(url) {
+  let wrapper = document.getElementById("redoc-wrapper");
+  if (Redoc) {
+    Redoc.init(url, { 
+      scrollYOffset: ".navbar",
+    }, wrapper, (redoc) => {
+      let footer = document.querySelector("footer");
+      let activeTab = document.querySelector(".step.active.tab");
+      if (activeTab?.innerHTML == "API SPECIFICATIONS") {
+        footer.style.marginTop = wrapper.clientHeight + "px";
+      }
+    })
+  }
+}
+
+export function HandleTruncateText(selectorWrapper, selector, attribute) {
+  let elementWrapper = document.querySelectorAll(selectorWrapper);
+  elementWrapper?.forEach(element => {
+    let textElement = element.querySelector(selector);
+    let maxHeight = element.style.maxHeight;
+    if (textElement && textElement.getAttribute(attribute) != textElement.innerText) {
+      element.addEventListener('mouseover', function () {
+        handleTextExpand(textElement, attribute);
+        element.style.maxHeight = 'none';
+
+      });
+
+      element.addEventListener('mouseout', function () {
+        handleTextExpand(textElement, attribute);
+        element.style.maxHeight = maxHeight;
+      });
+    }
+  })
+}
+
+function handleTextExpand(textElement, attribute) {
+  let data = textElement?.getAttribute(attribute);
+  textElement.setAttribute(attribute, textElement.innerText);
+  textElement.innerText = data;
 }

src/assets/javascripts/main.js

@@ -1,5 +1,5 @@
 import { SortBy } from './components/sorting.js';
-import { Interactive, HandleApiSpecSelect, SetMarkdownContent } from './components/interactive.js';
+import { Interactive, HandleApiSpecSelect, SetMarkdownContent, HandleTruncateText } from './components/interactive.js';
 import { onProductFormSubmit, onAppFormSubmit, handleTLSCertificate } from './components/submit-form.js';
 import { fromSearch, fromButton } from './components/set-element-value.js';
 import { decoratePasswordReveal } from './components/decorate-password-reveal.js';
@@ -102,6 +102,8 @@ SelectMultiple({
 SelectMultipleInput("response-codes-traffic-chart");
 SelectMultipleInput("response-codes-error-rate-chart");
 
+HandleTruncateText(".product-api-details", ".api-description-text", "data-description");
+
 /* Enable Bootstrap tooltips */
 $(function() {
 	$('[data-toggle="tooltip"]').tooltip()
@@ -158,9 +160,9 @@ OnChangeHandlerForFilters("analytics-overview-select-apps", OnChangeHandlerOverv
 OnChangeHandlerForFilters("error-rate-statistics", OnChangeHandlerStatisticsErrorRate);
 OnChangeHandlerForFilters("latency-time-unit", OnChangeHandlerLatencyTimeUnit);
 ExportCSV({chartID: "traffic-chart", buttonID: "traffic-chart-csv", filename: "api-calls.csv"});
-ExportCSV({chartID: "traffic-chart", buttonID: "traffic-chart-csv", filename: "api-calls.csv"});
+ExportCSV({chartID: "error-rate-chart", buttonID: "error-rate-chart-csv", filename: "error-rates.csv"});
 ExportCSV({chartID: "hits-vs-errors-chart", buttonID: "hits-vs-errors-chart-csv", filename: "hits-vs-errors.csv"});
-ExportCSV({chartID: "error-rates-chart", buttonID: "error-rates-chart-csv", filename: "error-rates.csv"});
+ExportCSV({chartID: "error-rates-chart", buttonID: "error-rates-chart-csv", filename: "error-rates-api.csv"});
 ExportCSV({chartID: "error-breakdown-chart", buttonID: "error-breakdown-chart-csv", filename: "error-breakdown.csv"});
 ExportCSV({chartID: "latency-chart", buttonID: "latency-chart-csv", filename: "latency.csv"});
 HandleCalendar("#analytics-date-picker");

src/assets/stylesheets/main.css

@@ -139,7 +139,3 @@ body {
 .container {
   max-width: 1230px;
 }
-
-html {
-  scroll-behavior: smooth;
-}

src/assets/stylesheets/pages/api-product.css

@@ -130,7 +130,6 @@
   max-width: 274px;
   max-height: 166px;
   cursor: pointer;
-  overflow: scroll;
 }
 .labeled-card:hover {
   background: var(--tdp-light-gray);
@@ -286,9 +285,9 @@
 .api-description-text{
   min-width: 255px;
   max-width: 255px;
-  max-height: 30px;
-  min-height: 30px;
-  overflow: scroll;
+  overflow-x: hidden;
+  white-space: normal;
+  overflow-wrap: break-word;
 }
 
 .step-wrapper-api-docs{
@@ -440,3 +439,7 @@
   color: var(--tdp-text-color);
   font-family: 'OpenSans-Regular'!important;
 }
+#redoc-wrapper{
+  position: absolute;
+  width: 100%;
+}

src/assets/stylesheets/pages/catalogue.css

@@ -97,4 +97,8 @@
     width: 100%;
     margin-bottom: 15px;
   }
-}
+}
+
+.catalogue-input-radio{
+  opacity: 1 !important;
+}

src/layouts/portal_layout.tmpl

@@ -1,5 +1,7 @@
 <!-- Main layout used to render all content pages -->
 
+{{ $pageTitle := PageTitle req }}
+
 <!DOCTYPE html>
 <html lang="en">
 
@@ -10,7 +12,7 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <title>{{ if .page}} {{.page.Title}} {{else}} Developer Portal {{end}}</title>
+    <title>{{ if $pageTitle}} {{ $pageTitle}} {{else}} {{ if .page}} {{.page.Title}} {{else}} Developer Portal {{end}} {{end}}</title>
     <!-- Google Tag Manager -->
     {{if IsFullstoryEnabled}}
       <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@@ -21,10 +23,9 @@
     {{end}}
     <!-- End Google Tag Manager -->
     <!-- stoplight.io -->    
-    <script src="/assets/vendor/stoplight/elements/web-components.min.js"></script>
-    <link rel="stylesheet" href="/assets/vendor/stoplight/elements/styles.min.css">
-    <!-- <script src="https://unpkg.com/@stoplight/elements/web-components.min.js"></script> --> 
-    <!-- <link rel="stylesheet" href=""> --> 
+    <script src="https://unpkg.com/@stoplight/elements/web-components.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/@stoplight/elements/styles.min.css">
+    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
     <!-- Load style assets -->
     <link href="/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

src/layouts/product_layout_doc_redoc.tmpl

@@ -30,8 +30,8 @@
     {{ render "footer" . }}
 
     <!-- Render custom documentation generator script -->
-    <script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
-
+    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
+    
 </body>
 
 </html>

src/layouts/product_layout_doc_stoplight.tmpl

@@ -14,8 +14,8 @@
     <link href="/assets/stylesheets/main.css" rel="stylesheet">
 
     <!-- stoplight.io -->    
-    <script src="/assets/vendor/stoplight/elements/web-components.min.js"></script>
-    <link rel="stylesheet" href="/assets/vendor/stoplight/elements/styles.min.css">
+    <script src="https://unpkg.com/@stoplight/elements/web-components.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/@stoplight/elements/styles.min.css">
     <!-- <script src="https://unpkg.com/@stoplight/elements/web-components.min.js"></script> --> 
     <!-- <link rel="stylesheet" href=""> --> 
 

src/mailers/welcome_admin.html.tmpl

@@ -0,0 +1,7 @@
+<h1>Welcome to the Developer portal</h1>
+
+Hi, <strong>{{.user.First}} {{.user.Last}}</strong>.<br/>
+Thank you for registering with the Developer Portal. Your admin profile has been created.
+Once your profile is activated, you can manage the developer portal content by logging in portal at https://portal.com/admin.
+
+If you did not perform this action, please contact the customer support team at [email protected].

src/mailers/welcome_admin.text.tmpl

@@ -0,0 +1,7 @@
+Welcome to the Developer portal
+
+Hi, {{.user.First}} {{.user.Last}}.
+Thank you for registering with the Developer Portal. Your admin profile has been created.
+Once your profile is activated, you can manage the developer portal content by logging in portal at https://portal.com/admin.
+
+If you did not perform this action, please contact the customer support team at [email protected].

src/mailers/welcome_admin.tmpl

@@ -0,0 +1,7 @@
+Welcome to the Developer portal
+
+Hi, {{.user.First}} {{.user.Last}}.
+Thank you for registering with the Developer Portal. Your admin profile has been created.
+Once your profile is activated, you can manage the developer portal content by logging in portal at https://portal.com/admin.
+
+If you did not perform this action, please contact the customer support team at [email protected].

src/mailers/welcome_dev.html.tmpl

@@ -0,0 +1,6 @@
+<h1>Welcome to the Developer portal</h1>
+
+Hi, <strong>{{.user.First}} {{.user.Last}}</strong>.<br/>
+Thank you for registering with the Developer Portal. Your developer profile has been created.
+
+If you did not perform this action, please contact the customer support team at [email protected].

src/mailers/welcome_dev.text.tmpl

@@ -0,0 +1,6 @@
+Welcome to the Developer portal
+
+Hi, {{.user.First}} {{.user.Last}}.
+Thank you for registering with the Developer Portal. Your developer profile has been created.
+
+If you did not perform this action, please contact the customer support team at [email protected].

src/mailers/welcome_dev.tmpl

@@ -0,0 +1,6 @@
+Welcome to the Developer portal
+
+Hi, {{.user.First}} {{.user.Last}}
+Thank you for registering with the Developer Portal. Your developer profile has been created.
+
+If you did not perform this action, please contact the customer support team at [email protected].

src/views/portal_product_detail.tmpl

@@ -25,7 +25,6 @@
 	{{ if .errors }}
 	<div class="alert alert-danger" role="alert">
 	    {{ range $category, $messages := .errors }}
-            {{$category}}
             <i class="tyk-icon tykon tykon-warning "></i>
             {{ range $i, $message := $messages }}
             <br/>
@@ -134,7 +133,7 @@
 		    <div class="api-product-page__info-description flex-column">
 			<div class="row m-0 justify-content-center">
 			    {{ range $index, $api := .product.APIDetails }}
-			    <div class="col-xl-3 labeled-card d-flex flex-column align-items-center {{if and (ge $index 0) (lt $index $lastApi)}}mr-35{{end}}">
+			    <div class="product-api-details col-xl-3 labeled-card d-flex flex-column align-items-center {{if and (ge $index 0) (lt $index $lastApi)}}mr-35{{end}}">
 				<div class="labeled-card__title mb-4">
 				    <h3 class="mb-0">{{ $api.Name }}</h3>
 				</div>
@@ -145,7 +144,7 @@
 				<div class="mt-12">
 				    {{if not (eq $api.Description "")}}
 				    <span class="m-0 text-open-sans-bold">Description:</span>
-				    <p class="api-description-text">{{ $api.Description }}</p>
+				    <p class="api-description-text text-regular-14" data-description="{{$api.Description}}">{{safe (TruncateString $api.Description 60)}}</p>
 				    {{end}}
 				</div>
 			    </div>
@@ -315,8 +314,9 @@
 		    </div>
 		</div>
 		{{if eq $oas_template $redoc}}
+		<div id="redoc-wrapper">
 			<redoc hide-download-button></redoc>
-			<script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
+		</div>
 		{{else}}
 		<div id="oas-display-stoplight">
 			<elements-api apiDescriptionUrl="{{$initialAPIOasUrl}}" router="hash" layout="sidebar" hideExport="true"/>

src/views/product_doc_redoc.tmpl

@@ -11,7 +11,7 @@
   </div>
   <div>
     {{ if gt (.Url | length) 0}}
-    <redoc spec-url='{{.Url}}'></redoc>
+    <redoc spec-url='{{.Url}}' scroll-y-offset='.navbar'></redoc>
     {{ else }}
     <h1>No swagger doc set for this API</h1>
     {{ end }}