CreateTemplateForm:Starter Template Permissions Check

Build 18378 on lilac/react-19
1200px
Read only
Build 18378 on lilac/react-19
View Storybook
ErrorBuild 18378 on lilac/react-19
View Storybook
The baseline is taller and thinner than the new snapshot (1168x742 to 1343x391).
Fail
CreateTemplateForm.stories.tsx
Unable to find an element with the placeholder text of: Organization name

Ignored nodes: comments, script, style
<body
  class="sb-main-padded sb-show-main"
>
  
    
  <div
    class="sb-preparing-story sb-wrapper"
  >
    
  
    <div
      class="sb-loader"
    />
    

  </div>
  


  <div
    class="sb-preparing-docs sb-wrapper"
  >
    
  
    <div
      class="sb-previewBlock"
    >
      
    
      <div
        class="sb-previewBlock_header"
      >
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
    
      </div>
      
    
      <div
        class="sb-previewBlock_body"
      >
        
      
        <div
          class="sb-loader"
        />
        
    
      </div>
      
  
    </div>
    
  
    <table
      aria-hidden="true"
      class="sb-argstableBlock"
    >
      
    
      <thead
        class="sb-argstableBlock-head"
      >
        
      
        <tr>
          
        
          <th>
            <span>
              Name
            </span>
          </th>
          
        
          <th>
            <span>
              Description
            </span>
          </th>
          
        
          <th>
            <span>
              Default
            </span>
          </th>
          
        
          <th>
            <span>
              Control 
            </span>
          </th>
          
      
        </tr>
        
    
      </thead>
      
    
      <tbody
        class="sb-argstableBlock-body"
      >
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span
              title="Required"
            >
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
    
      </tbody>
      
  
    </table>
    

  </div>
  


  <div
    class="sb-nopreview sb-wrapper"
  >
    
  
    <div
      class="sb-nopreview_main"
    >
      
    
      <h1
        class="sb-nopreview_heading sb-heading"
      >
        No Preview
      </h1>
      
    
      <p>
        Sorry, but you either have no stories or none are selected somehow.
      </p>
      
    
      <ul>
        
      
        <li>
          Please check the Storybook config.
        </li>
        
      
        <li>
          Try reloading the page.
        </li>
        
    
      </ul>
      
    
      <p>
        
      If the problem persists, check the browser console, or the terminal you've run Storybook from.
    
      </p>
      
  
    </div>
    

  </div>
  


  <div
    class="sb-errordisplay sb-wrapper"
  >
    
  
    <div
      class="sb-errordisplay_main"
    >
      
    
      <h1
        id="error-message"
      />
      
    
      <p>
        
      The component failed to render properly, likely due to a configuration issue in Storybook.
      Here are some common causes and how you can address them:
    
      </p>
      
    
      <ol>
        
      
        <li>
          
        
          <strong>
            Missing Context/Providers
          </strong>
          : You can use decorators to supply specific
        contexts or providers, which are sometimes necessary for components to render correctly. For
        detailed instructions on using decorators, please visit the
        
          <a
            href="https://storybook.js.org/docs/writing-stories/decorators"
          >
            Decorators documentation
          </a>
          .
      
        </li>
        
      
        <li>
          
        
          <strong>
            Misconfigured Webpack or Vite
          </strong>
          : Verify that Storybook picks up all necessary
        settings for loaders, plugins, and other relevant parameters. You can find step-by-step
        guides for configuring
        
          <a
            href="https://storybook.js.org/docs/builders/webpack"
          >
            Webpack
          </a>
           or
        
          <a
            href="https://storybook.js.org/docs/builders/vite"
          >
            Vite
          </a>
          
        with Storybook.
      
        </li>
        
      
        <li>
          
        
          <strong>
            Missing Environment Variables
          </strong>
          : Your Storybook may require specific
        environment variables to function as intended. You can set up custom environment variables
        as outlined in the
        
          <a
            href="https://storybook.js.org/docs/configure/environment-variables"
          >
            Environment Variables documentation
          </a>
          .
      
        </li>
        
    
      </ol>
      
    
      <pre
        class="sb-errordisplay_code"
      >
        <code
          id="error-stack"
        />
      </pre>
      
  
    </div>
    

  </div>
  

    
  <div
    id="storybook-root"
  >
    <h2>
      Unexpected Application Error!
    </h2>
    <h3
      style="font-style: italic;"
    >
      useLocation() may be used only in the context of a &lt;Router&gt; component.
    </h3>
    <pre
      style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
    >
      Error: useLocation() may be used only in the context of a &lt;Router&gt; component.
    at w (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:10:60)
    at L (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:10:7227)
    at ur (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:12:17110)
    at Ee (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/CreateTemplateForm.stories-BZQbPRiH.js:4:1640)
    at de (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:42343)
    at Of (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:63243)
    at L1 (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:73938)
    at Sv (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:115220)
    at My (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:114335)
    at Jc (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:114173)
    </pre>
  </div>
  
    
  <div
    hidden="true"
    id="storybook-docs"
  />
  
  


</body>
View in Storybook
Chrome 121
1343x391
Linux Linux Ubuntu 20.04.4
34b4c1 on lilac/react-19
Caught exception in play function

This story threw an error after it finished rendering which means interactions may not have been executed fully.

TestingLibraryElementError: Unable to find an element with the placeholder text of: Organization name

Ignored nodes: comments, script, style
<body
  class="sb-main-padded sb-show-main"
>
  
    
  <div
    class="sb-preparing-story sb-wrapper"
  >
    
  
    <div
      class="sb-loader"
    />
    

  </div>
  


  <div
    class="sb-preparing-docs sb-wrapper"
  >
    
  
    <div
      class="sb-previewBlock"
    >
      
    
      <div
        class="sb-previewBlock_header"
      >
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
    
      </div>
      
    
      <div
        class="sb-previewBlock_body"
      >
        
      
        <div
          class="sb-loader"
        />
        
    
      </div>
      
  
    </div>
    
  
    <table
      aria-hidden="true"
      class="sb-argstableBlock"
    >
      
    
      <thead
        class="sb-argstableBlock-head"
      >
        
      
        <tr>
          
        
          <th>
            <span>
              Name
            </span>
          </th>
          
        
          <th>
            <span>
              Description
            </span>
          </th>
          
        
          <th>
            <span>
              Default
            </span>
          </th>
          
        
          <th>
            <span>
              Control 
            </span>
          </th>
          
      
        </tr>
        
    
      </thead>
      
    
      <tbody
        class="sb-argstableBlock-body"
      >
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span
              title="Required"
            >
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
    
      </tbody>
      
  
    </table>
    

  </div>
  


  <div
    class="sb-nopreview sb-wrapper"
  >
    
  
    <div
      class="sb-nopreview_main"
    >
      
    
      <h1
        class="sb-nopreview_heading sb-heading"
      >
        No Preview
      </h1>
      
    
      <p>
        Sorry, but you either have no stories or none are selected somehow.
      </p>
      
    
      <ul>
        
      
        <li>
          Please check the Storybook config.
        </li>
        
      
        <li>
          Try reloading the page.
        </li>
        
    
      </ul>
      
    
      <p>
        
      If the problem persists, check the browser console, or the terminal you've run Storybook from.
    
      </p>
      
  
    </div>
    

  </div>
  


  <div
    class="sb-errordisplay sb-wrapper"
  >
    
  
    <div
      class="sb-errordisplay_main"
    >
      
    
      <h1
        id="error-message"
      />
      
    
      <p>
        
      The component failed to render properly, likely due to a configuration issue in Storybook.
      Here are some common causes and how you can address them:
    
      </p>
      
    
      <ol>
        
      
        <li>
          
        
          <strong>
            Missing Context/Providers
          </strong>
          : You can use decorators to supply specific
        contexts or providers, which are sometimes necessary for components to render correctly. For
        detailed instructions on using decorators, please visit the
        
          <a
            href="https://storybook.js.org/docs/writing-stories/decorators"
          >
            Decorators documentation
          </a>
          .
      
        </li>
        
      
        <li>
          
        
          <strong>
            Misconfigured Webpack or Vite
          </strong>
          : Verify that Storybook picks up all necessary
        settings for loaders, plugins, and other relevant parameters. You can find step-by-step
        guides for configuring
        
          <a
            href="https://storybook.js.org/docs/builders/webpack"
          >
            Webpack
          </a>
           or
        
          <a
            href="https://storybook.js.org/docs/builders/vite"
          >
            Vite
          </a>
          
        with Storybook.
      
        </li>
        
      
        <li>
          
        
          <strong>
            Missing Environment Variables
          </strong>
          : Your Storybook may require specific
        environment variables to function as intended. You can set up custom environment variables
        as outlined in the
        
          <a
            href="https://storybook.js.org/docs/configure/environment-variables"
          >
            Environment Variables documentation
          </a>
          .
      
        </li>
        
    
      </ol>
      
    
      <pre
        class="sb-errordisplay_code"
      >
        <code
          id="error-stack"
        />
      </pre>
      
  
    </div>
    

  </div>
  

    
  <div
    id="storybook-root"
  >
    <h2>
      Unexpected Application Error!
    </h2>
    <h3
      style="font-style: italic;"
    >
      useLocation() may be used only in the context of a &lt;Router&gt; component.
    </h3>
    <pre
      style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
    >
      Error: useLocation() may be used only in the context of a &lt;Router&gt; component.
    at w (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:10:60)
    at L (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:10:7227)
    at ur (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:12:17110)
    at Ee (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/CreateTemplateForm.stories-BZQbPRiH.js:4:1640)
    at de (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:42343)
    at Of (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:63243)
    at L1 (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:73938)
    at Sv (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:115220)
    at My (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:114335)
    at Jc (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:114173)
    </pre>
  </div>
  
    
  <div
    hidden="true"
    id="storybook-docs"
  />
  
  


</body>
    at Object.getElementError (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:184:284)
    at https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:206:163
    at https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:198:4139
    at https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:206:386
    at r_.invoke (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:48:8338)
    at r_.track (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:48:5570)
    at Proxy.getByPlaceholderText (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:48:4943)
    at play (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/CreateTemplateForm.stories-BZQbPRiH.js:4:5429)
    at https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/sb-preview/runtime.js:5985:60
    at mn.runPhase (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/sb-preview/runtime.js:5872:100)