feat: allow customers to set a default source-id

imgix · Jun 14, 2024 · d5efc72 · d5efc72
1 parent bdd4e2b
commit d5efc72
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 23 deletions.
diff --git a/src/components/ConfigScreen/ConfigScreen.tsx b/src/components/ConfigScreen/ConfigScreen.tsx
@@ -23,6 +23,7 @@ import packageJson from './../../../package.json';
 
 export interface AppInstallationParameters {
   imgixAPIKey?: string;
+  sourceID?: string;
   successfullyVerified?: boolean;
 }
 
@@ -197,15 +198,32 @@ export default class Config extends Component<ConfigProps, ConfigState> {
     return { ...currentState, EditorInterface };
   };
 
-  handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  handleAPIKeyChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const prevState = { ...this.state };
     this.setState({
       parameters: {
+        ...prevState.parameters,
         imgixAPIKey: e.target.value,
         successfullyVerified: this.state.parameters.successfullyVerified,
       },
     });
   };
 
+  handleSourceIDChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const prevState = { ...this.state };
+    this.setState({
+      parameters: {
+        ...prevState.parameters,
+        sourceID: e.target.value,
+        successfullyVerified: this.state.parameters.successfullyVerified,
+      },
+    });
+  };
+
   verifyAPIKey = async () => {
     this.setState({ isButtonLoading: true });
 
@@ -219,7 +237,12 @@ export default class Config extends Component<ConfigProps, ConfigState> {
     };
 
     try {
-      await imgix.request('sources');
+      if (this.state.parameters.sourceID?.length) {
+        await imgix.request(`sources/${this.state.parameters.sourceID}`);
+      } else {
+        await imgix.request('sources');
+      }
+
       Notification.setPosition('top', { offset: 650 });
       Notification.success(
         'Your API key was successfully confirmed! Click the Install/Save button (in the top right corner) to complete installation.',
@@ -347,7 +370,7 @@ export default class Config extends Component<ConfigProps, ConfigState> {
                     type: 'password',
                     autoComplete: 'new-api-key',
                   }}
-                  onChange={this.handleChange}
+                  onChange={this.handleAPIKeyChange}
                 />
               </div>
               {this.state.parameters.successfullyVerified && (
@@ -366,6 +389,22 @@ export default class Config extends Component<ConfigProps, ConfigState> {
                 https://dashboard.imgix.com/api-keys
               </a>
             </p>
+            <div className="flex-container">
+              <div className="flex-child">
+                <TextField
+                  name="Default Source"
+                  id="SourceID"
+                  labelText="Default Source ID"
+                  value={this.state.parameters?.sourceID || ''}
+                  validationMessage={this.state.validationMessage}
+                  textInputProps={{
+                    type: 'text',
+                    autoComplete: 'default-source-id',
+                  }}
+                  onChange={this.handleSourceIDChange}
+                />
+              </div>
+            </div>
           </div>
           <Button
             type="submit"

diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -250,15 +250,21 @@ export default class Dialog extends Component<DialogProps, DialogState> {
       if (sources.length === 0) {
         throw noSourcesError();
       }
+      const invocationParams = this.props.sdk.parameters
+        .invocation as AppInvocationParameters;
+      const installationParams = this.props.sdk.parameters
+        .installation as AppInstallationParameters;
+
       // check if previously selected source exists
       // if it does, add it to state.
-      const previouslySelectedSource = (
-        this.props.sdk.parameters.invocation as AppInvocationParameters
-      )?.selectedImage?.selectedSource;
+      const previouslySelectedSource =
+        invocationParams?.selectedImage?.selectedSource?.id ||
+        installationParams.sourceID;
 
       const selectedSource = sources.find((source: any) => {
-        return source.id === previouslySelectedSource?.id;
+        return source.id === previouslySelectedSource;
       });
+
       if (selectedSource) {
         this.setState({ allSources: sources, selectedSource });
       } else {

diff --git a/src/components/Gallery/ImageGallery.tsx b/src/components/Gallery/ImageGallery.tsx
@@ -108,7 +108,12 @@ export class Gallery extends Component<GalleryProps, GalleryState> {
         <GalleryPlaceholder
           sdk={this.props.sdk}
           handleClose={this.handleClose}
-          text="Select a Source to view your image gallery"
+          text={
+            // @ts-ignore
+            this.props.sdk.parameters.installation.sourceID
+              ? 'Loading'
+              : 'Select a Source to view your image gallery'
+          }
         />
       ) : // If the source is a webfolder
       this.props.selectedSource.type === 'webfolder' ? (

diff --git a/src/components/SourceSelect/SourceSelectDropdown.tsx b/src/components/SourceSelect/SourceSelectDropdown.tsx
@@ -42,24 +42,30 @@ export function SourceSelectDropdown({
       isOpen={isOpen}
       onClose={() => setOpen(false)}
       toggleElement={
-        <Button
-          size="small"
-          buttonType="muted"
-          className="ix-dropdown"
-          indicateDropdown
-          onClick={() => setOpen(!isOpen)}
-          disabled={disabled}
-        >
-          {selectedSource.name || 'Select an imgix Source'}
-        </Button>
+        !allSources.length ? (
+          <Button
+            size="small"
+            buttonType="muted"
+            className="ix-dropdown"
+            disabled={true}
+          >
+            <Spinner />
+          </Button>
+        ) : (
+          <Button
+            size="small"
+            buttonType="muted"
+            className="ix-dropdown"
+            indicateDropdown
+            onClick={() => setOpen(!isOpen)}
+            disabled={disabled}
+          >
+            {selectedSource.name || 'Select an imgix Source'}
+          </Button>
+        )
       }
     >
       <DropdownList className="ix-dropdown-list">
-        {!allSources.length ? (
-          <Paragraph style={{ paddingLeft: 5 }}>
-            Loading <Spinner />
-          </Paragraph>
-        ) : null}
         {allSources.map((source: SourceProps) => (
           <DropdownListItem key={source.id} onClick={() => handleClick(source)}>
             {source.name}