Bugs and improvements found in the 3.1 beta

[naturedamends]

Just a place for me to scratch any issues I found while using the beta. I'm not sure if they are a issue with the beta or something thats an issue with the flow. Here while I investigate them. Ask if you wan't me to create an issue.
Any small pointers to the bugs are appreciated. Happy to make a pr if it's not to large

Using editorial workflow
and turned off deploy previews.

All issues are reported on iPad

I have custom provider, which is just GitHub

Getting stuck on ready, can't publish

Sometime, after editing a page, saving, moving from draft to ready, I then get stuck. I can't click publish, no error toast or anything. Refreshing the page works correct

Restore from cache retrieval failed after closed page by accident

When opening the page, it asked if it should retrieve, I confirm it , seems to redirect and reopens the old page
On iPad os 17

editorial workflow - validation error on save after save

When creating a post, after saving it, i clicked cancel to stay on the same page, after editing the content somemore, I pressed save again and was shown a error validation toast

on iPad, I keep getting forward slashes added when using the rich text editor

This sometimes crashes the editor, other times it just adds the slash, seemly only after a header opening character.

I wasn't typing slashes, but it may be related to hovering and or dragging to get the editor menu bar into view.
Perhaps copy pasting or highlighting the text, not sure

[demshy]

Hey, we appreciate you taking the time for this.
I have reproduced the validation error - I think the first prompt (where you hit cancel) should not appear. I will look into it and get back to you when I find out more.

[demshy]

Hey, I have found the cause for this one and the fix - #6981
The problem is, that we need to update some fixtures for the tests to pass and it's taking longer than I thought it would.

I will notify you once the fix is released into beta, then I will investigate the other issues.

[naturedamends]

Don’t rush on my account.

[demshy]

Just letting you know that we released a new beta including the fix. Would be cool if you test it out.

[naturedamends]

I've updated my dev stuff. I'll update this discussions as a result of any findings. Don't wait on me, i'm only using it to get my cv site running.

Beta 3 boots fine and looks all good on first glance.

[demshy]

Great to hear. We are just glad that we have some feedback for the beta :)

[demshy]

Getting stuck on ready, can't publish
Can you describe some more (or maybe get a screenshot once this happens) what exactly happens here. Is the publish button there but non responsive/disabled, or not present at all? Does the tile land in the Ready column?

[naturedamends]

Yeah no problem. I will next time it happens, its on a dev site so I didn't want to publish the text and url etc. plus on ipad its hard to redact text etc. Might be a while, not sure what caused it, it don't think its within the direct flow. Must have been something else that caused it to get into a invalid state

[naturedamends]

Getting stuck on ready, can't publish

Can you describe some more (or maybe get a screenshot once this happens) what exactly happens here. Is the publish button there but non responsive/disabled, or not present at all? Does the tile land in the Ready column?

Sorry no screenshot, but there is nothing conspicuous happening, my viewport wasn't open long. Publish button is as to be expected, the item gets the ready state successfully and I can click workflow and see it there. Returning to the page via the UI presents the same issues being stuck. Refreshing the page resolves the issues. The changes were saved to the backend provider successfully, it's not retrieving items from the cache. Clicking the button does nothing.

I'll post better detail if I encounter it while on the decap-app dev test provider, but I'm limited in time sorry.

It happened multiple times during writing a couple of pages, all on iPad, all after a little time within the page. Not too long that's it's noteworthy tho

I was jumping tabs often, this time, using the markdown editor, not rich text.

I have seen this present with markdown editor and rich text editor, so guess it's something in the workflow actions

My collections and the configuration representing the page in question is nothing special, just basic body and some strings in the font matter.

Doubt it's related to a specific page/config but perhaps

It looks like the last user flow hurdle, for me, at least using the markdown txt editor

[demshy]

I have opened an issue for the cache one which I easily reproduced: #6989

[Isaac-Tait]

I am getting an error that I need some help deciphering.

I was able to complete the install of the Decap beta once the gatsby-plugin-decap-cms plugin was released. Now, I am getting this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `BlogPostPage`.

BlogPostPage is as follows:

import React from 'react';
import { graphql, Link } from 'gatsby';
import { MDXRenderer } from 'gatsby-plugin-mdx';

import Header from '../components/header';
import Bio from '../components/bio';

export const pageQuery = graphql`
  query blogPost($id: String!, $previous: String, $next: String) {
    mdx(id: { eq: $id }) {
      frontmatter {
        title
      }
      body
      id
    }
    previous: mdx(id: { eq: $previous }) {
      fields {
        slug
      }
    }
    next: mdx(id: { eq: $next }) {
      fields {
        slug
      }
    }
  }
`;

const BlogPostPage = ({ data, pageContext, location }) => {
  console.log(data, pageContext);
  const post = data.mdx;
  const { previous, next } = data;

  return (
    <div
      location={location}
      className="bg-gradient-to-r from-pink-200 to-indigo-200"
    >
      <Header />
      {/* 👇🏼 Blog post content*/}
      <div className="max-w-6xl mx-auto md:h-screen overflow-auto">
        <div className="mx-4 text-gray-800 pt-4">
          <MDXRenderer>{post.body}</MDXRenderer>
        </div>
        <nav className="flex flex-wrap w-full justify-between px-4">
          <div>
            {next && (
              <Link to={`/updates${data.next.fields.slug}`} rel="next">
                <button className="bg-green-200 px-2 my-4 rounded-xl text-gray-200">
                  Older Updates
                </button>
              </Link>
            )}
          </div>
          <div>
            {previous && (
              <Link to={`/updates${data.previous.fields.slug}`} rel="prev">
                <button className="bg-green-200 px-2 my-4 rounded-xl text-gray-200">
                  Newer Updates
                </button>
              </Link>
            )}
          </div>
        </nav>
      </div>

      <div className="flex flex-wrap justify-center content-center">
        <p className="text-gray-600">
          Were you looking for something else? Head on over to our&nbsp;
        </p>
        <Link to={'/search'} className="underline text-red-400">
          search page
        </Link>
      </div>
      {/* 👆🏻 End of blog post content*/}
      <Bio />
    </div>
  );
};

export default BlogPostPage;

and this is my gatsby-node.js

const path = require(`path`);
const { createFilePath } = require(`gatsby-source-filesystem`);

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const blogTemplate = path.resolve(`./src/templates/Blogpost.js`); //template for individual blog posts
  const blogPosts = path.resolve(`./src/templates/blog-post-list.js`); //template for url/blog page
  const result = await graphql(
    `
      {
        allMdx(sort: { fields: [frontmatter___date], order: DESC }) {
          edges {
            node {
              body
              id
              frontmatter {
                title
              }
              fields {
                slug
              }
            }
          }
        }
      }
    `,
  );

  const posts = result.data.allMdx.edges;
  if (posts.length > 0) {
    posts.forEach((post, index) => {
      const previous = index === 0 ? null : posts[index - 1].node.id;
      const next = index === posts.length - 1 ? null : posts[index + 1].node.id;
      createPage({
        path: `/updates${post.node.fields.slug}`,
        component: blogTemplate,
        context: {
          id: post.node.id,
          previous,
          next,
        },
      });
    });
  }

  const postsPerPage = 4;
  const numPages = Math.ceil(posts.length / postsPerPage);

  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: i === 0 ? `/updates` : `/updates/${i + 1}`,
      component: blogPosts,
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    });
  });
};

// The following address using slug with MDX 2 and v4 of the plugin
// https://paulie.dev/posts/2022/09/mdx-2-breaking-changes-and-gatsby-plugin-mdx-v4-slug/

exports.onCreateNode = ({ node, getNode, actions: { createNodeField } }) => {
  if (node.internal.type === 'Mdx') {
    createNodeField({
      node,
      name: 'slug',
      value: createFilePath({ node, getNode }),
    });
  }
};

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions;
  if (node.internal.type === `Mdx`) {
    const value = createFilePath({ node, getNode });
    createNodeField({
      name: `slug`,
      value,
      node,
    });
  }
};

//I like turtles

It is highly likely that this is a syntax/protocol change (I also concurrently updated Gatsby from 4.25.5 to 5.12.11 something I was unable to do because the netlify-cms-app would not work on a newer version of Gatsby) that I am not aware of...

EDIT: The error is only cropping up in localhost, there is no error in the terminal...

[naturedamends]

Build issue? import BlogPage from ‘./location’ not working. If it works in local host but not production, perhaps the module is transformed incorrectly