Merge branch 'feat/status-bar' into moc

Author: martinjagodic

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

@@ -592,7 +592,8 @@ export default class API {
     });
 
     const filtered = pullRequests.filter(pr => {
-      return pr.labels.some(label => isCMSLabel(label.name, this.cmsLabelPrefix));
+      const labels = pr.labels ?? [];
+      return labels.some(label => isCMSLabel(label.name, this.cmsLabelPrefix));
     });
     return filtered;
   }

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

@@ -65,6 +65,13 @@ 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 +204,13 @@ 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 +240,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 +306,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 +321,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,6 +113,17 @@ export default class GraphQLAPI extends API {
         },
       };
     });
+
+    // Custom fetch that captures rate limit headers
+    // eslint-disable-next-line func-style
+    const fetchWithRateLimit = (uri: string, options: RequestInit) => {
+      return fetch(uri, options).then(response => {
+        // Extract rate limit info from response headers
+        this.extractRateLimitInfo(response.headers);
+        return response;
+      });
+    };
+
     // Always use direct GitHub API access for GraphQL
     // base_url is for OAuth endpoints only, not API requests
     // Ensure apiRoot is always the GitHub API endpoint
@@ -124,7 +135,7 @@ export default class GraphQLAPI extends API {
 
     const httpLink = createHttpLink({
       uri: graphqlEndpoint,
-      fetch, // Use global fetch
+      fetch: fetchWithRateLimit, // Use custom fetch to capture rate limit headers
     });
 
     // Implement intelligent cache with custom dataIdFromObject for better cache keys

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

@@ -69,6 +69,7 @@ export default class GitHub implements Implementation {
     API: API | null;
     useWorkflow?: boolean;
     initialWorkflowStatus: string;
+    dispatch?: any;
   };
   originRepo: string;
   isBranchConfigured: boolean;
@@ -387,6 +388,22 @@ export default class GitHub implements Implementation {
         }
       }
     }
+
+    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,
@@ -401,6 +418,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

@@ -259,6 +259,7 @@ interface BackendOptions {
   backendName: string;
   config: CmsConfig;
   authStore?: AuthStore;
+  dispatch?: any;
 }
 
 export interface MediaFile {
@@ -294,6 +295,7 @@ interface ImplementationInitOptions {
   useWorkflow: boolean;
   updateUserCredentials: (credentials: Credentials) => void;
   initialWorkflowStatus: string;
+  dispatch?: any;
 }
 
 type Implementation = BackendImplementation & {
@@ -383,14 +385,18 @@ 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;
@@ -1498,7 +1504,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');
   }
@@ -1510,18 +1516,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: {
@@ -35,6 +36,7 @@ const AppMainContainer = styled.div`
   min-width: 800px;
   max-width: 1440px;
   margin: 0 auto;
+  padding-bottom: 3rem;
 `;
 
 const ErrorContainer = styled.div`
@@ -253,6 +255,7 @@ class App extends React.Component {
           </Switch>
           {useMediaLibrary ? <MediaLibrary /> : null}
         </AppMainContainer>
+        <StatusBar />
       </>
     );
   }