add retry button for virtual project metrics

Author: CollinBeczak

src/components/AdminPane/HOCs/WithCurrentProject/WithCurrentProject.jsx

@@ -179,7 +179,11 @@ export const WithCurrentProject = function (WrappedComponent, options = {}) {
     };
 
     loadChallengeStats = (project) => {
-      this.setState({ loadingChallengeStats: true, challengeStatsAvailable: true });
+      this.setState({ 
+        loadingChallengeStats: true, 
+        challengeStatsAvailable: true,
+        challengeStatsError: null 
+      });
 
       // Used for burndown chart
       let activityStartDate = new Date(project.created);
@@ -197,7 +201,24 @@ export const WithCurrentProject = function (WrappedComponent, options = {}) {
           this.props.fetchLatestProjectChallengeActivity(project.id),
         ];
 
-        return Promise.all(promises).then(() => this.setState({ loadingChallengeStats: false }));
+        return Promise.all(promises)
+          .then(() => this.setState({ loadingChallengeStats: false }))
+          .catch((error) => {
+            console.error('Error loading challenge stats:', error);
+            
+            // Check if it's a timeout error
+            const isTimeout = error?.response?.status === 504 || 
+                            error?.message?.includes('timeout') ||
+                            error?.code === 'QUERY_TIMEOUT';
+            
+            this.setState({ 
+              loadingChallengeStats: false,
+              challengeStatsAvailable: false,
+              challengeStatsError: isTimeout ? 
+                'The virtual project is too large and the request timed out. Please try again later or contact support.' :
+                'An error occurred while loading completion stats. Please try again.'
+            });
+          });
       } else {
         this.setState({
           loadingChallengeStats: false,

src/components/Widgets/CompletionProgressWidget/CompletionProgressWidget.jsx

@@ -41,6 +41,21 @@ export default class CompletionProgressWidget extends Component {
             {window.env.REACT_APP_PROJECT_CHALLENGE_LIMIT} challenges.
           </div>
         );
+      } else if (this.props.challengeStatsError) {
+        content = (
+          <div>
+            <div className="mr-text-red mr-mb-4">
+              {this.props.challengeStatsError}
+            </div>
+            <button
+              type="button"
+              className="mr-button"
+              onClick={() => this.props.loadChallengeStats(this.props.project)}
+            >
+              <FormattedMessage {...messages.retryLabel} />
+            </button>
+          </div>
+        );
       } else if (!this.props.challengeStatsAvailable) {
         content = (
           <button

src/components/Widgets/CompletionProgressWidget/Messages.js

@@ -23,4 +23,9 @@ export default defineMessages({
     id: "Widgets.BurndownChartWidget.controls.loadStats.label",
     defaultMessage: "Load Completion Stats",
   },
+
+  retryLabel: {
+    id: "Widgets.CompletionProgressWidget.controls.retry.label",
+    defaultMessage: "Retry",
+  },
 });