feat(control-utils): add shared controls + dependencies, convert to t…

…ypescript (#459)

packages/superset-ui-control-utils/package.json

@@ -26,6 +26,7 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@superset-ui/color": "^0.13.3",
     "@superset-ui/translation": "^0.13",
     "@superset-ui/validator": "^0.13",
     "react": "^16.13.1"

packages/superset-ui-control-utils/src/ColumnOption.tsx

@@ -0,0 +1,73 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+/* eslint-disable camelcase */
+import React from 'react';
+
+import { ColumnTypeLabel } from './ColumnTypeLabel';
+import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
+
+export type Column = {
+  column_name: string;
+  groupby?: string;
+  verbose_name?: string;
+  description?: string;
+  expression?: string;
+  is_dttm?: boolean;
+  type?: string;
+  filterable?: boolean;
+};
+
+export type Props = {
+  column: Column;
+  showType?: boolean;
+};
+
+export function ColumnOption({ column, showType = false }: Props) {
+  const hasExpression = column.expression && column.expression !== column.column_name;
+
+  let columnType = column.type;
+  if (column.is_dttm) {
+    columnType = 'time';
+  } else if (hasExpression) {
+    columnType = 'expression';
+  }
+
+  return (
+    <span>
+      {showType && columnType && <ColumnTypeLabel type={columnType} />}
+      <span className="m-r-5 option-label">{column.verbose_name || column.column_name}</span>
+      {column.description && (
+        <InfoTooltipWithTrigger
+          className="m-r-5 text-muted"
+          icon="info"
+          tooltip={column.description}
+          label={`descr-${column.column_name}`}
+        />
+      )}
+      {hasExpression && (
+        <InfoTooltipWithTrigger
+          className="m-r-5 text-muted"
+          icon="question-circle-o"
+          tooltip={column.expression}
+          label={`expr-${column.column_name}`}
+        />
+      )}
+    </span>
+  );
+}

packages/superset-ui-control-utils/src/ColumnTypeLabel.tsx

@@ -0,0 +1,53 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+
+export type Props = {
+  type: string;
+};
+
+export function ColumnTypeLabel({ type }: Props) {
+  let stringIcon = '';
+  if (typeof type !== 'string') {
+    stringIcon = '?';
+  } else if (type === '' || type === 'expression') {
+    stringIcon = 'ƒ';
+  } else if (type === 'aggregate') {
+    stringIcon = 'AGG';
+  } else if (type.match(/.*char.*/i) || type.match(/string.*/i) || type.match(/.*text.*/i)) {
+    stringIcon = 'ABC';
+  } else if (type.match(/.*int.*/i) || type === 'LONG' || type === 'DOUBLE' || type === 'FLOAT') {
+    stringIcon = '#';
+  } else if (type.match(/.*bool.*/i)) {
+    stringIcon = 'T/F';
+  } else if (type.match(/.*time.*/i)) {
+    stringIcon = 'time';
+  } else if (type.match(/unknown/i)) {
+    stringIcon = '?';
+  }
+
+  const typeIcon =
+    stringIcon === 'time' ? (
+      <i className="fa fa-clock-o type-label" />
+    ) : (
+      <div className="type-label">{stringIcon}</div>
+    );
+
+  return <span>{typeIcon}</span>;
+}

packages/superset-ui-control-utils/src/constants.ts

@@ -0,0 +1,29 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { t } from '@superset-ui/translation';
+
+// eslint-disable-next-line import/prefer-default-export
+export const TIME_FILTER_LABELS = {
+  time_range: t('Time Range'),
+  granularity_sqla: t('Time Column'),
+  time_grain_sqla: t('Time Grain'),
+  druid_time_origin: t('Origin'),
+  granularity: t('Time Granularity'),
+};

packages/superset-ui-control-utils/src/index.ts

@@ -1,6 +1,18 @@
+import * as constantsModule from './constants';
+import * as sharedControlsModule from './shared-controls';
 import * as sectionModules from './sections';
 
+// `export * as x from 'y'` doesn't work for some reason
+export const constants = constantsModule;
+export const internalSharedControls = sharedControlsModule;
 export const sections = sectionModules;
 export { D3_FORMAT_DOCS, D3_FORMAT_OPTIONS, D3_TIME_FORMAT_OPTIONS } from './D3Formatting';
 export { formatSelectOptions, formatSelectOptionsForRange } from './selectOptions';
 export { default as InfoTooltipWithTrigger } from './InfoTooltipWithTrigger';
+export {
+  ColumnOption,
+  Props as ColumnOptionProps,
+  Column as ColumnOptionColumn,
+} from './ColumnOption';
+export { ColumnTypeLabel, Props as ColumnTypeLabelProps } from './ColumnTypeLabel';
+export { mainMetric, Metric } from './mainMetric';

packages/superset-ui-control-utils/src/mainMetric.ts

@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+/* eslint-disable camelcase */
+
+export type Metric = {
+  metric_name: string;
+};
+
+export function mainMetric(savedMetrics?: Metric[] | null) {
+  // Using 'count' as default metric if it exists, otherwise using whatever one shows up first
+  let metric;
+  if (savedMetrics && savedMetrics.length > 0) {
+    savedMetrics.forEach(m => {
+      if (m.metric_name === 'count') {
+        metric = 'count';
+      }
+    });
+    if (!metric) {
+      metric = savedMetrics[0].metric_name;
+    }
+  }
+  return metric;
+}