cleanup several files props

contentful · Oct 11, 2024 · d85fa43 · d85fa43
1 parent aef29f9
commit d85fa43
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 99 deletions.
diff --git a/apps/optimizely/src/AppPage/ContentTypes.jsx b/apps/optimizely/src/AppPage/ContentTypes.jsx
@@ -179,7 +179,6 @@ export default function ContentTypes({
                   <Select
                     id="content-types"
                     name="content-types"
-                    labelText="Content Type"
                     isDisabled={isEditMode}
                     width="medium"
                     onChange={(e) => onSelectContentType(e.target.value)}

diff --git a/apps/optimizely/src/AppPage/Projects.jsx b/apps/optimizely/src/AppPage/Projects.jsx
@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/css';
 
 import tokens from '@contentful/f36-tokens';
-import { Heading, Select, Option, FormControl } from '@contentful/f36-components';
+import { Heading, Select, FormControl } from '@contentful/f36-components';
 
 const styles = {
   section: css({
     marginTop: tokens.spacingM,
   }),
 };
 
-export default function Projects({ allProjects, selectedProject, onProjectChange }) {
+export default function Projects({ allProjects = [], selectedProject, onProjectChange }) {
   return (
     <>
       <Heading>Optimizely Project</Heading>
@@ -26,23 +26,19 @@ export default function Projects({ allProjects, selectedProject, onProjectChange
           onChange={onProjectChange}
           isDisabled={!allProjects}
           width="large">
-          <Option value="">Select Optimizely Project</Option>
+          <Select.Option value="">Select Optimizely Project</Select.Option>
           {!!allProjects.length &&
             allProjects.map((p) => (
-              <Option key={p.id} value={p.id.toString()}>
+              <Select.Option key={p.id} value={p.id.toString()}>
                 {p.name}
-              </Option>
+              </Select.Option>
             ))}
         </Select>
       </FormControl>
     </>
   );
 }
 
-Projects.defaultProps = {
-  allProjects: [],
-};
-
 Projects.propTypes = {
   allProjects: PropTypes.array,
   selectedProject: PropTypes.string,

diff --git a/apps/optimizely/src/ConnectButton/index.jsx b/apps/optimizely/src/ConnectButton/index.jsx
@@ -3,9 +3,6 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/css';
 import { Button } from '@contentful/f36-components';
 
-// import OptimizelyLogo from './OptimizelyLogo';
-
-// import OptimizelyLogo from '../optimizely-logo';
 import AuthButton from './AuthButton';
 
 const styles = {
@@ -26,7 +23,7 @@ export default function ConnectButton({ openAuth }) {
       onClick={openAuth}
       testId="connect-button"
       isFullWidth
-      variant="naked">
+      variant="transparent">
       <AuthButton />
     </Button>
   );

diff --git a/apps/optimizely/src/EditorPage/index.jsx b/apps/optimizely/src/EditorPage/index.jsx
@@ -361,7 +361,6 @@ const fetchInitialData = async (sdk, client, slideInLevelPromise) => {
 export default function EditorPage(props) {
   const globalState = useMethods(createMethods, getInitialValue(props.sdk));
   const [state, actions] = globalState;
-  // console.log({ globalState });
   const [showAuth, setShowAuth] = useState(isCloseToExpiration(props.expires));
 
   const { sdk, client } = props;
@@ -704,7 +703,7 @@ export default function EditorPage(props) {
           />
           <SectionSplitter />
           {showAuth && (
-            <Note variant="warning" className={styles.paragraph}>
+            <Note variant="secondary" className={styles.paragraph}>
               Your Optimizely session will expire soon. Click here to{' '}
               <a onClick={props.openAuth} className={styles.link} data-test-id="preemptive-connect">
                 connect with Optimizely.

diff --git a/apps/optimizely/src/EditorPage/subcomponents/experiment-section.jsx b/apps/optimizely/src/EditorPage/subcomponents/experiment-section.jsx
@@ -24,21 +24,30 @@ const styles = {
 
 const NOT_SELECTED = '-1';
 
-export default function ExperimentSection(props) {
+export default function ExperimentSection({
+  loaded,
+  reloadNeeded,
+  hasVariations,
+  isFx,
+  experiment,
+  experiments = [],
+  onChangeExperiment,
+  onClearVariations,
+}) {
   const displayNames = new Map();
-  if (props.experiments) {
-    props.experiments.forEach((experiment) => {
-      if (props.isFx) {
-        const flagName = experiment.flag_name;
-        const ruleKey = experiment.name || experiment.key;
-        const environment = experiment.environment_key;
-        const onOff = experiment.enabled ? 'on' : 'off';
+  if (experiments) {
+    experiments.forEach((exp) => {
+      if (isFx) {
+        const flagName = exp.flag_name;
+        const ruleKey = exp.name || exp.key;
+        const environment = exp.environment_key;
+        const onOff = exp.enabled ? 'on' : 'off';
         const displayName = `${ruleKey} (flag: ${flagName}, environment: ${environment}, ${onOff})`;
 
-        displayNames.set(experiment.id.toString(), displayName);
+        displayNames.set(exp.id.toString(), displayName);
       } else {
-        const displayName = `${experiment.name || experiment.key} (${experiment.status})`;
-        displayNames.set(experiment.id.toString(), displayName);
+        const displayName = `${exp.name || exp.key} (${exp.status})`;
+        displayNames.set(exp.id.toString(), displayName);
       }
     });
   }
@@ -51,59 +60,49 @@ export default function ExperimentSection(props) {
         <FormControl.Label>Optimizely experiment</FormControl.Label>
         <Select
           isRequired
-          value={props.experiment ? props.experiment.id.toString() : ''}
+          value={experiment ? experiment.id.toString() : ''}
           onChange={(e) => {
             const value = e.target.value;
             if (value === NOT_SELECTED) {
-              props.onChangeExperiment({
+              onChangeExperiment({
                 experimentId: '',
                 experimentKey: '',
               });
             } else {
-              const experiment = props.experiments.find(
-                (experiment) => experiment.id.toString() === value
-              );
-              if (experiment) {
-                // props.onChangeExperiment({
-                //   experimentId: experiment.id.toString(),
-                //   experimentKey: experiment.key.toString(),
-                // });
-                props.onChangeExperiment(experiment);
+              const selectedExperiment = experiments.find((exp) => exp.id.toString() === value);
+              if (selectedExperiment) {
+                onChangeExperiment(selectedExperiment);
               }
             }
           }}
           width="large"
-          isDisabled={
-            props.hasVariations === true || props.loaded === false || props.reloadNeeded === true
-          }
+          isDisabled={hasVariations === true || loaded === false || reloadNeeded === true}
           id="experiment"
           name="experiment">
-          {props.loaded === false && (
+          {loaded === false && (
             <Select.Option value={NOT_SELECTED}>Fetching experiments...</Select.Option>
           )}
-          {props.loaded && (
+          {loaded && (
             <React.Fragment>
               <Select.Option value={NOT_SELECTED}>Select Optimizely experiment</Select.Option>
-              {props.experiments.map((experiment) => (
-                <Select.Option key={experiment.id.toString()} value={experiment.id.toString()}>
-                  {displayNames.get(experiment.id.toString())}
+              {experiments.map((exp) => (
+                <Select.Option key={exp.id.toString()} value={exp.id.toString()}>
+                  {displayNames.get(exp.id.toString())}
                 </Select.Option>
               ))}
             </React.Fragment>
           )}
         </Select>
       </FormControl>
 
-      {props.hasVariations === true && !props.reloadNeeded && (
+      {hasVariations === true && !reloadNeeded && (
         <Paragraph className={styles.clearDescription}>
           To change experiment, first{' '}
-          <TextLink onClick={props.onClearVariations}>clear the content assigned</TextLink>.
+          <TextLink onClick={onClearVariations}>clear the content assigned</TextLink>.
         </Paragraph>
       )}
-      {props.experiment && props.experiment.description && (
-        <Paragraph className={styles.description}>
-          Description: {props.experiment.description}
-        </Paragraph>
+      {experiment && experiment.description && (
+        <Paragraph className={styles.description}>Description: {experiment.description}</Paragraph>
       )}
     </React.Fragment>
   );
@@ -120,7 +119,3 @@ ExperimentSection.propTypes = {
   onChangeExperiment: PropTypes.func.isRequired,
   onClearVariations: PropTypes.func.isRequired,
 };
-
-ExperimentSection.defaultProps = {
-  experiments: [],
-};
diff --git a/apps/optimizely/src/EditorPage/subcomponents/references-section.jsx b/apps/optimizely/src/EditorPage/subcomponents/references-section.jsx
@@ -28,11 +28,11 @@ const styles = {
   }),
 };
 
-function ReferenceItem(props) {
+function ReferenceItem({ entry, onClick, separator }) {
   return (
     <div className={styles.item}>
-      <Tooltip content={`${props.entry.contentTypeName}`} place="bottom">
-        <TextLink onClick={props.onClick}>{props.entry.title + props.separator}</TextLink>
+      <Tooltip content={`${entry.contentTypeName}`} place="bottom">
+        <TextLink onClick={onClick}>{entry.title + separator}</TextLink>
       </Tooltip>
     </div>
   );
@@ -57,14 +57,14 @@ Container.propTypes = {
   children: PropTypes.any,
 };
 
-export default function ReferencesSection(props) {
+export default function ReferencesSection({ loaded, references = [], sdk }) {
   const onItemClick = (id) => () => {
-    props.sdk.navigator.openEntry(id, {
+    sdk.navigator.openEntry(id, {
       slideIn: true,
     });
   };
 
-  if (!props.loaded) {
+  if (!loaded) {
     return (
       <Container>
         <SkeletonContainer svgHeight="30px" clipId="references-section">
@@ -76,17 +76,17 @@ export default function ReferencesSection(props) {
 
   return (
     <Container>
-      {props.references.length > 0 &&
-        props.references.map((entry, index) => (
+      {references.length > 0 &&
+        references.map((entry, index) => (
           <React.Fragment key={entry.id}>
             <ReferenceItem
               entry={entry}
               onClick={onItemClick(entry.id)}
-              separator={index !== props.references.length - 1 ? ', ' : ''}
+              separator={index !== references.length - 1 ? ', ' : ''}
             />
           </React.Fragment>
         ))}
-      {props.references.length === 0 && (
+      {references.length === 0 && (
         <Paragraph className={styles.emptyParagraph}>
           No other entries link to this entry.
         </Paragraph>
@@ -100,7 +100,3 @@ ReferencesSection.propTypes = {
   references: PropTypes.array,
   sdk: PropTypes.object.isRequired,
 };
-
-ReferencesSection.defaultProps = {
-  references: [],
-};
diff --git a/apps/optimizely/src/EditorPage/subcomponents/variation-item.jsx b/apps/optimizely/src/EditorPage/subcomponents/variation-item.jsx
@@ -88,13 +88,13 @@ export function SelectedReference(props) {
   const { entry, loading, error } = useEntryCard(props.sys.id);
 
   if (loading) {
-    return <EntryCard loading className={styles.entryCard} />;
+    return <EntryCard isLoading={loading} className={styles.entryCard} />;
   }
 
   if (error) {
     return (
-      <Note variant="warning" title="Entry is missing" className={styles.missingNote}>
-        <TextLink linkType="secondary" onClick={props.onRemoveClick}>
+      <Note variant="secondary" title="Entry is missing" className={styles.missingNote}>
+        <TextLink variant="secondary" onClick={props.onRemoveClick}>
           Remove missing entry
         </TextLink>
       </Note>

diff --git a/apps/optimizely/src/EditorPage/subcomponents/variation-select.jsx b/apps/optimizely/src/EditorPage/subcomponents/variation-select.jsx
@@ -30,8 +30,8 @@ export default function VariationSelect(props) {
               Create entry and link
             </TextLink>
           </Menu.Trigger>
-          <Menu.List maxHeight={300}>
-            <Menu.SectionTitle isTitle>Select content type</Menu.SectionTitle>
+          <Menu.List style={{ maxHeight: '200px' }}>
+            <Menu.SectionTitle>Select content type</Menu.SectionTitle>
             {linkContentTypes.map((value, index) => (
               <Menu.Item
                 key={value}
@@ -46,7 +46,7 @@ export default function VariationSelect(props) {
       </div>
       <div className={styles.item}>
         <TextLink
-          disabled={props.disableEdit}
+          isDisabled={props.disableEdit}
           icon={<LinkIcon />}
           onClick={props.onLinkExistingClick}>
           Link an existing entry

diff --git a/apps/optimizely/src/Sidebar.spec.jsx b/apps/optimizely/src/Sidebar.spec.jsx
@@ -161,7 +161,6 @@ describe('Sidebar', () => {
 
   it('should run all lifecycle methods', () => {
     const sdk = mockSdk();
-    console.log({ sdk }, sdk.contentType.fields);
     const { unmount } = render(<Sidebar sdk={sdk} />);
 
     expect(sdk.window.startAutoResizer).toHaveBeenCalledTimes(1);
@@ -178,10 +177,6 @@ describe('Sidebar', () => {
 
   it('should use the project ID to create urls', () => {
     const sdk = mockSdk();
-    // console.log({sdk}, sdk.contentType.fields.experimentKey.getValue())
-    const { optimizelyProjectId, optimizelyProjectType } = sdk.parameters.installation;
-    console.log({ optimizelyProjectType });
-
     const { getByTestId } = render(<Sidebar sdk={sdk} />);
 
     expect(getByTestId('view-experiment').href).toBe(

diff --git a/apps/optimizely/src/Sidebar/index.jsx b/apps/optimizely/src/Sidebar/index.jsx
@@ -100,11 +100,6 @@ export default function Sidebar(props) {
     !projectType || (projectType === ProjectType.FeatureExperimentation && !environment);
 
   const isFx = projectType === ProjectType.FeatureExperimentation;
-  console.log(
-    { optimizelyProjectId, environment, flagKey, experimentKey },
-    getRuleEditUrl(optimizelyProjectId, flagKey, experimentKey, environment),
-    getExperimentUrl(optimizelyProjectId, experimentId)
-  );
 
   return (
     <div data-test-id="sidebar">

diff --git a/apps/optimizely/src/index.jsx b/apps/optimizely/src/index.jsx
@@ -183,18 +183,18 @@ export default class App extends React.Component {
   }
 }
 
-init((sdk) => {
-  const container = document.getElementById('root');
-  const root = createRoot(container);
-  if (sdk.location.is(locations.LOCATION_APP_CONFIG)) {
-    root.render(<Config sdk={sdk} />);
-  } else {
-    throw new Error('rendered outside of config location');
-  }
-});
-// const container = document.getElementById('root');
-// const root = createRoot(container);
-
 // init((sdk) => {
-//   root.render(<App sdk={sdk} />);
+//   const container = document.getElementById('root');
+//   const root = createRoot(container);
+//   if (sdk.location.is(locations.LOCATION_APP_CONFIG)) {
+//     root.render(<Config sdk={sdk} />);
+//   } else {
+//     throw new Error('rendered outside of config location');
+//   }
 // });
+const container = document.getElementById('root');
+const root = createRoot(container);
+
+init((sdk) => {
+  root.render(<App sdk={sdk} />);
+});