Improves Rate Limit message accuracy, and fixes a bug with the deleted subscriptions status.

changelog/v0.0.36/rate-limit-display-updated-when-mixed.yaml

@@ -0,0 +1,10 @@
+changelog:
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/7043
+    description: >-
+      Updates the rate limit UI element to show mixed values when there is a App which
+      has multiple subscriptions with different rate limits.
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/7066
+    description: >-
+      Fixes a bug where subscriptions incorrectly showed up as deleted.

projects/ui/src/Apis/api-types.ts

@@ -2,6 +2,8 @@
 // Gloo Mesh Gateway Types
 //
 
+import { getEnumValues } from "../Utility/utility";
+
 type RateLimitPolicy = {
   unit: "UNKNOWN" | "SECOND" | "MINUTE" | "HOUR" | "DAY";
   requestsPerUnit: number;
@@ -171,25 +173,26 @@ export type OauthCredential = {
   idpClientName: string;
 };
 
-// This list of units is used both for the type and for the dropdown in the UI.
-const rateLimitUnits = [
+export enum RateLimitUnit {
   "UNKNOWN",
   "SECOND",
   "MINUTE",
   "HOUR",
   "DAY",
   "MONTH",
   "YEAR",
-] as const; // The 'as const' tells TypeScript to treat these as literal types
-export const rateLimitUnitOptions = rateLimitUnits.map((unit) => ({
-  value: unit,
-  label: unit,
-}));
-export type RateLimitUnit = (typeof rateLimitUnits)[number];
+}
+// This list of units is used both for the type and for the dropdown in the UI.
+export const rateLimitUnitOptions = getEnumValues(RateLimitUnit).map(
+  (unit) => ({
+    value: RateLimitUnit[unit],
+    label: RateLimitUnit[unit],
+  })
+);
 
 export type RateLimit = {
   requestsPerUnit: string;
-  unit: RateLimitUnit;
+  unit: string;
 };
 
 export type SubscriptionMetadata = {

projects/ui/src/Apis/gg_hooks.ts

@@ -56,7 +56,7 @@ export function useListFlatAppsForTeamsOmitErrors(teams: Team[]) {
   return { ...swrRes, data };
 }
 export function useGetAppDetails(id?: string) {
-  return useSwrWithAuth<App>(`/apps/${id}`);
+  return useSwrWithAuth<App>(`/apps/${id}`, id ?? null);
 }
 export function useListApiKeysForApp(appId: string) {
   return useSwrWithAuth<ApiKey[]>(`/apps/${appId}/api-keys`);
@@ -101,9 +101,11 @@ export function useListSubscriptionsForStatus(status: SubscriptionStatus) {
   }, [swrResponse]);
   return swrResponse;
 }
-export function useListSubscriptionsForApp(appId: string) {
+export function useListSubscriptionsForApp(appId: string | null) {
+  const endpoint = `/apps/${appId}/subscriptions`;
   const swrResponse = useSwrWithAuth<Subscription[] | SubscriptionsListError>(
-    `/apps/${appId}/subscriptions`
+    endpoint,
+    appId === null ? null : endpoint
   );
   useEffect(() => {
     if (isSubscriptionsListError(swrResponse.data)) {

projects/ui/src/Apis/utility.ts

@@ -69,7 +69,7 @@ export async function fetchJSON(...args: Parameters<typeof fetch>) {
  */
 export const useSwrWithAuth = <T>(
   path: string,
-  swrKey?: string,
+  swrKey?: string | null,
   config?: Parameters<typeof useSWR<T>>[2]
 ) => {
   const { latestAccessToken } = useContext(AuthContext);

projects/ui/src/Components/Apps/Details/MetadataSection/AppMetadataSection.tsx

@@ -3,7 +3,6 @@ import { App } from "../../../../Apis/api-types";
 import { DetailsPageStyles } from "../../../../Styles/shared/DetailsPageStyles";
 import { GridCardStyles } from "../../../../Styles/shared/GridCard.style";
 import { MetadataDisplay } from "../../../../Utility/AdminUtility/MetadataDisplay";
-import { EmptyData } from "../../../Common/EmptyData";
 
 const AppMetadataSection = ({ app }: { app: App }) => {
   //
@@ -14,17 +13,11 @@ const AppMetadataSection = ({ app }: { app: App }) => {
       <DetailsPageStyles.Title>Metadata</DetailsPageStyles.Title>
       <GridCardStyles.GridCard whiteBg wide>
         <Box px={"20px"} py={"25px"}>
-          {!!app.metadata?.rateLimit ? (
-            <MetadataDisplay
-              item={app}
-              customMetadata={app.metadata?.customMetadata}
-              rateLimitInfo={app.metadata?.rateLimit}
-            />
-          ) : (
-            <Box pt="10px">
-              <EmptyData title="No App metadata was found." />
-            </Box>
-          )}
+          <MetadataDisplay
+            item={app}
+            customMetadata={app.metadata?.customMetadata}
+            rateLimitInfo={app.metadata?.rateLimit}
+          />
         </Box>
       </GridCardStyles.GridCard>
     </DetailsPageStyles.Section>

projects/ui/src/Components/Common/SubscriptionsList/SubscriptionInfoCard/SubscriptionInfoCardAdminFooter.tsx

@@ -19,8 +19,6 @@ const SubscriptionInfoCardAdminFooter = ({
   const [showRejectSubModal, setShowRejectSubModal] = useState(false);
   const [showDeleteSubModal, setShowDeleteSubModal] = useState(false);
 
-  const canDeleteSubscription = subscriptionState !== SubscriptionState.DELETED;
-
   //
   // Render
   //
@@ -50,7 +48,6 @@ const SubscriptionInfoCardAdminFooter = ({
             <Button
               color="danger"
               size="xs"
-              disabled={!canDeleteSubscription}
               onClick={() => setShowDeleteSubModal(true)}
             >
               Delete

projects/ui/src/Components/Common/SubscriptionsList/SubscriptionsUtility.ts

@@ -5,7 +5,6 @@ export enum SubscriptionState {
   PENDING,
   APPROVED,
   REJECTED,
-  DELETED,
 }
 export const subscriptionStateMap = {
   [SubscriptionState.PENDING]: {
@@ -26,27 +25,15 @@ export const subscriptionStateMap = {
     accentColor: colors.darkRed,
     borderColor: colors.lightMidRed,
   },
-  [SubscriptionState.DELETED]: {
-    subscriptionState: SubscriptionState.DELETED,
-    label: "DELETED",
-    accentColor: colors.aprilGrey,
-    borderColor: colors.aprilGrey,
-  },
-};
-
-const dateHasValue = (dateString: string | undefined) => {
-  return !!dateString && new Date(dateString).getFullYear() !== 0;
 };
 
 export const GetSubscriptionState = (subscription: Subscription) => {
   if (!!subscription.approved) {
     return SubscriptionState.APPROVED;
   }
-  if (dateHasValue(subscription.deletedAt)) {
-    return SubscriptionState.DELETED;
-  }
   if (!!subscription.rejected) {
     return SubscriptionState.REJECTED;
   }
+  // Deleted subscriptions aren't returned from the API.
   return SubscriptionState.PENDING;
 };

projects/ui/src/Components/Common/WarningAlert.tsx

@@ -0,0 +1,38 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { WarningExclamation } from "../../Assets/Icons/Icons";
+import { borderRadiusConstants } from "../../Styles/constants";
+import { Color, svgColorReplace } from "../../Styles/utils";
+
+const AlertContainer = styled.div(
+  ({ theme }) => css`
+    padding: 12px;
+    background-color: ${theme.lightYellow};
+    border-radius: ${borderRadiusConstants.small};
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    ${svgColorReplace(theme.darkYellowDark20 as Color)};
+    > svg {
+      margin-right: 10px;
+      min-width: 24px;
+    }
+
+    * {
+      line-height: 1.3rem;
+      font-size: 0.95rem;
+      color: ${theme.darkYellowDark20};
+    }
+  `
+);
+
+export function WarningAlert(props: { children?: React.ReactNode }) {
+  return (
+    <AlertContainer>
+      <WarningExclamation width={"24px"} height={"24px"} />
+      <div>{props.children}</div>
+    </AlertContainer>
+  );
+}

projects/ui/src/Styles/colors.ts

@@ -80,7 +80,10 @@ const colorMap = {
   pumpkinOrangeLight10: Color(baseColors.pumpkinOrange).lighten(0.1).hex(),
   pumpkinOrangeLight20: Color(baseColors.pumpkinOrange).lighten(0.2).hex(),
 
+  lightYellowLight1: Color(baseColors.lightYellow).lighten(0.02).hex(),
   midYellowDark20: Color(baseColors.midYellow).darken(0.2).hex(),
+  darkYellowDark10: Color(baseColors.darkYellow).darken(0.1).hex(),
+  darkYellowDark20: Color(baseColors.darkYellow).darken(0.2).hex(),
 } as const;
 
 const semanticColorMap = {

projects/ui/src/Styles/global-styles/index.ts

@@ -7,7 +7,7 @@ import "./style-reset.css";
 // prettier-ignore
 import "./fontFace.css";
 // prettier-ignore
-import "./graphiql.min.css";
+// import "./graphiql.min.css";
 // prettier-ignore
 import "./highlight.js.min.css";
 

projects/ui/src/Utility/AdminUtility/MetadataDisplay.tsx

@@ -1,8 +1,10 @@
 import { Box } from "@mantine/core";
 import { useEffect, useState } from "react";
 import { App, RateLimit, Subscription } from "../../Apis/api-types";
+import { useIsAdmin } from "../../Context/AuthContext";
+import { useInArea } from "../utility";
 import { CustomMetadataEditor } from "./CustomMetadataEditor";
-import { RateLimitEditor } from "./RateLimitEditor";
+import { RateLimitSection } from "./RateLimitSection";
 
 export interface SharedMetadataProps {
   item: App | Subscription;
@@ -21,37 +23,50 @@ export const MetadataDisplay = ({
 }: SharedMetadataProps & {
   onIsWideChange?: (newIsWide: boolean) => void;
 }) => {
+  const isAdmin = useIsAdmin();
   const [isEditingCustomMetadata, setIsEditingCustomMetadata] = useState(false);
   const [isEditingRateLimit, setIsEditingRateLimit] = useState(false);
 
   useEffect(() => {
     onIsWideChange?.(isEditingCustomMetadata || isEditingCustomMetadata);
   }, [isEditingCustomMetadata, isEditingRateLimit]);
 
+  const inAppDetailsPage = useInArea([`apps/${props.item.id}`]);
+  const isSubscription = "apiProductId" in props.item;
+
+  // This component is reused for apps and subscription rate limit & metadata.
+  // Here we show the rate limit when:
+  // - This is an admin
+  // - We are on the app details page
+  // - This is a subscription
+  const showingRateLimit = !!isAdmin || inAppDetailsPage || isSubscription;
+
   return (
-    <Box sx={{ textAlign: "left" }}>
-      <Box mb={!!customMetadata || !!isEditingCustomMetadata ? "10px" : "0px"}>
-        <CustomMetadataEditor
-          isEditingCustomMetadata={isEditingCustomMetadata}
-          onIsEditingCustomMetadataChange={(value) =>
-            setIsEditingCustomMetadata(value)
-          }
-          customMetadata={customMetadata}
-          rateLimitInfo={rateLimitInfo}
-          {...props}
-        />
-      </Box>
-      <Box mb="10px">
-        <RateLimitEditor
-          isEditingRateLimit={isEditingRateLimit}
-          onIsEditingRateLimitChange={(newIsEditingRateLimit) =>
-            setIsEditingRateLimit(newIsEditingRateLimit)
-          }
-          customMetadata={customMetadata}
-          rateLimitInfo={rateLimitInfo}
-          {...props}
-        />
-      </Box>
+    <Box sx={{ textAlign: "left", width: "100%" }}>
+      <CustomMetadataEditor
+        isEditingCustomMetadata={isEditingCustomMetadata}
+        onIsEditingCustomMetadataChange={(value) =>
+          setIsEditingCustomMetadata(value)
+        }
+        customMetadata={customMetadata}
+        rateLimitInfo={rateLimitInfo}
+        {...props}
+      />
+      {showingRateLimit && (
+        <Box mb="10px">
+          <RateLimitSection
+            inAppDetailsPage={inAppDetailsPage}
+            isSubscription={isSubscription}
+            isEditingRateLimit={isEditingRateLimit}
+            onIsEditingRateLimitChange={(newIsEditingRateLimit) =>
+              setIsEditingRateLimit(newIsEditingRateLimit)
+            }
+            customMetadata={customMetadata}
+            rateLimitInfo={rateLimitInfo}
+            {...props}
+          />
+        </Box>
+      )}
     </Box>
   );
 };