feat: add status bar

Author: martinjagodic

packages/decap-cms-backend-github/src/API.ts

@@ -65,6 +65,7 @@ export interface Config {
   cmsLabelPrefix: string;
   baseUrl?: string;
   getUser: ({ token }: { token: string }) => Promise<GitHubUser>;
+  onRateLimitInfo?: (info: { used: number; limit: number; remaining: number; reset: number; resource: string }) => void;
 }
 
 interface TreeFile {
@@ -197,6 +198,7 @@ export default class API {
   cmsLabelPrefix: string;
   baseUrl?: string;
   getUser: ({ token }: { token: string }) => Promise<GitHubUser>;
+  onRateLimitInfo?: (info: { used: number; limit: number; remaining: number; reset: number; resource: string }) => void;
   _userPromise?: Promise<GitHubUser>;
   _metadataSemaphore?: Semaphore;
 
@@ -226,6 +228,7 @@ export default class API {
     this.initialWorkflowStatus = config.initialWorkflowStatus;
     this.baseUrl = config.baseUrl;
     this.getUser = config.getUser;
+    this.onRateLimitInfo = config.onRateLimitInfo;
   }
 
   static DEFAULT_COMMIT_MESSAGE = 'Automatically generated by Decap CMS';
@@ -291,6 +294,8 @@ export default class API {
   }
 
   parseResponse(response: Response) {
+    this.extractRateLimitInfo(response.headers);
+
     const contentType = response.headers.get('Content-Type');
     if (contentType && contentType.match(/json/)) {
       return this.parseJsonResponse(response);
@@ -304,6 +309,28 @@ export default class API {
     return textPromise;
   }
 
+  protected extractRateLimitInfo(headers: Headers) {
+    if (!this.onRateLimitInfo) {
+      return;
+    }
+
+    const used = headers.get('x-ratelimit-used');
+    const limit = headers.get('x-ratelimit-limit');
+    const remaining = headers.get('x-ratelimit-remaining');
+    const reset = headers.get('x-ratelimit-reset');
+    const resource = headers.get('x-ratelimit-resource');
+
+    if (used && limit && remaining && reset && resource) {
+      this.onRateLimitInfo({
+        used: parseInt(used, 10),
+        limit: parseInt(limit, 10),
+        remaining: parseInt(remaining, 10),
+        reset: parseInt(reset, 10),
+        resource,
+      });
+    }
+  }
+
   handleRequestError(error: FetchError, responseStatus: number) {
     throw new APIError(error.message, responseStatus, API_NAME);
   }

packages/decap-cms-backend-github/src/GraphQLAPI.ts

@@ -113,7 +113,21 @@ export default class GraphQLAPI extends API {
         },
       };
     });
-    const httpLink = createHttpLink({ uri: `${this.apiRoot}/graphql` });
+
+    // Custom fetch that captures rate limit headers
+    function fetchWithRateLimit(uri: string, options: RequestInit) {
+      return fetch(uri, options).then(response => {
+        // Extract rate limit info from response headers
+        this.extractRateLimitInfo(response.headers);
+        return response;
+      });
+    }
+
+    const httpLink = createHttpLink({
+      uri: `${this.apiRoot}/graphql`,
+      fetch: fetchWithRateLimit as any,
+    });
+
     return new ApolloClient({
       link: authLink.concat(httpLink),
       cache: new InMemoryCache({ fragmentMatcher }),

packages/decap-cms-backend-github/src/implementation.tsx

@@ -67,6 +67,7 @@ export default class GitHub implements Implementation {
     API: API | null;
     useWorkflow?: boolean;
     initialWorkflowStatus: string;
+    dispatch?: any;
   };
   originRepo: string;
   isBranchConfigured: boolean;
@@ -333,6 +334,16 @@ export default class GitHub implements Implementation {
         this.branch = repoInfo.default_branch;
       }
     }
+
+    const onRateLimitInfo = this.options.dispatch
+      ? (info: { used: number; limit: number; remaining: number; reset: number; resource: string }) => {
+          this.options.dispatch!({
+            type: 'SET_RATE_LIMIT_INFO',
+            payload: { rateLimitInfo: info },
+          });
+        }
+      : undefined;
+
     const apiCtor = this.useGraphql ? GraphQLAPI : API;
     this.api = new apiCtor({
       token: this.token,
@@ -347,6 +358,7 @@ export default class GitHub implements Implementation {
       initialWorkflowStatus: this.options.initialWorkflowStatus,
       baseUrl: this.baseUrl,
       getUser: this.currentUser,
+      onRateLimitInfo,
     });
     const user = await this.api!.user();
     const isCollab = await this.api!.hasWriteAccess().catch(error => {

packages/decap-cms-backend-github/src/rateLimitLink.ts

@@ -0,0 +1,37 @@
+/**
+ * Rate limit info type and callback
+ */
+export interface RateLimitCallback {
+  (rateLimitInfo: RateLimitInfo): void;
+}
+
+export interface RateLimitInfo {
+  used: number;
+  limit: number;
+  remaining: number;
+  reset: number;
+  resource: string;
+}
+
+/**
+ * Extracts rate limit information from response headers
+ */
+export function extractRateLimitInfo(headers: Headers): RateLimitInfo | null {
+  const used = headers.get('x-ratelimit-used');
+  const limit = headers.get('x-ratelimit-limit');
+  const remaining = headers.get('x-ratelimit-remaining');
+  const reset = headers.get('x-ratelimit-reset');
+  const resource = headers.get('x-ratelimit-resource');
+
+  if (!used || !limit || !remaining || !reset || !resource) {
+    return null;
+  }
+
+  return {
+    used: parseInt(used, 10),
+    limit: parseInt(limit, 10),
+    remaining: parseInt(remaining, 10),
+    reset: parseInt(reset, 10),
+    resource,
+  };
+}

packages/decap-cms-core/src/actions/auth.ts

@@ -52,11 +52,10 @@ export function logout() {
   } as const;
 }
 
-// Check if user data token is cached and is valid
 export function authenticateUser() {
   return (dispatch: ThunkDispatch<State, {}, AnyAction>, getState: () => State) => {
     const state = getState();
-    const backend = currentBackend(state.config);
+    const backend = currentBackend(state.config, dispatch);
     dispatch(authenticating());
     return Promise.resolve(backend.currentUser())
       .then(user => {
@@ -79,7 +78,7 @@ export function authenticateUser() {
 export function loginUser(credentials: Credentials) {
   return (dispatch: ThunkDispatch<State, {}, AnyAction>, getState: () => State) => {
     const state = getState();
-    const backend = currentBackend(state.config);
+    const backend = currentBackend(state.config, dispatch);
 
     dispatch(authenticating());
     return backend

packages/decap-cms-core/src/actions/status.ts

@@ -4,10 +4,12 @@ import { addNotification, dismissNotification } from './notifications';
 import type { ThunkDispatch } from 'redux-thunk';
 import type { AnyAction } from 'redux';
 import type { State } from '../types/redux';
+import type { RateLimitInfo } from '../reducers/status';
 
 export const STATUS_REQUEST = 'STATUS_REQUEST';
 export const STATUS_SUCCESS = 'STATUS_SUCCESS';
 export const STATUS_FAILURE = 'STATUS_FAILURE';
+export const SET_RATE_LIMIT_INFO = 'SET_RATE_LIMIT_INFO';
 
 export function statusRequest() {
   return {
@@ -32,6 +34,13 @@ export function statusFailure(error: Error) {
   } as const;
 }
 
+export function setRateLimitInfo(rateLimitInfo: RateLimitInfo) {
+  return {
+    type: SET_RATE_LIMIT_INFO,
+    payload: { rateLimitInfo },
+  } as const;
+}
+
 export function checkBackendStatus() {
   return async (dispatch: ThunkDispatch<State, {}, AnyAction>, getState: () => State) => {
     try {
@@ -95,5 +104,5 @@ export function checkBackendStatus() {
 }
 
 export type StatusAction = ReturnType<
-  typeof statusRequest | typeof statusSuccess | typeof statusFailure
+  typeof statusRequest | typeof statusSuccess | typeof statusFailure | typeof setRateLimitInfo
 >;

packages/decap-cms-core/src/backend.ts

@@ -256,6 +256,7 @@ interface BackendOptions {
   backendName: string;
   config: CmsConfig;
   authStore?: AuthStore;
+  dispatch?: any;
 }
 
 export interface MediaFile {
@@ -291,6 +292,7 @@ interface ImplementationInitOptions {
   useWorkflow: boolean;
   updateUserCredentials: (credentials: Credentials) => void;
   initialWorkflowStatus: string;
+  dispatch?: any;
 }
 
 type Implementation = BackendImplementation & {
@@ -354,14 +356,15 @@ export class Backend {
   user?: User | null;
   backupSync: AsyncLock;
 
-  constructor(implementation: Implementation, { backendName, authStore, config }: BackendOptions) {
+  constructor(implementation: Implementation, { backendName, authStore, config, dispatch }: BackendOptions) {
     // We can't reliably run this on exit, so we do cleanup on load.
     this.deleteAnonymousBackup();
     this.config = config;
     this.implementation = implementation.init(this.config, {
       useWorkflow: selectUseWorkflow(this.config),
       updateUserCredentials: this.updateUserCredentials,
       initialWorkflowStatus: status.first(),
+      dispatch,
     });
     this.backendName = backendName;
     this.authStore = authStore;
@@ -1369,7 +1372,7 @@ export class Backend {
   }
 }
 
-export function resolveBackend(config: CmsConfig) {
+export function resolveBackend(config: CmsConfig, dispatch?: any) {
   if (!config.backend.name) {
     throw new Error('No backend defined in configuration');
   }
@@ -1381,18 +1384,18 @@ export function resolveBackend(config: CmsConfig) {
   if (!backend) {
     throw new Error(`Backend not found: ${name}`);
   } else {
-    return new Backend(backend, { backendName: name, authStore, config });
+    return new Backend(backend, { backendName: name, authStore, config, dispatch });
   }
 }
 
 export const currentBackend = (function () {
   let backend: Backend;
 
-  return (config: CmsConfig) => {
+  return (config: CmsConfig, dispatch?: any) => {
     if (backend) {
       return backend;
     }
 
-    return (backend = resolveBackend(config));
+    return (backend = resolveBackend(config, dispatch));
   };
 })();

packages/decap-cms-core/src/components/App/App.js

@@ -21,6 +21,7 @@ import Workflow from '../Workflow/Workflow';
 import Editor from '../Editor/Editor';
 import NotFoundPage from './NotFoundPage';
 import Header from './Header';
+import StatusBar from './StatusBar';
 
 TopBarProgress.config({
   barColors: {
@@ -253,6 +254,7 @@ class App extends React.Component {
           </Switch>
           {useMediaLibrary ? <MediaLibrary /> : null}
         </AppMainContainer>
+        <StatusBar />
       </>
     );
   }

packages/decap-cms-core/src/components/App/StatusBar.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { translate } from 'react-polyglot';
+import { connect } from 'react-redux';
+
+const StatusBarContainer = styled.footer`
+  width: 100%;
+  border-top: 1px solid darkgray;
+  padding: 12px 24px;
+  font-size: 12px;
+  display: flex;
+  gap: 16px;
+`;
+
+import type { State } from '../../types/redux';
+
+interface StatusBarProps {
+  rateLimitInfo?: {
+    used: number;
+    limit: number;
+    remaining: number;
+    reset: number;
+    resource: string;
+  };
+  appVersion?: string;
+  backendName?: string;
+  t: (key: string) => string,
+}
+
+function formatResetTime(resetTimestamp: number): string {
+  const date = new Date(resetTimestamp * 1000);
+  return date.toLocaleTimeString('en-US', { hour12: false });
+}
+
+function formatPercentage(used: number, limit: number): string {
+  const percentage = limit > 0 ? Math.round((used / limit) * 10) / 10 : 0;
+  return percentage.toString().replace('.', ',');
+}
+
+function StatusBar({ rateLimitInfo, appVersion, backendName, t}: StatusBarProps) {
+  return (
+    <StatusBarContainer>
+      {appVersion && (
+        <span>Decap CMS {appVersion}</span>
+      )}
+
+      {backendName && (
+        <span>{backendName} {t('app.statusBar.backend')}</span>
+      )}
+
+      {rateLimitInfo && (
+        <span>
+          {rateLimitInfo.used} / {rateLimitInfo.limit} ({formatPercentage(rateLimitInfo.used, rateLimitInfo.limit)}%) {t('app.statusBar.requestsUsed')}, {t('app.statusBar.resetAt')} {formatResetTime(rateLimitInfo.reset)}
+        </span>
+      )}
+    </StatusBarContainer>
+  );
+}
+
+function mapStateToProps(state: State) {
+  return {
+    rateLimitInfo: state.status?.rateLimitInfo,
+    backendName: state.config?.backend?.name,
+  };
+}
+
+export default connect(mapStateToProps)(translate()(StatusBar));