Merge pull request #60 from scale8/fix-preview-issues

Avoid too many re-renders, fix dropdown

Author: a-barzanti

ui/src/components/molecules/PreviewFrameRuleHeader.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, FC, SetStateAction } from 'react';
-import { Box, MenuItem, Select, SelectChangeEvent } from '@mui/material';
+import { Box, FormControl, MenuItem, Select, SelectChangeEvent } from '@mui/material';
 import AppliedIcon from '../atoms/Icons/AppliedIcon';
 import { timestampDisplay } from '../../utils/DateTimeUtils';
 import { RuleStatus } from '../../types/PreviewFrameTypes';
@@ -52,20 +52,21 @@ const PreviewFrameRuleHeader: FC<PreviewFrameRuleHeaderProps> = (
         return (
             <Box>
                 <Box display="flex" alignItems="center" height="56px" py={1}>
-                    <Select
-                        sx={{ width: '100%' }}
-                        value={ruleIndex.toString()}
-                        onChange={(event: SelectChangeEvent) =>
-                            setRuleIndex(parseInt(event.target.value as string))
-                        }
-                        name="rule-run"
-                    >
-                        {ruleStatuses.map((value, key) => (
-                            <MenuItem key={key} value={value.index.toString()}>
-                                <PreviewFrameRuleHeaderEntry {...props} ruleStatus={value} />
-                            </MenuItem>
-                        ))}
-                    </Select>
+                    <FormControl variant="standard" sx={{ width: '100%', marginBottom: '10px' }}>
+                        <Select
+                            value={ruleIndex.toString()}
+                            onChange={(event: SelectChangeEvent) =>
+                                setRuleIndex(parseInt(event.target.value as string))
+                            }
+                            name="rule-run"
+                        >
+                            {ruleStatuses.map((value, key) => (
+                                <MenuItem key={key} value={value.index.toString()}>
+                                    <PreviewFrameRuleHeaderEntry {...props} ruleStatus={value} />
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
                 </Box>
             </Box>
         );

ui/src/components/organisms/EnvironmentInstallInstructions.tsx

@@ -27,21 +27,25 @@ const EnvironmentInstallInstructions: FC<InstallInstructionsProps> = (
     const domain =
         props.mode === Mode.COMMERCIAL
             ? `https://${props.installDomain}`
-            : `${window.location.protocol}//${window.location.host}`;
+            : `${window.location.protocol}//${window.location.hostname}`;
 
     const path = props.mode === Mode.COMMERCIAL ? undefined : `/edge/${props.environmentId}`;
 
-    const determinePort = () => {
-        if (props.mode === Mode.COMMERCIAL) {
-            if (getNodeEnv() === 'development') {
-                return '8443';
-            }
+    const getPort = (): number | undefined => {
+        if (window.location.port === '80' || window.location.port === '443') {
+            return undefined;
+        } else if (props.mode === Mode.COMMERCIAL && getNodeEnv() === 'development') {
+            return 8443;
+        } else if (getNodeEnv() === 'development') {
+            return 6080;
+        } else if (props.mode === Mode.SELF_HOSTED && getNodeEnv() === 'production') {
+            return +window.location.port;
+        } else {
             return undefined;
         }
-        return undefined;
     };
 
-    const port = determinePort();
+    const port = getPort();
 
     const environmentInstallSrc = `${domain}${port === undefined ? '' : `:${port}`}${path ?? ''}`;
 

ui/src/components/organisms/PreviewFrame/PreviewFrameDataLayers.tsx

@@ -4,6 +4,7 @@ import { TabularData } from '../../molecules/TabularData';
 import { kebabToTitleCase } from '../../../utils/TextUtils';
 import { previewFrameContext } from '../../../context/PreviewFrameContext';
 import { RuleVarStatus } from '../../../types/PreviewFrameTypes';
+import { Segment } from '@mui/icons-material';
 
 const PreviewFrameDataLayers: FC = () => {
     const { revisionStatus, previewFrameData } = useContext(previewFrameContext);
@@ -57,7 +58,7 @@ const PreviewFrameDataLayers: FC = () => {
             />
             {Object.entries(ruleVarsByRuleId).map(([ruleId, ruleVars]) => {
                 return (
-                    <>
+                    <Segment key={ruleId}>
                         <Box mt={3} />
                         <TabularData
                             title={ruleTitlesMap.get(ruleId)}
@@ -66,7 +67,7 @@ const PreviewFrameDataLayers: FC = () => {
                                 _.values,
                             ])}
                         />
-                    </>
+                    </Segment>
                 );
             })}
             <Box mt={3} />

ui/src/components/organisms/Sections/RulePageSection.tsx

@@ -51,7 +51,9 @@ const RulePageSection: FC<RuleSectionProps> = (props: RuleSectionProps) => {
             readonly={revisionLocked}
             key={rule.id}
             id={rule.id}
-            title={rule.name}
+            title={`${rule.name} (${
+                rule.min_repeat_interval > -1 ? 'Repeatable' : 'Non-repeatable'
+            })`}
             actions={[
                 ...([
                     {

ui/src/gql/generated/TagContentPageData.ts

@@ -300,6 +300,11 @@ export interface TagContentPageData_getTag_rule_groups_rules {
    * The name of the `Rule`
    */
   name: string;
+  /**
+   * The minimum refresh interval. -1 = the rule can't repeat. 0 = the rule can
+   * repeat. > 0 the rule must wait this many milliseconds before being allowed to repeat again.
+   */
+  min_repeat_interval: number;
   /**
    * A `Trigger` attached to the `Rule`.
    */

ui/src/gql/queries/PageTagContentQuery.ts

@@ -15,6 +15,7 @@ const PageTagContentQuery = gql`
                 rules {
                     id
                     name
+                    min_repeat_interval
                     trigger {
                         id
                         name

ui/src/pages/debug-frame.tsx

@@ -8,7 +8,7 @@ import { frameEventFromMessage, messageFromFrameEvent } from '../utils/FrameEven
 import PreviewLayout from '../components/templates/PreviewLayout';
 
 const DebugFrame: FC = () => {
-    const [revisionStatus, setRevisionStatus] = useState<RevisionStatus | undefined>(undefined);
+    const [revisionStatusString, setRevisionStatusString] = useState<string | undefined>(undefined);
 
     const [currentTagCode, setCurrentTagCode] = useState<TagCode | undefined>(undefined);
 
@@ -18,6 +18,8 @@ const DebugFrame: FC = () => {
 
     const [revisionTab, setRevisionTab] = useState(0);
 
+    const revisionStatus = revisionStatusString ? JSON.parse(revisionStatusString) : undefined;
+
     const [loadPreview, { data, loading, error }] = useLazyQuery<PreviewFrameData>(
         PreviewFrameQuery,
         {
@@ -35,8 +37,8 @@ const DebugFrame: FC = () => {
             if (frameEvent !== null) {
                 if (frameEvent.event === 'statusUpdate') {
                     const receivedRevisionStatus = frameEvent.payload as RevisionStatus;
-                    setRevisionStatus(receivedRevisionStatus);
-
+                    const receivedRevisionStatusString = JSON.stringify(receivedRevisionStatus);
+                    setRevisionStatusString(receivedRevisionStatusString);
                     if (receivedRevisionStatus.refreshTarget) {
                         loadPreview();
                     }

ui/src/types/TagRulesTypes.ts

@@ -69,6 +69,7 @@ export type Rule = {
     id: string;
     name: string;
     trigger: Trigger;
+    min_repeat_interval: number;
     action_groups_distributions: ActionGroupDistribution[];
     is_active: boolean;
 };