From edecabac24d6c35c81bdfc823b667520e660a315 Mon Sep 17 00:00:00 2001
From: Suryansh Pathak <34577232+Suryansh5545@users.noreply.github.com>
Date: Sat, 22 Jul 2023 01:04:21 +0530
Subject: [PATCH] [Frontend] Add cache busting to frontend (#4037)

* Added Cache Busting

* .
---
 frontend/src/js/app.js | 25 ++++++++++++++++++++++---
 gulpfile.js            | 26 +++++++++++++++++++++++---
 package.json           | 15 +++++++++------
 3 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/frontend/src/js/app.js b/frontend/src/js/app.js
index 912696171c..c63a8d1d3f 100644
--- a/frontend/src/js/app.js
+++ b/frontend/src/js/app.js
@@ -15,6 +15,25 @@ angular
 		'angularMoment',
 		'ngclipboard',
 		'moment-picker'
-	]).config(['$compileProvider', function($compileProvider) {
-    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|tel|javascript):/);
-}]);
+	])
+	.service('preventTemplateCache', [function() {
+		var service = this;
+		service.request = function(config) {
+			var urlSegments = config.url.split('/');
+			// Check each segment for "/dist/"
+			var isDistUrl = urlSegments.some(function(segment) {
+				return segment === 'dist';
+			});
+			if (isDistUrl) {
+				config.url = config.url + '?t=___REPLACE_IN_GULP___';
+
+			}
+			return config;
+		};
+	}])
+	.config(['$httpProvider',function ($httpProvider) {
+		$httpProvider.interceptors.push('preventTemplateCache');
+	}])
+	.config(['$compileProvider', function($compileProvider) {
+		$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|tel|javascript):/);
+	}]);
diff --git a/gulpfile.js b/gulpfile.js
index 6b99fd4d03..91dc5c4cc2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -14,14 +14,16 @@ var gulp = require('gulp'),
     inject = require('gulp-inject'),
     uglify = require('gulp-uglify'),
     eslint = require('gulp-eslint'),
+    cachebust = require('gulp-cache-bust'),
     connectModRewrite = require('connect-modrewrite'),
     connect = require('gulp-connect'),
+    through = require('through2'),
     gulp_if = require('gulp-if'),
     replace = require('gulp-replace');
 
 // development task
 var production = false;
-
+let timestamp;
 var scripts = JSON.parse(fs.readFileSync('frontend/app.scripts.json'));
 var styles = JSON.parse(fs.readFileSync('frontend/app.styles.json'));
 var configJson = JSON.parse(fs.readFileSync('frontend/src/js/config.json'));
@@ -233,12 +235,30 @@ function injectpaths() {
     ], { read: false });
     return target
         .pipe(inject(sources, { ignorePath: 'frontend', addRootSlash: true }))
+        .pipe(gulp_if('*.js', production ? uglify() : gulp.dest('dist')))
+        .pipe(gulp_if('*.css', production ? cleanCSS() : gulp.dest('dist')))
+        .pipe(production ? cachebust({ type: 'timestamp' }) : gulp.dest('dist'))
+        .pipe(through.obj((file, enc, cb) => {
+            // Extract the timestamp value from the file contents
+            const fileContents = file.contents.toString();
+            const regex = /\?t=(\d+)/;
+            const matches = fileContents.match(regex);
+            if (matches && matches[1]) {
+              timestamp = matches[1];
+            }
+            cb(null, file);
+          }))
         .pipe(rename({
             basename: "index"
         }))
         .pipe(gulp.dest('frontend/'));
 }
 
+function replacetimestamp() {
+    return gulp.src('frontend/dist/**/*.*')
+    .pipe(replace('___REPLACE_IN_GULP___', timestamp))
+    .pipe(gulp.dest('frontend/dist'));
+}
 
 /*
 js linting
@@ -305,12 +325,12 @@ var parallelTasks = gulp.parallel(vendorcss, vendorjs, css, js, html, images, fo
 gulp.task('production', gulp.series(clean, function(done) {
     production = true;
     done();
-}, parallelTasks, configProd, injectpaths, lint));
+}, parallelTasks, configProd, injectpaths, replacetimestamp, lint));
 
 gulp.task('staging', gulp.series(clean, function(done) {
     production = true;
     done();
-}, parallelTasks, configStaging, injectpaths, lint));
+}, parallelTasks, configStaging, injectpaths, replacetimestamp, lint));
 
 gulp.task('dev', gulp.series(clean, function(done) {
     production = false;
diff --git a/package.json b/package.json
index b879ca9b57..443d22543a 100755
--- a/package.json
+++ b/package.json
@@ -11,17 +11,13 @@
   "dependencies": {
     "autoprefixer": "^8.2.0",
     "connect-modrewrite": "^0.10.2",
-    "del": "^3.0.0",
     "eslint": "^4.19.1",
     "eslint-config-angular": "^0.5.0",
     "eslint-plugin-angular": "^3.3.0",
     "fs": "0.0.1-security",
-    "gulp": "^4.0.0",
-    "gulp-clean-css": "^3.9.3",
     "gulp-concat": "^2.6.0",
     "gulp-connect": "^5.0.0",
     "gulp-eslint": "^4.0.2",
-    "gulp-if": "^2.0.2",
     "gulp-inject": "^4.2.0",
     "gulp-path": "^4.0.0",
     "gulp-postcss": "^7.0.1",
@@ -29,7 +25,6 @@
     "gulp-replace": "^1.0.0",
     "gulp-sass": "^4.0.1",
     "gulp-sourcemaps": "^2.6.4",
-    "gulp-uglify": "^3.0.0",
     "lodash": "^4.16.6",
     "merge-stream": "^1.0.0",
     "node-sass": "^4.9.0"
@@ -40,14 +35,22 @@
   },
   "devDependencies": {
     "angular-mocks": "1.7.0",
+    "del": "^3.0.0",
+    "gulp": "^4.0.2",
+    "gulp-cache-bust": "^1.4.1",
+    "gulp-clean-css": "^3.10.0",
+    "gulp-if": "^2.0.2",
+    "gulp-string-replace": "^1.1.2",
+    "gulp-uglify": "^3.0.2",
+    "gulp-useref": "^5.0.0",
     "istanbul": "^0.4.5",
     "jasmine-core": "^3.4.0",
     "karma": "^4.1.0",
+    "karma-brief-reporter": "^0.2.1",
     "karma-chrome-launcher": "^2.2.0",
     "karma-cli": "^2.0.0",
     "karma-coverage": "^1.1.2",
     "karma-coveralls": "^2.1.0",
-    "karma-brief-reporter": "^0.2.1",
     "karma-jasmine": "^2.0.1",
     "puppeteer": "^1.16.0"
   }