empty data rename

Signed-off-by: Nicholas Bucher <[email protected]>

Author: Charlesthebird

projects/ui/src/Components/ApiDetails/gloo-gateway-components/ApiProductDetailsPageBody.tsx

@@ -7,7 +7,7 @@ import {
   ApiVersionSchema,
 } from "../../../Apis/api-types";
 import { ContentWidthDiv } from "../../../Styles/ContentWidthHelpers";
-import { SimpleEmptyContent } from "../../Common/EmptyData";
+import { EmptyData } from "../../Common/EmptyData";
 import DocsTabContent from "./DocsTab/DocsTabContent";
 import SchemaTabContent from "./SchemaTab/SchemaTabContent";
 
@@ -80,17 +80,16 @@ export function ApiProductDetailsPageBody({
           {includesDocumentation ? (
             <DocsTabContent selectedApiVersion={selectedApiVersion} />
           ) : (
-            <SimpleEmptyContent title="No documentation found.">
+            <EmptyData title="No documentation found.">
               <small>
                 You may add documentation for this API in the{" "}
-                <Code sx={{ whiteSpace: "nowrap" }}>
+                <Code>
                   spec.versions[your-version].openapiMetadata.description
                 </Code>{" "}
-                field of this{" "}
-                <Code sx={{ whiteSpace: "nowrap" }}>ApiProduct</Code> resource.
-                Markdown is supported.
+                field of this <Code>ApiProduct</Code> resource. Markdown is
+                supported.
               </small>
-            </SimpleEmptyContent>
+            </EmptyData>
           )}
         </Tabs.Panel>
       </Tabs>

projects/ui/src/Components/ApiDetails/gloo-gateway-components/SchemaTab/SchemaTabContent.tsx

@@ -1,6 +1,6 @@
 import { Box, Code } from "@mantine/core";
 import { ApiVersion, ApiVersionSchema } from "../../../../Apis/api-types";
-import { SimpleEmptyContent } from "../../../Common/EmptyData";
+import { EmptyData } from "../../../Common/EmptyData";
 import { ErrorBoundary } from "../../../Common/ErrorBoundary";
 import { ApiSchemaDisplay } from "./ApiSchemaDisplay";
 
@@ -16,10 +16,10 @@ const SchemaTabContent = ({
   if (!apiProductVersions.length) {
     return (
       <Box m="60px">
-        <SimpleEmptyContent title={`No API versions found.`}>
+        <EmptyData title={`No API versions found.`}>
           Add a version to the <Code>spec.versions</Code> field of this{" "}
           <Code>ApiProduct</Code> for data to appear.
-        </SimpleEmptyContent>
+        </EmptyData>
       </Box>
     );
   }
@@ -31,13 +31,13 @@ const SchemaTabContent = ({
     // There is a selected API version, but no schema.
     return (
       <Box m="60px">
-        <SimpleEmptyContent title={`No schema found.`}>
+        <EmptyData title={`No schema found.`}>
           The schema was not returned for this <Code>ApiProduct</Code> version.
           <br />
           Verify that your OpenApi spec was generated correctly in the
           corresponding <Code>ApiDoc</Code> resource for this{" "}
           <Code>Service</Code>.
-        </SimpleEmptyContent>
+        </EmptyData>
       </Box>
     );
   }

projects/ui/src/Components/Apis/EmptyApisPage.tsx

@@ -5,7 +5,7 @@ import { AuthContext } from "../../Context/AuthContext";
 import { apisImageURL } from "../../user_variables.tmplr";
 import { BannerHeading } from "../Common/Banner/BannerHeading";
 import { BannerHeadingTitle } from "../Common/Banner/BannerHeadingTitle";
-import { SimpleEmptyContent } from "../Common/EmptyData";
+import { EmptyData } from "../Common/EmptyData";
 import { PageContainer } from "../Common/PageContainer";
 import { StyledApisListMain } from "./gloo-mesh-gateway-components/ApisPage.style";
 
@@ -31,19 +31,15 @@ export const EmptyApisPageContent = () => {
   const { isLoggedIn } = useContext(AuthContext);
 
   if (!!isLoggedIn)
-    return (
-      <SimpleEmptyContent>
-        No API Products have been created.
-      </SimpleEmptyContent>
-    );
+    return <EmptyData>No API Products have been created.</EmptyData>;
   return (
-    <SimpleEmptyContent title="No API Products were found.">
+    <EmptyData title="No API Products were found.">
       <small>
         To view API Products in private Portals, please log in.
         <br />
         To view API Products in public Portals, the Portal resource must have{" "}
         <Code>spec.visibility.public = true</Code>.
       </small>
-    </SimpleEmptyContent>
+    </EmptyData>
   );
 };

projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApisList.tsx

@@ -12,7 +12,7 @@ import CustomPagination, {
   pageOptions,
   useCustomPagination,
 } from "../../../Common/CustomPagination";
-import { SimpleEmptyContent } from "../../../Common/EmptyData";
+import { EmptyData } from "../../../Common/EmptyData";
 import { Loading } from "../../../Common/Loading";
 import { ApisPageStyles } from "../../ApisPage.style";
 import { ApiSummaryGridCard } from "./ApiSummaryCards/ApiSummaryGridCard";
@@ -79,11 +79,11 @@ export function ApisList({
     return <Loading message="Getting list of apis..." />;
   }
   if (!apiProductsList.length) {
-    return <SimpleEmptyContent title="No API Products were found." />;
+    return <EmptyData title="No API Products were found." />;
   }
   if (!filteredApiProductsList.length) {
     return (
-      <SimpleEmptyContent title="No API Products were found matching these filters." />
+      <EmptyData title="No API Products were found matching these filters." />
     );
   }
   if (preferGridView) {

projects/ui/src/Components/Apis/gloo-mesh-gateway-components/ApisList.tsx

@@ -7,7 +7,7 @@ import CustomPagination, {
   pageOptions,
   useCustomPagination,
 } from "../../Common/CustomPagination";
-import { SimpleEmptyContent } from "../../Common/EmptyData";
+import { EmptyData } from "../../Common/EmptyData";
 import { Loading } from "../../Common/Loading";
 import { ApiSummaryGridCard } from "./ApiSummaryGridCard";
 import { ApiSummaryListCard } from "./ApiSummaryListCard";
@@ -72,9 +72,7 @@ export function ApisList({
   }
 
   if (!displayedApisList.length) {
-    return (
-      <SimpleEmptyContent title="No APIs were found matching these filters." />
-    );
+    return <EmptyData title="No APIs were found matching these filters." />;
   }
   return (
     <>

projects/ui/src/Components/Apps/Details/ApiKeysSection/AppApiKeysSection.tsx

@@ -16,7 +16,7 @@ import CustomPagination, {
   pageOptions,
   useCustomPagination,
 } from "../../../Common/CustomPagination";
-import { SimpleEmptyContent } from "../../../Common/EmptyData";
+import { EmptyData } from "../../../Common/EmptyData";
 import { Loading } from "../../../Common/Loading";
 import Table from "../../../Common/Table";
 import ToggleAddButton from "../../../Common/ToggleAddButton";
@@ -87,7 +87,7 @@ const AppApiKeysSection = ({ app }: { app: App }) => {
       />
       {!apiKeys?.length ? (
         <Box mb={"-30px"} mt={"10px"}>
-          <SimpleEmptyContent title="No API Keys were found." />
+          <EmptyData title="No API Keys were found." />
         </Box>
       ) : (
         <Box pt={"5px"}>

projects/ui/src/Components/Apps/Details/ApiSubscriptionsSection/AppApiSubscriptionsSection.tsx

@@ -5,7 +5,7 @@ import { Icon } from "../../../../Assets/Icons";
 import { DetailsPageStyles } from "../../../../Styles/shared/DetailsPageStyles";
 import { UtilityStyles } from "../../../../Styles/shared/Utility.style";
 import { Button } from "../../../Common/Button";
-import { SimpleEmptyContent } from "../../../Common/EmptyData";
+import { EmptyData } from "../../../Common/EmptyData";
 import SubscriptionInfoCard from "../../../Common/SubscriptionsList/SubscriptionInfoCard/SubscriptionInfoCard";
 import NewSubscriptionModal from "../Modals/NewSubscriptionModal";
 
@@ -44,7 +44,7 @@ const AppApiSubscriptionsSection = ({
       </Flex>
       {subscriptions.length === 0 && (
         <Box pt="10px">
-          <SimpleEmptyContent title="No API Subscriptions were found." />
+          <EmptyData title="No API Subscriptions were found." />
         </Box>
       )}
       <Box pt={"5px"}>

projects/ui/src/Components/Apps/PageContent/AppsList.tsx

@@ -4,7 +4,7 @@ import { App, Team } from "../../../Apis/api-types";
 import { useListAppsForTeams } from "../../../Apis/gg_hooks";
 import { FilterPair, FilterType } from "../../../Utility/filter-utility";
 import { omitErrorMessageResponse } from "../../../Utility/utility";
-import { SimpleEmptyContent } from "../../Common/EmptyData";
+import { EmptyData } from "../../Common/EmptyData";
 import { Loading } from "../../Common/Loading";
 import { AppsPageStyles } from "../AppsPage.style";
 import { AppSummaryGridCard } from "./AppSummaryCards/AppSummaryGridCard";
@@ -86,12 +86,10 @@ export function AppsList({
     return <Loading message="Getting list of apps..." />;
   }
   if (!appsList?.length) {
-    return <SimpleEmptyContent title="No Apps were found." />;
+    return <EmptyData title="No Apps were found." />;
   }
   if (!filteredAppsList.length) {
-    return (
-      <SimpleEmptyContent title="No Apps were found matching these filters." />
-    );
+    return <EmptyData title="No Apps were found matching these filters." />;
   }
   return (
     <AppsPageStyles.AppGridList>

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

@@ -18,7 +18,7 @@ const StyledEmptyContentOuter = styled.div(
   `
 );
 
-export const SimpleEmptyContent = (props: {
+export const EmptyData = (props: {
   children?: React.ReactNode;
   title?: React.ReactNode;
 }) => {

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

@@ -5,7 +5,7 @@ import {
   isSubscriptionsListError,
 } from "../../../Apis/api-types";
 import { colors } from "../../../Styles";
-import { SimpleEmptyContent } from "../../Common/EmptyData";
+import { EmptyData } from "../../Common/EmptyData";
 import { FiltrationProp } from "../Filters/AppliedFiltersSection";
 import SubscriptionInfoCard from "./SubscriptionInfoCard/SubscriptionInfoCard";
 
@@ -35,7 +35,7 @@ const SubscriptionsList = ({
     return null;
   }
   if (subscriptions.length === 0) {
-    return <SimpleEmptyContent title="No Subscriptions were found." />;
+    return <EmptyData title="No Subscriptions were found." />;
   }
   return (
     <Box pb={"60px"}>

projects/ui/src/Components/Teams/Details/AppsSection/TeamAppsSection.tsx

@@ -14,7 +14,7 @@ import CustomPagination, {
   pageOptions,
   useCustomPagination,
 } from "../../../Common/CustomPagination";
-import { SimpleEmptyContent } from "../../../Common/EmptyData";
+import { EmptyData } from "../../../Common/EmptyData";
 import { Loading } from "../../../Common/Loading";
 import Table from "../../../Common/Table";
 import ToggleAddButton from "../../../Common/ToggleAddButton";
@@ -86,7 +86,7 @@ const TeamAppsSection = ({ team }: { team: Team }) => {
       )}
       {!apps?.length ? (
         <Box mb={"-30px"} mt={"30px"}>
-          <SimpleEmptyContent title="No Apps were found." />
+          <EmptyData title="No Apps were found." />
         </Box>
       ) : (
         <Box pt={"5px"}>

projects/ui/src/Components/Teams/Details/UsersSection/TeamUsersSection.tsx

@@ -16,7 +16,7 @@ import CustomPagination, {
   pageOptions,
   useCustomPagination,
 } from "../../../Common/CustomPagination";
-import { SimpleEmptyContent } from "../../../Common/EmptyData";
+import { EmptyData } from "../../../Common/EmptyData";
 import { Loading } from "../../../Common/Loading";
 import Table from "../../../Common/Table";
 import ToggleAddButton from "../../../Common/ToggleAddButton";
@@ -101,7 +101,7 @@ const TeamUsersSection = ({ team }: { team: Team }) => {
       {!members?.length ? (
         <Box mb={"-30px"}>
           {/* We never should get here, since the user must be a member. */}
-          <SimpleEmptyContent title="No were found in this Team." />
+          <EmptyData title="No were found in this Team." />
         </Box>
       ) : (
         <Box pt={"5px"}>

projects/ui/src/Components/Teams/TeamsList/TeamsList.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex } from "@mantine/core";
 import { di } from "react-magnetic-di";
 import { useListTeams } from "../../../Apis/gg_hooks";
-import { SimpleEmptyContent } from "../../Common/EmptyData";
+import { EmptyData } from "../../Common/EmptyData";
 import { Loading } from "../../Common/Loading";
 import { TeamSummaryGridCard } from "./TeamSummaryCards/TeamSummaryGridCard";
 
@@ -16,7 +16,7 @@ export function TeamsList() {
     return <Loading message="Getting list of teams..." />;
   }
   if (!teamsList?.length) {
-    return <SimpleEmptyContent title="No Teams were found." />;
+    return <EmptyData title="No Teams were found." />;
   }
   return (
     <Box mb="30px">

projects/ui/src/Components/UsagePlans/UsagePlanList/APIUsagePlansList.tsx

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { di } from "react-magnetic-di";
 import { API } from "../../../Apis/api-types";
 import { useListApis } from "../../../Apis/shared_hooks";
-import { SimpleEmptyContent } from "../../Common/EmptyData";
+import { EmptyData } from "../../Common/EmptyData";
 import { ErrorBoundary } from "../../Common/ErrorBoundary";
 import { Loading } from "../../Common/Loading";
 import { APIUsagePlanCard } from "./APIUsagePlanCard";
@@ -46,7 +46,7 @@ export function APIUsagePlansList() {
           </ErrorBoundary>
         ))
       ) : (
-        <SimpleEmptyContent title="No API Products were found." />
+        <EmptyData title="No API Products were found." />
       )}
     </>
   );

projects/ui/src/Styles/global-styles/mantine-overrides.style.ts

@@ -66,5 +66,6 @@ export const mantineGlobalStyles = css`
 
   code.mantine-Code-root {
     background-color: ${colors.januaryGreyDark1};
+    white-space: nowrap;
   }
 `;