Add graphQL UI

lib/screens/home_page/editor_pane/details_card/request_pane/request_pane.dart

@@ -1,54 +1,23 @@
+import 'package:apidash_core/apidash_core.dart';
+import 'package:apidash_design_system/apidash_design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:apidash/providers/providers.dart';
-import 'package:apidash/widgets/widgets.dart';
+import 'request_pane_graphql.dart';
-import 'request_headers.dart';
+import 'request_pane_rest.dart';
-import 'request_params.dart';
-import 'request_body.dart';
 
 class EditRequestPane extends ConsumerWidget {
   const EditRequestPane({super.key});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final selectedId = ref.watch(selectedIdStateProvider);
+    ref.watch(selectedIdStateProvider);
-    final codePaneVisible = ref.watch(codePaneVisibleStateProvider);
+    final apiType = ref
-    final tabIndex = ref.watch(
+        .watch(selectedRequestModelProvider.select((value) => value?.apiType));
-        selectedRequestModelProvider.select((value) => value?.requestTabIndex));
+    return switch (apiType) {
-
+      APIType.rest => const EditRestRequestPane(),
-    final headerLength = ref.watch(selectedRequestModelProvider
+      APIType.graphql => const EditGraphQLRequestPane(),
-            .select((value) => value?.httpRequestModel?.headersMap.length)) ??
+      _ => kSizedBoxEmpty,
-        0;
+    };
-    final paramLength = ref.watch(selectedRequestModelProvider
-            .select((value) => value?.httpRequestModel?.paramsMap.length)) ??
-        0;
-    final hasBody = ref.watch(selectedRequestModelProvider
-            .select((value) => value?.httpRequestModel?.hasBody)) ??
-        false;
-
-    return RequestPane(
-      selectedId: selectedId,
-      codePaneVisible: codePaneVisible,
-      tabIndex: tabIndex,
-      onPressedCodeButton: () {
-        ref.read(codePaneVisibleStateProvider.notifier).state =
-            !codePaneVisible;
-      },
-      onTapTabBar: (index) {
-        ref
-            .read(collectionStateNotifierProvider.notifier)
-            .update(selectedId!, requestTabIndex: index);
-      },
-      showIndicators: [
-        paramLength > 0,
-        headerLength > 0,
-        hasBody,
-      ],
-      children: const [
-        EditRequestURLParams(),
-        EditRequestHeaders(),
-        EditRequestBody(),
-      ],
-    );
   }
 }

lib/screens/home_page/editor_pane/details_card/request_pane/request_pane_graphql.dart

@@ -0,0 +1,51 @@
+import 'package:apidash/consts.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:apidash/providers/providers.dart';
+import 'package:apidash/widgets/widgets.dart';
+import 'request_headers.dart';
+import 'request_body.dart';
+
+class EditGraphQLRequestPane extends ConsumerWidget {
+  const EditGraphQLRequestPane({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final selectedId = ref.watch(selectedIdStateProvider);
+    var tabIndex = ref.watch(
+        selectedRequestModelProvider.select((value) => value?.requestTabIndex));
+
+    final headerLength = ref.watch(selectedRequestModelProvider
+            .select((value) => value?.httpRequestModel?.headersMap.length)) ??
+        0;
+    final hasQuery = ref.watch(selectedRequestModelProvider
+            .select((value) => value?.httpRequestModel?.hasQuery)) ??
+        false;
+    if (tabIndex >= 2) {
+      tabIndex = 0;
+    }
+    return RequestPane(
+      selectedId: selectedId,
+      codePaneVisible: false,
+      showViewCodeButton: false,
+      tabIndex: tabIndex,
+      onTapTabBar: (index) {
+        ref
+            .read(collectionStateNotifierProvider.notifier)
+            .update(requestTabIndex: index);
+      },
+      showIndicators: [
+        headerLength > 0,
+        hasQuery,
+      ],
+      tabLabels: const [
+        kLabelHeaders,
+        kLabelQuery,
+      ],
+      children: const [
+        EditRequestHeaders(),
+        EditRequestBody(),
+      ],
+    );
+  }
+}

lib/screens/home_page/editor_pane/details_card/request_pane/request_pane_rest.dart

@@ -0,0 +1,60 @@
+import 'package:apidash/consts.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:apidash/providers/providers.dart';
+import 'package:apidash/widgets/widgets.dart';
+import 'request_headers.dart';
+import 'request_params.dart';
+import 'request_body.dart';
+
+class EditRestRequestPane extends ConsumerWidget {
+  const EditRestRequestPane({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final selectedId = ref.watch(selectedIdStateProvider);
+    final codePaneVisible = ref.watch(codePaneVisibleStateProvider);
+    final tabIndex = ref.watch(
+        selectedRequestModelProvider.select((value) => value?.requestTabIndex));
+
+    final headerLength = ref.watch(selectedRequestModelProvider
+            .select((value) => value?.httpRequestModel?.headersMap.length)) ??
+        0;
+    final paramLength = ref.watch(selectedRequestModelProvider
+            .select((value) => value?.httpRequestModel?.paramsMap.length)) ??
+        0;
+    final hasBody = ref.watch(selectedRequestModelProvider
+            .select((value) => value?.httpRequestModel?.hasBody)) ??
+        false;
+
+    return RequestPane(
+      selectedId: selectedId,
+      codePaneVisible: codePaneVisible,
+      tabIndex: tabIndex,
+      onPressedCodeButton: () {
+        ref.read(codePaneVisibleStateProvider.notifier).state =
+            !codePaneVisible;
+      },
+      onTapTabBar: (index) {
+        ref
+            .read(collectionStateNotifierProvider.notifier)
+            .update(requestTabIndex: index);
+      },
+      showIndicators: [
+        paramLength > 0,
+        headerLength > 0,
+        hasBody,
+      ],
+      tabLabels: const [
+        kLabelURLParams,
+        kLabelHeaders,
+        kLabelBody,
+      ],
+      children: const [
+        EditRequestURLParams(),
+        EditRequestHeaders(),
+        EditRequestBody(),
+      ],
+    );
+  }
+}

lib/screens/home_page/editor_pane/url_card.dart

@@ -6,11 +6,14 @@ import 'package:apidash/providers/providers.dart';
 import 'package:apidash/widgets/widgets.dart';
 import '../../common_widgets/common_widgets.dart';
 
-class EditorPaneRequestURLCard extends StatelessWidget {
+class EditorPaneRequestURLCard extends ConsumerWidget {
   const EditorPaneRequestURLCard({super.key});
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
+    ref.watch(selectedIdStateProvider);
+    final apiType = ref
+        .watch(selectedRequestModelProvider.select((value) => value?.apiType));
     return Card(
       color: kColorTransparent,
       surfaceTintColor: kColorTransparent,
@@ -27,24 +30,38 @@ class EditorPaneRequestURLCard extends StatelessWidget {
           horizontal: !context.isMediumWindow ? 20 : 6,
         ),
         child: context.isMediumWindow
-            ? const Row(
+            ? Row(
                 children: [
-                  DropdownButtonHTTPMethod(),
+                  switch (apiType) {
-                  kHSpacer5,
+                    APIType.rest => const DropdownButtonHTTPMethod(),
-                  Expanded(
+                    APIType.graphql => kSizedBoxEmpty,
+                    null => kSizedBoxEmpty,
+                  },
+                  switch (apiType) {
+                    APIType.rest => kHSpacer5,
+                    _ => kHSpacer8,
+                  },
+                  const Expanded(
                     child: URLTextField(),
                   ),
                 ],
               )
-            : const Row(
+            : Row(
                 children: [
-                  DropdownButtonHTTPMethod(),
+                  switch (apiType) {
-                  kHSpacer20,
+                    APIType.rest => const DropdownButtonHTTPMethod(),
-                  Expanded(
+                    APIType.graphql => kSizedBoxEmpty,
+                    null => kSizedBoxEmpty,
+                  },
+                  switch (apiType) {
+                    APIType.rest => kHSpacer20,
+                    _ => kHSpacer8,
+                  },
+                  const Expanded(
                     child: URLTextField(),
                   ),
                   kHSpacer20,
-                  SizedBox(
+                  const SizedBox(
                     height: 36,
                     child: SendRequestButton(),
                   )
@@ -67,10 +84,9 @@ class DropdownButtonHTTPMethod extends ConsumerWidget {
     return DropdownButtonHttpMethod(
       method: method,
       onChanged: (HTTPVerb? value) {
-        final selectedId = ref.read(selectedRequestModelProvider)!.id;
         ref
             .read(collectionStateNotifierProvider.notifier)
-            .update(selectedId, method: value);
+            .update(method: value);
       },
     );
   }
@@ -92,9 +108,7 @@ class URLTextField extends ConsumerWidget {
           ?.httpRequestModel
           ?.url,
       onChanged: (value) {
-        ref
+        ref.read(collectionStateNotifierProvider.notifier).update(url: value);
-            .read(collectionStateNotifierProvider.notifier)
-            .update(selectedId, url: value);
       },
       onFieldSubmitted: (value) {
         ref.read(collectionStateNotifierProvider.notifier).sendRequest();

lib/screens/mobile/requests_page/request_tabs.dart

@@ -1,21 +1,34 @@
-import 'package:apidash/screens/common_widgets/common_widgets.dart';
 import 'package:apidash_design_system/apidash_design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:apidash/widgets/widgets.dart';
-import 'package:apidash/consts.dart';
+import '../../../consts.dart';
+import '../../common_widgets/common_widgets.dart';
 import '../../home_page/editor_pane/details_card/response_pane.dart';
 import '../../home_page/editor_pane/editor_request.dart';
 import '../../home_page/editor_pane/url_card.dart';
 
 class RequestTabs extends StatelessWidget {
-  const RequestTabs({super.key, required this.controller});
+  const RequestTabs({
+    super.key,
+    required this.controller,
+  });
   final TabController controller;
 
   @override
   Widget build(BuildContext context) {
     return Column(
       children: [
-        kVSpacer5,
+        const Padding(
+          padding: kPh8,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              APITypeDropdown(),
+              EnvironmentDropdown(),
+            ],
+          ),
+        ),
+        kVSpacer3,
         const Padding(
           padding: kPh4,
           child: EditorPaneRequestURLCard(),

lib/screens/mobile/requests_page/requests_page.dart

@@ -40,19 +40,19 @@ class _RequestResponsePageState extends ConsumerState<RequestResponsePage>
             showRenameDialog(context, "Rename Request", name, (val) {
               ref
                   .read(collectionStateNotifierProvider.notifier)
-                  .update(id!, name: val);
+                  .update(name: val);
             });
           }
           if (item == ItemMenuOption.delete) {
-            ref.read(collectionStateNotifierProvider.notifier).remove(id!);
+            ref.read(collectionStateNotifierProvider.notifier).remove();
           }
           if (item == ItemMenuOption.duplicate) {
-            ref.read(collectionStateNotifierProvider.notifier).duplicate(id!);
+            ref.read(collectionStateNotifierProvider.notifier).duplicate();
           }
         },
       ),
       leftDrawerContent: const CollectionPane(),
-      actions: const [Padding(padding: kPh8, child: EnvironmentDropdown())],
+      actions: const [kVSpacer16],
       mainContent: id == null
           ? const RequestEditorDefault()
           : RequestTabs(