feat(edge): associate edge env to meta fields [EE-3209] (#8551)

* refactor(edge/groups): load edge groups in selector

fix(edge/stacks): remove double groups title

* feat(edge): supply meta fields to edge script [EE-5043]

* feat(edge): auto assign aeec envs to groups and tags [EE-5043]

fix [EE-5043]

fix(envs): fix global key test

* fix(edge/groups): save group type

* refactor(edge/devices): move loading of devices to table

* refactor(tags): select paramter for query

* feat(edge/devices): show meta fields

* refactor(home): simplify filter

* feat(edge/devices): filter by meta fields

* refactor(edge/devices): break filter and loading hook

app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx

@@ -3,21 +3,78 @@ import _ from 'lodash';
 import { EdgeGroup } from '@/react/edge/edge-groups/types';
 
 import { Select } from '@@/form-components/ReactSelect';
+import { FormSection } from '@@/form-components/FormSection';
+import { FormError } from '@@/form-components/FormError';
+import { Link } from '@@/Link';
+import { FormControl } from '@@/form-components/FormControl';
+
+import { useEdgeGroups } from '../../edge-groups/queries/useEdgeGroups';
 
 type SingleValue = EdgeGroup['Id'];
 
 interface Props {
-  items: EdgeGroup[];
   value: SingleValue[];
   onChange: (value: SingleValue[]) => void;
+  error?: string | string[];
+  horizontal?: boolean;
+  isGroupVisible?(group: EdgeGroup): boolean;
 }
 
-export function EdgeGroupsSelector({ items, value, onChange }: Props) {
+export function EdgeGroupsSelector({
+  value,
+  onChange,
+  error,
+  horizontal,
+  isGroupVisible = () => true,
+}: Props) {
+  const selector = (
+    <InnerSelector
+      value={value}
+      onChange={onChange}
+      isGroupVisible={isGroupVisible}
+    />
+  );
+
+  return horizontal ? (
+    <FormControl errors={error} label="Edge Groups">
+      {selector}
+    </FormControl>
+  ) : (
+    <FormSection title="Edge Groups">
+      <div className="form-group">
+        <div className="col-sm-12">{selector} </div>
+        {error && (
+          <div className="col-sm-12">
+            <FormError>{error}</FormError>
+          </div>
+        )}
+      </div>
+    </FormSection>
+  );
+}
+
+function InnerSelector({
+  value,
+  onChange,
+  isGroupVisible,
+}: {
+  isGroupVisible(group: EdgeGroup): boolean;
+  value: SingleValue[];
+  onChange: (value: SingleValue[]) => void;
+}) {
+  const edgeGroupsQuery = useEdgeGroups();
+
+  if (!edgeGroupsQuery.data) {
+    return null;
+  }
+
+  const items = edgeGroupsQuery.data.filter(isGroupVisible);
+
   const valueGroups = _.compact(
     value.map((id) => items.find((item) => item.Id === id))
   );
 
-  return (
+  return items.length ? (
     <Select
       aria-label="Edge groups"
       options={items}
@@ -31,5 +88,10 @@ export function EdgeGroupsSelector({ items, value, onChange }: Props) {
       placeholder="Select one or multiple group(s)"
       closeMenuOnSelect={false}
     />
+  ) : (
+    <div className="small text-muted">
+      No Edge groups are available. Head over to the{' '}
+      <Link to="edge.groups">Edge groups view</Link> to create one.
+    </div>
   );
 }