+ [@hwillson](https://github.com/hwillson) in [#541](https://github.com/apollographql/apollo-client-devtools/pull/541) +- Make sure fragment imports are properly resolved.
+ [@hwillson](https://github.com/hwillson) in [#542](https://github.com/apollographql/apollo-client-devtools/pull/542) + +## 3.0.4 (2021-04-04) + +- Fix an issue where removing a field in graphiql caused a panel crash.
+ [@hwillson](https://github.com/hwillson) in [#508](https://github.com/apollographql/apollo-client-devtools/pull/508) + +## 3.0.3 (2021-04-03) + +- Make sure null and boolean values are rendered properly in the Cache tree.
+ [@alexTayanovsky](https://github.com/alexTayanovsky) in [#446](https://github.com/apollographql/apollo-client-devtools/pull/446) +- Delay the loading / initialization of Apollo Client on each browser tab until it is really needed.
+ [@hwillson](https://github.com/hwillson) in [#479](https://github.com/apollographql/apollo-client-devtools/pull/479) +- Make sure variables are copied to the GraphiQL panel when using the "Run in GraphiQL" button.
+ [@hwillson](https://github.com/hwillson) in [#491](https://github.com/apollographql/apollo-client-devtools/pull/491) +- Make sure queries missing document details aren't attempted to be used.
+ [@yrambler2001](https://github.com/yrambler2001) in [#500](https://github.com/apollographql/apollo-client-devtools/pull/500) + +## 3.0.2 (2021-03-17) + +- Update the `@apollo/client` dep to make sure >= 0.7.0 of `ts-invariant` is + used, to pull in a fix that makes sure `window.process` remains writable.
+ [@hwillson](https://github.com/hwillson) in [#463](https://github.com/apollographql/apollo-client-devtools/pull/463) + +## 3.0.1 (2021-03-15) + +- Update the `@apollo/client` dep to make sure >= 0.6.2 of `ts-invariant` is + used, to pull in a fix that makes sure `window.process` remains writable.
+ [@hwillson](https://github.com/hwillson) in [#460](https://github.com/apollographql/apollo-client-devtools/pull/460) + +## 3.0.0 (2021-03-02) + +- Apollo Client Devtools 3.0 is a ground up behind the scenes re-write that is focused on modernizing the codebase, making it easier to maintain and add new features to moving forward. It includes a new UI that aligns more closely with other Apollo tools like [Apollo Studio](https://www.apollographql.com/studio/develop/), and numerous integration/performance enhancements to better communicate with Apollo Client. The specific changes in this release are too numerous to list here, and are mostly internal, but for those interested in the details the majority of the changes can be seen in [#292](https://github.com/apollographql/apollo-client-devtools/pull/292). + +## 2.3.5 (2020-12-18) + +- Guard against uninitialized client race condition
[@jeffhertzler]() in [#329](https://github.com/apollographql/apollo-client-devtools/pull/329) + +## 2.3.4 (2020-12-14) + +- Add interval to check for updates; resolves non-updating cache issue
[@jcreighton]() in [#321](https://github.com/apollographql/apollo-client-devtools/pull/321) + +## 2.3.3 (2020-10-30) + +- Fix for undefined schemas error
[@jcreighton]() in [#307](https://github.com/apollographql/apollo-client-devtools/pull/307) + +## 2.3.2 (2020-10-29) + +- Fix for local schema discovery
[@micmro]() in [#286](https://github.com/apollographql/apollo-client-devtools/pull/286) + +- Compatability with Apollo Client 3.3+
[@jcreighton]() in [#302](https://github.com/apollographql/apollo-client-devtools/pull/302) + +- Fix queries not updating
[@jcreighton]() in [#302](https://github.com/apollographql/apollo-client-devtools/pull/302) + +## 2.3.1 (2020-06-02) + +- Check for value before extracting \_\_typename
[@jcreighton](https://github.com/jcreighton) in [#267](https://github.com/apollographql/apollo-client-devtools/pull/267) + +- Fix to disable saving InspectionQuery results in the cache
[@jcreighton](https://github.com/jcreighton) in [#273](https://github.com/apollographql/apollo-client-devtools/pull/273) + +## 2.3.0 (2020-05-28) + +- Support for Apollo Client 3 🎉 + fixes local state detection
+ [@hwillson](https://github.com/hwillson) in [#263](https://github.com/apollographql/apollo-client-devtools/pull/263) + +## 2.2.5 (2019-09-13) + +- More fixes for sidebar scrolling.
+ [@sagarhani](https://github.com/sagarhani) in [#225](https://github.com/apollographql/apollo-client-devtools/pull/225) + +## 2.2.4 + +- Fix to enable scrolling on the explorer sidebar.
+ [@RIP21](https://github.com/RIP21) in [#217](https://github.com/apollographql/apollo-client-devtools/pull/217) + +## 2.2.3 + +- Integrate OneGraph's GraphiQL Explorer.
+ [@sgrove](https://github.com/sgrove) in [#199](https://github.com/apollographql/apollo-client-devtools/pull/199) +- Make sure devtools can be used when the transport layer is websockets + only.
+ [@kamerontanseli](https://github.com/kamerontanseli) in [#163](https://github.com/apollographql/apollo-client-devtools/pull/163) +- Debounce broadcast messages to improve devtools responsiveness and + memory usage.
+ [@thomassuckow](https://github.com/thomassuckow) in [#173](https://github.com/apollographql/apollo-client-devtools/pull/173) +- Gracefully handle a failed version compatibility check.
+ [@mjlyons](https://github.com/mjlyons) in [#201](https://github.com/apollographql/apollo-client-devtools/pull/201) +- Increase timeout when checking whether to display the devtools panel.
+ [@Gongreg](https://github.com/Gongreg) in [#203](https://github.com/apollographql/apollo-client-devtools/pull/203) +- Fully reload devtools when a page reload happens, to make sure it is + reconnected to the current Apollo Client instance properly.
+ [@hwillson](https://github.com/hwillson) in [#205](https://github.com/apollographql/apollo-client-devtools/pull/205) + +## 2.2.1 & 2.2.2 + +- Fixes an issue preventing scrolling from working properly in Chrome 72 and + up.
+ [@scfoxcode](https://github.com/scfoxcode) in [#193](https://github.com/apollographql/apollo-client-devtools/pull/193) + +## 2.2.0 + +- Include local fields and types in GraphiQL ([#172](https://github.com/apollographql/apollo-client-devtools/issues/172), [#159](https://github.com/apollographql/apollo-client-devtools/issues/159)) + [@justinanastos](https://github.com/justinanastos) in [#188](https://github.com/apollographql/apollo-client-devtools/pull/188) + +- Use Apollo Client v2.5 local state 🎉 ([#apollographql/apollo-client#4361](https://github.com/apollographql/apollo-client/pull/4361)) + [@cheapsteak](https://github.com/cheapsteak) and [@hwillson](https://github.com/hwillson) in [#166](https://github.com/apollographql/apollo-client-devtools/pull/166) + +## 2.1.9 + +- Eliminate use of `window.localStorage`, removing the need for 3rd party cookies ([#118](https://github.com/apollographql/apollo-client-devtools/issues/118), [#142](https://github.com/apollographql/apollo-client-devtools/issues/142)) + [@justinanastos](https://github.com/justinanastos) in [#185](https://github.com/apollographql/apollo-client-devtools/pull/185) + +## 2.1.8 + +- Fix mutations tab crashing devtools ([#182](https://github.com/apollographql/apollo-client-devtools/issues/182)) + [@justinanastos](https://github.com/justinanastos) in [#184](https://github.com/apollographql/apollo-client-devtools/pull/184) + +## 2.1.7 + +- Removed https://devtools.apollodata.com/graphql from the content security + policy section of `manifest.json`, since it doesn't need to be referenced + based on how that endpoint is being used. Removing it helps with + Firefox's security review process.
+ [@hwillson](https://github.com/hwillson) in [#156](https://github.com/apollographql/apollo-client-devtools/pull/156) +- Fix to address issues caused by internal initial state not being set + properly, due to trying to access the Apollo Client `queryManager` when + it hasn't finished initializing.
+ [@adampetrie](https://github.com/adampetrie) in [#139](https://github.com/apollographql/apollo-client-devtools/pull/139) +- Fix outdated client message +
+ [@jonas-arkulpa](https://github.com/jonas-arkulpa) + in [#157](https://github.com/apollographql/apollo-client-devtools/pull/157) +- Prepare to publish to npm (add README for npm and add version to package.json) ([#160](https://github.com/apollographql/apollo-client-devtools/issues/160)) +
+ [@cheapsteak](https://github.com/cheapsteak) + in [#167](https://github.com/apollographql/apollo-client-devtools/pull/167) +- Adding code necessary for React Native support ([#160](https://github.com/apollographql/apollo-client-devtools/issues/160)) +
+ [@Gongreg](https://github.com/Gongreg) + in [#165](https://github.com/apollographql/apollo-client-devtools/pull/165) +- Publish built extension (dist/) ([#169](https://github.com/apollographql/apollo-client-devtools/issues/169)) +
+ [@cheapsteak](https://github.com/cheapsteak) + in [#170](https://github.com/apollographql/apollo-client-devtools/pull/170) +- Make prettier more developer-friendly +
+ [@justinanastos](https://github.com/justinanastos) + in [#178](https://github.com/apollographql/apollo-client-devtools/pull/178) +- Add sourcemaps to build +
+ [@justinanastos](https://github.com/justinanastos) + in [#179](https://github.com/apollographql/apollo-client-devtools/pull/179) +- Fix empty cache crashing cache inspector ([#107](https://github.com/apollographql/apollo-client-devtools/issues/107)) +
+ [@justinanastos](https://github.com/justinanastos) + in [#177](https://github.com/apollographql/apollo-client-devtools/pull/177) +- Fix GraphiQL Documentation Explorer crashing with client schema extensions ([#107](https://github.com/apollographql/apollo-client-devtools/issues/107)) +
+ [@justinanastos](https://github.com/justinanastos) + in [#180](https://github.com/apollographql/apollo-client-devtools/pull/180) + +## 2.1.5 + +- Fixes a query name parsing issue that lead to a blank page showing when + viewing the queries panel.
+ [@hwillson](https://github.com/hwillson) in [#149](https://github.com/apollographql/apollo-client-devtools/pull/149) + +## 2.1.4 + +- Removed all Google Analytics tracking.
+ [@hwillson](https://github.com/hwillson) in [#143](https://github.com/apollographql/apollo-client-devtools/pull/143) +- Change cursor in dark theme to white
+ [@islam3zzat](https://github.com/islam3zzat) in [#131](https://github.com/apollographql/apollo-client-devtools/pull/131) +- Fix issue where "Run in GraphiQL" does not include fragments
+ [@henryqdineen](https://github.com/henryqdineen) in [#133](https://github.com/apollographql/apollo-client-devtools/pull/133) + +## 2.1.3 + +- fixed styling of mutation list +- Allow to use `query.metadata.component.displayName` ([#126](https://github.com/apollographql/apollo-client-devtools/pull/126)) +- Fixed mutation run in GraphiQL button ([#127](https://github.com/apollographql/apollo-client-devtools/pull/127)) +- Fixed bug where query.queryString did not exist ([#125](https://github.com/apollographql/apollo-client-devtools/pull/125)) +- Update vendor GraphiQL styles & fix autocomplete styling ([#123](https://github.com/apollographql/apollo-client-devtools/pull/123)) + +## 2.1.0 + +- rebuilt with new architecture +- initial local schema support (when using cache) +- initial subscription support +- improved dark theme + +# < 2.1.0 + +- We didn't keep a changelog :-( diff --git a/CODEOWNERS b/CODEOWNERS new file mode 100644 index 000000000..1a131a82e --- /dev/null +++ b/CODEOWNERS @@ -0,0 +1,4 @@ +# This file was automatically generated by the Apollo SecOps team +# Please customize this file as needed prior to merging. + +* @apollographql/client-typescript diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100755 index 000000000..2d14586c4 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,89 @@ +# Apollo Contributor Guide + +Excited about Apollo and want to make it better? We’re excited too! + +Apollo is a community of developers just like you, striving to create the best tools and libraries around GraphQL. We welcome anyone who wants to contribute or provide constructive feedback, no matter the age or level of experience. If you want to help but don't know where to start, let us know, and we'll find something for you. + +Oh, and if you haven't already, check out [Apollo's Community Forum](https://community.apollographql.com/). + +Here are some ways to contribute to the project, from easiest to most difficult: + +- [Reporting bugs](#reporting-bugs) +- [Improving the documentation](#improving-the-documentation) +- [Responding to issues](#responding-to-issues) +- [Small bug fixes](#small-bug-fixes) +- [Changesets](#changesets) +- [Suggesting features](#suggesting-features) +- [Big pull requests](#big-prs) + +## Issues + +### Reporting bugs + +If you encounter a bug, please file an issue on GitHub via the repository of the sub-project you think contains the bug. If an issue you have is already reported, please add additional information or add a 👍 reaction to indicate your agreement. + +While we will try to be as helpful as we can on any issue reported, please include the following to maximize the chances of a quick fix: + +1. **Intended outcome:** What you were trying to accomplish when the bug occurred, and as much code as possible related to the source of the problem. +2. **Actual outcome:** A description of what actually happened, including a screenshot or copy-paste of any related error messages, logs, or other output that might be related. Places to look for information include your browser console, server console, and network logs. Please avoid non-specific phrases like “didn’t work” or “broke”. +3. **How to reproduce the issue:** Instructions for how the issue can be reproduced by a maintainer or contributor. Be as specific as possible, and only mention what is necessary to reproduce the bug. If possible, build a reproduction with our [error template](https://github.com/apollographql/react-apollo-error-template) to isolate the exact circumstances in which the bug occurs. Avoid speculation over what the cause might be. + +Creating a good reproduction really helps contributors investigate and resolve your issue quickly. In many cases, the act of creating a minimal reproduction illuminates that the source of the bug was somewhere outside the library in question, saving time and effort for everyone. + +### Improving the documentation + +Improving the documentation, examples, and other open source content can be the easiest way to contribute to the library. If you see a piece of content that can be better, open a PR with an improvement, no matter how small! If you would like to suggest a big change or major rewrite, we’d love to hear your ideas but please open an issue for discussion before writing the PR. + +### Responding to issues + +In addition to reporting issues, a great way to contribute to Apollo is to respond to other peoples' issues and try to identify the problem or help them work around it. If you’re interested in taking a more active role in this process, please go ahead and respond to issues. And don't forget to say "Hi" on Apollo Slack! + +### Changesets + +Apollo Client Devtools uses [changesets](https://github.com/changesets/changesets) to automate its versioning and release process. When contributing, your PR should contain a "changeset" that can be generated by running `npx changeset` from your branch locally. + +The changeset CLI will ask you to enter the corresponding [semver bump type](https://semver.org/) and a description of your changes: feel free to enter a brief description via the command line and continue editing the generated Markdown file found inside of `.changeset` in your editor of choice. When editing your changeset's Markdown file, you can leverage any of the features of GitHub flavored markdown! The description you provide in your changeset will be used to generate an entry in `CHANGELOG.md` and the release notes in a future release, so the more complete and descriptive the better. + +### Small bug fixes + +For a small bug fix change (less than 20 lines of code changed), feel free to open a pull request. We’ll try to merge it as fast as possible and ideally publish a new release on the same day. The only requirement is, make sure you also add a test that verifies the bug you are trying to fix. + +### Suggesting features + +Most of the features in Apollo came from suggestions by you, the community! We welcome any ideas about how to make Apollo better for your use case. Unless there is overwhelming demand for a feature, it might not get implemented immediately, but please include as much information as possible that will help people have a discussion about your proposal: + +1. **Use case:** What are you trying to accomplish, in specific terms? Often, there might already be a good way to do what you need and a new feature is unnecessary, but it’s hard to know without information about the specific use case. +2. **Could this be a plugin?** In many cases, a feature might be too niche to be included in the core of a library, and is better implemented as a companion package. If there isn’t a way to extend the library to do what you want, could we add additional plugin APIs? It’s important to make the case for why a feature should be part of the core functionality of the library. +3. **Is there a workaround?** Is this a more convenient way to do something that is already possible, or is there some blocker that makes a workaround unfeasible? + +Feature requests will be labeled as such, and we encourage using GitHub issues as a place to discuss new features and possible implementation designs. Please refrain from submitting a pull request to implement a proposed feature until there is consensus that it should be included. This way, you can avoid putting in work that can’t be merged in. + +Once there is a consensus on the need for a new feature, proceed as listed below under “Big PRs”. + +## Big PRs + +This includes: + +- Big bug fixes +- New features + +For significant changes to a repository, it’s important to settle on a design before starting on the implementation. This way, we can make sure that major improvements get the care and attention they deserve. Since big changes can be risky and might not always get merged, it’s good to reduce the amount of possible wasted effort by agreeing on an implementation design/plan first. + +1. **Open an issue.** Open an issue about your bug or feature, as described above. +2. **Reach consensus.** Some contributors and community members should reach an agreement that this feature or bug is important, and that someone should work on implementing or fixing it. +3. **Agree on intended behavior.** On the issue, reach an agreement about the desired behavior. In the case of a bug fix, it should be clear what it means for the bug to be fixed, and in the case of a feature, it should be clear what it will be like for developers to use the new feature. +4. **Agree on implementation plan.** Write a plan for how this feature or bug fix should be implemented. What modules need to be added or rewritten? Should this be one pull request or multiple incremental improvements? Who is going to do each part? +5. **Submit PR.** In the case where multiple dependent patches need to be made to implement the change, only submit one at a time. Otherwise, the others might get stale while the first is reviewed and merged. Make sure to avoid “while we’re here” type changes - if something isn’t relevant to the improvement at hand, it should be in a separate PR; this especially includes code style changes of unrelated code. +6. **Review.** At least one core contributor should sign off on the change before it’s merged. Look at the “code review” section below to learn about factors are important in the code review. If you want to expedite the code being merged, try to review your own code first! +7. **Merge and release!** + +### Code review guidelines + +It’s important that every piece of code in Apollo packages is reviewed by at least one core contributor familiar with that codebase. Here are some things we look for: + +1. **Required CI checks pass.** This is a prerequisite for the review, and it is the PR author's responsibility. As long as the tests don’t pass, the PR won't get reviewed. +2. **Simplicity.** Is this the simplest way to achieve the intended goal? If there are too many files, redundant functions, or complex lines of code, suggest a simpler way to do the same thing. In particular, avoid implementing an overly general solution when a simple, small, and pragmatic fix will do. +3. **Testing.** Do the tests ensure this code won’t break when other stuff changes around it? When it does break, will the tests added help us identify which part of the library has the problem? Did we cover an appropriate set of edge cases? Look at the test coverage report if there is one. Are all significant code paths in the new code exercised at least once? +4. **No unnecessary or unrelated changes.** PRs shouldn’t come with random formatting changes, especially in unrelated parts of the code. If there is some refactoring that needs to be done, it should be in a separate PR from a bug fix or feature, if possible. +5. **Code has appropriate comments.** Code should be commented, or written in a clear “self-documenting” way. +6. **Idiomatic use of the language.** In TypeScript, make sure the typings are specific and correct. In ES2015, make sure to use imports rather than require and const instead of var, etc. Ideally a linter enforces a lot of this, but use your common sense and follow the style of the surrounding code. diff --git a/LICENSE b/LICENSE new file mode 100755 index 000000000..35bf1481b --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2021 Apollo Graph, Inc. (Formerly Meteor Development Group, Inc.) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md old mode 100644 new mode 100755 index eb3eb72f0..90f6761ad --- a/README.md +++ b/README.md @@ -1,114 +1,155 @@ -Apollo Client Devtools -=== +
-This repository contains the [Apollo Client Devtools](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm) Chrome extension and React component.
+
-The devtools appear as an "Apollo" tab in your Chrome inspector, along side the "Elements" and "Console" tabs. There are currently 3 main features of the devtools:
+This repository contains the Apollo Client Browser Devtools extension for Chrome & Firefox.
- * GraphiQL: Send queries to your server through the Apollo network interface, or query the Apollo cache to see what data is loaded.
- * Normalized store inspector: Visualize your GraphQL store the way Apollo Client sees it, and search by field names or values.
- * Watched query inspector: View active queries and variables, and locate the associated UI components.
+| ☑️ Apollo Client User Survey |
+| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| What do you like best about Apollo Client? What needs to be improved? Please tell us by taking a [one-minute survey](https://docs.google.com/forms/d/e/1FAIpQLSczNDXfJne3ZUOXjk9Ursm9JYvhTh1_nFTDfdq3XBAFWCzplQ/viewform?usp=pp_url&entry.1170701325=Apollo+Client&entry.204965213=Readme). Your responses will help us understand Apollo Client usage and allow us to serve you better. |
-
+## Installation
-Make requests against either your app’s GraphQL server or the Apollo Client cache through the Chrome developer console. This version of GraphiQL leverages your app’s network interface, so there’s no configuration necessary — it automatically passes along the proper HTTP headers, etc. the same way your Apollo Client app does.
+### Chrome Web Store
-
+Chrome users can install the extension by visiting the [Chrome Web Store](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm).
-View the state of your client-side cache as a tree and inspect every object inside. Visualize the [mental model](https://dev-blog.apollodata.com/the-concepts-of-graphql-bc68bd819be3) of the Apollo cache. Search for specific keys and values in the store and see the path to those keys highlighted.
+Opera users can install the extension from Chrome Web Store using the [Download Chrome Extension](https://addons.opera.com/extensions/details/app_id/kipjbhgniklcnglfaldilecjomjaddfi) addon for Opera.
-
+### Firefox
-View the queries being actively watched on any given page. See when they're loading, what variables they're using, and, if you’re using React, which React component they’re attached to. Angular support coming soon.
+Firefox users can install the addon via [Firefox Browser Add-ons](https://addons.mozilla.org/firefox/addon/apollo-developer-tools/).
-Installation
-===
+### Install local version
-You can install the extension via the [Chrome Webstore](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm).
-If you want to install a local version of the extension instead, skip ahead to the __Developing__ section.
+If you want to install a local version of the extension instead, skip ahead to the [Developing](#Developing) section.
-### Configuration
+## Features
-While your app is in dev mode, the devtools will appear as an "Apollo" tab in your chrome inspector. To enable the devtools in your app even in production, pass `connectToDevTools: true` to the ApolloClient constructor in your app. Pass `connectToDevTools: false` if want to manually disable this functionality.
+The Apollo Client Browser Devtools appear as an "Apollo" tab in your web browser inspector, alongside other tabs like "Elements" and "Console". The devtools currently have four main features:
-The "Apollo" tab will appear in the Chrome console iff there exists a global `window.__APOLLO_CLIENT__` object in your app. Apollo Client adds this hook to the window automatically unless `process.env.NODE_ENV === 'production'`. If you would like to use the devtools in production, just manually attach your Apollo Client instance to `window.__APOLLO_CLIENT__` or pass `connectToDevTools: true` to the constructor.
+- **Explorer:** A built-in version of the Apollo Studio Explorer that allows you to make queries against your GraphQL server using your app's network interface directly (no configuration necessary).
+- **Watched query inspector:** View active queries, variables, cached results, and re-run individual queries.
+- **Mutation inspector:** View fired mutations, variables, and re-run individual mutations.
+- **Cache inspector:** Visualize the Apollo Client cache and search through it by field names and/or values.
-If you're seeing the "Apollo" tab but still having issues, skip ahead to the __Developing: Debugging__ section.
+
-Developing
-===
+## Apollo Client version support
-### Installation
+> if you are using an older version of Apollo Client and have issues with our Client Browser Devtools we recommend you upgrade to the latest version of Apollo Client.
-After cloning this repo, compile the extension bundle:
+- We provide active support for the current minor release of [Apollo Client](https://github.com/apollographql/apollo-client) for use with our Client Browser DevTools.
+- We do our best to support older `3.x` versions of [Apollo Client](https://github.com/apollographql/apollo-client/releases) for use with our Client Browser DevTools.
+- We do not offer support of `2.x` versions of [Apollo Client](https://github.com/apollographql/apollo-client/releases) for use with our Client Browser DevTools.
-```bash
-cd apollo-client-devtools
-npm install
-webpack
-```
+### Configuration
-Install the extension in Chrome:
+While your application is in dev mode, the devtools will appear as an "Apollo" tab in your web browser inspector. To enable the devtools for your application in production, pass `connectToDevTools: true` to the ApolloClient constructor in your application. Pass `connectToDevTools: false` if want to manually disable this functionality.
- * Open [chrome://extensions](chrome://extensions)
- * Enable the 'Developer Mode' checkbox
- * Click 'Load unpacked extensions...'
- * Select the `apollo-client-devtools/extension` folder
+The "Apollo" tab will appear in your web browser inspector if a global `window.__APOLLO_CLIENT__` object exists in your application. Apollo Client adds this hook to the window automatically unless `process.env.NODE_ENV === 'production'`. If you would like to use the devtools in production, manually attach your Apollo Client instance to `window.__APOLLO_CLIENT__` or pass `connectToDevTools: true` to the constructor.
-Now, while on any page, open the chrome inspector. If you're inspecting a page that is using Apollo Client, there will be a global `window.__APOLLO_CLIENT__` object on that page. If that object exists, you will see an "Apollo" tab in the inspector menu. This tab will contain the Apollo Client devtools.
+If you are seeing the "Apollo" tab but are still having issues, skip ahead to the [Debugging](#Debugging) section.
-### Folder structure
+## Developing
+
+### Build the extension
+
+Before building the extension you should install dependencies:
-The extension is built using React and ES6. All the main source code for the devtools exists in the `/app`
-folder, with `components/Panel.js` being the container component, and `index.js` attatching the
-`Panel` to the document itself. If you're interested in editing the current code or adding a new feature,
-you would do so here.
+```sh
+# Install dependencies
+> npm install
-Wepback bundles the code from `/app` into `/extension/dist`. Thus the `/extension` folder contains
-the chrome extension itself, and has the necessary manifest.json file and image resources. To load the
-extension locally, you would load from this folder. Likewise, to upload the extension to the Chrome Webstore,
-you would upload a zip of this folder.
+# (Optional) build the extension for local use
+> npm run build -- --env TARGET=chrome
+# or
+> npm run build -- --env TARGET=firefox
-The root of the repo contains the .bablerc file, webpack config file, and necessary package.json and
-index.js files to make the repo bundle correctly and export as a node module (see the next section).
+# Or generate zipped distributables (already includes the above build step)
+> npm run dist:chrome
+# or
+> npm run dist:firefox
+```
+
+### Running the sample application
-### Reloading the Chrome extension
+[Read more](https://github.com/apollographql/apollo-client-devtools/wiki/Running-the-sample-application).
-Unfortunately, there is no way to hot-reload a Chrome extension in the inspector while developing it.
+### Development with web-ext & WebExtWebpackPlugin
-While actively working on the devtools, you should run `webpack -w` in the devtools repo. This will have webpack watch your files, and rebundle them automatically whenever you make a change. With `webpack -w` running, you'll simply have to close the chrome inspector and open it again to see your changes in effect (no need to hit reload on the [chrome://extensions](chrome://extensions) page unless you make a change to the extension manifest).
+[Read more](https://github.com/apollographql/apollo-client-devtools/wiki/Development-with-web%E2%80%90ext-&-WebExtWebpackPlugin).
-### Developing with hot reload in an app
+### Tests
-For faster development with hot reloading, we have also created a way for you to insert the devtools panel into an apollo client app as a React component, and thus have it hot reload using your app's own reloading configuration.
+We use [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to write and run our tests.
-To do this, first link the apollo-client-devtools to your app's node modules.
+To run tests for both `src` and `development`, run the following command:
```bash
-cd /path/to/your/apollo-client/app
-npm link /path/to/apollo-client-devtools
+npm run test
```
-Then in your app, import the apollo-client-devtools `Panel` component:
+You can also run with `--watch` to watch and re-run tests automatically:
-```js
-const Panel = require('apollo-client-devtools').Panel;
+```bash
+npm run test:watch
```
-Now you can insert the `
+ 
+
Apollo Client Devtools
-The dev tools require at least `apollo-client@0.5.18`. To see component names in the query inspector, you need at least `react-apollo@0.7.1`. +[![Chrome Web Store][ChromeWebStoreBadge]][WebStore] [![Addons.mozilla.org][FirefoxAddonBadge]][Amo] [](https://circleci.com/gh/apollographql/apollo-client-devtools) -Features -=== +{graphiql}
;
- }
-}
diff --git a/app/components/Explorer/graphiql-overrides.less b/app/components/Explorer/graphiql-overrides.less
deleted file mode 100644
index 1aa641d12..000000000
--- a/app/components/Explorer/graphiql-overrides.less
+++ /dev/null
@@ -1,164 +0,0 @@
-.graphiql-container {
- .CodeMirror pre {
- font-size: 12px;
- }
-
- .topBar {
- background: none;
- border-bottom: none;
- background-color: #FBFBFB;
- padding: 5px 10px;
- color: #333;
- border-bottom: 1px solid #CCC;
-
- .title {
- font-size: 14px;
- font-weight: bold;
- }
-
- .execute-button-wrap {
- margin: 0;
- height: 24px;
-
- .execute-button {
- border: 1px solid #CCC;
- height: 24px;
- background: none;
- background-color: #FFF;
- width: 24px;
- margin: 0 0 0 20px;
-
- &:hover, &:active {
- box-shadow: inset 6px 6px 30px #CCC;
- }
-
- svg {
- margin-top: -5px;
- margin-left: -4px;
- }
- }
- }
-
- .toolbar-button {
- font-size: 12px;
- padding: 2px 5px;
- border-radius: 3px;
- background: none;
- border: 1px solid #CCC;
- background-color: #FFF;
- margin-left: 20px;
-
- &:hover, &:active {
- box-shadow: inset 6px 6px 30px #CCC;
- }
- }
-
- label {
- margin: 0 0 0 20px;
- cursor: pointer;
- font-weight: normal;
- font-size: 12px;
-
- input {
- margin: 0 5px 0 0;
- cursor: pointer;
- }
- }
- }
-
- .variable-editor {
- height: 60px;
-
- .variable-editor-title {
- font-variant: none;
- font-size: 12px;
- color: #333;
- text-transform: none;
- background-color: #FBFBFB;
- border-bottom: none;
- padding: 5px 10px;
- }
- }
-
- .CodeMirror-lines {
- padding: 5px 0;
- }
-
- .CodeMirror pre {
- font-family: monospace !important;
- }
-
- .CodeMirror-linenumber.CodeMirror-gutter-elt {
- font-family: monospace;
- }
-
- .CodeMirror-gutters {
- border: none;
- background-color: #FBFBFB;
- }
-
- .CodeMirror-gutter.CodeMirror-linenumbers {
- width: 20px;
- }
-
- .result-window .CodeMirror-gutters {
- cursor: ew-resize;
- border: none;
- background-color: transparent;
- }
-
- .docExplorerShow {
- background: none;
- background-color: #FBFBFB;
- border-bottom: 1px solid #CCC;
- color: #333;
- font-weight: bold;
- font-size: 12px;
- padding: 0 10px;
-
- &:before {
- border-color: #333;
- border-width: 1px;
- margin: 0 5px 1px 0;
- height: 5px;
- width: 5px;
- }
- }
-
- .doc-explorer-back {
- color: #333;
- font-size: 12px;
- padding: 0 0 0 5px;
- margin: 0;
-
- &:before {
- border-color: #333;
- border-width: 1px;
- margin: 0 5px 1px 0;
- height: 5px;
- width: 5px;
- }
- }
-
- .doc-explorer {
- .doc-explorer-title-bar {
- padding: 10px;
-
- .doc-explorer-title {
- font-size: 12px;
- padding: 0;
- }
-
- .docExplorerHide {
- padding: 0;
- margin: 0;
- font-size: 12px;
- }
- }
-
- .doc-explorer-contents {
- top: 33px;
- font-size: 12px;
- }
- }
-}
diff --git a/app/components/Explorer/graphiql.less b/app/components/Explorer/graphiql.less
deleted file mode 100644
index 8b0b89c8a..000000000
--- a/app/components/Explorer/graphiql.less
+++ /dev/null
@@ -1,1332 +0,0 @@
-.graphiql-container {
- color: #141823;
- display: -webkit-flex;
- display: -ms-flexbox;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- font-family:
- system,
- -apple-system,
- 'San Francisco',
- '.SFNSDisplay-Regular',
- 'Segoe UI',
- Segoe,
- 'Segoe WP',
- 'Helvetica Neue',
- helvetica,
- 'Lucida Grande',
- arial,
- sans-serif;
- font-size: 14px;
- height: 100%;
- margin: 0;
- overflow: hidden;
- width: 100%;
-}
-
-.graphiql-container .editorWrap {
- display: -webkit-flex;
- display: -ms-flexbox;
- display: -ms-flexbox;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.graphiql-container .title {
- font-size: 18px;
-}
-
-.graphiql-container .title em {
- font-family: georgia;
- font-size: 19px;
-}
-
-.graphiql-container .topBarWrap {
- display: -webkit-flex;
- display: -ms-flexbox;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
-}
-
-.graphiql-container .topBar {
- -webkit-align-items: center;
- -ms-align-items: center;
- align-items: center;
- background: -webkit-linear-gradient(#f7f7f7, #e2e2e2);
- background: linear-gradient(#f7f7f7, #e2e2e2);
- border-bottom: 1px solid #d0d0d0;
- cursor: default;
- display: -webkit-flex;
- display: -ms-flexbox;
- height: 34px;
- padding: 7px 14px 6px;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.graphiql-container .toolbar {
- overflow-x: auto;
-}
-
-.graphiql-container .docExplorerShow {
- background: -webkit-linear-gradient(#f7f7f7, #e2e2e2);
- background: linear-gradient(#f7f7f7, #e2e2e2);
- border-bottom: 1px solid #d0d0d0;
- border-left: 1px solid rgba(0, 0, 0, 0.2);
- border-right: none;
- border-top: none;
- color: #3B5998;
- cursor: pointer;
- font-size: 14px;
- outline: 0;
- margin: 0;
- padding: 2px 20px 0 18px;
-}
-
-.graphiql-container .docExplorerShow:before {
- border-left: 2px solid #3B5998;
- border-top: 2px solid #3B5998;
- content: '';
- display: inline-block;
- height: 9px;
- margin: 0 3px -1px 0;
- position: relative;
- -webkit-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
- width: 9px;
-}
-
-.graphiql-container .editorBar {
- display: -webkit-flex;
- display: -ms-flexbox;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
-}
-
-.graphiql-container .queryWrap {
- display: -webkit-flex;
- display: -ms-flexbox;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.graphiql-container .resultWrap {
- border-left: solid 1px #e0e0e0;
- display: -webkit-flex;
- display: flex;
- position: relative;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.graphiql-container .docExplorerWrap {
- background: white;
- box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
- position: relative;
- z-index: 3;
-}
-
-.graphiql-container .docExplorerResizer {
- cursor: col-resize;
- height: 100%;
- left: -5px;
- position: absolute;
- top: 0;
- width: 10px;
- z-index: 10;
-}
-
-.graphiql-container .docExplorerHide {
- cursor: pointer;
- font-size: 18px;
- margin: -7px -8px -6px 0;
- padding: 18px 16px 15px 12px;
-}
-
-.graphiql-container .query-editor {
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- position: relative;
-}
-
-.graphiql-container .variable-editor {
- display: -webkit-flex;
- display: -ms-flex;
- display: flex;
- height: 29px;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- position: relative;
-}
-
-.graphiql-container .variable-editor-title {
- background: #eeeeee;
- border-bottom: 1px solid #d6d6d6;
- border-top: 1px solid #e0e0e0;
- color: #777;
- font-variant: small-caps;
- font-weight: bold;
- letter-spacing: 1px;
- line-height: 14px;
- padding: 6px 0 8px 43px;
- text-transform: lowercase;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.graphiql-container .codemirrorWrap {
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- position: relative;
- height: 100%;
-}
-
-.graphiql-container .result-window {
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- position: relative;
- height: 100%;
-}
-
-.graphiql-container .footer {
- background: #f6f7f8;
- border-left: 1px solid #e0e0e0;
- border-top: 1px solid #e0e0e0;
- margin-left: 12px;
- position: relative;
-}
-
-.graphiql-container .footer:before {
- background: #eeeeee;
- bottom: 0;
- content: " ";
- left: -13px;
- position: absolute;
- top: -1px;
- width: 12px;
-}
-
-.graphiql-container .result-window .CodeMirror {
- background: #f6f7f8;
-}
-
-.graphiql-container .result-window .CodeMirror-gutters {
- background-color: #eeeeee;
- border-color: #e0e0e0;
- cursor: col-resize;
-}
-
-.graphiql-container .result-window .CodeMirror-foldgutter,
-.graphiql-container .result-window .CodeMirror-foldgutter-open:after,
-.graphiql-container .result-window .CodeMirror-foldgutter-folded:after {
- padding-left: 3px;
-}
-
-.graphiql-container .toolbar-button {
- background: #fdfdfd;
- background: -webkit-linear-gradient(#fbfbfb, #f8f8f8);
- background: linear-gradient(#fbfbfb, #f8f8f8);
- border-width: 0.5px;
- border-style: solid;
- border-color: #d3d3d3 #d0d0d0 #bababa;
- border-radius: 4px;
- box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.13), inset 0 1px #fff;
- color: #444;
- cursor: pointer;
- display: inline-block;
- margin: 0 5px 0;
- padding: 2px 8px 4px;
- text-decoration: none;
-}
-
-.graphiql-container .toolbar-button:active {
- background: -webkit-linear-gradient(#ececec, #d8d8d8);
- background: linear-gradient(#ececec, #d8d8d8);
- border-color: #cacaca #c9c9c9 #b0b0b0;
- box-shadow:
- 0 1px 0 #fff,
- inset 0 1px rgba(255, 255, 255, 0.2),
- inset 0 1px 1px rgba(0, 0, 0, 0.08);
-}
-
-.graphiql-container .toolbar-button.error {
- background: -webkit-linear-gradient(#fdf3f3, #e6d6d7);
- background: linear-gradient(#fdf3f3, #e6d6d7);
- color: #b00;
-}
-
-.graphiql-container .execute-button-wrap {
- position: relative;
- margin: 0 14px 0 28px;
- height: 34px;
-}
-
-.graphiql-container .execute-button {
- background: -webkit-linear-gradient(#fdfdfd, #d2d3d6);
- background: linear-gradient(#fdfdfd, #d2d3d6);
- border: 1px solid rgba(0,0,0,0.25);
- border-radius: 17px;
- box-shadow: 0 1px 0 #fff;
- cursor: pointer;
- fill: #444;
- height: 34px;
- margin: 0;
- padding: 0;
- width: 34px;
-}
-
-.graphiql-container .execute-button svg {
- pointer-events: none;
-}
-
-.graphiql-container .execute-button:active {
- background: -webkit-linear-gradient(#e6e6e6, #c0c0c0);
- background: linear-gradient(#e6e6e6, #c0c0c0);
- box-shadow:
- 0 1px 0 #fff,
- inset 0 0 2px rgba(0, 0, 0, 0.3),
- inset 0 0 6px rgba(0, 0, 0, 0.2);
-}
-
-.graphiql-container .execute-button:focus {
- outline: 0;
-}
-
-.graphiql-container .execute-options {
- background: #fff;
- box-shadow:
- 0 0 0 1px rgba(0,0,0,0.1),
- 0 2px 4px rgba(0,0,0,0.25);
- left: -1px;
- margin: 0;
- padding: 8px 0;
- position: absolute;
- top: 37px;
- z-index: 100;
-}
-
-.graphiql-container .execute-options li {
- padding: 2px 30px 4px 10px;
- list-style: none;
- min-width: 100px;
- cursor: pointer;
-}
-
-.graphiql-container .execute-options li.selected {
- background: #e10098;
- color: white;
-}
-
-.graphiql-container .CodeMirror-scroll {
- -webkit-overflow-scrolling: touch;
- -ms-overflow-scrolling: touch;
-}
-
-.graphiql-container .CodeMirror {
- color: #141823;
- font-family:
- 'Consolas',
- 'Inconsolata',
- 'Droid Sans Mono',
- 'Monaco',
- monospace;
- font-size: 13px;
- height: 100%;
- left: 0;
- position: absolute;
- top: 0;
- width: 100%;
-}
-
-.graphiql-container .CodeMirror-lines {
- padding: 20px 0;
-}
-
-.CodeMirror-hint-information .content {
- -webkit-box-orient: vertical;
- -ms-box-orient: vertical;
- box-orient: vertical;
- color: #141823;
- display: -webkit-box;
- font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
- font-size: 13px;
- -webkit-line-clamp: 3;
- line-clamp: 3;
- line-height: 16px;
- max-height: 48px;
- overflow: hidden;
- text-overflow: -o-ellipsis-lastline;
-}
-
-.CodeMirror-hint-information .content p:first-child {
- margin-top: 0;
-}
-
-.CodeMirror-hint-information .content p:last-child {
- margin-bottom: 0;
-}
-
-.CodeMirror-hint-information .infoType {
- color: #30a;
- cursor: pointer;
- display: inline;
- margin-right: 0.5em;
-}
-
-.autoInsertedLeaf.cm-property {
- -webkit-animation-duration: 6s;
- -moz-animation-duration: 6s;
- -ms-animation-duration: 6s;
- animation-duration: 6s;
- -webkit-animation-name: insertionFade;
- -moz-animation-name: insertionFade;
- -ms-animation-name: insertionFade;
- animation-name: insertionFade;
- border-bottom: 2px solid rgba(255, 255, 255, 0);
- border-radius: 2px;
- margin: -2px -4px -1px;
- padding: 2px 4px 1px;
-}
-
-@-moz-keyframes insertionFade {
- from, to {
- background: rgba(255, 255, 255, 0);
- border-color: rgba(255, 255, 255, 0);
- }
-
- 15%, 85% {
- background: #fbffc9;
- border-color: #f0f3c0;
- }
-}
-
-@-webkit-keyframes insertionFade {
- from, to {
- background: rgba(255, 255, 255, 0);
- border-color: rgba(255, 255, 255, 0);
- }
-
- 15%, 85% {
- background: #fbffc9;
- border-color: #f0f3c0;
- }
-}
-
-@keyframes insertionFade {
- from, to {
- background: rgba(255, 255, 255, 0);
- border-color: rgba(255, 255, 255, 0);
- }
-
- 15%, 85% {
- background: #fbffc9;
- border-color: #f0f3c0;
- }
-}
-
-div.CodeMirror-lint-tooltip {
- background-color: white;
- border: 0;
- border-radius: 2px;
- color: #141823;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
- font-family:
- system,
- -apple-system,
- 'San Francisco',
- '.SFNSDisplay-Regular',
- 'Segoe UI',
- Segoe,
- 'Segoe WP',
- 'Helvetica Neue',
- helvetica,
- 'Lucida Grande',
- arial,
- sans-serif;
- font-size: 13px;
- line-height: 16px;
- opacity: 0;
- padding: 6px 10px;
- -webkit-transition: opacity 0.15s;
- -moz-transition: opacity 0.15s;
- -ms-transition: opacity 0.15s;
- -o-transition: opacity 0.15s;
- transition: opacity 0.15s;
-}
-
-div.CodeMirror-lint-message-error, div.CodeMirror-lint-message-warning {
- padding-left: 23px;
-}
-
-/* COLORS */
-
-.graphiql-container .CodeMirror-foldmarker {
- border-radius: 4px;
- background: #08f;
- background: -webkit-linear-gradient(#43A8FF, #0F83E8);
- background: -moz-linear-gradient(#43A8FF, #0F83E8);
- background: -ms-linear-gradient(#43A8FF, #0F83E8);
- background: linear-gradient(#43A8FF, #0F83E8);
- box-shadow:
- 0 1px 1px rgba(0, 0, 0, 0.2),
- inset 0 0 0 1px rgba(0, 0, 0, 0.1);
- color: white;
- font-family: arial;
- font-size: 12px;
- line-height: 0;
- margin: 0 3px;
- padding: 0px 4px 1px;
- text-shadow: 0 -1px rgba(0, 0, 0, 0.1);
-}
-
-.graphiql-container div.CodeMirror span.CodeMirror-matchingbracket {
- color: #555;
- text-decoration: underline;
-}
-
-.graphiql-container div.CodeMirror span.CodeMirror-nonmatchingbracket {
- color: #f00;
-}
-
-/* Comment */
-.cm-comment {
- color: #999;
-}
-
-/* Punctuation */
-.cm-punctuation {
- color: #555;
-}
-
-/* Keyword */
-.cm-keyword {
- color: #B11A04;
-}
-
-/* OperationName, FragmentName */
-.cm-def {
- color: #D2054E;
-}
-
-/* FieldName */
-.cm-property {
- color: #1F61A0;
-}
-
-/* FieldAlias */
-.cm-qualifier {
- color: #1C92A9;
-}
-
-/* ArgumentName and ObjectFieldName */
-.cm-attribute {
- color: #8B2BB9;
-}
-
-/* Number */
-.cm-number {
- color: #2882F9;
-}
-
-/* String */
-.cm-string {
- color: #D64292;
-}
-
-/* Boolean */
-.cm-builtin {
- color: #D47509;
-}
-
-/* EnumValue */
-.cm-string-2 {
- color: #0B7FC7;
-}
-
-/* Variable */
-.cm-variable {
- color: #397D13;
-}
-
-/* Directive */
-.cm-meta {
- color: #B33086;
-}
-
-/* Type */
-.cm-atom {
- color: #CA9800;
-}
-/* BASICS */
-
-.CodeMirror {
- /* Set height, width, borders, and global font properties here */
- font-family: monospace;
- height: 300px;
- color: black;
-}
-
-/* PADDING */
-
-.CodeMirror-lines {
- padding: 4px 0; /* Vertical padding around content */
-}
-.CodeMirror pre {
- padding: 0 4px; /* Horizontal padding of content */
-}
-
-.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
- background-color: white; /* The little square between H and V scrollbars */
-}
-
-/* GUTTER */
-
-.CodeMirror-gutters {
- border-right: 1px solid #ddd;
- background-color: #f7f7f7;
- white-space: nowrap;
-}
-.CodeMirror-linenumbers {}
-.CodeMirror-linenumber {
- padding: 0 3px 0 5px;
- min-width: 20px;
- text-align: right;
- color: #999;
- white-space: nowrap;
-}
-
-.CodeMirror-guttermarker { color: black; }
-.CodeMirror-guttermarker-subtle { color: #999; }
-
-/* CURSOR */
-
-.CodeMirror div.CodeMirror-cursor {
- border-left: 1px solid black;
-}
-/* Shown when moving in bi-directional text */
-.CodeMirror div.CodeMirror-secondarycursor {
- border-left: 1px solid silver;
-}
-.CodeMirror.cm-fat-cursor div.CodeMirror-cursor {
- width: auto;
- border: 0;
- background: #7e7;
-}
-.CodeMirror.cm-fat-cursor div.CodeMirror-cursors {
- z-index: 1;
-}
-
-.cm-animate-fat-cursor {
- width: auto;
- border: 0;
- -webkit-animation: blink 1.06s steps(1) infinite;
- -moz-animation: blink 1.06s steps(1) infinite;
- -ms-animation: blink 1.06s steps(1) infinite;
- animation: blink 1.06s steps(1) infinite;
-}
-@-moz-keyframes blink {
- 0% { background: #7e7; }
- 50% { background: none; }
- 100% { background: #7e7; }
-}
-@-webkit-keyframes blink {
- 0% { background: #7e7; }
- 50% { background: none; }
- 100% { background: #7e7; }
-}
-@keyframes blink {
- 0% { background: #7e7; }
- 50% { background: none; }
- 100% { background: #7e7; }
-}
-
-/* Can style cursor different in overwrite (non-insert) mode */
-div.CodeMirror-overwrite div.CodeMirror-cursor {}
-
-.cm-tab { display: inline-block; text-decoration: inherit; }
-
-.CodeMirror-ruler {
- border-left: 1px solid #ccc;
- position: absolute;
-}
-
-/* DEFAULT THEME */
-
-.cm-s-default .cm-keyword {color: #708;}
-.cm-s-default .cm-atom {color: #219;}
-.cm-s-default .cm-number {color: #164;}
-.cm-s-default .cm-def {color: #00f;}
-.cm-s-default .cm-variable,
-.cm-s-default .cm-punctuation,
-.cm-s-default .cm-property,
-.cm-s-default .cm-operator {}
-.cm-s-default .cm-variable-2 {color: #05a;}
-.cm-s-default .cm-variable-3 {color: #085;}
-.cm-s-default .cm-comment {color: #a50;}
-.cm-s-default .cm-string {color: #a11;}
-.cm-s-default .cm-string-2 {color: #f50;}
-.cm-s-default .cm-meta {color: #555;}
-.cm-s-default .cm-qualifier {color: #555;}
-.cm-s-default .cm-builtin {color: #30a;}
-.cm-s-default .cm-bracket {color: #997;}
-.cm-s-default .cm-tag {color: #170;}
-.cm-s-default .cm-attribute {color: #00c;}
-.cm-s-default .cm-header {color: blue;}
-.cm-s-default .cm-quote {color: #090;}
-.cm-s-default .cm-hr {color: #999;}
-.cm-s-default .cm-link {color: #00c;}
-
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-.cm-strikethrough {text-decoration: line-through;}
-
-.cm-s-default .cm-error {color: #f00;}
-.cm-invalidchar {color: #f00;}
-
-.CodeMirror-composing { border-bottom: 2px solid; }
-
-/* Default styles for common addons */
-
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
-.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
-.CodeMirror-activeline-background {background: #e8f2ff;}
-
-/* STOP */
-
-/* The rest of this file contains styles related to the mechanics of
- the editor. You probably shouldn't touch them. */
-
-.CodeMirror {
- position: relative;
- overflow: hidden;
- background: white;
-}
-
-.CodeMirror-scroll {
- overflow: scroll !important; /* Things will break if this is overridden */
- /* 30px is the magic margin used to hide the element's real scrollbars */
- /* See overflow: hidden in .CodeMirror */
- margin-bottom: -30px; margin-right: -30px;
- padding-bottom: 30px;
- height: 100%;
- outline: none; /* Prevent dragging from highlighting the element */
- position: relative;
-}
-.CodeMirror-sizer {
- position: relative;
- border-right: 30px solid transparent;
-}
-
-/* The fake, visible scrollbars. Used to force redraw during scrolling
- before actual scrolling happens, thus preventing shaking and
- flickering artifacts. */
-.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
- position: absolute;
- z-index: 6;
- display: none;
-}
-.CodeMirror-vscrollbar {
- right: 0; top: 0;
- overflow-x: hidden;
- overflow-y: scroll;
-}
-.CodeMirror-hscrollbar {
- bottom: 0; left: 0;
- overflow-y: hidden;
- overflow-x: scroll;
-}
-.CodeMirror-scrollbar-filler {
- right: 0; bottom: 0;
-}
-.CodeMirror-gutter-filler {
- left: 0; bottom: 0;
-}
-
-.CodeMirror-gutters {
- position: absolute; left: 0; top: 0;
- min-height: 100%;
- z-index: 3;
-}
-.CodeMirror-gutter {
- white-space: normal;
- height: 100%;
- display: inline-block;
- vertical-align: top;
- margin-bottom: -30px;
- /* Hack to make IE7 behave */
- *zoom:1;
- *display:inline;
-}
-.CodeMirror-gutter-wrapper {
- position: absolute;
- z-index: 4;
- background: none !important;
- border: none !important;
-}
-.CodeMirror-gutter-background {
- position: absolute;
- top: 0; bottom: 0;
- z-index: 4;
-}
-.CodeMirror-gutter-elt {
- position: absolute;
- cursor: default;
- z-index: 4;
-}
-.CodeMirror-gutter-wrapper {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.CodeMirror-lines {
- cursor: text;
- min-height: 1px; /* prevents collapsing before first draw */
-}
-.CodeMirror pre {
- /* Reset some styles that the rest of the page might have set */
- -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
- border-width: 0;
- background: transparent;
- font-family: inherit;
- font-size: inherit;
- margin: 0;
- white-space: pre;
- word-wrap: normal;
- line-height: inherit;
- color: inherit;
- z-index: 2;
- position: relative;
- overflow: visible;
- -webkit-tap-highlight-color: transparent;
- -webkit-font-variant-ligatures: none;
- font-variant-ligatures: none;
-}
-.CodeMirror-wrap pre {
- word-wrap: break-word;
- white-space: pre-wrap;
- word-break: normal;
-}
-
-.CodeMirror-linebackground {
- position: absolute;
- left: 0; right: 0; top: 0; bottom: 0;
- z-index: 0;
-}
-
-.CodeMirror-linewidget {
- position: relative;
- z-index: 2;
- overflow: auto;
-}
-
-.CodeMirror-widget {}
-
-.CodeMirror-code {
- outline: none;
-}
-
-/* Force content-box sizing for the elements where we expect it */
-.CodeMirror-scroll,
-.CodeMirror-sizer,
-.CodeMirror-gutter,
-.CodeMirror-gutters,
-.CodeMirror-linenumber {
- -moz-box-sizing: content-box;
- box-sizing: content-box;
-}
-
-.CodeMirror-measure {
- position: absolute;
- width: 100%;
- height: 0;
- overflow: hidden;
- visibility: hidden;
-}
-
-.CodeMirror-cursor { position: absolute; }
-.CodeMirror-measure pre { position: static; }
-
-div.CodeMirror-cursors {
- visibility: hidden;
- position: relative;
- z-index: 3;
-}
-div.CodeMirror-dragcursors {
- visibility: visible;
-}
-
-.CodeMirror-focused div.CodeMirror-cursors {
- visibility: visible;
-}
-
-.CodeMirror-selected { background: #d9d9d9; }
-.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
-.CodeMirror-crosshair { cursor: crosshair; }
-.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
-.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
-
-.cm-searching {
- background: #ffa;
- background: rgba(255, 255, 0, .4);
-}
-
-/* IE7 hack to prevent it from returning funny offsetTops on the spans */
-.CodeMirror span { *vertical-align: text-bottom; }
-
-/* Used to force a border model for a node */
-.cm-force-border { padding-right: .1px; }
-
-@media print {
- /* Hide the cursor when printing */
- .CodeMirror div.CodeMirror-cursors {
- visibility: hidden;
- }
-}
-
-/* See issue #2901 */
-.cm-tab-wrap-hack:after { content: ''; }
-
-/* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext { background: none; }
-
-.CodeMirror-dialog {
- position: absolute;
- left: 0; right: 0;
- background: inherit;
- z-index: 15;
- padding: .1em .8em;
- overflow: hidden;
- color: inherit;
-}
-
-.CodeMirror-dialog-top {
- border-bottom: 1px solid #eee;
- top: 0;
-}
-
-.CodeMirror-dialog-bottom {
- border-top: 1px solid #eee;
- bottom: 0;
-}
-
-.CodeMirror-dialog input {
- border: 1px solid #d3d6db;
- outline: none;
- background: transparent;
- width: 20em;
- color: inherit;
- font-family: monospace;
-}
-
-.CodeMirror-dialog button {
- font-size: 70%;
-}
-.graphiql-container .doc-explorer {
- background: white;
-}
-
-.graphiql-container .doc-explorer-title-bar {
- cursor: default;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- height: 34px;
- line-height: 14px;
- padding: 8px 8px 5px;
- position: relative;
- -webkit-user-select: none;
- user-select: none;
-}
-
-.graphiql-container .doc-explorer-title {
- padding: 10px 0 10px 10px;
- font-weight: bold;
- text-align: center;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow-x: hidden;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.graphiql-container .doc-explorer-back {
- color: #3B5998;
- cursor: pointer;
- margin: -7px 0 -6px -8px;
- overflow-x: hidden;
- padding: 17px 12px 16px 16px;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.graphiql-container .doc-explorer-back:before {
- border-left: 2px solid #3B5998;
- border-top: 2px solid #3B5998;
- content: '';
- display: inline-block;
- height: 9px;
- margin: 0 3px -1px 0;
- position: relative;
- width: 9px;
- -webkit-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
-}
-
-.graphiql-container .doc-explorer-rhs {
- position: relative;
-}
-
-.graphiql-container .doc-explorer-contents {
- background-color: #ffffff;
- border-top: 1px solid #d6d6d6;
- bottom: 0;
- left: 0;
- min-width: 300px;
- overflow-y: auto;
- padding: 20px 15px;
- position: absolute;
- right: 0;
- top: 47px;
-}
-
-.graphiql-container .doc-type-description p:first-child ,
-.graphiql-container .doc-type-description blockquote:first-child {
- margin-top: 0;
-}
-
-.graphiql-container .doc-explorer-contents a {
- cursor: pointer;
- text-decoration: none;
-}
-
-.graphiql-container .doc-explorer-contents a:hover {
- text-decoration: underline;
-}
-
-.graphiql-container .doc-value-description {
- padding: 4px 0 8px 12px;
-}
-
-.graphiql-container .doc-category {
- margin: 20px 0;
-}
-
-.graphiql-container .doc-category-title {
- border-bottom: 1px solid #e0e0e0;
- color: #777;
- cursor: default;
- font-size: 14px;
- font-variant: small-caps;
- font-weight: bold;
- letter-spacing: 1px;
- margin: 0 -15px 10px 0;
- padding: 10px 0;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.graphiql-container .doc-category-item {
- margin: 12px 0;
- color: #555;
-}
-
-.graphiql-container .keyword {
- color: #B11A04;
-}
-
-.graphiql-container .type-name {
- color: #CA9800;
-}
-
-.graphiql-container .field-name {
- color: #1F61A0;
-}
-
-.graphiql-container .value-name {
- color: #0B7FC7;
-}
-
-.graphiql-container .arg-name {
- color: #8B2BB9;
-}
-
-.graphiql-container .arg:after {
- content: ', ';
-}
-
-.graphiql-container .arg:last-child:after {
- content: '';
-}
-
-.graphiql-container .doc-alert-text {
- color: #F00F00;
- font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace;
- font-size: 13px;
-}
-
-.graphiql-container .search-box-outer {
- border: 1px solid #d3d6db;
- box-sizing: border-box;
- display: inline-block;
- font-size: 12px;
- height: 24px;
- margin-bottom: 12px;
- padding: 3px 8px 5px;
- vertical-align: middle;
- width: 100%;
-}
-
-.graphiql-container .search-box-input {
- border: 0;
- font-size: 12px;
- margin: 0;
- outline: 0;
- padding: 0;
- width: 100%;
-}
-.CodeMirror-foldmarker {
- color: blue;
- text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
- font-family: arial;
- line-height: .3;
- cursor: pointer;
-}
-.CodeMirror-foldgutter {
- width: .7em;
-}
-.CodeMirror-foldgutter-open,
-.CodeMirror-foldgutter-folded {
- cursor: pointer;
-}
-.CodeMirror-foldgutter-open:after {
- content: "\25BE";
-}
-.CodeMirror-foldgutter-folded:after {
- content: "\25B8";
-}
-/* The lint marker gutter */
-.CodeMirror-lint-markers {
- width: 16px;
-}
-
-.CodeMirror-lint-tooltip {
- background-color: infobackground;
- border: 1px solid black;
- border-radius: 4px 4px 4px 4px;
- color: infotext;
- font-family: monospace;
- font-size: 10pt;
- overflow: hidden;
- padding: 2px 5px;
- position: fixed;
- white-space: pre;
- white-space: pre-wrap;
- z-index: 100;
- max-width: 600px;
- opacity: 0;
- transition: opacity .4s;
- -moz-transition: opacity .4s;
- -webkit-transition: opacity .4s;
- -o-transition: opacity .4s;
- -ms-transition: opacity .4s;
-}
-
-.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning {
- background-position: left bottom;
- background-repeat: repeat-x;
-}
-
-.CodeMirror-lint-mark-error {
- background-image:
- url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==")
- ;
-}
-
-.CodeMirror-lint-mark-warning {
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
-}
-
-.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning {
- background-position: center center;
- background-repeat: no-repeat;
- cursor: pointer;
- display: inline-block;
- height: 16px;
- width: 16px;
- vertical-align: middle;
- position: relative;
-}
-
-.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning {
- padding-left: 18px;
- background-position: top left;
- background-repeat: no-repeat;
-}
-
-.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
-}
-
-.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
-}
-
-.CodeMirror-lint-marker-multiple {
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
- background-repeat: no-repeat;
- background-position: right bottom;
- width: 100%; height: 100%;
-}
-.graphiql-container .spinner-container {
- position: absolute;
- top: 50%;
- height: 36px;
- width: 36px;
- left: 50%;
- transform: translate(-50%, -50%);
- z-index: 10;
-}
-
-.graphiql-container .spinner {
- vertical-align: middle;
- display: inline-block;
- height: 24px;
- width: 24px;
- position: absolute;
- -webkit-animation: rotation .6s infinite linear;
- -moz-animation: rotation .6s infinite linear;
- -o-animation: rotation .6s infinite linear;
- animation: rotation .6s infinite linear;
- border-left: 6px solid rgba(150, 150, 150, .15);
- border-right: 6px solid rgba(150, 150, 150, .15);
- border-bottom: 6px solid rgba(150, 150, 150, .15);
- border-top: 6px solid rgba(150, 150, 150, .8);
- border-radius: 100%;
-}
-
-@-webkit-keyframes rotation {
- from { -webkit-transform: rotate(0deg); }
- to { -webkit-transform: rotate(359deg); }
-}
-
-@-moz-keyframes rotation {
- from { -moz-transform: rotate(0deg); }
- to { -moz-transform: rotate(359deg); }
-}
-
-@-o-keyframes rotation {
- from { -o-transform: rotate(0deg); }
- to { -o-transform: rotate(359deg); }
-}
-
-@keyframes rotation {
- from { transform: rotate(0deg); }
- to { transform: rotate(359deg); }
-}
-.CodeMirror-hints {
- background: white;
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
- font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace;
- font-size: 13px;
- list-style: none;
- margin: 0;
- margin-left: -6px;
- max-height: 14.5em;
- overflow-y: auto;
- overflow: hidden;
- padding: 0;
- position: absolute;
- z-index: 10;
-}
-
-.CodeMirror-hints-wrapper {
- background: white;
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
- margin-left: -6px;
- position: absolute;
- z-index: 10;
-}
-
-.CodeMirror-hints-wrapper .CodeMirror-hints {
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
- position: relative;
- margin-left: 0;
- z-index: 0;
-}
-
-.CodeMirror-hint {
- border-top: solid 1px #f7f7f7;
- color: #141823;
- cursor: pointer;
- margin: 0;
- max-width: 300px;
- overflow: hidden;
- padding: 2px 6px;
- white-space: pre;
-}
-
-li.CodeMirror-hint-active {
- background-color: #08f;
- border-top-color: white;
- color: white;
-}
-
-.CodeMirror-hint-information {
- border-top: solid 1px #c0c0c0;
- max-width: 300px;
- padding: 4px 6px;
- position: relative;
- z-index: 1;
-}
-
-.CodeMirror-hint-information:first-child {
- border-bottom: solid 1px #c0c0c0;
- border-top: none;
- margin-bottom: -1px;
-}
diff --git a/app/components/Explorer/index.js b/app/components/Explorer/index.js
deleted file mode 100644
index ddd482601..000000000
--- a/app/components/Explorer/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import Explorer from './Explorer';
-export default Explorer;
diff --git a/app/components/Images/Apollo.js b/app/components/Images/Apollo.js
deleted file mode 100644
index f17dea0ac..000000000
--- a/app/components/Images/Apollo.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-
-const Apollo = ({}) => (
-
-);
-export default Apollo;
diff --git a/app/components/Images/GraphQL.js b/app/components/Images/GraphQL.js
deleted file mode 100644
index 92eeedfb6..000000000
--- a/app/components/Images/GraphQL.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-
-const GraphQL = ({}) => (
-
-);
-export default GraphQL;
diff --git a/app/components/Images/Queries.js b/app/components/Images/Queries.js
deleted file mode 100644
index 62cd0a977..000000000
--- a/app/components/Images/Queries.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-
-const Queries = ({}) => (
-
-
-);
-export default Queries;
diff --git a/app/components/Images/Store.js b/app/components/Images/Store.js
deleted file mode 100644
index 5b69892ca..000000000
--- a/app/components/Images/Store.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-
-const Store = ({}) => (
- );
-export default Store;
diff --git a/app/components/Inspector/Inspector.js b/app/components/Inspector/Inspector.js
deleted file mode 100644
index 717268d1c..000000000
--- a/app/components/Inspector/Inspector.js
+++ /dev/null
@@ -1,431 +0,0 @@
-import React from 'react';
-import { Sidebar } from '../Sidebar';
-import classnames from 'classnames';
-import evalInPage from '../../evalInPage';
-import _ from 'lodash';
-
-import './inspector.less';
-
-export default class Inspector extends React.Component {
- static childContextTypes = {
- inspectorContext: React.PropTypes.object.isRequired,
- }
-
- constructor() {
- super();
-
- this.state = {
- dataWithOptimistic: null,
- ids: [],
- selectedId: null,
- toHighlight: {},
- searchTerm: '',
- };
-
- this.setSearchTerm = this.setSearchTerm.bind(this);
- this.updateData = this.updateData.bind(this);
- }
-
- updateData() {
- evalInPage(`
- (function () {
- const numActions = window.__action_log__ && window.__action_log__.length;
- if(numActions) {
- return window.__action_log__[numActions - 1].dataWithOptimisticResults;
- }
- })()
- `, (dataWithOptimistic) => {
- let toHighlight = {};
-
- if (this.state.searchTerm.length >= 3) {
- toHighlight = highlightFromSearchTerm({
- data: dataWithOptimistic,
- query: this.state.searchTerm,
- });
- }
-
- const unsortedIds = Object.keys(dataWithOptimistic).filter(id => id[0] !== '$');
- const highlightedIds = Object.keys(toHighlight).filter(id => id[0] !== '$' && id !== 'ROOT_QUERY');
- const sortedIdsWithoutRoot = unsortedIds.filter(
- id => id !== 'ROOT_QUERY' && highlightedIds.indexOf(id) < 0
- ).sort();
- const ids = [...highlightedIds, 'ROOT_QUERY', ...sortedIdsWithoutRoot];
-
- this.setState({
- dataWithOptimistic,
- toHighlight,
- ids,
- selectedId: this.state.selectedId || ids[0],
- });
- });
- }
-
- componentDidMount() {
- if (ga) ga('send', 'pageview', 'StoreInspector');
- this.updateData();
- this._interval = setInterval(() => {
- this.updateData();
- }, 500);
- }
-
- componentWillUnmount() {
- clearInterval(this._interval);
- }
-
- getChildContext() {
- return {
- inspectorContext: {
- dataWithOptimistic: this.state.dataWithOptimistic,
- toHighlight: this.state.toHighlight,
- selectId: this.selectId.bind(this),
- },
- };
- }
-
- componentWillUpdate(nextProps, nextState) {
- if (nextState.selectedId !== this.state.selectedId) {
- function isInViewport(element) {
- const rect = element.getBoundingClientRect();
- const html = document.documentElement;
- return (
- rect.top >= 0 &&
- rect.left >= 0 &&
- rect.bottom <= (window.innerHeight || html.clientHeight) &&
- rect.right <= (window.innerWidth || html.clientWidth)
- );
- }
- const node = document.getElementById(nextState.selectedId);
- if (node && !isInViewport(node)) node.scrollIntoView();
- }
- }
-
- selectId(id) {
- this.setState({
- selectedId: id,
- });
- }
-
- setSearchTerm(searchTerm) {
- let toHighlight = {};
-
- if (searchTerm.length >= 3) {
- toHighlight = highlightFromSearchTerm({
- data: this.state.dataWithOptimistic,
- query: searchTerm,
- });
- }
-
- this.setState({
- searchTerm,
- toHighlight,
- });
- }
-
- renderSidebarItem(id) {
- let className = 'inspector-sidebar-item';
-
- if (id === this.state.selectedId) {
- className += ' active';
- }
-
- if (this.state.toHighlight[id]) {
- className += ' inspector-sidebar-highlighted';
- }
-
- return (
- {id}
- );
- }
-
- render() {
- const { selectedId, dataWithOptimistic, searchTerm, ids } = this.state;
- return (
-
-
- );
- }
-}
-
-const InspectorToolbar = ({ searchTerm, setSearchTerm }) => (
-
-
-
-
- Apollo client state
-
- {selectedId &&
-
-
- setSearchTerm(evt.target.value)}
- value={searchTerm}
- />
-
-)
-
-function highlightFromSearchTerm({ data, query }) {
- const toHighlight = {};
-
- Object.keys(data).forEach((dataId) => {
- dfsSearch({
- data,
- regex: new RegExp(query),
- toHighlight,
- dataId,
- });
- });
-
- return toHighlight;
-}
-
-function dfsSearch({ data, regex, toHighlight, pathToId = [], dataId }) {
- const storeObj = data[dataId];
- const storeObjHighlight = {};
-
- Object.keys(storeObj).forEach((storeFieldKey) => {
- const arr = [storeObj[storeFieldKey]];
-
- const flatArr = _.flattenDeep(arr);
-
- flatArr.forEach((val) => {
- const valueMatches = typeof val === 'string' && regex.test(val);
- const keyMatches = regex.test(storeFieldKey);
-
- if (valueMatches || keyMatches) {
- storeObjHighlight[storeFieldKey] = val;
- }
-
- if (val && val.id && val.generated) {
- dfsSearch({
- data,
- regex,
- toHighlight,
- pathToId: [...pathToId, [dataId, storeFieldKey]],
- dataId: val.id,
- });
- }
- })
- });
-
- if (Object.keys(storeObjHighlight).length > 0) {
- toHighlight[dataId] = storeObjHighlight;
-
- pathToId.forEach((pathSegment) => {
- toHighlight[pathSegment[0]] = toHighlight[pathSegment[0]] || {};
- toHighlight[pathSegment[0]][pathSegment[1]] = data[pathSegment[0]][pathSegment[1]];
- });
- }
-}
-
-// Props: data, dataId, expand
-class StoreTreeFieldSet extends React.Component {
- static contextTypes = {
- inspectorContext: React.PropTypes.object.isRequired,
- }
-
- constructor(props) {
- super();
- this.state = {
- expand: props.expand || props.dataId[0] === '$',
- };
-
- this.toggleExpand = this.toggleExpand.bind(this);
- this.selectId = this.selectId.bind(this);
- }
-
- getStoreObj() {
- return this.context.inspectorContext.dataWithOptimistic[this.props.dataId];
- }
-
- getHighlightObj() {
- return this.context.inspectorContext.toHighlight[this.props.dataId];
- }
-
- shouldDisplayId() {
- return this.props.dataId[0] !== '$';
- }
-
- keysToDisplay() {
- return Object.keys(this.getStoreObj())
- .filter(key => key !== '__typename')
- .sort();
- }
-
- renderFieldSet({ doubleIndent }) {
- const storeObj = this.getStoreObj();
- const highlightObj = this.getHighlightObj();
-
- let className = 'store-tree-field-set';
-
- if (doubleIndent) {
- className += ' double-indent';
- }
-
- return (
-
- {this.keysToDisplay().map((key) => (
-
- )
- }
-
- toggleExpand() {
- this.setState(({ expand }) => ({ expand: !expand }));
- }
-
- selectId() {
- this.context.inspectorContext.selectId(this.props.dataId);
- }
-
- render() {
- return (
-
- {this.shouldDisplayId() && (
-
- ▾
- {this.props.dataId}
-
-
- )}
-
- {this.state.expand && this.renderFieldSet({ doubleIndent: this.shouldDisplayId() })}
-
-
- )
- }
-}
-
-const StoreTreeArray = ({ value }) => (
-
- {value.map((item, index) =>
-)
-
-const StoreTreeArrayItem = ({ item, index }) => (
-
-
- {index}
-
- :
-
-)
-
-const StoreTreeObject = ({ value, highlight, inArray }) => {
- if (isIdReference(value)) {
- return (
-
-
- {this.props.storeKey}
-
- :{" "}
- {this.renderPossibleTypename()}
-
- )
- }
-}
-
-// Should be imported from AC
-function isIdReference(storeObj) {
- return storeObj && storeObj.type === 'id';
-}
diff --git a/app/components/Inspector/index.js b/app/components/Inspector/index.js
deleted file mode 100644
index 53f6a24ee..000000000
--- a/app/components/Inspector/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import Inspector from './Inspector';
-export default Inspector;
diff --git a/app/components/Inspector/inspector.less b/app/components/Inspector/inspector.less
deleted file mode 100644
index f5ef0096e..000000000
--- a/app/components/Inspector/inspector.less
+++ /dev/null
@@ -1,172 +0,0 @@
-.inspector-panel {
- display: flex;
- flex-direction: column;
-}
-
-.inspector-toolbar {
- flex: 0;
- background-color: #f3f3f3;
- border-bottom: #ccc 1px solid;
-}
-
-.inspector-search {
- width: 100%;
- outline: none;
- border: none;
- padding: 5px 10px;
- font-size: 12px;
-}
-
-.inspector-body {
- flex: 1;
- display: flex;
-}
-
-.inspector-sidebar {
- flex: none;
- width: 200px;
- overflow: scroll;
- border-right: 1px solid #ddd;
-
- .inspector-sidebar-title {
- font-weight: bold;
- background-color: #FBFBFB;
- border-bottom: 1px solid #CCC;
- line-height: 33px;
- padding-left: 10px;
- }
-
- .inspector-sidebar-item {
- cursor: pointer;
- padding: 3px 10px;
- border-bottom: 1px solid #EFEFEF;
- font-size: 12px;
- font-family: monospace;
- font-weight: 100;
-
- &:hover {
- background-color: fade(#22a699, 10%);
- }
-
- &.active {
- background-color: fade(#22a699, 40%);
-
- &:hover {
- background-color: fade(#22a699, 30%);
- }
- }
- }
-}
-
-.inspector-main {
- flex: 1;
- overflow: scroll;
- font-size: 12px;
- font-family: monospace;
- padding: 20px 0;
- position: relative;
-}
-
-.store-tree-field-set {
- margin-left: 20px;
- border-left: 1px solid #EEE;
- padding-left: 5px;
-}
-
-.store-tree-field-set.double-indent {
- margin-left: 40px;
-}
-
-.store-tree-ref-id {
- margin-left: 20px;
- color: #B11A04;
- cursor: pointer;
- display: block;
-
- &.store-tree-ref-id-inline {
- display: inline-block;
- margin-left: 5px;
- }
-
- .jump-to-object {
- &:before {
- content: "\2192";
- margin-left: 5px;
- color: #999;
- transition: 300ms all cubic-bezier(0.175, 0.885, 0.335, 1.05);
- opacity: 0;
- }
-
- &:hover:before {
- color: lighten(#22a699, 20%);
- }
- }
-
- &:hover {
- .data-id {
- text-decoration: underline;
- }
-
- .jump-to-object:before {
- opacity: 1;
- }
- }
-
- .triangle {
- width: 15px;
- display: inline-block;
- transition: 300ms all cubic-bezier(0.175, 0.885, 0.335, 1.05);
- line-height: 15px;
- vertical-align: top;
- text-align: center;
- position: absolute;
-
- &.toggled {
- transform: rotate(-90deg);
- }
- }
-
- .data-id {
- height: 15px;
- line-height: 15px;
- display: inline-block;
- vertical-align: top;
- margin-left: 15px;
- }
-}
-
-.inspector-highlight {
- background-color: #FFF59D !important;
-}
-
-.inspector-sidebar-highlighted {
- background-color: #FFF59D !important;
-
- &:hover {
- background-color: fade(#B5DB9C, 50%) !important;
- }
-
- &.active {
- background-color: #B5DB9C !important;
-
- &:hover {
- background-color: fade(#B5DB9C, 50%) !important;
- }
- }
-}
-
-.inspector-field-key {
- color: #1F61A0;
-}
-
-.inspector-value-string {
- color: #D64292;
-}
-
-.inspector-value-number {
- color: #2882F9;
-}
-
-.inspector-typename {
- color: #8B2BB9;
-}
diff --git a/app/components/Logger/Logger.js b/app/components/Logger/Logger.js
deleted file mode 100644
index 74ea1c762..000000000
--- a/app/components/Logger/Logger.js
+++ /dev/null
@@ -1,193 +0,0 @@
-import React, { PropTypes } from 'react';
-import { Sidebar } from '../Sidebar';
-import { connect } from 'react-redux';
-import pickBy from 'lodash/pickBy';
-import sortBy from 'lodash/sortBy';
-import classnames from 'classnames';
-import { getQueryDefinition } from 'apollo-client';
-import { parse } from 'graphql-tag/parser';
-import { GraphqlCodeBlock } from 'graphql-syntax-highlighter-react';
-import './Logger.less';
-
-const queryNameFromQueryString = (queryString) => {
- const doc = parse(queryString);
- const queryDefinition = getQueryDefinition(doc);
- if (queryDefinition.name && queryDefinition.name.value) {
- return queryDefinition.name.value;
- }
- return null;
-};
-
-const queryLabel = (action) => {
- let label = '';
-
- if (action.type.startsWith('APOLLO_QUERY')) {
- label += 'Q:' + action.queryId;
-
- if (action.type === 'APOLLO_QUERY_INIT') {
- label += ':INIT';
- } else if (action.type === 'APOLLO_QUERY_RESULT_CLIENT') {
- label += ':RES_CLIENT';
- } else if (action.type === 'APOLLO_QUERY_RESULT') {
- label += ':RES';
- } else if (action.type === 'APOLLO_QUERY_STOP') {
- label += ':STOP';
- }
-
- if (action.requestId) {
- label += `(${action.requestId})`;
- }
- } else if (action.type.startsWith('APOLLO_MUTATION')) {
- label += 'M:' + action.mutationId;
-
- if (action.type === 'APOLLO_MUTATION_INIT') {
- label += ':INIT';
- } else if (action.type === 'APOLLO_MUTATION_RESULT') {
- label += ':RES';
- }
- } else if (action.type.startsWith('APOLLO_SUBSCRIPTION')) {
- label += 'S:' + action.subscriptionId;
- } else {
- label += action.type;
- }
-
- return label;
-};
-
-class Logger extends React.Component {
- selectId(id) {
- if (this.props.selectedId !== id) {
- this.props.onSelectLogItem(id);
- } else {
- this.props.onSelectLogItem(null);
- }
- }
-
- renderSidebarItem(logEntry) {
- let className = 'item';
-
- return (
- this.selectId(logEntry.id)}
- className={classnames('item', {
- active: logEntry.id === this.props.selectedId,
- })}>
- {queryLabel(logEntry.action)}
-
- );
- }
-
- getRequestByLogId(id) {
- const filtered = this.props.log.filter(l => l.id === id);
- if (filtered.length) {
- return filtered[0];
- }
-
- return null;
- }
-
- render() {
- const { selectedId } = this.props;
- let reqToDisplay = null;
-
- if (selectedId) {
- reqToDisplay = this.getRequestByLogId(selectedId);
- }
-
- return (
-
-
-
-
- );
- }
-}
-
-Logger.propTypes = {
- log: PropTypes.array,
-};
-
-class LabeledShowHide extends React.Component {
- constructor(props, context) {
- super(props, context);
- const { show = true } = props;
- this.state = { show: true };
- this.toggle = this.toggle.bind(this);
- }
- toggle() {
- this.setState(({ show }) => ({ show: !show }));
- }
- render() {
- return (
- Request log
- {this.props.log.map(logEntry => this.renderSidebarItem(logEntry))}
-
- {reqToDisplay &&
-
-
-
- {this.state.show ? ▾ : ▸ }
- {this.props.label}
-
- {this.state.show &&
-
- );
- }
-}
-LabeledShowHide.propTypes = {
- label: PropTypes.string.isRequired,
- children: PropTypes.any.isRequired,
- show: PropTypes.bool,
-};
-
-const Variables = ({variables} ) => {
- if (!variables) {
- return null;
- }
- const inner = [];
- Object.keys(variables).sort().forEach((name) => {
- inner.push({this.props.children}
}
- - {inner}
Unknown action type. Probably a bug in the dev tools.
;
- }
-
- return React.createElement(actionTypeToComponent[action.type], this.props);
- }
-}
-
-const QueryInit = ({ request }) => {
- const action = request.action;
-
- return (
- | Type | -{action.type} | -
|---|---|
| Query ID | -{action.queryId} | -
-
-
- {body}
-
- );
- }
-}
diff --git a/app/components/Sidebar.js b/app/components/Sidebar.js
deleted file mode 100644
index 2e42e3bd6..000000000
--- a/app/components/Sidebar.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import classnames from 'classnames';
-
-export class Sidebar extends Component {
- static propTypes = {
- className: PropTypes.string,
- name: PropTypes.string.isRequired,
- };
-
- constructor(props, context) {
- super(props, context);
-
- this.initResize = this.initResize.bind(this);
- this.Resize = this.Resize.bind(this);
- this.stopResize = this.stopResize.bind(this);
- }
-
- componentDidMount() {
- const savedWidth = localStorage.getItem(`apollo-client:${this.props.name}`);
- if (savedWidth) this.sidebar.style.width = `${savedWidth}px`;
- }
-
- initResize(e) {
- window.addEventListener('mousemove', this.Resize, false);
- window.addEventListener('mouseup', this.stopResize, false);
- }
-
- Resize(e) {
- const width = e.clientX - this.sidebar.offsetLeft;
- localStorage.setItem(`apollo-client:${this.props.name}`, width);
- this.sidebar.style.width = `${width}px`;
- window.getSelection().removeAllRanges();
- }
-
- stopResize(e) {
- window.removeEventListener('mousemove', this.Resize, false);
- window.removeEventListener('mouseup', this.stopResize, false);
- }
-
- render() {
- const { children } = this.props;
- return (
- this.switchPane('graphiql')}
- >
- GraphiQL
this.switchPane('queries')}
- >
- Queries
this.switchPane('store')}
- >
- Store
{ this.sidebar = sidebar; }}>
-
- {children}
-
- );
- }
-}
diff --git a/app/components/WatchedQueries/WatchedQueries.js b/app/components/WatchedQueries/WatchedQueries.js
deleted file mode 100644
index dc2a0532f..000000000
--- a/app/components/WatchedQueries/WatchedQueries.js
+++ /dev/null
@@ -1,166 +0,0 @@
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import pickBy from 'lodash/pickBy';
-import sortBy from 'lodash/sortBy';
-import classnames from 'classnames';
-import { getQueryDefinition } from 'apollo-client';
-import { parse } from 'graphql-tag/parser';
-import { GraphqlCodeBlock } from 'graphql-syntax-highlighter-react';
-import { Sidebar } from '../Sidebar';
-import './WatchedQueries.less';
-
-const queryNameFromQueryString = (queryString) => {
- const doc = parse(queryString);
- const queryDefinition = getQueryDefinition(doc);
- if (queryDefinition.name && queryDefinition.name.value) {
- return queryDefinition.name.value;
- }
- return null;
-};
-
-const queryLabel = (queryId, query) => {
- const queryName = queryNameFromQueryString(query.queryString);
- if (queryName === null) {
- return queryId;
- }
- return `${queryName}`;
-};
-
-class WatchedQueries extends React.Component {
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- selectedId: null,
- };
- }
-
- componentDidMount() {
- if (ga) ga('send', 'pageview', 'WatchedQueries');
- }
-
- selectId(id) {
- this.setState({ selectedId: id });
- }
-
- getQueries() {
- return this.props.state ?
- pickBy(this.props.state.queries, query => !query.stopped) :
- {};
- }
-
- sortedQueryIds() {
- const queries = this.getQueries();
- return sortBy(Object.keys(queries), id => parseInt(id, 10));
- }
-
- renderSidebarItem(id, query) {
- let className = 'item';
- return (
-
-
-
- {selectedId && queries[selectedId] &&
-
- );
- }
-}
-
-WatchedQueries.propTypes = {
- state: PropTypes.object,
-};
-
-class LabeledShowHide extends React.Component {
- constructor(props, context) {
- super(props, context);
- const { show = true } = props;
- this.state = { show: true };
- this.toggle = this.toggle.bind(this);
- }
- toggle() {
- this.setState(({ show }) => ({ show: !show }));
- }
- render() {
- return (
- Watched queries
- - {this.sortedQueryIds().map(id => this.renderSidebarItem(id, queries[id]))}
-
- ▾
- {this.props.label}
-
- {this.state.show &&
-
- );
- }
-}
-LabeledShowHide.propTypes = {
- label: PropTypes.string.isRequired,
- children: PropTypes.any.isRequired,
- show: PropTypes.bool,
-};
-
-const Variables = ({variables} ) => {
- if (!variables) {
- return null;
- }
- const inner = [];
- Object.keys(variables).sort().forEach((name) => {
- inner.push(
- {this.props.children}
}
-
-
-
- }
-
-
-
- );
- }
-}
-
-export default WatchedQueries;
diff --git a/app/components/WatchedQueries/WatchedQueries.less b/app/components/WatchedQueries/WatchedQueries.less
deleted file mode 100644
index 9b0d2047c..000000000
--- a/app/components/WatchedQueries/WatchedQueries.less
+++ /dev/null
@@ -1,159 +0,0 @@
-.watchedQueries {
- display: flex;
- flex-direction: row;
-
- .sidebar {
- flex: none;
- width: 200px;
- border-right: 1px solid #DDD;
-
- .queries-sidebar-title {
- font-weight: bold;
- background-color: #FBFBFB;
- border-bottom: 1px solid #CCC;
- line-height: 33px;
- padding-left: 10px;
- }
-
- .query-list {
- padding: 0 0 0 25px;
- margin: 0;
-
- .item {
- padding: 10px 10px 0;
- font-size: 12px;
- cursor: pointer;
- transition: .25s;
-
- &:hover {
- span { color: fade(#333, 60%); }
- }
-
- &.active {
- span { color: #22a699; }
-
- &:hover {
- span { color: fade(#22a699, 60%); }
- }
- }
-
- &.loading {
- span { color: #AAA; }
- }
-
- }
- }
- }
-
- .main {
- flex: 1;
- overflow-y: auto;
- padding: 20px;
-
- .toggled-section {
- margin-bottom: 10px;
-
- &:last-of-type {
- margin: 0;
- }
-
- table {
- tr {
- font-size: 12px;
-
- td:first-child {
- font-weight: bold;
- padding: 0 15px 0 5px;
- }
-
- td:nth-child(2) {
- font-family: monospace;
- }
- }
- }
- }
-
- .panel-title {
- font-size: 14px;
- margin-bottom: 10px;
-
- .loading-label {
- font-size: 12px;
- font-family: sans-serif;
- margin-left: 10px;
- color: #AAA;
- opacity: 0;
- transition: .25s;
-
- &.show {
- opacity: 1;
- }
- }
-
- .component-name {
- color: #8B2BB9;
- font-weight: normal;
- font-family: monospace;
- margin-left: 10px;
- }
-
- .run-in-graphiql-link {
- font-size: 10px;
- cursor: pointer;
- font-family: sans-serif;
- margin-left: 10px;
- padding: 2px 5px;
- border-radius: 3px;
- border: 1px solid #CCC;
-
- &:hover {
- box-shadow: inset 6px 6px 30px #CCC;
- }
- }
- }
-
- pre {
- border: none;
- font-family: monospace;
- font-size: 12px;
- }
-
- .loading {
- background: #AAA;
- }
- }
-
- .toggle {
- font-size: 12px;
- font-weight: bold;
- cursor: pointer;
- display: block;
-
- .triangle {
- width: 15px;
- display: inline-block;
- transition: 300ms all cubic-bezier(0.175, 0.885, 0.335, 1.05);
- line-height: 15px;
- vertical-align: top;
- text-align: center;
-
- &.toggled {
- transform: rotate(-90deg);
- }
- }
-
- .section-label {
- line-height: 15px;
- display: inline-block;
- vertical-align: top;
- }
-
- &:hover .section-label {
- text-decoration: underline;
- }
- }
-
- .labeled {
- padding-left: 16px;
- }
-}
diff --git a/app/components/WatchedQueries/index.js b/app/components/WatchedQueries/index.js
deleted file mode 100644
index 29a405ab5..000000000
--- a/app/components/WatchedQueries/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import WatchedQueries from './WatchedQueries';
-export default WatchedQueries;
diff --git a/app/evalInPage.js b/app/evalInPage.js
deleted file mode 100644
index f71ae263c..000000000
--- a/app/evalInPage.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export default function evalInPage(code, cb) {
- if (chrome && chrome.devtools) {
- chrome.devtools.inspectedWindow.eval(code, cb);
- return;
- }
- let result;
- try {
- result = eval(code);
- } catch (e) {
- cb(undefined, {isException: true, value: e.toString()});
- return;
- }
- cb(result);
-}
diff --git a/app/index.html b/app/index.html
deleted file mode 100644
index 40a68a7ae..000000000
--- a/app/index.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-
-
-
diff --git a/app/index.js b/app/index.js
deleted file mode 100644
index 9a62e05db..000000000
--- a/app/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import Panel from './components/Panel';
-import runVersionCheck from './checkVersions';
-import { render } from 'react-dom';
-
-// Standard Google Universal Analytics code
-(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-ga('create', 'UA-74643563-7', 'auto');
-ga('set', 'checkProtocolTask', function(){}); // Removes failing protocol check. @see: http://stackoverflow.com/a/22152353/1958200
-ga('require', 'displayfeatures');
-ga('send', 'pageview', 'DevtoolsPanel');
-
-render(
- { queryLabel(queryId, query) }
- {reactComponentDisplayName && {`<${reactComponentDisplayName}>`}}
- this.props.onRun(query.queryString, query.variables)}
- >Run in GraphiQL
- (loading)
-
- {
- query.variables &&
- -
+
-
+ {{ product.id }} - {{ product.sku }}
+
Size: {{ product?.dimensions?.size }}
++ Variation: {{ product?.variation?.id + " - " + product?.variation?.name }} +
+
+
🔍 Iframe Apollo Client Test Page
+
+ This page embeds the Color App in an iframe. With
+ all_frames: true in the manifest, Apollo Client DevTools
+ should detect the Apollo Client instance running inside this iframe.
+
+
+
+
+
diff --git a/development/client/public/index.html b/development/client/public/index.html
new file mode 100644
index 000000000..75cfc8524
--- /dev/null
+++ b/development/client/public/index.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+ let { client, Provider } = clients[selectedClientIndex];
+ if (!client) {
+ setSelectedClientIndex(0);
+ ({ client, Provider } = clients[0]);
+ }
+
+ return (
+ Client was terminated
+ + +
+
+
+
+
+
+
+
+
+ Colors
+ + +
+
+
+
+
+
+
+
+
+
+
+ {color && (
+
+ );
+};
+
+export default ColorLookup;
diff --git a/development/client/src/ColorSchemeGenerator.tsx b/development/client/src/ColorSchemeGenerator.tsx
new file mode 100644
index 000000000..26fd8152b
--- /dev/null
+++ b/development/client/src/ColorSchemeGenerator.tsx
@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+import { useQuery } from "./ClientContext";
+
+import { GET_COLOR_SCHEME, GET_RANDOM_COLOR } from "./queries";
+import ColorScheme from "./components/ColorScheme";
+
+const MODE = {
+ MONOCHROME: "MONOCHROME",
+ MONOCHROME_DARK: "MONOCHROME-DARK",
+ MONOCHROME_LIGHT: "MONOCHROME-LIGHT",
+ ANALOGIC: "ANALOGIC",
+ COMPLEMENT: "COMPLEMENT",
+ ANALOGIC_COMPLEMENT: "ANALOGIC-COMPLEMENT",
+ TRIAD: "TRIAD",
+ QUAD: "QUAD",
+};
+
+const ColorSchemeGenerator = () => {
+ const { data, refetch, startPolling, stopPolling } = useQuery
+
+ ) : (
+ You haven't favorited any colors yet!
+
+ {colors.map(({ contrast, hex, name, saved }, index) => (
+
+ );
+};
+
+export default Favorites;
diff --git a/development/client/src/Playground.tsx b/development/client/src/Playground.tsx
new file mode 100644
index 000000000..5e1212f05
--- /dev/null
+++ b/development/client/src/Playground.tsx
@@ -0,0 +1,55 @@
+import { gql } from "@apollo/client";
+import { useApolloClient } from "@apollo/client/react";
+import React from "react";
+
+const FRAGMENT = gql`
+ fragment SingleColorFragment on Color {
+ name
+ hex
+ }
+`;
+
+const NESTED_FRAGMENT = gql`
+ fragment SingleColorNestedFragment on Color {
+ hex
+ ...HexName
+ }
+
+ fragment HexName on Color {
+ name
+ }
+`;
+
+export function Playground() {
+ const client = useApolloClient();
+
+ return (
+
+
+ );
+}
diff --git a/development/client/src/RandomColorQuery.tsx b/development/client/src/RandomColorQuery.tsx
new file mode 100644
index 000000000..ba484c85e
--- /dev/null
+++ b/development/client/src/RandomColorQuery.tsx
@@ -0,0 +1,42 @@
+import React, { useEffect } from "react";
+import { useLazyQuery } from "./ClientContext";
+import { GET_RANDOM_COLOR, GET_COLOR } from "./queries";
+import Color from "./components/Color";
+import RefreshIcon from "./components/RefreshIcon";
+
+const RandomColorQuery = () => {
+ const [loadRandomColor, { data: randomColorData }] = useLazyQuery(
+ GET_RANDOM_COLOR,
+ { fetchPolicy: "no-cache" }
+ );
+ const [loadColor, { data }] = useLazyQuery(GET_COLOR);
+ const randomColorHexCode = randomColorData?.random?.color?.hex;
+
+ useEffect(() => {
+ loadRandomColor();
+ }, [loadRandomColor]);
+
+ useEffect(() => {
+ if (randomColorHexCode) {
+ loadColor({ variables: { hex: randomColorHexCode } });
+ }
+ }, [loadColor, randomColorHexCode]);
+
+ const hexCode = data?.color?.hex?.value;
+
+ return (
+
+ );
+};
+
+export default RandomColorQuery;
diff --git a/development/client/src/apollo-client.d.ts b/development/client/src/apollo-client.d.ts
new file mode 100644
index 000000000..38c02214f
--- /dev/null
+++ b/development/client/src/apollo-client.d.ts
@@ -0,0 +1,6 @@
+import "@apollo/client";
+import { Defer20220824Handler } from "@apollo/client/incremental";
+
+declare module "@apollo/client" {
+ export interface TypeOverrides extends Defer20220824Handler.TypeOverrides {}
+}
diff --git a/development/client/src/components/Color.tsx b/development/client/src/components/Color.tsx
new file mode 100644
index 000000000..19228f0e4
--- /dev/null
+++ b/development/client/src/components/Color.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import SaveIcon from "./SaveIcon";
+import cx from "classnames";
+import { useMutation } from "../ClientContext";
+import { GET_SAVED_COLORS } from "../queries";
+import {
+ ADD_COLOR_TO_FAVORITES,
+ REMOVE_COLOR_FROM_FAVORITES,
+} from "../mutations";
+
+const Color = ({
+ className,
+ contrast,
+ hexCode,
+ name,
+ isSaved = false,
+}: {
+ className?: string;
+ contrast?: string;
+ hexCode?: string;
+ name?: string;
+ isSaved?: boolean;
+}) => {
+ const [saved, setSaved] = useState(isSaved);
+ const variables = { color: { name, hex: hexCode, contrast } };
+ const [addColor] = useMutation(ADD_COLOR_TO_FAVORITES, {
+ variables,
+ update(cache, { data: { addColor } }) {
+ cache.writeQuery({
+ query: GET_SAVED_COLORS,
+ data: { favoritedColors: addColor },
+ });
+ },
+ });
+ const [removeColor] = useMutation(REMOVE_COLOR_FROM_FAVORITES, {
+ variables,
+ update(cache, { data: { removeColor } }) {
+ const colorToRemove = removeColor[0];
+ const { favoritedColors } = cache.readQuery
+
+
+
+
+
+
+
+ );
+};
+
+export default Color;
diff --git a/development/client/src/components/ColorScheme.tsx b/development/client/src/components/ColorScheme.tsx
new file mode 100644
index 000000000..6c973848a
--- /dev/null
+++ b/development/client/src/components/ColorScheme.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import Color from "./Color";
+
+const ColorScheme = ({
+ colors,
+}: {
+ colors: Array<{
+ contrast: string;
+ hex: string;
+ name: string;
+ saved: boolean;
+ }> | null;
+}) => {
+ if (!colors) {
+ return null;
+ }
+
+ return (
+
+
+ {name && {name}}
+ {hexCode}
+
+ {colors.map(({ contrast, hex, name, saved }, index) => (
+
+ );
+};
+
+export default ColorScheme;
diff --git a/development/client/src/components/RefreshIcon.tsx b/development/client/src/components/RefreshIcon.tsx
new file mode 100644
index 000000000..261d85f2e
--- /dev/null
+++ b/development/client/src/components/RefreshIcon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import cx from "classnames";
+
+const RefreshIcon = () => {
+ return (
+
+ );
+};
+
+export default RefreshIcon;
diff --git a/development/client/src/components/SaveIcon.tsx b/development/client/src/components/SaveIcon.tsx
new file mode 100644
index 000000000..66c4ac6d4
--- /dev/null
+++ b/development/client/src/components/SaveIcon.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import cx from "classnames";
+
+export interface Props {
+ className?: string;
+ isSaved?: boolean;
+}
+
+const SaveIcon = ({ className, isSaved = false }: Props) => {
+ return !isSaved ? (
+
+ ) : (
+
+ );
+};
+
+export default SaveIcon;
diff --git a/development/client/src/components/__tests__/SaveIcon.test.tsx b/development/client/src/components/__tests__/SaveIcon.test.tsx
new file mode 100644
index 000000000..dd9093444
--- /dev/null
+++ b/development/client/src/components/__tests__/SaveIcon.test.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import SaveIcon from "../SaveIcon";
+
+describe("+ [@hwillson](https://github.com/hwillson) in [#541](https://github.com/apollographql/apollo-client-devtools/pull/541) +- Make sure fragment imports are properly resolved.
+ [@hwillson](https://github.com/hwillson) in [#542](https://github.com/apollographql/apollo-client-devtools/pull/542) + +## 3.0.4 (2021-04-04) + +- Fix an issue where removing a field in graphiql caused a panel crash.
+ [@hwillson](https://github.com/hwillson) in [#508](https://github.com/apollographql/apollo-client-devtools/pull/508) + +## 3.0.3 (2021-04-03) + +- Make sure null and boolean values are rendered properly in the Cache tree.
+ [@alexTayanovsky](https://github.com/alexTayanovsky) in [#446](https://github.com/apollographql/apollo-client-devtools/pull/446) +- Delay the loading / initialization of Apollo Client on each browser tab until it is really needed.
+ [@hwillson](https://github.com/hwillson) in [#479](https://github.com/apollographql/apollo-client-devtools/pull/479) +- Make sure variables are copied to the GraphiQL panel when using the "Run in GraphiQL" button.
+ [@hwillson](https://github.com/hwillson) in [#491](https://github.com/apollographql/apollo-client-devtools/pull/491) +- Make sure queries missing document details aren't attempted to be used.
+ [@yrambler2001](https://github.com/yrambler2001) in [#500](https://github.com/apollographql/apollo-client-devtools/pull/500) + +## 3.0.2 (2021-03-17) + +- Update the `@apollo/client` dep to make sure >= 0.7.0 of `ts-invariant` is + used, to pull in a fix that makes sure `window.process` remains writable.
+ [@hwillson](https://github.com/hwillson) in [#463](https://github.com/apollographql/apollo-client-devtools/pull/463) + +## 3.0.1 (2021-03-15) + +- Update the `@apollo/client` dep to make sure >= 0.6.2 of `ts-invariant` is + used, to pull in a fix that makes sure `window.process` remains writable.
+ [@hwillson](https://github.com/hwillson) in [#460](https://github.com/apollographql/apollo-client-devtools/pull/460) + +## 3.0.0 (2021-03-02) + +- Apollo Client Devtools 3.0 is a ground up behind the scenes re-write that is focused on modernizing the codebase, making it easier to maintain and add new features to moving forward. It includes a new UI that aligns more closely with other Apollo tools like [Apollo Studio](https://www.apollographql.com/studio/develop/), and numerous integration/performance enhancements to better communicate with Apollo Client. The specific changes in this release are too numerous to list here, and are mostly internal, but for those interested in the details the majority of the changes can be seen in [#292](https://github.com/apollographql/apollo-client-devtools/pull/292). + +## 2.3.5 (2020-12-18) + +- Guard against uninitialized client race condition
[@jeffhertzler]() in [#329](https://github.com/apollographql/apollo-client-devtools/pull/329) + +## 2.3.4 (2020-12-14) + +- Add interval to check for updates; resolves non-updating cache issue
[@jcreighton]() in [#321](https://github.com/apollographql/apollo-client-devtools/pull/321) + +## 2.3.3 (2020-10-30) + +- Fix for undefined schemas error
[@jcreighton]() in [#307](https://github.com/apollographql/apollo-client-devtools/pull/307) + +## 2.3.2 (2020-10-29) + +- Fix for local schema discovery
[@micmro]() in [#286](https://github.com/apollographql/apollo-client-devtools/pull/286) + +- Compatability with Apollo Client 3.3+
[@jcreighton]() in [#302](https://github.com/apollographql/apollo-client-devtools/pull/302) + +- Fix queries not updating
[@jcreighton]() in [#302](https://github.com/apollographql/apollo-client-devtools/pull/302) + +## 2.3.1 (2020-06-02) + +- Check for value before extracting \_\_typename
[@jcreighton](https://github.com/jcreighton) in [#267](https://github.com/apollographql/apollo-client-devtools/pull/267) + +- Fix to disable saving InspectionQuery results in the cache
[@jcreighton](https://github.com/jcreighton) in [#273](https://github.com/apollographql/apollo-client-devtools/pull/273) + +## 2.3.0 (2020-05-28) + +- Support for Apollo Client 3 🎉 + fixes local state detection
+ [@hwillson](https://github.com/hwillson) in [#263](https://github.com/apollographql/apollo-client-devtools/pull/263) + +## 2.2.5 (2019-09-13) + +- More fixes for sidebar scrolling.
+ [@sagarhani](https://github.com/sagarhani) in [#225](https://github.com/apollographql/apollo-client-devtools/pull/225) + +## 2.2.4 + +- Fix to enable scrolling on the explorer sidebar.
+ [@RIP21](https://github.com/RIP21) in [#217](https://github.com/apollographql/apollo-client-devtools/pull/217) + +## 2.2.3 + +- Integrate OneGraph's GraphiQL Explorer.
+ [@sgrove](https://github.com/sgrove) in [#199](https://github.com/apollographql/apollo-client-devtools/pull/199) +- Make sure devtools can be used when the transport layer is websockets + only.
+ [@kamerontanseli](https://github.com/kamerontanseli) in [#163](https://github.com/apollographql/apollo-client-devtools/pull/163) +- Debounce broadcast messages to improve devtools responsiveness and + memory usage.
+ [@thomassuckow](https://github.com/thomassuckow) in [#173](https://github.com/apollographql/apollo-client-devtools/pull/173) +- Gracefully handle a failed version compatibility check.
+ [@mjlyons](https://github.com/mjlyons) in [#201](https://github.com/apollographql/apollo-client-devtools/pull/201) +- Increase timeout when checking whether to display the devtools panel.
+ [@Gongreg](https://github.com/Gongreg) in [#203](https://github.com/apollographql/apollo-client-devtools/pull/203) +- Fully reload devtools when a page reload happens, to make sure it is + reconnected to the current Apollo Client instance properly.
+ [@hwillson](https://github.com/hwillson) in [#205](https://github.com/apollographql/apollo-client-devtools/pull/205) + +## 2.2.1 & 2.2.2 + +- Fixes an issue preventing scrolling from working properly in Chrome 72 and + up.
+ [@scfoxcode](https://github.com/scfoxcode) in [#193](https://github.com/apollographql/apollo-client-devtools/pull/193) + +## 2.2.0 + +- Include local fields and types in GraphiQL ([#172](https://github.com/apollographql/apollo-client-devtools/issues/172), [#159](https://github.com/apollographql/apollo-client-devtools/issues/159)) + [@justinanastos](https://github.com/justinanastos) in [#188](https://github.com/apollographql/apollo-client-devtools/pull/188) + +- Use Apollo Client v2.5 local state 🎉 ([#apollographql/apollo-client#4361](https://github.com/apollographql/apollo-client/pull/4361)) + [@cheapsteak](https://github.com/cheapsteak) and [@hwillson](https://github.com/hwillson) in [#166](https://github.com/apollographql/apollo-client-devtools/pull/166) + +## 2.1.9 + +- Eliminate use of `window.localStorage`, removing the need for 3rd party cookies ([#118](https://github.com/apollographql/apollo-client-devtools/issues/118), [#142](https://github.com/apollographql/apollo-client-devtools/issues/142)) + [@justinanastos](https://github.com/justinanastos) in [#185](https://github.com/apollographql/apollo-client-devtools/pull/185) + +## 2.1.8 + +- Fix mutations tab crashing devtools ([#182](https://github.com/apollographql/apollo-client-devtools/issues/182)) + [@justinanastos](https://github.com/justinanastos) in [#184](https://github.com/apollographql/apollo-client-devtools/pull/184) + +## 2.1.7 + +- Removed https://devtools.apollodata.com/graphql from the content security + policy section of `manifest.json`, since it doesn't need to be referenced + based on how that endpoint is being used. Removing it helps with + Firefox's security review process.
+ [@hwillson](https://github.com/hwillson) in [#156](https://github.com/apollographql/apollo-client-devtools/pull/156) +- Fix to address issues caused by internal initial state not being set + properly, due to trying to access the Apollo Client `queryManager` when + it hasn't finished initializing.
+ [@adampetrie](https://github.com/adampetrie) in [#139](https://github.com/apollographql/apollo-client-devtools/pull/139) +- Fix outdated client message +
+ [@jonas-arkulpa](https://github.com/jonas-arkulpa) + in [#157](https://github.com/apollographql/apollo-client-devtools/pull/157) +- Prepare to publish to npm (add README for npm and add version to package.json) ([#160](https://github.com/apollographql/apollo-client-devtools/issues/160)) +
+ [@cheapsteak](https://github.com/cheapsteak) + in [#167](https://github.com/apollographql/apollo-client-devtools/pull/167) +- Adding code necessary for React Native support ([#160](https://github.com/apollographql/apollo-client-devtools/issues/160)) +
+ [@Gongreg](https://github.com/Gongreg) + in [#165](https://github.com/apollographql/apollo-client-devtools/pull/165) +- Publish built extension (dist/) ([#169](https://github.com/apollographql/apollo-client-devtools/issues/169)) +
+ [@cheapsteak](https://github.com/cheapsteak) + in [#170](https://github.com/apollographql/apollo-client-devtools/pull/170) +- Make prettier more developer-friendly +
+ [@justinanastos](https://github.com/justinanastos) + in [#178](https://github.com/apollographql/apollo-client-devtools/pull/178) +- Add sourcemaps to build +
+ [@justinanastos](https://github.com/justinanastos) + in [#179](https://github.com/apollographql/apollo-client-devtools/pull/179) +- Fix empty cache crashing cache inspector ([#107](https://github.com/apollographql/apollo-client-devtools/issues/107)) +
+ [@justinanastos](https://github.com/justinanastos) + in [#177](https://github.com/apollographql/apollo-client-devtools/pull/177) +- Fix GraphiQL Documentation Explorer crashing with client schema extensions ([#107](https://github.com/apollographql/apollo-client-devtools/issues/107)) +
+ [@justinanastos](https://github.com/justinanastos) + in [#180](https://github.com/apollographql/apollo-client-devtools/pull/180) + +## 2.1.5 + +- Fixes a query name parsing issue that lead to a blank page showing when + viewing the queries panel.
+ [@hwillson](https://github.com/hwillson) in [#149](https://github.com/apollographql/apollo-client-devtools/pull/149) + +## 2.1.4 + +- Removed all Google Analytics tracking.
+ [@hwillson](https://github.com/hwillson) in [#143](https://github.com/apollographql/apollo-client-devtools/pull/143) +- Change cursor in dark theme to white
+ [@islam3zzat](https://github.com/islam3zzat) in [#131](https://github.com/apollographql/apollo-client-devtools/pull/131) +- Fix issue where "Run in GraphiQL" does not include fragments
+ [@henryqdineen](https://github.com/henryqdineen) in [#133](https://github.com/apollographql/apollo-client-devtools/pull/133) + +## 2.1.3 + +- fixed styling of mutation list +- Allow to use `query.metadata.component.displayName` ([#126](https://github.com/apollographql/apollo-client-devtools/pull/126)) +- Fixed mutation run in GraphiQL button ([#127](https://github.com/apollographql/apollo-client-devtools/pull/127)) +- Fixed bug where query.queryString did not exist ([#125](https://github.com/apollographql/apollo-client-devtools/pull/125)) +- Update vendor GraphiQL styles & fix autocomplete styling ([#123](https://github.com/apollographql/apollo-client-devtools/pull/123)) + +## 2.1.0 + +- rebuilt with new architecture +- initial local schema support (when using cache) +- initial subscription support +- improved dark theme + +# < 2.1.0 + +- We didn't keep a changelog :-( diff --git a/packages/apollo-client-devtools/package.json b/packages/apollo-client-devtools/package.json new file mode 100755 index 000000000..5bfa0070b --- /dev/null +++ b/packages/apollo-client-devtools/package.json @@ -0,0 +1,22 @@ +{ + "name": "apollo-client-devtools", + "description": "Developer tools for Apollo Client, with Studio Explorer integration, cache inspection, and query watching.", + "license": "MIT", + "version": "4.26.0", + "type": "module", + "repository": { + "type": "git", + "url": "git+https://github.com/apollographql/apollo-client-devtools.git" + }, + "scripts": { + "clean": "git clean -Xf .", + "build": "cd ../..; webpack --env NODE_ENV=production --env TARGET=firefox --env TARGET_DIR=packages/apollo-client-devtools/build", + "prepack": "npm run clean && npm run build && cp ../../LICENSE ./LICENSE && cp ../../README.md ./README.md" + }, + "files": [ + "build", + "package.json", + "LICENSE", + "README.md" + ] +} diff --git a/packages/client-devtools-vscode/.gitignore b/packages/client-devtools-vscode/.gitignore new file mode 100644 index 000000000..c3e6d35c1 --- /dev/null +++ b/packages/client-devtools-vscode/.gitignore @@ -0,0 +1,6 @@ +* +!.gitignore +!.npmignore +!package.json +!README.md +!CHANGELOG.md diff --git a/packages/client-devtools-vscode/.npmignore b/packages/client-devtools-vscode/.npmignore new file mode 100644 index 000000000..3e4e48b0b --- /dev/null +++ b/packages/client-devtools-vscode/.npmignore @@ -0,0 +1 @@ +.gitignore \ No newline at end of file diff --git a/packages/client-devtools-vscode/CHANGELOG.md b/packages/client-devtools-vscode/CHANGELOG.md new file mode 100644 index 000000000..52c0deb12 --- /dev/null +++ b/packages/client-devtools-vscode/CHANGELOG.md @@ -0,0 +1,273 @@ +# @apollo/client-devtools-vscode + +## 4.26.0 + +### Patch Changes + +- [#1865](https://github.com/apollographql/apollo-client-devtools/pull/1865) [`9faeb7c`](https://github.com/apollographql/apollo-client-devtools/commit/9faeb7cc523fcf81797f65911e599c5dc0a6726d) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.25.6 + +### Patch Changes + +- [#1863](https://github.com/apollographql/apollo-client-devtools/pull/1863) [`13770e6`](https://github.com/apollographql/apollo-client-devtools/commit/13770e6007d194b9249a6dff224756acec81848c) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.25.5 + +### Patch Changes + +- [#1856](https://github.com/apollographql/apollo-client-devtools/pull/1856) [`ebea2f0`](https://github.com/apollographql/apollo-client-devtools/commit/ebea2f0b04bb897e3653229eddc6867df1204e14) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.25.4 + +### Patch Changes + +- [#1854](https://github.com/apollographql/apollo-client-devtools/pull/1854) [`d01c69b`](https://github.com/apollographql/apollo-client-devtools/commit/d01c69b2517780dbcd16014d5d52591e717b540e) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.25.3 + +### Patch Changes + +- [#1847](https://github.com/apollographql/apollo-client-devtools/pull/1847) [`68e75a0`](https://github.com/apollographql/apollo-client-devtools/commit/68e75a0b5306b74a48908ab01fe195df13e9c6e0) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.25.2 + +### Patch Changes + +- [#1836](https://github.com/apollographql/apollo-client-devtools/pull/1836) [`806b89c`](https://github.com/apollographql/apollo-client-devtools/commit/806b89c2cb9ce083af3f2476a4caab9a824c930a) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Due to the number of blank or low-quality issue submissions, GitHub issue links are no longer prefilled and link to the issues page. + +## 4.25.1 + +### Patch Changes + +- [#1840](https://github.com/apollographql/apollo-client-devtools/pull/1840) [`62f69b8`](https://github.com/apollographql/apollo-client-devtools/commit/62f69b8cede4d1f28c5947fcb47ef096d5d874bb) Thanks [@aramikuto](https://github.com/aramikuto)! - Fix bundling issue causing missing `@apollo/client/utilities` module error with Apollo Client v4. + +## 4.25.0 + +## 4.24.9 + +### Patch Changes + +- [#1814](https://github.com/apollographql/apollo-client-devtools/pull/1814) [`ab5df3a`](https://github.com/apollographql/apollo-client-devtools/commit/ab5df3ab54a1fab3ab8ec00c5ddf818b82cd88b6) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.24.8 + +### Patch Changes + +- [#1809](https://github.com/apollographql/apollo-client-devtools/pull/1809) [`b5f7e92`](https://github.com/apollographql/apollo-client-devtools/commit/b5f7e92f4e86f93159a135e4534c9a34b529d1e9) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.24.7 + +### Patch Changes + +- [#1807](https://github.com/apollographql/apollo-client-devtools/pull/1807) [`35507c4`](https://github.com/apollographql/apollo-client-devtools/commit/35507c45fc2fe3c85c5c874b8735a4ec1edff2b9) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.24.6 + +### Patch Changes + +- [#1805](https://github.com/apollographql/apollo-client-devtools/pull/1805) [`4797de5`](https://github.com/apollographql/apollo-client-devtools/commit/4797de5080c4ed147e4e45010da0dfd3304e8f7c) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.24.5 + +### Patch Changes + +- [#1802](https://github.com/apollographql/apollo-client-devtools/pull/1802) [`ad7dd40`](https://github.com/apollographql/apollo-client-devtools/commit/ad7dd40fffaf4398500ec82a9fb55f627631f1ec) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.24.4 + +### Patch Changes + +- [#1798](https://github.com/apollographql/apollo-client-devtools/pull/1798) [`cb7180e`](https://github.com/apollographql/apollo-client-devtools/commit/cb7180ebc27860c18511d8f3e75bf71668eb3347) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.24.3 + +### Patch Changes + +- [#1792](https://github.com/apollographql/apollo-client-devtools/pull/1792) [`be56f27`](https://github.com/apollographql/apollo-client-devtools/commit/be56f2790fe5a261be291d5883be88b2dc7c31fb) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.24.2 + +### Patch Changes + +- [#1789](https://github.com/apollographql/apollo-client-devtools/pull/1789) [`d7375cd`](https://github.com/apollographql/apollo-client-devtools/commit/d7375cd69ddefa7fd4d7d6ba7694bf5d2be50d9e) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.24.1 + +### Patch Changes + +- [#1787](https://github.com/apollographql/apollo-client-devtools/pull/1787) [`0c22c71`](https://github.com/apollographql/apollo-client-devtools/commit/0c22c71ead71f5a599a46a5231b52eb5166ae5e4) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.24.0 + +### Patch Changes + +- [#1784](https://github.com/apollographql/apollo-client-devtools/pull/1784) [`091f212`](https://github.com/apollographql/apollo-client-devtools/commit/091f212b08364503b105c627d3d478b991e5a815) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.23.2 + +### Patch Changes + +- [#1774](https://github.com/apollographql/apollo-client-devtools/pull/1774) [`4efa7f6`](https://github.com/apollographql/apollo-client-devtools/commit/4efa7f6ee325a5094696bbba36cb97341678124d) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.23.1 + +### Patch Changes + +- [#1772](https://github.com/apollographql/apollo-client-devtools/pull/1772) [`02b8d91`](https://github.com/apollographql/apollo-client-devtools/commit/02b8d919c9f4173677f3280680e1f6f131b907b5) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.23.0 + +### Patch Changes + +- [#1739](https://github.com/apollographql/apollo-client-devtools/pull/1739) [`ae9c13c`](https://github.com/apollographql/apollo-client-devtools/commit/ae9c13c71a6a0dcc34636fe3887e4c5a80cfd5f9) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Allow `@apollo/client` 4.1-alpha.x versions. + +## 4.22.4 + +### Patch Changes + +- [#1763](https://github.com/apollographql/apollo-client-devtools/pull/1763) [`367b286`](https://github.com/apollographql/apollo-client-devtools/commit/367b286d2c382b059a19dd08b0ccf0bf0e865cc5) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.22.3 + +### Patch Changes + +- [#1759](https://github.com/apollographql/apollo-client-devtools/pull/1759) [`eb24267`](https://github.com/apollographql/apollo-client-devtools/commit/eb242678b650c1ee19183e40a0eebc4815d5820b) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.22.2 + +### Patch Changes + +- [#1756](https://github.com/apollographql/apollo-client-devtools/pull/1756) [`ae58b0f`](https://github.com/apollographql/apollo-client-devtools/commit/ae58b0f6a230bf1538e26945a0d0cfad68760297) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.22.1 + +## 4.22.0 + +### Patch Changes + +- [#1738](https://github.com/apollographql/apollo-client-devtools/pull/1738) [`e8bd39f`](https://github.com/apollographql/apollo-client-devtools/commit/e8bd39f52d9aa65ccd7afdf63532853ce527b451) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.21.11 + +## 4.21.10 + +### Patch Changes + +- [#1735](https://github.com/apollographql/apollo-client-devtools/pull/1735) [`17cfb5d`](https://github.com/apollographql/apollo-client-devtools/commit/17cfb5dbbd2db44eb5de1dc5d1015d164184cdb1) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.21.9 + +### Patch Changes + +- [#1730](https://github.com/apollographql/apollo-client-devtools/pull/1730) [`83210f7`](https://github.com/apollographql/apollo-client-devtools/commit/83210f77826bbbd87e38dc7af772dd72b97af738) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.21.8 + +### Patch Changes + +- [#1728](https://github.com/apollographql/apollo-client-devtools/pull/1728) [`c66090b`](https://github.com/apollographql/apollo-client-devtools/commit/c66090b068d1b5c1f6b64ed43b5b8e2ba726e649) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.21.7 + +### Patch Changes + +- [#1726](https://github.com/apollographql/apollo-client-devtools/pull/1726) [`c8544b5`](https://github.com/apollographql/apollo-client-devtools/commit/c8544b52569e7ed4c4c21de5a7ea2afb4a166eb0) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.21.6 + +### Patch Changes + +- [#1724](https://github.com/apollographql/apollo-client-devtools/pull/1724) [`8a74f35`](https://github.com/apollographql/apollo-client-devtools/commit/8a74f351d6cf18dbb3ac2c5fe8ae389fd7de42c2) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.21.5 + +## 4.21.4 + +### Patch Changes + +- [#1719](https://github.com/apollographql/apollo-client-devtools/pull/1719) [`ab5738b`](https://github.com/apollographql/apollo-client-devtools/commit/ab5738b608c8e1948f86d8d64729951367df1817) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.21.3 + +### Patch Changes + +- [#1717](https://github.com/apollographql/apollo-client-devtools/pull/1717) [`5e2645a`](https://github.com/apollographql/apollo-client-devtools/commit/5e2645a306eb5a8bf6e13cb6853661b3d97e31f6) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.21.2 + +### Patch Changes + +- [#1713](https://github.com/apollographql/apollo-client-devtools/pull/1713) [`0302538`](https://github.com/apollographql/apollo-client-devtools/commit/03025387eef2e08a457ae595e4be9bf66306a5e0) Thanks [@braineo](https://github.com/braineo)! - fix calling client.stop twice causing app crashing by checking if handler exist before sending tab command + +## 4.21.1 + +### Patch Changes + +- [#1711](https://github.com/apollographql/apollo-client-devtools/pull/1711) [`c0f4446`](https://github.com/apollographql/apollo-client-devtools/commit/c0f444612cbcc2b7f6350ca101fd98d1971d614f) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.21.0 + +### Minor Changes + +- [#1607](https://github.com/apollographql/apollo-client-devtools/pull/1607) [`b935cf8`](https://github.com/apollographql/apollo-client-devtools/commit/b935cf8c933493e692a42158df0bc5a86ec52bd5) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Add a memory panel to monitor internal Apollo Client caches. + +## 4.20.2 + +### Patch Changes + +- [#1703](https://github.com/apollographql/apollo-client-devtools/pull/1703) [`88ef65d`](https://github.com/apollographql/apollo-client-devtools/commit/88ef65da572126b0e4ebc001d4ff5e4400d2b2b4) Thanks [@jerelmiller](https://github.com/jerelmiller)! - add error codes for new Apollo Client version + +## 4.20.1 + +### Patch Changes + +- [#1698](https://github.com/apollographql/apollo-client-devtools/pull/1698) [`b1395d0`](https://github.com/apollographql/apollo-client-devtools/commit/b1395d0352894c7e3b44f5778a820b5f6e05acae) Thanks [@phryneas](https://github.com/phryneas)! - Fix build for @apollo/client-devtools-vscode + +## 4.20.0 + +### Minor Changes + +- [#1693](https://github.com/apollographql/apollo-client-devtools/pull/1693) [`bd953e0`](https://github.com/apollographql/apollo-client-devtools/commit/bd953e0e66ad37eb57a7c3e2297ea5583534a538) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Add support for `@apollo/client` 4.0. + +## 4.19.13 + +### Patch Changes + +- [#1667](https://github.com/apollographql/apollo-client-devtools/pull/1667) [`05e063b`](https://github.com/apollographql/apollo-client-devtools/commit/05e063bc0b6ff9cddd8ee3f784dc83447f584669) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.19.12 + +### Patch Changes + +- [#1660](https://github.com/apollographql/apollo-client-devtools/pull/1660) [`205ca9d`](https://github.com/apollographql/apollo-client-devtools/commit/205ca9dfce2862eb5211af8e3db72f6ee7cdf693) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.19.11 + +### Patch Changes + +- [#1654](https://github.com/apollographql/apollo-client-devtools/pull/1654) [`6e352d8`](https://github.com/apollographql/apollo-client-devtools/commit/6e352d8d91f29a898681d23347b31d94c7c342d6) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.19.10 + +### Patch Changes + +- [#1652](https://github.com/apollographql/apollo-client-devtools/pull/1652) [`2f1068f`](https://github.com/apollographql/apollo-client-devtools/commit/2f1068fd22cd58a62be736a62c85fe09dba8c514) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.19.9 + +### Patch Changes + +- [#1649](https://github.com/apollographql/apollo-client-devtools/pull/1649) [`7cdba68`](https://github.com/apollographql/apollo-client-devtools/commit/7cdba683c6767aff1781298abcf9107d387e43d8) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.19.8 + +### Patch Changes + +- [#1642](https://github.com/apollographql/apollo-client-devtools/pull/1642) [`1152790`](https://github.com/apollographql/apollo-client-devtools/commit/115279099f55a0b2fa0a688fc9384fa48dbf953e) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version + +## 4.19.7 + +### Patch Changes + +- [#1630](https://github.com/apollographql/apollo-client-devtools/pull/1630) [`891821c`](https://github.com/apollographql/apollo-client-devtools/commit/891821cff2d8264276059914598abc192909b896) Thanks [@github-actions](https://github.com/apps/github-actions)! - add error codes for new Apollo Client version diff --git a/packages/client-devtools-vscode/README.md b/packages/client-devtools-vscode/README.md new file mode 100644 index 000000000..1311acb44 --- /dev/null +++ b/packages/client-devtools-vscode/README.md @@ -0,0 +1,3 @@ +This package is meant to be used to connect your Apollo Client instance with the Apollo Client devtools in the [Apollo GraphQL](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo) VSCode extension. + +For documentation, please see [the Apollo Client developer tool documentation](https://www.apollographql.com/docs/react/development-testing/developer-tooling#apollo-client-devtools-in-vs-code). diff --git a/packages/client-devtools-vscode/package.json b/packages/client-devtools-vscode/package.json new file mode 100644 index 000000000..3c3acdab3 --- /dev/null +++ b/packages/client-devtools-vscode/package.json @@ -0,0 +1,47 @@ +{ + "name": "@apollo/client-devtools-vscode", + "version": "4.26.0", + "repository": { + "type": "git", + "url": "git+https://github.com/apollographql/apollo-client-devtools.git" + }, + "keywords": [ + "apollo", + "apollo-client", + "devtools", + "vscode" + ], + "type": "module", + "exports": { + ".": "./vscode-client.js", + "./vscode-client": "./vscode-client.js", + "./vscode-server": "./vscode-server.js", + "./panel": "./panel.js", + "./package.json": "./package.json" + }, + "main": "./vscode-client.js", + "typings": "./vscode-client.d.ts", + "author": "packages@apollographql.com", + "license": "MIT", + "files": [ + "*.js", + "*.d.ts", + "package.json", + "LICENSE.md", + "README.md" + ], + "sideEffects": false, + "peerDependencies": { + "@apollo/client": "^3.4.0 || ^4.0.0 || ^4.1.0-alpha", + "graphql": "^16.0.0", + "rxjs": "^7.3.0" + }, + "dependencies": { + "semver": "^7.7.2" + }, + "scripts": { + "clean": "git clean -Xf .", + "build": "cd ../..; webpack --env NODE_ENV=production --env TARGET=vscode --env TARGET_DIR=packages/client-devtools-vscode", + "prepack": "npm run clean && npm run build && cp ../../LICENSE ./LICENSE.md && cp ../../dist/src/extension/vscode/server.d.ts vscode-server.d.ts && cp ../../dist/src/extension/vscode/client.d.ts vscode-client.d.ts" + } +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 000000000..2aa7205d4 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/renovate.json b/renovate.json new file mode 100644 index 000000000..09bd637b9 --- /dev/null +++ b/renovate.json @@ -0,0 +1,25 @@ +{ + "extends": ["apollo-open-source"], + "dependencyDashboard": true, + "ignorePaths": ["**/all-clients/**"], + "packageRules": [ + { + "groupName": "all @types", + "groupSlug": "all-types", + "matchPackagePatterns": ["@types/*"] + }, + { + "groupName": "all devDependencies", + "groupSlug": "all-dev", + "matchPackagePatterns": ["*"], + "matchDepTypes": ["devDependencies"] + }, + { + "groupName": "all dependencies - patch updates", + "groupSlug": "all-patch", + "matchPackagePatterns": ["*"], + "matchUpdateTypes": ["patch"] + } + ], + "ignoreDeps": ["prettier"] +} diff --git a/scripts/changesets-wrapper/npm b/scripts/changesets-wrapper/npm new file mode 100755 index 000000000..4e44adfc5 --- /dev/null +++ b/scripts/changesets-wrapper/npm @@ -0,0 +1,19 @@ +#!/usr/bin/env bash +# Shim that rewrites `npm publish ...` to `npm stage publish ...` +# (https://docs.npmjs.com/staged-publishing) and forwards every other +# invocation to the real npm unchanged. +# +set -euo pipefail + +# Find the real npm by temporarily excluding this directory from PATH, +# but do NOT export the modified PATH — child processes (e.g. changeset publish) +# must still see this wrapper so their own `npm publish` calls get rewritten too. +SELF_DIR="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd -P)" +REAL_NPM="$(PATH="${PATH//$SELF_DIR:/}" command -v npm)" + +if [ "${1:-}" = "publish" ]; then + shift + exec "$REAL_NPM" stage publish "$@" +fi + +exec "$REAL_NPM" "$@" diff --git a/src/@types/graphql.d.ts b/src/@types/graphql.d.ts new file mode 100644 index 000000000..081ef8c46 --- /dev/null +++ b/src/@types/graphql.d.ts @@ -0,0 +1,4 @@ +declare module "*.graphql" { + const content: string; + export default content; +} diff --git a/src/@types/reset.d.ts b/src/@types/reset.d.ts new file mode 100644 index 000000000..a3d4a031b --- /dev/null +++ b/src/@types/reset.d.ts @@ -0,0 +1 @@ +import "@total-typescript/ts-reset"; diff --git a/src/@types/svg.d.ts b/src/@types/svg.d.ts new file mode 100644 index 000000000..8f4806e72 --- /dev/null +++ b/src/@types/svg.d.ts @@ -0,0 +1,9 @@ +declare module "*.svg" { + import type * as React from "react"; + + export const ReactComponent: React.FunctionComponent< + React.SVGProps
+
+
+
+
+ Queries ({client?.queries.total ?? 0})
+
+
+ Mutations ({client?.mutations.total ?? 0})
+
+ Cache
+
+ Memoization cache
+
+ Explorer
+
+
+ {/**
+ * We need to keep the iframe inside of the `Explorer` loaded at all times
+ * so that we don't reload the iframe when we come to this tab
+ */}
+
+ {client?.version && (
+
+
+
+ Apollo Client v
+ {client.version}
+
+
+
+ )}
+ {clients.length > 1 && (
+
+ )}
+
+
+ }
+ asChild
+ >
+
+
+
+
+
+
+ Build
,
+}));
+
+const testAdapter = (getRpcClient as GetRpcClientMock).__adapter;
+
+beforeEach(() => {
+ testAdapter.mockClear();
+});
+
+describe("App
,
+}));
+
+describe("{children}
+
+ {children}
+
+
+ {children}
+
+ );
+ }}
+ -
+ {networkError && (
+
[GraphQL]: {message}
+ {banner.content}
+ {children}
+ );
+}
diff --git a/src/application/components/Cache/Cache.tsx b/src/application/components/Cache/Cache.tsx
new file mode 100644
index 000000000..383656eb5
--- /dev/null
+++ b/src/application/components/Cache/Cache.tsx
@@ -0,0 +1,252 @@
+import type { FC } from "react";
+import { useState, useMemo, useSyncExternalStore, memo } from "react";
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql, NetworkStatus } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
+import IconArrowLeft from "@apollo/icons/small/IconArrowLeft.svg";
+import IconArrowRight from "@apollo/icons/small/IconArrowRight.svg";
+
+import { SidebarLayout } from "../Layouts/SidebarLayout";
+import { SearchField } from "../SearchField";
+import type { GetCache, GetCacheVariables } from "../../types/gql";
+import type { JSONObject } from "../../types/json";
+import clsx from "clsx";
+import { CopyButton } from "../CopyButton";
+import { EmptyMessage } from "../EmptyMessage";
+import { History } from "../../utilities/history";
+import { Button } from "../Button";
+import { ButtonGroup } from "../ButtonGroup";
+import { Tooltip } from "../Tooltip";
+import { Alert } from "../Alert";
+import { List } from "../List";
+import { ListItem } from "../ListItem";
+import { getRootCacheIds } from "./common/utils";
+import HighlightMatch from "../HighlightMatch";
+import { useActorEvent } from "../../hooks/useActorEvent";
+import { PageSpinner } from "../PageSpinner";
+import { isIgnoredError } from "../../utilities/ignoredErrors";
+import { useIsExtensionInvalidated } from "@/application/machines/devtoolsMachine";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { CacheWritesPanel } from "./common/CacheWritesPanel";
+import type { Path } from "../ObjectViewer";
+import { ObjectViewer } from "../ObjectViewer";
+
+const { Sidebar, Main } = SidebarLayout;
+
+const GET_CACHE: TypedDocumentNode-
+ {cacheIds.map((id) => {
+ return (
+
+
+
+ }
+ size="xs"
+ variant="secondary"
+ disabled={!history.canGoBack()}
+ onClick={() => history.back()}
+ />
+
+
+ }
+ size="xs"
+ variant="secondary"
+ disabled={!history.canGoForward()}
+ onClick={() => history.forward()}
+ />
+
+
+
+
+
+
+ ) : null}
+
+ {networkStatus === NetworkStatus.loading ? (
+ Cache ID
+ + {cacheId} +
+
+
+
+
+ );
+}
+
+function EmptyList({ isRecording }: { isRecording: boolean }) {
+ return (
+ + Cache writes ({cacheWrites.length}) +
+
+
+
+
+ -
+ {sortedCacheWrites.length > 0 ? (
+ sortedCacheWrites.map((cacheWrite) => {
+ return (
+
+
+ );
+}
+
+const CACHE_MODIFY_VIEW: TypedDocumentNode
+ {!isRecording && (
+ <>
+ Press record{" "}
+
+
+
+ cache.
+ modify(
+
+ {
+ if (context?.option === "fields") {
+ return (
+
+ {value}
+
+ );
+ }
+
+ return
+ );
+}
+
+const DIRECT_CACHE_WRITE_VIEW: TypedDocumentNode{children}
;
+}
+
+function SectionTitle({ children }: { children?: ReactNode }) {
+ return (
+ {children}
+ ); +} + +function CacheWriteContainer({ children }: { children: ReactNode }) { + return{children}
;
+}
+
+function CacheWriteHeader({
+ title,
+ onNavigateBack,
+}: {
+ title: string;
+ onNavigateBack: () => void;
+}) {
+ return (
+ + {title} +
+{children}
+ );
+}
+
+function DiffSection({ diff }: { diff: Diff | null }) {
+ return (
+
+
+ {api?.split(".").map((part, idx, arr) =>
+ idx === arr.length - 1 ? (
+
+ {part}
+
+ ) : (
+
+ {part}
+ .
+
+ )
+ )}
+ (
+
+ {
+ return 1} />;
+ },
+ objectValue: ({
+ collapsed,
+ depth,
+ value,
+ onToggleCollapsed,
+ DefaultRender,
+ }) => {
+ if (value === document) {
+ const documentString = print(document);
+
+ return (
+ <>
+
+
+ gql
+
+ `
+
+ {collapsed ? (
+
+ ...
+
+ ) : (
+ 1} />;
+ },
+ arrayValue: ({ depth, DefaultRender }) => {
+ return 1} />;
+ },
+ }}
+ />
+ )
+
+
+
+ cache.modify(
+
+ {id}
+
+ )
+
+
+ {format(new Date(timestamp), "MMM do, yyyy pp")}
+
+
+ );
+}
diff --git a/src/application/components/CacheSize.tsx b/src/application/components/CacheSize.tsx
new file mode 100644
index 000000000..9ecc08710
--- /dev/null
+++ b/src/application/components/CacheSize.tsx
@@ -0,0 +1,283 @@
+import type { ReactNode } from "react";
+import IconOutlink from "@apollo/icons/small/IconOutlink.svg";
+import IconInfo from "@apollo/icons/default/IconInfo.svg";
+import IconWarning from "@apollo/icons/large/IconWarning.svg";
+import { ExternalLink } from "./ExternalLink";
+import { Tooltip } from "./Tooltip";
+import type { CacheSizes as CacheSizesV4 } from "@apollo/client/utilities";
+import type { CacheSizes as CacheSizesV3 } from "@apollo/client-3/utilities";
+import type { CacheSize as CacheSizeType } from "../types/gql";
+import clsx from "clsx";
+
+type CacheSizeKeys = keyof CacheSizesV3 | keyof CacheSizesV4;
+
+const DESCRIPTIONS: Record
+ Cache size for the{" "}
+ checkDocument
+
+ Cache size for the{" "}
+ print
+
+ It is called with transformed DocumentNodes.
+
+ This method is called to transform a GraphQL query AST parsed by{" "}
+ gql back into a GraphQL string.
+
+ Cache size for the{" "}
+ parser
+
+ It is called with user-provided DocumentNodes.
+
+ Cache used by{" "}
+ canonicalStringify
+
+ A cache inside of
+ PersistedQueryLink
+
+ It is called with transformed DocumentNodes.
+
+ Cache used in
+ removeTypenameFromVariables
+
+ This function is called transformed DocumentNodes.
+
+ A cache inside of{" "}
+ QueryManager
+
+ It is called with transformed DocumentNodes.
+
+ Cache size for the cache of
+ DocumentTransform
+ cache option set to true.
+
+ Can be called with user-defined or already-transformed{" "}
+ DocumentNodes.
+
+ A cache inside of
+ FragmentRegistry
+
+ This function is called with fragment names in the form of a string. +
+ + ), + "fragmentRegistry.findFragmentSpreads": ( + <> +
+ Cache size for the findFragmentSpreads method of
+ FragmentRegistry
+
+ This function is called with transformed DocumentNodes, as
+ well as recursively with every fragment spread referenced within that,
+ or a fragment referenced by a fragment spread.
+
+ A cache inside of
+ FragmentRegistry
+
+ Can be called with user-defined or already-transformed{" "}
+ DocumentNodes.
+
+ Cache size for the getFragmentDoc method of
+ ApolloCache
+
This function is called with user-provided fragment definitions.
+ + ), + "inMemoryCache.executeSelectionSet": ( +
+ Cache size for the executeSelectionSet method on{" "}
+ StoreReader
+
+ Cache size for the executeSubSelectedArray method on{" "}
+ StoreReader
+
+ Cache size for the maybeBroadcastWatch method on{" "}
+ InMemoryCache
+
+
+
}
+ >
+
+
+ {cacheSize.key}
+ {description && (
+ {description}
+
+
+ );
+}
+
+function TooltipLink({
+ children,
+ href,
+}: {
+ children: ReactNode;
+ href: string;
+}) {
+ return (
+
+
+ Size
+
+ {cacheSize.size}
+
+
+
+ Limit
+
+ {cacheSize.limit}
+
+ = 90,
+ "text-warning dark:text-warning-dark":
+ percentUsed >= 70 && percentUsed < 90,
+ }
+ )}
+ >
+ {percentUsed > 70 ? (
+
+
+
+ {({ className, style, tokens, getLineProps, getTokenProps }) => {
+ return (
+
+ {copyable && (
+
+ );
+};
diff --git a/src/application/components/CombinedGraphQLErrorsAlertDiscloserPanel.tsx b/src/application/components/CombinedGraphQLErrorsAlertDiscloserPanel.tsx
new file mode 100644
index 000000000..3818c6578
--- /dev/null
+++ b/src/application/components/CombinedGraphQLErrorsAlertDiscloserPanel.tsx
@@ -0,0 +1,46 @@
+import gql from "graphql-tag";
+import { fragmentRegistry } from "../fragmentRegistry";
+import { AlertDisclosure } from "./AlertDisclosure";
+import { ErrorAlertDisclosureItem } from "./ErrorAlertDisclosureItem";
+import type { CombinedGraphQLErrorsAlertDisclosurePanel_error } from "../types/gql";
+import { alertErrorTheme, ObjectViewer } from "./ObjectViewer";
+
+fragmentRegistry.register(gql`
+ fragment CombinedGraphQLErrorsAlertDisclosurePanel_error on SerializedCombinedGraphQLErrors {
+ errors {
+ message
+ path
+ extensions
+ }
+ }
+`);
+
+export function CombinedGraphQLErrorsAlertDisclosurePanel({
+ error,
+}: {
+ error: CombinedGraphQLErrorsAlertDisclosurePanel_error;
+}) {
+ return (
+
+
+ {tokens.map((line, index) => {
+ return (
+
+ {line.map((token, key) => {
+ return (
+
+ );
+ })}
+
+ );
+ })}
+
+
+ );
+ }}
+ -
+ {error.errors.map((graphQLError, idx) => {
+ const { __typename, message, ...errorDetails } = graphQLError;
+
+ return (
+
[GraphQL]: {message}
+ -
+ {error.errors.map((protocolError, idx) => (
+
+
+ {graphRef && (
+
+ )}
+
+
+
+ ) : (
+ <>
+ + {wasTriggeredByIntrospectionFailure + ? "Would you like to use a schema registered in Apollo Studio to populate Explorer? " + : ""} + To continue, log in and authorize to use your Studio account.{" "} + + You must enable popups on your browser to use this feature. + +
+ +
+ setGraphId(e.target.value)}
+ />
+ setGraphVariant(e.target.value)}
+ />
+
+
+ )}
+
+
+
+
+ {release && (
+ <>
+
+ View pull request in GitHub
+
+ )}
+
+
+
+
+
+ {pullRequest.body}
+
+
+ );
+}
+
+function ReleaseCardContents({ version }: { version: string }) {
+ const tag = gte(version, "4.0.0")
+ ? `@apollo/client@${version}`
+ : `v${version}`;
+
+ const currentRelease = useGitHubApi
+ Snapshot
+
+ {release && (
+ <>
+
+ Published {formatDate(parseSnapshotTimestamp(release.timestamp))}
+
+
+
+ @{pullRequest.user.login}
+ {" "}
+ opened{" "}
+
+ #{pullRequest.number}
+ {" "}
+ on {formatDate(Date.parse(pullRequest.created_at))}:
+
+
+ {pullRequest.title}
+
+
+ {pullRequest.merged ? (
+
+ {pullRequest.merge_commit_sha.slice(0, 7)}
+
+
+ ) : pullRequest.state === "closed" ? (
+
+
+
+
+
+
+ View release in GitHub
+
+ {release.body}
+
+ );
+}
+
+interface GitHubRelease {
+ id: number;
+ tag_name: string;
+ name: string;
+ body: string;
+ prerelease: boolean;
+ created_at: string;
+ published_at: string;
+ target_commitish: string;
+}
+
+interface GitHubPullRequest {
+ id: number;
+ number: number;
+ state: "open" | "closed";
+ locked: boolean;
+ title: string;
+ body: string;
+ created_at: string;
+ closed_at: string;
+ merged_at: string;
+ merge_commit_sha: string;
+ html_url: string;
+ merged: boolean;
+ user: {
+ name: string;
+ login: string;
+ avatar_url: string;
+ url: string;
+ html_url: string;
+ };
+}
+
+function formatDate(date: Date | number) {
+ return new Intl.DateTimeFormat(undefined, {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ }).format(date);
+}
+
+function ErrorMessage({ message }: { message: string }) {
+ return (
+
+ Pre-release
+ ) : latestRelease.data.name === release.name ? (
+ Latest
+ ) : (
+ Outdated
+ )}
+
+
+ Published {formatDate(Date.parse(release.published_at))}
+
+
+ {message}
+
+ );
+}
+
+function LoadingState() {
+ return (
+
+
+ );
+}
diff --git a/src/application/components/HighlightMatch.tsx b/src/application/components/HighlightMatch.tsx
new file mode 100644
index 000000000..d32e3a554
--- /dev/null
+++ b/src/application/components/HighlightMatch.tsx
@@ -0,0 +1,25 @@
+interface HighlightMatchProps {
+ searchTerm: string;
+ value: string;
+}
+
+const HighlightMatch = ({ searchTerm, value }: HighlightMatchProps) => {
+ const regex = new RegExp(searchTerm, "i");
+ const match = regex.exec(value);
+
+ if (!match) {
+ return <>{value};
+ }
+
+ return (
+
+ {value.slice(0, match.index)}
+
+ {match[0]}
+
+ {value.slice(match.index + searchTerm.length)}
+
+ );
+};
+
+export default HighlightMatch;
diff --git a/src/application/components/HoverCard/Content.tsx b/src/application/components/HoverCard/Content.tsx
new file mode 100644
index 000000000..e57454c5d
--- /dev/null
+++ b/src/application/components/HoverCard/Content.tsx
@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import * as HoverCard from "@radix-ui/react-hover-card";
+import { twMerge } from "tailwind-merge";
+
+interface ContentProps {
+ className?: string;
+ children?: ReactNode;
+}
+
+export function Content({ className, children }: ContentProps) {
+ return (
+
+ {children}
+
+ );
+};
+
+interface MainProps {
+ className?: string;
+ children?: ReactNode;
+}
+
+const Main = ({ children, className }: MainProps) => (
+
+ {children}
+
+ - {children}
{children}
, + a: ({ node, ...props }) => ( +{children}
+ ),
+ summary: ({ children }) => (
+ {children}
+ ) : (
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/application/components/MemoryInternals.tsx b/src/application/components/MemoryInternals.tsx
new file mode 100644
index 000000000..c3616573a
--- /dev/null
+++ b/src/application/components/MemoryInternals.tsx
@@ -0,0 +1,295 @@
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql, NetworkStatus } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
+import IconOutlink from "@apollo/icons/default/IconOutlink.svg";
+import IconOperations from "@apollo/icons/default/IconOperations.svg";
+import IconObserve from "@apollo/icons/default/IconObserve.svg";
+
+import { FullWidthLayout } from "./Layouts/FullWidthLayout";
+import { PageSpinner } from "./PageSpinner";
+import type {
+ MemoryInternalsQuery,
+ MemoryInternalsQueryVariables,
+} from "../types/gql";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { ButtonGroup } from "./ButtonGroup";
+import { Button } from "./Button";
+import { Tooltip } from "./Tooltip";
+import { CacheSize } from "./CacheSize";
+import { lt } from "semver";
+import { ExternalLink } from "./ExternalLink";
+import { PageError } from "./PageError";
+import { isIgnoredError } from "../utilities/ignoredErrors";
+import { useIsExtensionInvalidated } from "../machines/devtoolsMachine";
+import { ObjectViewer } from "./ObjectViewer";
+
+interface MemoryInternalsProps {
+ clientId: string | undefined;
+}
+
+const MEMORY_INTERNALS_QUERY: TypedDocumentNode<
+ MemoryInternalsQuery,
+ MemoryInternalsQueryVariables
+> = gql`
+ query MemoryInternalsQuery($clientId: ID!) {
+ client(id: $clientId) {
+ id
+ version
+ memoryInternals {
+ raw
+ caches {
+ print {
+ ...CacheSizeFields
+ }
+ ... on ClientV3MemoryInternalsCaches {
+ parser {
+ ...CacheSizeFields
+ }
+ }
+ canonicalStringify {
+ ...CacheSizeFields
+ }
+ links {
+ ... on PersistedQueryLinkCacheSizes {
+ persistedQueryHashes {
+ ...CacheSizeFields
+ }
+ }
+ ... on RemoveTypenameFromVariablesLinkCacheSizes {
+ getVariableDefinitions {
+ ...CacheSizeFields
+ }
+ }
+ }
+ queryManager {
+ getDocumentInfo {
+ ...CacheSizeFields
+ }
+ documentTransforms {
+ cache {
+ ...CacheSizeFields
+ }
+ }
+ }
+ fragmentRegistry {
+ lookup {
+ ...CacheSizeFields
+ }
+ findFragmentSpreads {
+ ...CacheSizeFields
+ }
+ transform {
+ ...CacheSizeFields
+ }
+ }
+ cache {
+ fragmentQueryDocuments {
+ ...CacheSizeFields
+ }
+ }
+ addTypenameDocumentTransform {
+ cache {
+ ...CacheSizeFields
+ }
+ }
+ inMemoryCache {
+ maybeBroadcastWatch {
+ ...CacheSizeFields
+ }
+ executeSelectionSet {
+ ...CacheSizeFields
+ }
+ executeSubSelectedArray {
+ ...CacheSizeFields
+ }
+ }
+ }
+ }
+ }
+ }
+
+ fragment CacheSizeFields on CacheSize {
+ key
+ size
+ limit
+ }
+`;
+
+export function MemoryInternals({ clientId }: MemoryInternalsProps) {
+ const [selectedView, setSelectedView] = useState<"raw" | "chart">("chart");
+ const isExtensionInvalidated = useIsExtensionInvalidated();
+
+ const { data, networkStatus, error } = useQuery(MEMORY_INTERNALS_QUERY, {
+ variables: { clientId: clientId as string },
+ skip: !clientId,
+ pollInterval: isExtensionInvalidated ? 0 : 500,
+ fetchPolicy: isExtensionInvalidated ? "cache-only" : "cache-first",
+ });
+
+ if (error && !isIgnoredError(error)) {
+ throw error;
+ }
+
+ const memoryInternals = data?.client?.memoryInternals;
+ const caches = memoryInternals?.caches;
+ const version = data?.client?.version;
+
+ if (networkStatus === NetworkStatus.loading) {
+ return (
+
+
+
+
+
+
+ }
+ size="md"
+ variant={selectedView === "chart" ? "primary" : "secondary"}
+ onClick={() => setSelectedView("chart")}
+ />
+
+
+ }
+ size="md"
+ variant={selectedView === "raw" ? "primary" : "secondary"}
+ onClick={() => setSelectedView("raw")}
+ />
+
+
+
+ + Memoization cache +
+
+ Learn how Apollo Client manages memory and how to set custom
+ memoization cache size limits in the{" "}
+
+ docs
+
+
+ ) : selectedView === "raw" ? (
+ + Memoization cache +
+
+ Learn how Apollo Client manages memory and how to set custom cache
+ size limits in the{" "}
+
+ {children}
+
+ );
+}
diff --git a/src/application/components/Modal/Description.tsx b/src/application/components/Modal/Description.tsx
new file mode 100644
index 000000000..b244de4d5
--- /dev/null
+++ b/src/application/components/Modal/Description.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+interface DescriptionProps {
+ className?: string;
+ children?: ReactNode;
+}
+
+export function Description({ className, children }: DescriptionProps) {
+ return (
+ + {children} +
+ ); +} diff --git a/src/application/components/Modal/Footer.tsx b/src/application/components/Modal/Footer.tsx new file mode 100644 index 000000000..550640406 --- /dev/null +++ b/src/application/components/Modal/Footer.tsx @@ -0,0 +1,20 @@ +import type { ReactNode } from "react"; +import { clsx } from "clsx"; + +interface FooterProps { + className?: string; + children: ReactNode; +} + +export function Footer({ className, children }: FooterProps) { + return ( + + ); +} diff --git a/src/application/components/Modal/Header.tsx b/src/application/components/Modal/Header.tsx new file mode 100644 index 000000000..988ca5096 --- /dev/null +++ b/src/application/components/Modal/Header.tsx @@ -0,0 +1,15 @@ +import type { ReactNode } from "react"; +import { clsx } from "clsx"; + +interface HeaderProps { + className?: string; + children: ReactNode; +} + +export function Header({ className, children }: HeaderProps) { + return ( +-
+ {filteredMutations.map(({ name, id, loading, error }) => {
+ return (
+
+
+ {searchTerm && name ? (
+
+
+
+ {" "}
+ ,
+
+ );
+ },
+ (
+ parentProps,
+ props: Partial
+ {items.map((item, idx) => {
+ return holeSizes?.has(idx) ? (
+
+ ,
+
+ ) : (
+
+ (props)}>
+ 0 && collapsible}
+ collapsed={collapsed}
+ onClick={toggle}
+ >
+ {children}
+ {" "}
+
+ );
+}
diff --git a/src/application/components/ObjectViewer/ArrayValueNode.tsx b/src/application/components/ObjectViewer/ArrayValueNode.tsx
new file mode 100644
index 000000000..0c08db742
--- /dev/null
+++ b/src/application/components/ObjectViewer/ArrayValueNode.tsx
@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+import type { ComponentPropsWithoutRef } from "react";
+import { CollapsedArray } from "./CollapsedArray";
+import { Punctuation } from "./Punctuation";
+import { ObjectSize } from "./ObjectSize";
+import { AnyValue } from "./AnyValue";
+import { customRenderable } from "./CustomRenderable";
+import { EmptyArray } from "./EmptyArray";
+import type { RenderableTypeProps } from "./ObjectViewer";
+import { useDisplayObjectSize } from "./useDisplayObjectSize";
+
+interface ArrayValueNodeProps
+ extends ComponentPropsWithoutRef<"div">,
+ RenderableTypeProps