Rebuild main admin page

[Shelob9]

Some initial work will get merged with #2444 but not used.

[Shelob9]

@New0

OK, I'm ready to hand this one to you. I copied in most of the plugin I was using to develop this, we are no longer using that repo. Just Caldera Forms.

• The JS for this goes in /clients/admin
• All work goes on branch project/admin-refactor see PR: [WIP] Replace main admin screen with a shiny new React and REST API-driven web app #2707

Todos for @New0 after 05d8c74

• CSS. I do not want a radical departure yet, but we should be using Gutenberg style whenever we can. You need to start owning these decisions :)
  • webpack is not compiling CSS right, yet. I'll figure it out if you do not.
• New Form component
  • It looks bad, I am not really sure what we want here, we need to discuss.
  • It does not save. https://calderalabs.org/caldera-api-client/manual/overview.html#create-or-clone-a-form
• Settings tab (once it doesn't make errors from @wordpress/componets)
  • Tabs Design caldera-admin-client#4
  • Should match the sideview of tabs in Caldera Forms.
  • Should allow saving of settings (need to merge Add REST API endpoint to read/update general settings  #2695 which adds the REST API endpoints)
• Form search and orderby - This section functions, works/looks not so good.
• Recreate the help areas Improve HelpBoxes/ Upsells in main admin #2769
• Clone form
  • Add link to Form component
  • Make form clone component
  • The form create endpoint ( Add new REST API routes for forms #2692 which is merged to this branch) can be used to clone forms

  • Caldera-Forms/classes/api/forms.php

    Line 456 in b474551

    'clone' => [

Todos for @Shelob9 after 05d8c74

• Fix webpack so WordPress components import properly (this is why clicking Settings button breaks everything BTW)
• Figure out temporary solution for entry viewer
• Remove old pro Ui
  • Remove page
  • Remove client
• Pro settings in CF editor tab
• Make Form Editor not totally break (its happening because editor needs old admin.js which is no longer enqueued) Make which admin script loads determined by filter #2789

[Shelob9]

Pretty sure to add CSS compilation from clients/admin.index.scss to clients/admin/build/style.css we would need to add a CSS loader in webpack

new ExtractTextPlugin( {
  filename: '.clients/admin.index.scss',
} );

and also fix the saas loader.

https://github.com/zgordon/how-to-gutenberg-plugin/blob/master/webpack.config.js

[Shelob9]

For the tabs import { TabPanel } from '@wordpress/components'; https://github.com/WordPress/gutenberg/tree/master/packages/components/src/tab-panel

[Shelob9]

Form search #1912 and orderby #1911

[Shelob9]

@New0 here is the new mockup I promised:

These are notes corresponding to the numbers in the image:

1. Form list component exists - https://github.com/CalderaWP/caldera-js/tree/master/packages/components/src/components/elements/FormsList
   • I have a POC for search I need to find and add. Add form list search component caldera-js#1
2. New form, import and settings we do not have components for, would need to make those using HorizontalForm
   • https://github.com/CalderaWP/caldera-js/tree/master/packages/forms/src/HorizontalForm
   • No modals! When you click those, put the settings they reveal where form list is now.
3. Doc search. This is important. We could reuse this: https://github.com/CalderaWP/caldera-forms-docs-search/blob/master/src/DocSearch.js
4. These bars are clickable -- probably need button to make that. This an accordion.
   • When you enter pro tab, if you do not have pro active, this should embed the /pro page. Need a button to bring up API key settings. If you do have pro active, this should be the CF Pro settings.
   • Other tabs would embed via iFrame from CalderaForms.com. For example, translate tab would be what is in between header and footer here-> https://calderaforms.com/translate/
   • We need an iFrame loader component Add an iFrame wrapper component caldera-js#2
   • Entry viewer opens into this space, let's use an iFrame for now. I am not happy with what I have here: https://github.com/CalderaWP/caldera-js/tree/master/packages/components/src/components/EntryViewer
5. I'd love to get the new logo in there now. Depends on if we can re-brand the site that quickly or not.

Also:

• We need a basic admin component to provide state and API connection.
  • Caldera Forms main admin page component to provide state and API connection caldera-js#3
• I built a lot of stuff into privacy settings UI with reuse of UI components in mind:
  • https://github.com/CalderaWP/Caldera-Forms/tree/master/clients/components
  • https://github.com/CalderaWP/Caldera-Forms/tree/master/clients/privacy/components