feat(typescript): Convert querBuilder to TypeScript

Author: lynnagara

package.json

@@ -21,6 +21,7 @@
     "@sentry/integrations": "^5.4.2",
     "@sentry/typescript": "^5.3.0",
     "@types/lodash": "^4.14.134",
+    "@types/moment-timezone": "^0.5.12",
     "@types/react": "^16.7.0",
     "@types/react-dom": "^16.7.0",
     "algoliasearch": "^3.32.0",

src/sentry/static/sentry/app/views/organizationDiscover/data.tsx

@@ -26,10 +26,9 @@ export const PROMOTED_TAGS = [
 ];
 
 // All tags are assumed to be strings, except the following
-export const SPECIAL_TAGS = {
-  os_rooted: TYPES.BOOLEAN,
+export const SPECIAL_TAGS: any = {
+  os_rooted: TYPES.DATETIME,
 };
-
 // Hide the following tags if they are returned from Snuba since these are
 // already mapped to user and release attributes
 export const HIDDEN_TAGS = ['sentry:user', 'sentry:release'];

src/sentry/static/sentry/app/views/organizationDiscover/queryBuilder.jsx renamed to src/sentry/static/sentry/app/views/organizationDiscover/queryBuilder.tsx

@@ -12,6 +12,14 @@ import ConfigStore from 'app/stores/configStore';
 import MissingProjectWarningModal from './missingProjectWarningModal';
 import {COLUMNS, PROMOTED_TAGS, SPECIAL_TAGS, HIDDEN_TAGS} from './data';
 import {isValidAggregation} from './aggregations/utils';
+import {
+  AggregationData,
+  Column,
+  Query,
+  Project,
+  Organization,
+  SnubaResult,
+} from './types';
 
 const API_LIMIT = 10000;
 
@@ -24,7 +32,7 @@ const DEFAULTS = {
   limit: 1000,
 };
 
-function applyDefaults(query) {
+function applyDefaults(query: any) {
   Object.entries(DEFAULTS).forEach(([key, value]) => {
     if (!(key in query)) {
       query[key] = value;
@@ -38,7 +46,7 @@ function applyDefaults(query) {
  * It applies sensible defaults if query parameters are not provided on
  * initialization.
  */
-export default function createQueryBuilder(initial = {}, organization) {
+export default function createQueryBuilder(initial = {}, organization: Organization) {
   const api = new Client();
   let query = applyDefaults(initial);
 
@@ -58,7 +66,7 @@ export default function createQueryBuilder(initial = {}, organization) {
   );
 
   const columns = COLUMNS.map(col => ({...col, isTag: false}));
-  let tags = [];
+  let tags: Column[] = [];
 
   return {
     getInternal,
@@ -81,6 +89,10 @@ export default function createQueryBuilder(initial = {}, organization) {
    * @returns {Promise<Void>}
    */
   function load() {
+    type TagData = {
+      tags_key: string;
+    };
+
     return fetch({
       projects: projectsToFetchTags,
       fields: ['tags_key'],
@@ -89,16 +101,16 @@ export default function createQueryBuilder(initial = {}, organization) {
       range: '90d',
       turbo: true,
     })
-      .then(res => {
+      .then((res: SnubaResult) => {
         tags = res.data
-          .filter(tag => !HIDDEN_TAGS.includes(tag.tags_key))
-          .map(tag => {
-            const type = SPECIAL_TAGS[tags.tags_key] || 'string';
+          .filter((tag: TagData) => !HIDDEN_TAGS.includes(tag.tags_key))
+          .map((tag: TagData) => {
+            const type = SPECIAL_TAGS[tag.tags_key] || 'string';
             return {name: tag.tags_key, type, isTag: true};
           });
       })
-      .catch(err => {
-        tags = PROMOTED_TAGS.map(tag => {
+      .catch(() => {
+        tags = PROMOTED_TAGS.map((tag: string) => {
           const type = SPECIAL_TAGS[tag] || 'string';
           return {name: tag, type, isTag: true};
         });
@@ -160,11 +172,11 @@ export default function createQueryBuilder(initial = {}, organization) {
    * @param {*} value Value to update field to
    * @returns {Void}
    */
-  function updateField(field, value) {
+  function updateField(field: string, value: any) {
     query[field] = value;
 
     // Ignore non valid aggregations (e.g. user halfway inputting data)
-    const validAggregations = query.aggregations.filter(agg =>
+    const validAggregations = query.aggregations.filter((agg: AggregationData) =>
       isValidAggregation(agg, getColumns())
     );
 
@@ -173,7 +185,7 @@ export default function createQueryBuilder(initial = {}, organization) {
       getColumns().find(f => f.name === orderbyField) !== undefined;
     const hasOrderFieldInSelectedFields = query.fields.includes(orderbyField);
     const hasOrderFieldInAggregations = query.aggregations.some(
-      agg => orderbyField === agg[2]
+      (agg: AggregationData) => orderbyField === agg[2]
     );
 
     const hasInvalidOrderbyField = validAggregations.length
@@ -224,12 +236,12 @@ export default function createQueryBuilder(initial = {}, organization) {
     }
 
     return api
-      .requestPromise(endpoint, {includeAllArgs: true, method: 'POST', data})
+      .requestPromise(endpoint, {includeAllArgs: true, method: 'POST', data} as any)
       .then(([responseData, _, utils]) => {
         responseData.pageLinks = utils.getResponseHeader('Link');
         return responseData;
       })
-      .catch(err => {
+      .catch(() => {
         throw new Error(t('An error occurred'));
       });
   }
@@ -261,7 +273,7 @@ export default function createQueryBuilder(initial = {}, organization) {
       return Promise.reject(new Error('Start date cannot be after end date'));
     }
 
-    return api.requestPromise(endpoint, {method: 'POST', data}).catch(() => {
+    return api.requestPromise(endpoint, {method: 'POST', data} as any).catch(() => {
       throw new Error(t('Error with query'));
     });
   }
@@ -282,7 +294,7 @@ export default function createQueryBuilder(initial = {}, organization) {
    * @param {String} Type to fetch - currently either byDay or base
    * @returns {Object} Modified query to be run for that type
    */
-  function getQueryByType(originalQuery, type) {
+  function getQueryByType(originalQuery: Query, type: string) {
     if (type === 'byDayQuery') {
       return {
         ...originalQuery,
@@ -296,7 +308,9 @@ export default function createQueryBuilder(initial = {}, organization) {
     // If id or issue.id is present in query fields, always fetch the project.id
     // so we can generate links
     if (type === 'baseQuery') {
-      return originalQuery.fields.some(field => field === 'id' || field === 'issue.id')
+      return (originalQuery.fields || []).some(
+        field => field === 'id' || field === 'issue.id'
+      )
         ? {
             ...originalQuery,
             fields: uniq([...originalQuery.fields, 'project.id']),
@@ -323,13 +337,13 @@ export default function createQueryBuilder(initial = {}, organization) {
    * @param {Object} [q] optional query to reset to
    * @returns {Void}
    */
-  function reset(q = {}) {
+  function reset(q: Query = {}) {
     const [validProjects, invalidProjects] = partition(q.projects || [], project =>
       defaultProjectIds.includes(project)
     );
 
     if (invalidProjects.length) {
-      openModal(deps => (
+      openModal((deps: any) => (
         <MissingProjectWarningModal
           organization={organization}
           validProjects={validProjects}
@@ -345,6 +359,6 @@ export default function createQueryBuilder(initial = {}, organization) {
   }
 }
 
-function getProjectIds(projects) {
+function getProjectIds(projects: Project[]) {
   return projects.map(project => parseInt(project.id, 10));
 }

src/sentry/static/sentry/app/views/organizationDiscover/types.tsx

@@ -10,6 +10,15 @@ export type ConditionData = [
   string | number | boolean | null
 ];
 
+export type Query = {
+  projects?: number[];
+  fields?: string[];
+  aggregations?: AggregationData[];
+  conditions?: ConditionData[];
+  orderby?: string;
+  limit?: number;
+};
+
 export type SnubaResult = {
   data: any[];
   meta: any;
@@ -35,3 +44,14 @@ export type DiscoverBaseProps = {
   columns: Column[];
   disabled: boolean;
 };
+
+export type Organization = {
+  id: string;
+  slug: string;
+  projects: any[];
+  access: string[];
+};
+
+export type Project = {
+  id: string;
+};

yarn.lock

@@ -1690,6 +1690,13 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.134.tgz#9032b440122db3a2a56200e91191996161dde5b9"
   integrity sha512-2/O0khFUCFeDlbi7sZ7ZFRCcT812fAeOLm7Ev4KbwASkZ575TDrDcY7YyaoHdTOzKcNbfiwLYZqPmoC4wadrsw==
 
+"@types/moment-timezone@^0.5.12":
+  version "0.5.12"
+  resolved "https://registry.yarnpkg.com/@types/moment-timezone/-/moment-timezone-0.5.12.tgz#0fb680c03db194fe8ff4551eaeb1eec8d3d80e9f"
+  integrity sha512-hnHH2+Efg2vExr/dSz+IX860nSiyk9Sk4pJF2EmS11lRpMcNXeB4KBW5xcgw2QPsb9amTXdsVNEe5IoJXiT0uw==
+  dependencies:
+    moment ">=2.14.0"
+
 "@types/node@*", "@types/node@^10.0.5":
   version "10.14.7"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.14.7.tgz#1854f0a9aa8d2cd6818d607b3d091346c6730362"
@@ -9091,6 +9098,11 @@ [email protected], "moment@>= 2.9.0":
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.23.0.tgz#759ea491ac97d54bac5ad776996e2a58cc1bc225"
   integrity sha512-3IE39bHVqFbWWaPOMHZF98Q9c3LDKGTmypMiTM2QygGXXElkFWIH7GxfmlwmY2vwa+wmNsoYZmG2iusf1ZjJoA==
 
+moment@>=2.14.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 moo@^0.4.3:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/moo/-/moo-0.4.3.tgz#3f847a26f31cf625a956a87f2b10fbc013bfd10e"