Add "Copy story data" button to error boundary screen (#12554)

Co-authored-by: Pascal Birchler <pascalb@google.com>

packages/story-editor/src/components/errorBoundary/copyStoryDataToClipboard.js

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { __ } from '@googleforcreators/i18n';
+import {
+  Button,
+  BUTTON_SIZES,
+  BUTTON_TYPES,
+  BUTTON_VARIANTS,
+} from '@googleforcreators/design-system';
+import { useCallback } from '@googleforcreators/react';
+
+/**
+ * Internal dependencies
+ */
+import { useStory } from '../../app/story';
+
+function CopyStoryDataToClipboard() {
+  const { pages, current, selection, story } = useStory(({ internal }) => ({
+    pages: internal.reducerState.pages,
+    current: internal.reducerState.current,
+    selection: internal.reducerState.selection,
+    story: internal.reducerState.story,
+  }));
+
+  const copyToClipboard = useCallback(async () => {
+    const jsonStr = JSON.stringify(
+      { pages, current, selection, story },
+      null,
+      2
+    );
+    try {
+      await navigator.clipboard.writeText(jsonStr);
+      alert(__('Copied to clipboard', 'web-stories'));
+    } catch (err) {
+      alert(__('Failed to copy story data', 'web-stories'));
+    }
+  }, [pages, current, selection, story]);
+
+  if (!pages || !current || !selection || !story) {
+    return null;
+  }
+
+  return (
+    <Button
+      onClick={copyToClipboard}
+      variant={BUTTON_VARIANTS.RECTANGLE}
+      type={BUTTON_TYPES.QUATERNARY}
+      size={BUTTON_SIZES.SMALL}
+    >
+      {__('Copy story data', 'web-stories')}
+    </Button>
+  );
+}
+
+export default CopyStoryDataToClipboard;

packages/story-editor/src/components/errorBoundary/errorActions.js

@@ -27,6 +27,11 @@ import {
   BUTTON_VARIANTS,
 } from '@googleforcreators/design-system';
 
+/**
+ * Internal dependencies
+ */
+import CopyStoryDataToClipboard from './copyStoryDataToClipboard';
+
 const Message = styled.div`
   color: #fff;
   font-size: 16px;
@@ -86,6 +91,7 @@ function ErrorActions({ error, errorInfo }) {
         >
           {__('Reload', 'web-stories')}
         </Button>
+        <CopyStoryDataToClipboard />
         <Button
           variant={BUTTON_VARIANTS.RECTANGLE}
           type={BUTTON_TYPES.PRIMARY}