feat(schemaBrowser): add read-only property (#6130)

* feat: add readOnly property to FieldSelector

* feat: add readOnly property to TagSelector

* chore: derive readOnly from `resource.data.language`

* chore: move down readOnly check to selector level

Author: appletreeisyellow

src/dataExplorer/components/FieldSelector.tsx

@@ -20,6 +20,7 @@ import {PersistanceContext} from 'src/dataExplorer/context/persistance'
 
 // Types
 import {RemoteDataState} from 'src/types'
+import {LanguageType} from 'src/dataExplorer/components/resources'
 
 // Syles
 import './Schema.scss'
@@ -39,7 +40,7 @@ conceptually similar to a non-indexed column and value.`
 const FieldSelector: FC = () => {
   const {fields, loading} = useContext(FieldsContext)
   const {selectField, searchTerm} = useContext(FluxQueryBuilderContext)
-  const {selection} = useContext(PersistanceContext)
+  const {selection, resource} = useContext(PersistanceContext)
   const [fieldsToShow, setFieldsToShow] = useState([])
 
   const handleSelectField = (field: string) => {
@@ -83,7 +84,18 @@ const FieldSelector: FC = () => {
       </div>
     )
   } else if (loading === RemoteDataState.Done && fieldsToShow.length) {
-    if (isFlagEnabled('schemaComposition')) {
+    if (resource?.data?.language === LanguageType.SQL) {
+      // readOnly
+      list = fieldsToShow.map(field => (
+        <dd
+          key={field}
+          className="field-selector--list-item--readonly"
+          data-testid="field-selector--list-item--readonly"
+        >
+          <code>{field}</code>
+        </dd>
+      ))
+    } else if (isFlagEnabled('schemaComposition')) {
       list = (
         <SelectorList
           items={fieldsToShow}

src/dataExplorer/components/Schema.scss

@@ -104,6 +104,28 @@
   text-overflow: ellipsis;
 }
 
+.field-selector--list-item--readonly,
+.tag-selector-value--list-item--readonly {
+  padding: $cf-space-2xs;
+  height: $cf-form-xs-height;
+  line-height: $cf-form-xs-height;
+  font-family: $cf-code-font;
+  font-weight: $cf-font-weight--regular;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  > code {
+    font-size: $cf-form-sm-font;
+    border-radius: $cf-radius-sm;
+    padding: 0 $cf-space-2xs;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: $cf-grey-85;
+  }
+}
+
 .field-selector--list-item--selectable,
 .tag-selector-value--list-item--selectable {
   padding: $cf-space-2xs;

src/dataExplorer/components/TagSelector.tsx

@@ -9,9 +9,11 @@ import SelectorList from 'src/timeMachine/components/SelectorList'
 // Contexts
 import {FluxQueryBuilderContext} from 'src/dataExplorer/context/fluxQueryBuilder'
 import {TagsContext} from 'src/dataExplorer/context/tags'
+import {PersistanceContext} from 'src/dataExplorer/context/persistance'
 
 // Types
 import {RemoteDataState} from 'src/types'
+import {LanguageType} from 'src/dataExplorer/components/resources'
 
 // Utils
 import {
@@ -25,20 +27,21 @@ const TAG_KEYS_TOOLTIP = `Tags and Tag Values are indexed key values \
 pairs within a measurement. For SQL users, this is conceptually \
 similar to an indexed column and value.`
 
-interface Prop {
+interface TagValuesProps {
   loading: RemoteDataState
   tagKey: string
   tagValues: string[]
 }
 
-const TagValues: FC<Prop> = ({loading, tagKey, tagValues}) => {
+const TagValues: FC<TagValuesProps> = ({loading, tagKey, tagValues}) => {
   const {
     selectedBucket,
     selectedMeasurement,
     selectedTagValues,
     selectTagValue,
     searchTerm,
   } = useContext(FluxQueryBuilderContext)
+  const {resource} = useContext(PersistanceContext)
   const {getTagValues} = useContext(TagsContext)
   const [valuesToShow, setValuesToShow] = useState([])
 
@@ -82,7 +85,18 @@ const TagValues: FC<Prop> = ({loading, tagKey, tagValues}) => {
       </div>
     )
   } else if (loading === RemoteDataState.Done && valuesToShow.length) {
-    if (isFlagEnabled('schemaComposition')) {
+    if (resource?.data?.language === LanguageType.SQL) {
+      // readOnly
+      list = valuesToShow.map(value => (
+        <dd
+          key={value}
+          className="tag-selector-value--list-item--readonly"
+          data-testid="tag-selector-value--list-item--readonly"
+        >
+          <code>{value}</code>
+        </dd>
+      ))
+    } else if (isFlagEnabled('schemaComposition')) {
       list = (
         <SelectorList
           items={valuesToShow}

src/dataExplorer/components/resources/index.ts

@@ -36,3 +36,8 @@ export const RESOURCES: Resources = {}
     }
   })
 })
+
+export enum LanguageType {
+  FLUX = 'flux',
+  SQL = 'sql',
+}