Convert changelog to TGUI

code/datums/changelog/changelog.dm

@@ -14,8 +14,7 @@
 	if(.)
 		return
 	if(action == "get_month")
-		var/filename = params["filename"]
-		return ui.send_asset(file("html/changelogs/archive/" + filename))
+		return ui.send_asset(new /datum/asset/changelog_item(params["filename"]))
 
 /datum/changelog/ui_static_data()
 	var/list/data = list( "dates" = list() )

code/modules/asset_cache/asset_list.dm

@@ -248,6 +248,24 @@ GLOBAL_LIST_EMPTY(asset_datums)
 #undef SPRSZ_STRIPPED
 
 
+/datum/asset/changelog_item
+	_abstract = /datum/asset/changelog_item
+	var/item_filename
+
+/datum/asset/changelog_item/New(filename)
+	item_filename = filename
+	SSassets.transport.register_asset(item_filename, file("html/changelogs/archive/" + filename))
+
+/datum/asset/changelog_item/send(client)
+	if (!item_filename)
+		return
+	. = SSassets.transport.send_assets(client, item_filename)
+
+/datum/asset/changelog_item/get_url_mappings()
+	if (!item_filename)
+		return
+	. = list("[item_filename]" = SSassets.transport.get_asset_url(item_filename))
+
 /datum/asset/spritesheet/simple
 	_abstract = /datum/asset/spritesheet/simple
 	var/list/assets

code/modules/tgui/tgui_window.dm

@@ -246,24 +246,19 @@
  *
  * Makes an asset available to use in tgui.
  *
- * required asset
+ * required asset datum/asset
  *
  * return bool - TRUE if any assets had to be sent to the client
  */
-/datum/tgui_window/proc/send_asset(asset)
+/datum/tgui_window/proc/send_asset(datum/asset/asset)
 	if(!client || !asset)
 		return
-	if (istype(asset, /datum/asset))
-		var/datum/asset/current_asset = asset
-		sent_assets |= list(current_asset)
-		. = current_asset.send(client)
-		if(istype(current_asset, /datum/asset/spritesheet))
-			var/datum/asset/spritesheet/spritesheet = current_asset
-			send_message("asset/stylesheet", spritesheet.css_filename())
-		send_message("asset/mappings", current_asset.get_url_mappings())
-	else
-		client << browse_rsc(asset)
-		. = TRUE
+	sent_assets |= list(asset)
+	. = asset.send(client)
+	if(istype(asset, /datum/asset/spritesheet))
+		var/datum/asset/spritesheet/spritesheet = asset
+		send_message("asset/stylesheet", spritesheet.css_filename())
+	send_message("asset/mappings", asset.get_url_mappings())
 
 /**
  * private

tgui/packages/tgui/interfaces/Changelog.js

@@ -43,7 +43,7 @@ export class Changelog extends Component {
   constructor() {
     super();
     this.state = {
-      data: null,
+      data: 'Loading changelog data...',
       selectedDate: '',
       selectedIndex: 0,
     };
@@ -62,12 +62,12 @@ export class Changelog extends Component {
     this.setState({ selectedIndex });
   }
 
-  getData = (filename, attemptNumber = 1) => {
+  getData = (filename, attemptNumber = 0) => {
     const { act } = useBackend(this.context);
     const self = this;
 
-    if (attemptNumber > 3) {
-      return this.setData('error');
+    if (attemptNumber > 2) {
+      return this.setData('Failed to load data after 3 attempts');
     }
 
     act('get_month', { filename });
@@ -78,8 +78,11 @@ export class Changelog extends Component {
         const errorRegex = /^Cannot find/;
 
         if (errorRegex.test(result)) {
-          const timeout = attemptNumber * 1000;
+          const timeout = 250 + attemptNumber * 500;
 
+          self.setData(
+            'Loading changelog data' + '.'.repeat(attemptNumber + 3)
+          );
           setTimeout(() => {
             self.getData(filename, attemptNumber + 1);
           }, timeout);
@@ -107,7 +110,7 @@ export class Changelog extends Component {
     const { data: { dates } } = useBackend(this.context);
     const { dateChoices } = this;
 
-    const dateDropdown = dateChoices && (
+    const dateDropdown = dateChoices.length > 0 && (
       <Stack mb={1}>
         <Stack.Item>
           <Button
@@ -117,7 +120,7 @@ export class Changelog extends Component {
             onClick={() => {
               const index = selectedIndex - 1;
 
-              this.setData(null);
+              this.setData('Loading changelog data...');
               this.setSelectedIndex(index);
               this.setSelectedDate(dateChoices[index]);
               window.scrollTo(
@@ -135,7 +138,7 @@ export class Changelog extends Component {
             onSelected={value => {
               const index = dateChoices.indexOf(value);
 
-              this.setData(null);
+              this.setData('Loading changelog data...');
               this.setSelectedIndex(index);
               this.setSelectedDate(value);
               window.scrollTo(
@@ -156,7 +159,7 @@ export class Changelog extends Component {
             onClick={() => {
               const index = selectedIndex + 1;
 
-              this.setData(null);
+              this.setData('Loading changelog data...');
               this.setSelectedIndex(index);
               this.setSelectedDate(dateChoices[index]);
               window.scrollTo(
@@ -233,7 +236,7 @@ export class Changelog extends Component {
       </Section>
     );
 
-    const changes = data && (
+    const changes = typeof data === 'object' && Object.keys(data).length > 0 && (
       Object.entries(data).reverse().map(([date, authors]) => (
         <Section key={date} title={dateformat(date, 'd mmmm yyyy')}>
           <Box ml={3}>
@@ -256,12 +259,12 @@ export class Changelog extends Component {
                               color={
                                 icons[changeType]
                                   ? icons[changeType].color
-                                  : icons["unknown"].color
+                                  : icons['unknown'].color
                               }
                               name={
                                 icons[changeType]
                                   ? icons[changeType].icon
-                                  : icons["unknown"].icon
+                                  : icons['unknown'].icon
                               }
                             />
                           </Table.Cell>
@@ -285,8 +288,7 @@ export class Changelog extends Component {
         <Window.Content scrollable>
           {header}
           {changes}
-          {!data && <p>Loading changelog data...</p>}
-          {data === 'error' && <p>Failed to load data after 3 attempts</p>}
+          {typeof data === 'string' && <p>{data}</p>}
           {footer}
         </Window.Content>
       </Window>