Add graphql playground link to tools panel (#5807)

* Add graphql playground link to tools panel
* Move to separate section

ui/v2.5/src/components/Settings/SettingsToolsPanel.tsx

@@ -5,11 +5,26 @@ import { Link } from "react-router-dom";
 import { Setting } from "./Inputs";
 import { SettingSection } from "./SettingSection";
 import { PatchContainerComponent } from "src/patch";
+import { ExternalLink } from "../Shared/ExternalLink";
 
 const SettingsToolsSection = PatchContainerComponent("SettingsToolsSection");
 
 export const SettingsToolsPanel: React.FC = () => {
   return (
+    <>
+      <SettingSection headingID="config.tools.heading">
+        <SettingsToolsSection>
+          <Setting
+            heading={
+              <ExternalLink href="/playground">
+                <Button>
+                  <FormattedMessage id="config.tools.graphql_playground" />
+                </Button>
+              </ExternalLink>
+            }
+          />
+        </SettingsToolsSection>
+      </SettingSection>
       <SettingSection headingID="config.tools.scene_tools">
         <SettingsToolsSection>
           <Setting
@@ -33,5 +48,6 @@ export const SettingsToolsPanel: React.FC = () => {
           />
         </SettingsToolsSection>
       </SettingSection>
+    </>
   );
 };

ui/v2.5/src/locales/en-GB.json

@@ -569,6 +569,8 @@
       "set_name_date_details_from_metadata_if_present": "Set name, date, details from embedded file metadata"
     },
     "tools": {
+      "graphql_playground": "GraphQL playground",
+      "heading": "Tools",
       "scene_duplicate_checker": "Scene Duplicate Checker",
       "scene_filename_parser": {
         "add_field": "Add Field",