feat(sidebar): Sidebar overmind state (#7000)

* Add sidebar as a separate overmind namespace

* Render sidebar items based on sidebar state

* Only add to state what we need

* Fix types after new generated gql types were added

* Dont use collections in sidebarstate

* Move if statement and fix types

Author: tristandubbeld

packages/app/src/app/graphql/types.ts

@@ -580,6 +580,8 @@ export type ProSubscription = {
   paymentProvider: Maybe<SubscriptionPaymentProvider>;
   quantity: Maybe<Scalars['Int']>;
   status: SubscriptionStatus;
+  trialEnd: Maybe<Scalars['DateTime']>;
+  trialStart: Maybe<Scalars['DateTime']>;
   type: SubscriptionType;
   unitPrice: Maybe<Scalars['Int']>;
   updateBillingUrl: Maybe<Scalars['String']>;
@@ -3394,6 +3396,50 @@ export type RecentNotificationsQuery = { __typename?: 'RootQueryType' } & {
   >;
 };
 
+export type SidebarSyncedSandboxFragmentFragment = {
+  __typename?: 'Sandbox';
+} & Pick<Sandbox, 'id'>;
+
+export type SidebarTemplateFragmentFragment = {
+  __typename?: 'Template';
+} & Pick<Template, 'id'>;
+
+export type PersonalSidebarDataQueryVariables = Exact<{ [key: string]: never }>;
+
+export type PersonalSidebarDataQuery = { __typename?: 'RootQueryType' } & {
+  me: Maybe<
+    { __typename?: 'CurrentUser' } & {
+      sandboxes: Array<
+        { __typename?: 'Sandbox' } & SidebarSyncedSandboxFragmentFragment
+      >;
+      templates: Array<
+        { __typename?: 'Template' } & SidebarTemplateFragmentFragment
+      >;
+    }
+  >;
+};
+
+export type TeamSidebarDataQueryVariables = Exact<{
+  id: Scalars['UUID4'];
+}>;
+
+export type TeamSidebarDataQuery = { __typename?: 'RootQueryType' } & {
+  me: Maybe<
+    { __typename?: 'CurrentUser' } & {
+      team: Maybe<
+        { __typename?: 'Team' } & {
+          sandboxes: Array<
+            { __typename?: 'Sandbox' } & SidebarSyncedSandboxFragmentFragment
+          >;
+          templates: Array<
+            { __typename?: 'Template' } & SidebarTemplateFragmentFragment
+          >;
+        }
+      >;
+    }
+  >;
+};
+
 export type TeamsQueryVariables = Exact<{ [key: string]: never }>;
 
 export type TeamsQuery = { __typename?: 'RootQueryType' } & {

packages/app/src/app/overmind/effects/gql/index.ts

@@ -11,6 +11,8 @@ import * as teamsQueries from './teams/queries';
 import * as dashboardQueries from './dashboard/queries';
 import * as dashboardMutations from './dashboard/mutations';
 
+import * as sidebarQueries from './sidebar/queries';
+
 import * as notificationsQueries from './notifications/queries';
 import * as notificationsMutations from './notifications/mutations';
 
@@ -24,6 +26,7 @@ export default graphql({
     ...commentsQueries,
     ...teamsQueries,
     ...dashboardQueries,
+    ...sidebarQueries,
     ...notificationsQueries,
   },
   mutations: {

packages/app/src/app/overmind/effects/gql/sidebar/fragments.ts

@@ -0,0 +1,13 @@
+import { gql } from 'overmind-graphql';
+
+export const sidebarSyncedSandboxFragment = gql`
+  fragment sidebarSyncedSandboxFragment on Sandbox {
+    id
+  }
+`;
+
+export const sidebarTemplateFragment = gql`
+  fragment sidebarTemplateFragment on Template {
+    id
+  }
+`;

packages/app/src/app/overmind/effects/gql/sidebar/queries.ts

@@ -0,0 +1,50 @@
+import { gql, Query } from 'overmind-graphql';
+
+import {
+  PersonalSidebarDataQuery,
+  TeamSidebarDataQuery,
+  TeamSidebarDataQueryVariables,
+} from 'app/graphql/types';
+
+import {
+  sidebarSyncedSandboxFragment,
+  sidebarTemplateFragment,
+} from './fragments';
+
+export const getPersonalSidebarData: Query<
+  PersonalSidebarDataQuery,
+  undefined
+> = gql`
+  query PersonalSidebarData {
+    me {
+      sandboxes(hasOriginalGit: true) {
+        ...sidebarSyncedSandboxFragment
+      }
+      templates {
+        ...sidebarTemplateFragment
+      }
+    }
+  }
+  ${sidebarSyncedSandboxFragment}
+  ${sidebarTemplateFragment}
+`;
+
+export const getTeamSidebarData: Query<
+  TeamSidebarDataQuery,
+  TeamSidebarDataQueryVariables
+> = gql`
+  query TeamSidebarData($id: UUID4!) {
+    me {
+      team(id: $id) {
+        sandboxes(hasOriginalGit: true) {
+          ...sidebarSyncedSandboxFragment
+        }
+        templates {
+          ...sidebarTemplateFragment
+        }
+      }
+    }
+  }
+  ${sidebarSyncedSandboxFragment}
+  ${sidebarTemplateFragment}
+`;

packages/app/src/app/overmind/index.ts

@@ -13,6 +13,7 @@ import { createModals } from './factories';
 import * as modals from './modals';
 import * as comments from './namespaces/comments';
 import * as dashboard from './namespaces/dashboard';
+import * as sidebar from './namespaces/sidebar';
 import * as deployment from './namespaces/deployment';
 import * as editor from './namespaces/editor';
 import * as explore from './namespaces/explore';
@@ -43,6 +44,7 @@ export const config = merge(
     live,
     workspace,
     dashboard,
+    sidebar,
     deployment,
     files,
     git,

packages/app/src/app/overmind/namespaces/sidebar/actions.ts

@@ -0,0 +1,49 @@
+import type { Context } from 'app/overmind';
+import type {
+  SidebarSyncedSandboxFragmentFragment,
+  SidebarTemplateFragmentFragment,
+} from 'app/graphql/types';
+
+export const getSidebarData = async (
+  { state, effects }: Context,
+  teamId?: string
+) => {
+  const {
+    gql: { queries },
+  } = effects;
+
+  try {
+    let sandboxes: SidebarSyncedSandboxFragmentFragment[] | null;
+    let templates: SidebarTemplateFragmentFragment[] | null;
+
+    if (teamId) {
+      /**
+       * Fetch data for the selected team
+       */
+      const result = await queries.getTeamSidebarData({ id: teamId });
+
+      sandboxes = result.me?.team?.sandboxes || null;
+      templates = result.me?.team?.templates || null;
+    } else {
+      /**
+       * Fetch data for the user
+       */
+      const result = await queries.getPersonalSidebarData();
+
+      sandboxes = result.me?.sandboxes || null;
+      templates = result.me?.templates || null;
+    }
+
+    const hasSyncedSandboxes = sandboxes && sandboxes.length > 0;
+    const hasTemplates = templates && templates.length > 0;
+
+    state.sidebar = {
+      hasSyncedSandboxes,
+      hasTemplates,
+    };
+  } catch {
+    effects.notificationToast.error(
+      `There was a problem getting your data for the sidebar.`
+    );
+  }
+};

packages/app/src/app/overmind/namespaces/sidebar/index.ts

@@ -0,0 +1,4 @@
+import * as actions from './actions';
+import { state } from './state';
+
+export { state, actions };

packages/app/src/app/overmind/namespaces/sidebar/state.ts

@@ -0,0 +1,18 @@
+/**
+ * SidebarState, required to be named just State. Can be an interface instead
+ * of a type though.
+ *
+ * ❗️ TODO: Add sidebar notification indicator state
+ */
+export interface State {
+  hasSyncedSandboxes: boolean | null;
+  hasTemplates: boolean | null;
+}
+
+/**
+ * Default state for the sidebar
+ */
+export const state: State = {
+  hasSyncedSandboxes: null,
+  hasTemplates: null,
+};

packages/app/src/app/pages/Dashboard/Sidebar/index.tsx

@@ -66,10 +66,18 @@ export const Sidebar: React.FC<SidebarProps> = ({
   } = state;
 
   React.useEffect(() => {
+    // Used to fetch collections
     actions.dashboard.getAllFolders();
     actions.dashboard.getStarredRepos();
   }, [actions.dashboard, state.activeTeam]);
 
+  React.useEffect(() => {
+    // Used to check for templates and synced sandboxes
+    actions.sidebar.getSidebarData(
+      state.activeTeam !== personalWorkspaceId ? state.activeTeam : undefined
+    );
+  }, [state.activeTeam, personalWorkspaceId, actions.sidebar]);
+
   React.useEffect(() => {
     if (state.activeTeam) {
       const team = dashboard.teams.find(({ id }) => id === state.activeTeam);
@@ -252,12 +260,16 @@ export const Sidebar: React.FC<SidebarProps> = ({
             path={dashboardUrls.drafts(activeTeam)}
             icon="file"
           />
-          <RowItem
-            name="Templates"
-            page="templates"
-            path={dashboardUrls.templates(activeTeam)}
-            icon="star"
-          />
+
+          {state.sidebar.hasTemplates ? (
+            <RowItem
+              name="Templates"
+              page="templates"
+              path={dashboardUrls.templates(activeTeam)}
+              icon="star"
+            />
+          ) : null}
+
           <NestableRowItem
             name="All sandboxes"
             path={dashboardUrls.sandboxes('/', activeTeam)}
@@ -278,12 +290,16 @@ export const Sidebar: React.FC<SidebarProps> = ({
               icon="server"
             />
           )}
-          <RowItem
-            name="Synced"
-            page="synced-sandboxes"
-            path={dashboardUrls.syncedSandboxes(activeTeam)}
-            icon="sync"
-          />
+
+          {state.sidebar.hasSyncedSandboxes ? (
+            <RowItem
+              name="Synced"
+              page="synced-sandboxes"
+              path={dashboardUrls.syncedSandboxes(activeTeam)}
+              icon="sync"
+            />
+          ) : null}
+
           <RowItem
             name="Archive"
             page="archive"

packages/app/src/app/pages/Pro/legacy-pages/WorkspacePlanSelection.tsx

@@ -538,7 +538,8 @@ const PlanCard: React.FC<{
   plan: Plan;
   billingInterval: Plan['billingInterval'];
   setBillingInterval: (billingInterval: Plan['billingInterval']) => void;
-  currentSubscription: ProSubscription | null;
+  // Omitting new trialEnd and trialStart
+  currentSubscription: Omit<ProSubscription, 'trialEnd' | 'trialStart'> | null;
 }> = ({ plan, billingInterval, setBillingInterval, currentSubscription }) => {
   const isSelected = plan.billingInterval === billingInterval;
   const isCurrent =