Show a message about empty secrets on fork

Author: CompuIves

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

@@ -19,8 +19,10 @@ import { clearCorrectionsFromAction } from 'app/utils/corrections';
 import { json } from 'overmind';
 
 import { hasPermission } from '@codesandbox/common/lib/utils/permission';
+import { NotificationStatus } from '@codesandbox/notifications';
 import eventToTransform from '../../utils/event-to-transform';
 import * as internalActions from './internalActions';
+import { SERVER } from '../../utils/items';
 
 export const internal = internalActions;
 
@@ -627,6 +629,44 @@ export const deleteEnvironmentVariable: AsyncAction<{
   effects.codesandboxApi.restartSandbox();
 };
 
+/**
+ * This will let the user know on fork that some secrets need to be set if there are any empty ones
+ */
+export const showEnvironmentVariablesNotification: AsyncAction = async ({
+  state,
+  actions,
+  effects,
+}) => {
+  const sandbox = state.editor.currentSandbox;
+
+  if (!sandbox) {
+    return;
+  }
+
+  await actions.editor.fetchEnvironmentVariables();
+
+  const emptyVarCount = Object.keys(sandbox.environmentVariables).filter(
+    key => !sandbox.environmentVariables[key]
+  ).length;
+  if (emptyVarCount > 0) {
+    effects.notificationToast.add({
+      status: NotificationStatus.NOTICE,
+      title: 'Unset Secrets',
+      message: `This sandbox has ${emptyVarCount} secrets that need to be set. You can set them in the server tab.`,
+      actions: {
+        primary: [
+          {
+            label: 'Open Server Tab',
+            run: () => {
+              actions.workspace.setWorkspaceItem({ item: SERVER.id });
+            },
+          },
+        ],
+      },
+    });
+  }
+};
+
 export const toggleEditorPreviewLayout: Action = ({ state, effects }) => {
   const currentOrientation = state.editor.previewWindowOrientation;
 

packages/app/src/app/overmind/namespaces/editor/internalActions.ts

@@ -396,6 +396,10 @@ export const forkSandbox: AsyncAction<{
 
     effects.notificationToast.success('Forked sandbox!');
 
+    if (templateDefinition.isServer) {
+      actions.editor.showEnvironmentVariablesNotification();
+    }
+
     effects.router.updateSandboxUrl(forkedSandbox, { openInNewWindow });
   } catch (error) {
     console.error(error);

packages/app/src/app/overmind/utils/items.ts

@@ -13,53 +13,53 @@ export interface INavigationItem {
   showAsDisabledIfHidden?: boolean;
 }
 
-const PROJECT: INavigationItem = {
+export const PROJECT: INavigationItem = {
   id: 'project',
   name: 'Sandbox Info',
 };
 
-const PROJECT_TEMPLATE: INavigationItem = {
+export const PROJECT_TEMPLATE: INavigationItem = {
   ...PROJECT,
   name: 'Template Info',
 };
 
-const PROJECT_SUMMARY: INavigationItem = {
+export const PROJECT_SUMMARY: INavigationItem = {
   id: 'project-summary',
   name: 'Sandbox Info',
   hasCustomHeader: true,
 };
 
-const FILES: INavigationItem = {
+export const FILES: INavigationItem = {
   id: 'files',
   name: 'Explorer',
   hasCustomHeader: true,
   defaultOpen: true,
 };
 
-const GITHUB: INavigationItem = {
+export const GITHUB: INavigationItem = {
   id: 'github',
   name: 'GitHub',
   showAsDisabledIfHidden: true,
 };
 
-const DEPLOYMENT: INavigationItem = {
+export const DEPLOYMENT: INavigationItem = {
   id: 'deploy',
   name: 'Deployment',
   showAsDisabledIfHidden: true,
 };
 
-const CONFIGURATION: INavigationItem = {
+export const CONFIGURATION: INavigationItem = {
   id: 'config',
   name: 'Configuration Files',
 };
 
-const LIVE: INavigationItem = {
+export const LIVE: INavigationItem = {
   id: 'live',
   name: 'Live',
   showAsDisabledIfHidden: true,
 };
 
-const SERVER: INavigationItem = {
+export const SERVER: INavigationItem = {
   id: 'server',
   name: 'Server Control Panel',
 };