Merge branch 'master' into fill-toggle-feedback

* master: (53 commits)
  Inline text formatting (#1323)
  Bump terser-webpack-plugin from 2.3.6 to 3.0.1 (#1597)
  Allow disabling warning on exit in development (#1176)
  fixing indent that was missed by automation
  Deploy plugin bundle to wiki repo for easier QA (#1590)
  Fix initial height of preset panel (#1591)
  Fixes editor resizing after fullbleed (#1553)
  More error handling
  Fix file drag & drop crash for unsupported media types (#1431)
  Improve test
  Bump polished from 3.6.1 to 3.6.2 (#1577)
  Bump react-transition-group from 4.3.0 to 4.4.0 (#1565)
  Remove Delete Page shortcut tooltip (#1574)
  renaming filteredStories to just stories. they are not filtered.
  updating typeahead input and options for new designs. New colors, tighter space, different expanded view. Removing option to filter internally through typeahead since we do all of that outside of the component. some styled component cleanup
  Remove wp element.
  Bump @testing-library/dom from 7.2.2 to 7.3.0 (#1563)
  Remove wp element
  Lints in tests
  Add more tests
  ...

.github/workflows/cleanup-pr-assets.yml

@@ -0,0 +1,34 @@
+# This workflow removes any assets created for manual QA testing
+# from the GitHub Wiki repository once a pull request is closed.
+#
+# See https://github.com/google/web-stories-wp/issues/1398
+
+name: Clean up PR assets for closed PRs
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  remove-pr:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          repository: ${{ github.repository }}.wiki
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Prune PR files
+        run: |
+          rm -rf "refs/pull/${{ github.event.pull_request.number }}"
+          git add .
+          git status
+          git diff --staged --quiet && echo 'No changes to commit; exiting!' && exit 0
+          git commit -m "Prune refs/pull/${{ github.event.pull_request.number }}"
+          git push origin master
+        env:
+          GIT_AUTHOR_EMAIL: ${{ github.actor }}@users.noreply.github.com
+          GIT_AUTHOR_NAME: ${{ github.actor }}
+          GIT_COMMITTER_EMAIL: ${{ github.actor }}@users.noreply.github.com
+          GIT_COMMITTER_NAME: ${{ github.actor }}

.github/workflows/continuous-integration.yml

@@ -71,7 +71,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: '${{ steps.nvm.outputs.NVMRC }}'
 
       - name: Setup npm cache
         uses: pat-s/always-upload-cache@v1.1.4
@@ -96,8 +96,8 @@ jobs:
       - name: Annotate Code Linting Results
         uses: ataylorme/eslint-annotate-action@1.0.4
         with:
-          repo-token: "${{ secrets.GITHUB_TOKEN }}"
-          report-json: "build/lint-js-report.json"
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          report-json: 'build/lint-js-report.json'
 
   markdownlint:
     name: Markdown Code Style
@@ -113,7 +113,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: '${{ steps.nvm.outputs.NVMRC }}'
 
       - name: Setup npm cache
         uses: pat-s/always-upload-cache@v1.1.4
@@ -148,7 +148,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: '${{ steps.nvm.outputs.NVMRC }}'
 
       - name: Setup npm cache
         uses: pat-s/always-upload-cache@v1.1.4
@@ -328,7 +328,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: '${{ steps.nvm.outputs.NVMRC }}'
 
       - name: Setup npm cache
         uses: pat-s/always-upload-cache@v1.1.4
@@ -405,7 +405,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: '${{ steps.nvm.outputs.NVMRC }}'
 
       - name: Setup npm cache
         uses: pat-s/always-upload-cache@v1.1.4
@@ -447,18 +447,68 @@ jobs:
 
       - name: Bundle plugin
         run: |
+          npm run build:js
           npm run build:plugin
           npm run bundle-plugin web-stories.zip
           npm run bundle-plugin web-stories-composer.zip -- --composer
 
+      - name: Bundle development version
+        run: |
+          rm -rf assets/css/* assets/js/*
+          NODE_ENV=development npx webpack
+          npm run build:plugin
+          npm run bundle-plugin web-stories-dev.zip
+
       - name: Upload full bundle
-        uses: actions/upload-artifact@v1
+        uses: actions/upload-artifact@v2
         with:
           name: web-stories.zip
           path: build/web-stories.zip
 
       - name: Upload composer bundle
-        uses: actions/upload-artifact@v1
+        uses: actions/upload-artifact@v2
         with:
           name: web-stories-composer.zip
           path: build/web-stories-composer.zip
+
+      - name: Upload development bundle
+        uses: actions/upload-artifact@v2
+        with:
+          name: web-stories-dev.zip
+          path: build/web-stories-dev.zip
+
+      - name: Upload bundles in combined ZIP file
+        uses: actions/upload-artifact@v2
+        with:
+          name: All ZIP Files
+          path: build/*.zip
+
+  deploy-to-wiki:
+    name: Deploy artefacts to wiki for easier QA testing
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          repository: ${{ github.repository }}.wiki
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Download combined ZIP file
+        uses: actions/download-artifact@v2
+        with:
+          name: All ZIP Files
+          path: ${{ github.ref }}
+
+      - name: Commit updates
+        run: |
+          git add .
+          git status
+          git commit -m "Build and publish ${{ github.ref }}"
+          git pull --no-edit --quiet
+          git push origin master
+        env:
+          GIT_AUTHOR_EMAIL: ${{ github.actor }}@users.noreply.github.com
+          GIT_AUTHOR_NAME: ${{ github.actor }}
+          GIT_COMMITTER_EMAIL: ${{ github.actor }}@users.noreply.github.com
+          GIT_COMMITTER_NAME: ${{ github.actor }}

.github/workflows/release-assets.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: '${{ steps.nvm.outputs.NVMRC }}'
 
       - name: Setup npm cache
         uses: pat-s/always-upload-cache@v1.1.4

assets/src/dashboard/app/views/myStories/index.js

@@ -53,6 +53,7 @@ import {
   NoResults,
   StoryGridView,
   StoryListView,
+  HeaderToggleButtonContainer,
 } from '../shared';
 
 const DefaultBodyText = styled.p`
@@ -192,7 +193,7 @@ function MyStories() {
             updateStory={updateStory}
             createTemplateFromStory={createTemplateFromStory}
             duplicateStory={duplicateStory}
-            filteredStories={orderedStories}
+            stories={orderedStories}
             centerActionLabel={
               <>
                 <PlayArrowIcon />
@@ -205,7 +206,7 @@ function MyStories() {
       case VIEW_STYLE.LIST:
         return (
           <StoryListView
-            filteredStories={orderedStories}
+            stories={orderedStories}
             storySort={currentStorySort}
             sortDirection={currentListSortDirection}
             handleSortChange={handleNewStorySort}
@@ -296,21 +297,23 @@ function MyStories() {
               <PageHeading
                 defaultTitle={__('My Stories', 'web-stories')}
                 searchPlaceholder={__('Search Stories', 'web-stories')}
-                filteredStories={orderedStories}
+                stories={orderedStories}
                 handleTypeaheadChange={handleTypeaheadChange}
                 typeaheadValue={typeaheadValue}
               >
-                <ToggleButtonGroup
-                  buttons={STORY_STATUSES.map((storyStatus) => {
-                    return {
-                      handleClick: () =>
-                        handleFilterStatusUpdate(storyStatus.value),
-                      key: storyStatus.value,
-                      isActive: status === storyStatus.value,
-                      text: storyStatus.label,
-                    };
-                  })}
-                />
+                <HeaderToggleButtonContainer>
+                  <ToggleButtonGroup
+                    buttons={STORY_STATUSES.map((storyStatus) => {
+                      return {
+                        handleClick: () =>
+                          handleFilterStatusUpdate(storyStatus.value),
+                        key: storyStatus.value,
+                        isActive: status === storyStatus.value,
+                        text: storyStatus.label,
+                      };
+                    })}
+                  />
+                </HeaderToggleButtonContainer>
               </PageHeading>
               {storiesViewControls}
             </Layout.Squishable>

assets/src/dashboard/app/views/shared/bodyViewOptions.js

@@ -74,6 +74,7 @@ const BodyViewOptions = ({
         {layoutStyle === VIEW_STYLE.GRID && (
           <StorySortDropdownContainer>
             <SortDropdown
+              alignment="flex-end"
               ariaLabel={sortDropdownAriaLabel}
               items={STORY_SORT_MENU_ITEMS}
               type={DROPDOWN_TYPES.TRANSPARENT_MENU}

assets/src/dashboard/app/views/shared/index.js

@@ -17,7 +17,10 @@
 export { default as BodyWrapper } from './bodyWrapper';
 export { default as BodyViewOptions } from './bodyViewOptions';
 export { default as NoResults } from './noResults';
-export { default as PageHeading } from './pageHeading';
+export {
+  default as PageHeading,
+  HeaderToggleButtonContainer,
+} from './pageHeading';
 export { default as StoryGridView } from './storyGridView';
 export { default as StoryListView } from './storyListView';
 export { default as TypeaheadSearch } from './typeaheadSearch';

assets/src/dashboard/app/views/shared/pageHeading.js

@@ -46,7 +46,9 @@ const StyledHeader = styled(ViewHeader)`
 `;
 
 const Content = styled.div`
-  display: block;
+  display: flex;
+  align-items: ${({ centerContent }) =>
+    centerContent ? 'center' : 'flex-end'};
   height: 100%;
 `;
 
@@ -68,22 +70,31 @@ const SearchInner = styled.div`
   top: 0;
   right: 0;
   width: min(190px, 100%);
+  display: flex;
+  justify-content: flex-end;
 `;
 
 const HeadingBodyWrapper = styled(BodyWrapper)`
   display: grid;
   grid-template-columns: 25% 50% 1fr;
-  align-items: start;
+  align-items: center;
   height: 75px;
   padding-bottom: 3px;
   border-bottom: ${({ theme }) => theme.subNavigationBar.border};
 `;
 
+export const HeaderToggleButtonContainer = styled.div`
+  display: block;
+  flex: 1;
+  height: 65%;
+`;
+
 const PageHeading = ({
   children,
   defaultTitle,
   searchPlaceholder,
-  filteredStories = [],
+  centerContent = false,
+  stories = [],
   handleTypeaheadChange,
   typeaheadValue = '',
 }) => {
@@ -94,13 +105,13 @@ const PageHeading = ({
           <NavMenuButton showOnlyOnSmallViewport />
           {defaultTitle}
         </StyledHeader>
-        <Content>{children}</Content>
+        <Content centerContent={centerContent}>{children}</Content>
         <SearchContainer>
           <SearchInner>
             <TypeaheadSearch
               placeholder={searchPlaceholder}
               currentValue={typeaheadValue}
-              filteredStories={filteredStories}
+              stories={stories}
               handleChange={handleTypeaheadChange}
             />
           </SearchInner>
@@ -115,9 +126,10 @@ PageHeading.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]),
+  centerContent: PropTypes.bool,
   defaultTitle: PropTypes.string.isRequired,
   searchPlaceholder: PropTypes.string,
-  filteredStories: StoriesPropType,
+  stories: StoriesPropType,
   handleTypeaheadChange: PropTypes.func,
   typeaheadValue: PropTypes.string,
 };

assets/src/dashboard/app/views/shared/stories/pageHeading.js

@@ -0,0 +1,52 @@
+/*
+ * 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 { boolean, text } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import styled from 'styled-components';
+
+/**
+ * Internal dependencies
+ */
+import { PageHeading } from '../';
+
+export default {
+  title: 'Dashboard/Components/PageHeading',
+  component: PageHeading,
+};
+
+const InnerContent = styled.div`
+  background-color: red;
+  width: 100%;
+  height: 50%;
+`;
+
+export const _default = () => {
+  return (
+    <PageHeading
+      centerContent={boolean('Center Inner Content', false)}
+      stories={[]}
+      handleTypeaheadChange={(value) => action('Search with value: ', value)}
+      defaultTitle={text('Page Heading', 'My Stories')}
+      searchPlaceholder={text('Search Placeholder', 'Find Stories')}
+    >
+      <InnerContent />
+    </PageHeading>
+  );
+};