Merge branch 'release-0.12.5'

docs/content/sdk/golang.md

@@ -91,7 +91,7 @@ go run main.go
 
 If you see a message like the following, then congratulations! You've successfully connected to Ensign!
 
-```HEALTHY 0.12.4-beta.18 ([GIT HASH])```
+```HEALTHY 0.12.5-beta.20 ([GIT HASH])```
 
 ### Make Some Data
 

docs/content/sdk/python.md

@@ -75,7 +75,7 @@ If you see a message like the following, then congratulations! You've successful
 
 ```
 status: 1
-version: 0.12.4-beta.18 ([GIT HASH])
+version: 0.12.5-beta.20 ([GIT HASH])
 uptime: seconds: 130150
 nanos: 862300696
 ```

pkg/quarterdeck/auth.go

@@ -373,12 +373,14 @@ func (s *Server) Authenticate(c *gin.Context) {
 	}
 
 	// Create the access and refresh tokens and return them.
+	// TODO: add account type from database rather than hardcoding "sandbox"
 	claims := &tokens.Claims{
 		RegisteredClaims: jwt.RegisteredClaims{
 			Subject: apikey.ID.String(),
 		},
-		OrgID:     apikey.OrgID.String(),
-		ProjectID: apikey.ProjectID.String(),
+		OrgID:       apikey.OrgID.String(),
+		ProjectID:   apikey.ProjectID.String(),
+		AccountType: "sandbox",
 	}
 
 	// Add the key permissions to the claims.
@@ -549,13 +551,15 @@ func (s *Server) refreshUser(c *gin.Context, userID, orgID any) (_ *tokens.Claim
 	}
 
 	// Create a new claims object using the user retrieved from the database
+	// TODO: add account type from database rather than hardcoding "sandbox"
 	refreshClaims := &tokens.Claims{
 		RegisteredClaims: jwt.RegisteredClaims{
 			Subject: user.ID.String(),
 		},
-		Name:    user.Name,
-		Email:   user.Email,
-		Picture: gravatar.New(user.Email, nil),
+		Name:        user.Name,
+		Email:       user.Email,
+		Picture:     gravatar.New(user.Email, nil),
+		AccountType: "sandbox",
 	}
 
 	// Add the orgID to the claims
@@ -637,12 +641,14 @@ func (s *Server) refreshAPIKey(c *gin.Context, keyIDs, orgIDs any) (_ *tokens.Cl
 	}
 
 	// Create a new refreshClaims object using the apikey retrieved from the database
+	// TODO: add account type from database rather than hardcoding "sandbox"
 	refreshClaims := &tokens.Claims{
 		RegisteredClaims: jwt.RegisteredClaims{
 			Subject: apikey.ID.String(),
 		},
-		OrgID:     apikey.OrgID.String(),
-		ProjectID: apikey.ProjectID.String(),
+		OrgID:       apikey.OrgID.String(),
+		ProjectID:   apikey.ProjectID.String(),
+		AccountType: "sandbox",
 	}
 
 	// Add the key permissions to the claims.
@@ -736,14 +742,16 @@ func (s *Server) Switch(c *gin.Context) {
 	// Create access and refresh tokens for new organization
 	// NOTE: ensure that new claims are created and returned, not the old claims;
 	// otherwise the user may receive incorrect permissions.
+	// TODO: add account type from database rather than hardcoding "sandbox"
 	newClaims := &tokens.Claims{
 		RegisteredClaims: jwt.RegisteredClaims{
 			Subject: user.ID.String(),
 		},
-		Name:    user.Name,
-		Email:   user.Email,
-		Picture: gravatar.New(user.Email, nil),
-		OrgID:   in.OrgID.String(),
+		Name:        user.Name,
+		Email:       user.Email,
+		Picture:     gravatar.New(user.Email, nil),
+		OrgID:       in.OrgID.String(),
+		AccountType: "sandbox",
 	}
 
 	// Add the user permissions to the claims

pkg/quarterdeck/db/models/users.go

@@ -1195,13 +1195,15 @@ func (u *User) Delete(tx *sql.Tx) (err error) {
 // the user has already been loaded into an organization, otherwise an error is
 // returned.
 func (u *User) NewClaims(ctx context.Context) (claims *qd.Claims, err error) {
+	// TODO: add account type from database rather than hardcoding "sandbox"
 	claims = &qd.Claims{
 		RegisteredClaims: jwt.RegisteredClaims{
 			Subject: u.ID.String(),
 		},
-		Name:    u.Name,
-		Email:   u.Email,
-		Picture: gravatar.New(u.Email, nil),
+		Name:        u.Name,
+		Email:       u.Email,
+		Picture:     gravatar.New(u.Email, nil),
+		AccountType: "sandbox",
 	}
 
 	// Add the orgID to the claims

pkg/quarterdeck/projects.go

@@ -202,6 +202,7 @@ func (s *Server) ProjectAccess(c *gin.Context) {
 		OrgID:       claims.OrgID,
 		ProjectID:   project.ProjectID.String(),
 		Permissions: make([]string, 0, 4),
+		AccountType: claims.AccountType,
 	}
 
 	// Add only the user permissions related to topics and metrics to these claims -- whatever

pkg/quarterdeck/tokens/claims.go

@@ -15,6 +15,7 @@ type Claims struct {
 	OrgID       string   `json:"org,omitempty"`
 	ProjectID   string   `json:"project,omitempty"`
 	Permissions []string `json:"permissions,omitempty"`
+	AccountType string   `json:"account,omitempty"`
 }
 
 // HasPermission checks if the claims contain the specified permission.

pkg/version.go

@@ -6,9 +6,9 @@ import "fmt"
 const (
 	VersionMajor         = 0
 	VersionMinor         = 12
-	VersionPatch         = 4
+	VersionPatch         = 5
 	VersionReleaseLevel  = "beta"
-	VersionReleaseNumber = 19
+	VersionReleaseNumber = 20
 )
 
 // Set the GitVersion via -ldflags="-X 'github.com/rotationalio/ensign/pkg.GitVersion=$(git rev-parse --short HEAD)'"

web/beacon-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beacon-app",
-  "version": "0.12.4",
+  "version": "0.12.5",
   "description": "User UI for Ensign.",
   "main": "index.js",
   "repository": "https://github.com/rotationalio/ensign",
@@ -192,7 +192,7 @@
     "prettier": "^2.8.3",
     "prettier-plugin-tailwindcss": "^0.2.2",
     "storybook-addon-react-router-v6": "^0.2.1",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.4.0",
     "tsify": "^5.0.4",
     "typescript": "^4.9.3",
     "vite": "^4.0.0",

web/beacon-app/src/application/routes/privateRoute.tsx

@@ -4,15 +4,28 @@ import { Navigate, Outlet } from 'react-router-dom';
 import OvalLoader from '@/components/ui/OvalLoader';
 import { useFetchProfile } from '@/features/members/hooks/useFetchProfile';
 import { isOnboardedMember } from '@/features/members/utils';
+import { isSandboxAccount } from '@/features/sandbox/util/utils';
+import useAccountType from '@/hooks/useAccountType';
 import { useAuth } from '@/hooks/useAuth';
 const DashLayout = React.lazy(() => import('@/components/layout/DashLayout'));
 const OnboardingLayout = React.lazy(() => import('@/components/layout/OnboardingLayout'));
+const SandboxLayout = React.lazy(() => import('@/components/layout/SandboxLayout'));
 
 const PrivateRoute = () => {
   const { profile: userProfile } = useFetchProfile();
   const { isAuthenticated } = useAuth();
   const isOnboarded = isOnboardedMember(userProfile?.onboarding_status);
-  const Layout = isOnboarded ? DashLayout : OnboardingLayout;
+
+  const accountType = useAccountType();
+  const isSandboxAcct = isSandboxAccount(accountType);
+
+  let Layout = OnboardingLayout;
+
+  if (isOnboarded && isSandboxAcct) {
+    Layout = SandboxLayout;
+  } else if (isOnboarded && !isSandboxAcct) {
+    Layout = DashLayout;
+  }
 
   return isAuthenticated ? (
     <Suspense

web/beacon-app/src/components/Error/ErrorPage/ErrorPage.tsx

@@ -15,7 +15,7 @@ type ErrorPageProps = {
 export const render404 = () => {
   return (
     <section className="mx-auto my-20  flex max-w-4xl place-items-center items-center justify-center rounded-lg border border-solid border-primary-800 text-2xl">
-      <div className="my-10 mx-auto max-w-xl">
+      <div className="mx-auto my-10 max-w-xl">
         <h1 className="mt-4 text-2xl font-bold text-gray-800">
           <Trans>Sorry, we can’t find that page. (404)</Trans>
         </h1>
@@ -44,7 +44,7 @@ export default function ErrorPage({ errorMessage, errorCause, errorTitle }: Erro
       className="mx-auto my-20  flex max-w-4xl place-items-center items-center justify-center rounded-lg border border-solid border-primary-800 text-2xl"
       data-testid="error-page"
     >
-      <div className="my-10 mx-auto max-w-xl">
+      <div className="mx-auto my-10 max-w-xl">
         <h1 className="text-2xl font-bold text-gray-800">
           {' '}
           {errorTitle || t`Sorry, we’re having trouble loading this page.`}

web/beacon-app/src/components/auth/LandingFooter/LandingFooter.tsx

@@ -120,13 +120,13 @@ function LandingFooter() {
                     rel="noreferrer"
                   >
                     <LinkedInIcon />
-                    <span className="mt-1 ml-4">LinkedIn</span>
+                    <span className="ml-4 mt-1">LinkedIn</span>
                   </a>
                 </div>
                 <div>
                   <a href={EXTERNAL_LINKS.EMAIL_US} className="icon-hover">
                     <EmailIcon />
-                    <span className="mt-1 ml-4">Email</span>
+                    <span className="ml-4 mt-1">Email</span>
                   </a>
                 </div>
               </div>
@@ -150,7 +150,7 @@ function LandingFooter() {
               </li>
             </ul>
           </div>
-          <div className="justify-between py-3 px-6 text-center">
+          <div className="justify-between px-6 py-3 text-center">
             <p>
               {appVersion && <span className="text-xs text-white">App Version {appVersion} </span>}
               {gitRevision && (

web/beacon-app/src/components/common/Alert/Alert.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+export interface AlertProps {
+  children: ReactNode;
+}
+
+function Alert({ children }: AlertProps) {
+  return <>{children}</>;
+}
+
+export default Alert;

web/beacon-app/src/components/common/Modal/ApiKeyModal/ApiKeyModal.tsx

@@ -90,7 +90,7 @@ export default function ApiKeyModal({ open, onClose, projectName, keyData }: Api
                   </p>
                 </div>
               </div>
-              <div className="absolute top-3 right-3 flex gap-2">
+              <div className="absolute right-3 top-3 flex gap-2">
                 <button
                   onClick={() => handleDownload(clientInfo, apiKeyFileName)}
                   data-testid="download"

web/beacon-app/src/components/common/QuickView/QuickViewCard.tsx

@@ -10,7 +10,7 @@ function QuickViewCard({ title, color, children, ...props }: QuickViewCardProps)
   return (
     <div
       style={{ backgroundColor: color }}
-      className="flex h-[100px] w-full flex-col rounded-2xl py-4 px-8"
+      className="flex h-[100px] w-full flex-col rounded-2xl px-8 py-4"
       {...props}
     >
       <Suspense
@@ -20,7 +20,7 @@ function QuickViewCard({ title, color, children, ...props }: QuickViewCardProps)
           </div>
         }
       >
-        <h5 className="pt-1 pb-3 font-semibold">{title}</h5>
+        <h5 className="pb-3 pt-1 font-semibold">{title}</h5>
         <p className="text-2xl font-semibold">{children}</p>
       </Suspense>
     </div>

web/beacon-app/src/components/layout/AppLayout.tsx

@@ -5,7 +5,10 @@ import { useNavigate } from 'react-router-dom';
 import { PATH_DASHBOARD } from '@/application';
 import { useFetchProfile } from '@/features/members/hooks/useFetchProfile';
 import { isOnboardedMember } from '@/features/members/utils';
+import { isSandboxAccount } from '@/features/sandbox/util/utils';
+import useAccountType from '@/hooks/useAccountType';
 
+import SandboxBanner from './SanboxBanner/SandboxBanner';
 import Topbar from './Topbar';
 
 type PageProps = {
@@ -18,6 +21,9 @@ function AppLayout({ children, Breadcrumbs }: PageProps) {
   const { profile: loaderData } = useFetchProfile();
   const isOnboarded = isOnboardedMember(loaderData?.onboarding_status);
 
+  const accountType = useAccountType();
+  const isSandboxAcct = isSandboxAccount(accountType);
+
   // if onboarded redirect to onboarded route
   useEffect(() => {
     if (!isOnboarded) {
@@ -28,6 +34,7 @@ function AppLayout({ children, Breadcrumbs }: PageProps) {
   return (
     <>
       <Topbar Breadcrumbs={Breadcrumbs} isOnboarded={isOnboarded} profileData={loaderData} />
+      {isOnboarded && isSandboxAcct && <SandboxBanner />}
       <Container max={696} centered className="my-10 mt-8 px-4 xl:px-28">
         {children}
       </Container>

web/beacon-app/src/components/layout/OnboardingLayout.tsx

@@ -8,7 +8,7 @@ type OnboardingLayoutProps = {
 
 const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({ children }) => {
   return (
-    <div className="flex flex-col md:pl-[250px]">
+    <div className="flex flex-col md:pl-[250px]" data-testid="onboarding-layout">
       <OnBoardingSidebar className="hidden md:block" />
       <MainStyle>{children}</MainStyle>
       <MobileFooter />

web/beacon-app/src/components/layout/ProfileAvatar/ProfileAvatar.tsx

@@ -1,4 +1,4 @@
-import { getInitials } from '@/utils/strings';
+import { getInitials } from '@/utils/getInitials';
 
 type ProfileAvatar = {
   name: string;

web/beacon-app/src/components/layout/SanboxBanner/SandboxBanner.tsx

@@ -0,0 +1,28 @@
+import { Trans } from '@lingui/macro';
+
+import { EXTERNAL_LINKS } from '@/application';
+import Alert from '@/components/common/Alert/Alert';
+
+function SandboxBanner() {
+  return (
+    <Alert>
+      <div className="flex h-auto w-full flex-col items-center justify-center gap-x-4 bg-[#EBF5FF] py-6 text-center font-bold text-[#1D65A6] lg:flex-row">
+        <p>
+          <Trans>
+            You are using the Ensign Sandbox. Ready to deploy your models to production?
+          </Trans>
+        </p>
+        <a
+          href={EXTERNAL_LINKS.ENSIGN_PRICING}
+          target="_blank"
+          rel="noreferrer"
+          className="mt-4 rounded-md border border-white bg-[#1D65A6] px-4 py-1.5 text-white hover:bg-[#1D65A6/50] lg:mt-0"
+        >
+          <Trans>Upgrade</Trans>
+        </a>
+      </div>
+    </Alert>
+  );
+}
+
+export default SandboxBanner;

web/beacon-app/src/components/layout/SandboxLayout.tsx

@@ -0,0 +1,18 @@
+import MobileFooter from './MobileFooter';
+import SandboxSidebar from './Sidebar/SandboxSidebar';
+
+type SandboxLayoutProps = {
+  children?: React.ReactNode;
+};
+
+function SandboxLayout({ children }: SandboxLayoutProps) {
+  return (
+    <div className="flex flex-col md:pl-[250px]" data-testid="sandbox-layout">
+      <SandboxSidebar className="hidden md:block" />
+      <div>{children}</div>
+      <MobileFooter />
+    </div>
+  );
+}
+
+export default SandboxLayout;

web/beacon-app/src/components/layout/Sidebar/OnboardingSideBar.tsx

@@ -17,11 +17,15 @@ function OnboardingSideBar({ className }: SidebarProps) {
     <>
       <aside
         className={cn(
-          `fixed top-0 left-0 flex h-screen flex-col bg-[#1D65A6] pt-5 pb-10 text-white md:w-[250px]`,
+          `fixed left-0 top-0 flex h-screen flex-col bg-[#1D65A6] pb-10 pt-5 text-white md:w-[250px]`,
           className
         )}
       >
-        <div className="flex h-full flex-col" data-cy="onboarding-sidebar">
+        <div
+          className="flex h-full flex-col"
+          data-testid="onboarding-sidebar"
+          data-cy="onboarding-sidebar"
+        >
           <div>
             <Heading as="h1" className="ml-8 space-y-3 text-lg font-bold">
               Ensign