[pull] master from codesandbox:master

.github/workflows/stale.yml

@@ -1,5 +1,6 @@
 name: 'Close stale issues and PRs'
 on:
+  workflow_dispatch:
   schedule:
     - cron: '0 0 * * *'
 
@@ -11,15 +12,19 @@ jobs:
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           stale-issue-message:
-            'This issue is stale because it has been open many days with no
-            activity. It will be closed soon unless the stale label is removed
-            or a comment is made.'
+            'This issue has automatically been marked stale because there has
+            been no activity in a while. Please leave a comment if the issue has
+            not been resolved, or if it is not stale for any other reason. After
+            2 weeks, this issue will automatically be closed, unless a comment
+            is made or the stale label is removed.'
           stale-issue-label: 'stale'
           exempt-issue-label: '💥 Crash Report'
           stale-pr-message:
-            'This PR is stale because it has been open many days with no
-            activity. It will be closed soon unless the stale label is removed
-            or a comment is made.'
+            'This PR has automatically been marked stale because there has been
+            no activity in a while. Please leave a comment if the issue has not
+            been resolved, or if it is not stale for any other reason. After 2
+            weeks, this issue will automatically be closed, unless a comment is
+            made or the stale label is removed.'
           stale-pr-label: 'stale'
           exempt-pr-label: '💥 Crash Report'
           days-before-stale: 90

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

@@ -868,9 +868,10 @@ export const updateEnvironmentVariables: AsyncAction<EnvironmentVariable> = asyn
   effects.codesandboxApi.restartSandbox();
 };
 
-export const deleteEnvironmentVariable: AsyncAction<{
-  name: string;
-}> = async ({ state, effects }, { name }) => {
+export const deleteEnvironmentVariable: AsyncAction<string> = async (
+  { effects, state },
+  name
+) => {
   if (!state.editor.currentSandbox) {
     return;
   }

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

@@ -243,6 +243,9 @@ export const addFeaturedSandboxes: AsyncAction<{
     sandbox => sandbox.id
   );
 
+  // already featured
+  if (currentFeaturedSandboxIds.includes(sandboxId)) return;
+
   // optimistic update
   actions.profile.addFeaturedSandboxesInState({ sandboxId });
 
@@ -294,6 +297,50 @@ export const removeFeaturedSandboxes: AsyncAction<{
   }
 };
 
+export const reorderFeaturedSandboxesInState: Action<{
+  startPosition: number;
+  endPosition: number;
+}> = ({ state, actions, effects }, { startPosition, endPosition }) => {
+  if (!state.profile.current) return;
+
+  // optimisic update
+  const featuredSandboxes = [...state.profile.current.featuredSandboxes];
+  const sandbox = featuredSandboxes[startPosition]!;
+
+  // remove element first
+  featuredSandboxes.splice(startPosition, 1);
+  // now add at new position
+  featuredSandboxes.splice(endPosition, 0, sandbox);
+
+  state.profile.current.featuredSandboxes = featuredSandboxes;
+};
+
+export const saveFeaturedSandboxesOrder: AsyncAction = async ({
+  actions,
+  effects,
+  state,
+}) => {
+  if (!state.profile.current) return;
+
+  try {
+    const featuredSandboxIds = state.profile.current.featuredSandboxes.map(
+      s => s.id
+    );
+    const profile = await effects.api.updateUserFeaturedSandboxes(
+      state.profile.current.id,
+      featuredSandboxIds
+    );
+    state.profile.current.featuredSandboxes = profile.featuredSandboxes;
+  } catch (error) {
+    // TODO: rollback optimisic update
+
+    actions.internal.handleError({
+      message: "We weren't able to re-order your pinned sandboxes",
+      error,
+    });
+  }
+};
+
 export const changeSandboxPrivacyInState: Action<{
   sandboxId: string;
   privacy: 0 | 1 | 2;

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

@@ -50,6 +50,8 @@ export const state: State = {
   searchQuery: null,
   isLoadingSandboxes: false,
   sandboxToDeleteId: null,
+  currentSortBy: 'view_count',
+  currentSortDirection: 'desc',
   isProfileCurrentUser: derived((currentState: State, rootState: RootState) =>
     Boolean(
       rootState.user && rootState.user.id === currentState.currentProfileId
@@ -75,6 +77,4 @@ export const state: State = {
       ? currentState.sandboxes[currentState.current.username]
       : []
   ),
-  currentSortBy: 'view_count',
-  currentSortDirection: 'desc',
 };

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

@@ -13,7 +13,7 @@ export const restartSandbox: Action = ({ effects }) => {
   effects.executor.emit('sandbox:restart');
 };
 
-export const restartContainer: Action = ({ state, effects }) => {
+export const restartContainer: Action = ({ effects, state }) => {
   state.server.containerStatus = ServerContainerStatus.INITIALIZING;
   effects.executor.emit('sandbox:restart-container');
 };
@@ -117,9 +117,7 @@ export const onSSEMessage: Action<{
             actions: {
               primary: {
                 label: 'Open Browser Pane',
-                run: () => {
-                  actions.server.onBrowserFromPortOpened({ port });
-                },
+                run: () => actions.server.onBrowserFromPortOpened(port),
               },
             },
           });
@@ -172,16 +170,13 @@ export const onCodeSandboxAPIMessage: Action<{
 };
 
 type BrowserOptions = { title?: string; url?: string } & (
-  | {
-      port: number;
-    }
+  | { port: number }
   | { url: string }
 );
-
 export const onBrowserTabOpened: Action<{
   closeable?: boolean;
   options?: BrowserOptions;
-}> = ({ actions, state }, { options, closeable }) => {
+}> = ({ actions, state }, { closeable, options }) => {
   const tab: ViewTab = {
     id: 'codesandbox.browser',
   };
@@ -206,17 +201,18 @@ export const onBrowserTabOpened: Action<{
   }
 };
 
-export const onBrowserFromPortOpened: Action<{
-  port: ServerPort;
-}> = ({ actions }, { port }) => {
-  if (port.main) {
+export const onBrowserFromPortOpened: Action<ServerPort> = (
+  { actions },
+  { hostname, main, port }
+) => {
+  if (main) {
     actions.server.onBrowserTabOpened({});
   } else {
     actions.server.onBrowserTabOpened({
       closeable: true,
       options: {
-        port: port.port,
-        url: `https://${port.hostname}`,
+        port,
+        url: `https://${hostname}`,
       },
     });
   }

packages/app/src/app/pages/Profile2/AllSandboxes.tsx

@@ -8,9 +8,10 @@ import {
   Menu,
 } from '@codesandbox/components';
 import css from '@styled-system/css';
+import { motion } from 'framer-motion';
 import { useOvermind } from 'app/overmind';
 import { SandboxCard, SkeletonCard } from './SandboxCard';
-import { SANDBOXES_PER_PAGE } from './constants';
+import { SANDBOXES_PER_PAGE, SandboxTypes } from './constants';
 
 export const AllSandboxes = ({ menuControls }) => {
   const {
@@ -119,7 +120,13 @@ export const AllSandboxes = ({ menuControls }) => {
               ))
           : sandboxes.map((sandbox, index) => (
               <Column key={sandbox.id}>
-                <SandboxCard sandbox={sandbox} menuControls={menuControls} />
+                <motion.div layoutTransition={{ duration: 0.15 }}>
+                  <SandboxCard
+                    type={SandboxTypes.ALL_SANDBOX}
+                    sandbox={sandbox}
+                    menuControls={menuControls}
+                  />
+                </motion.div>
               </Column>
             ))}
       </Grid>

packages/app/src/app/pages/Profile2/PinnedSandboxes.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useOvermind } from 'app/overmind';
 import { useDrop } from 'react-dnd';
+import { motion } from 'framer-motion';
 import { Grid, Column, Stack, Text } from '@codesandbox/components';
 import css from '@styled-system/css';
 import { SandboxCard } from './SandboxCard';
+import { SandboxTypes } from './constants';
 
 export const PinnedSandboxes = ({ menuControls }) => {
   const {
@@ -16,7 +18,7 @@ export const PinnedSandboxes = ({ menuControls }) => {
   const myProfile = loggedInUser?.username === user.username;
 
   const [{ isOver }, drop] = useDrop({
-    accept: 'sandbox',
+    accept: [SandboxTypes.ALL_SANDBOX, SandboxTypes.PINNED_SANDBOX],
     drop: () => ({ name: 'PINNED_SANDBOXES' }),
     collect: monitor => ({
       isOver: monitor.isOver(),
@@ -31,9 +33,16 @@ export const PinnedSandboxes = ({ menuControls }) => {
         gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
       }}
     >
-      {user.featuredSandboxes.map(sandbox => (
+      {user.featuredSandboxes.map((sandbox, index) => (
         <Column key={sandbox.id}>
-          <SandboxCard sandbox={sandbox} menuControls={menuControls} />
+          <motion.div layoutTransition={{ duration: 0.15 }}>
+            <SandboxCard
+              type={SandboxTypes.PINNED_SANDBOX}
+              sandbox={sandbox}
+              index={index}
+              menuControls={menuControls}
+            />
+          </motion.div>
         </Column>
       ))}
       {myProfile && (