feat(configuration): improved UX experience with configuration (#44)

* Made mandatory config name

* Added instruction on how to start Pro

* Added suggestions and persistence of runningConfig

* Added description to env var at creation time

* Added final touches to make everything work

* updated readme

* Removed counting logs

* Fixed container sometimes now showing running

Author: Pive01

Makefile

@@ -1,5 +1,5 @@
 IMAGE?=localstack/localstack-docker-desktop
-TAG?=0.4.2
+TAG?=0.4.4
 
 BUILDER=buildx-multi-arch
 
@@ -15,6 +15,16 @@ install-extension: build-extension ## Install the extension
 update-extension: build-extension ## Update the extension
 	docker extension update $(IMAGE):$(TAG)
 
+debug: ## Start the extension in debug mode
+	docker extension dev debug $(IMAGE)
+
+hot-reload: ## Enable hot reloading
+	docker extension dev ui-source $(IMAGE) http://localhost:3000
+	cd ui/ && npm start
+
+stop-hot-realoading: ## Disable hot reloading
+	docker extension dev reset $(IMAGE)
+	
 prepare-buildx: ## Create buildx builder for multi-arch build, if not exists
 	docker buildx inspect $(BUILDER) || docker buildx create --name=$(BUILDER) --driver=docker-container --driver-opt=network=host
 

README.md

@@ -44,15 +44,18 @@ To contribute, check out our [issue tracker](https://github.com/localstack/local
 
 2. Open the Developer Tools or create new features:
     ```bash
-    $ docker extension dev debug localstack/localstack-docker-desktop
+    $ make debug
     ```
 
 3. Start the Extension on Docker Desktop and enable hot-reload using the following command:
     ```bash
-    $ npm start 
-    $ docker extension dev ui-source localstack/localstack-docker-desktop http://localhost:3000
+    $ make hot-reloading
     ```
 
+4. Disable hot reloading:
+    ```bash
+    $ make stop-hot-reloading
+    ```
 ## Releases
 
 Please refer to [`CHANGELOG`](CHANGELOG.md) to see the complete list of changes for each release.

ui/src/App.tsx

@@ -18,7 +18,9 @@ export const App = (): ReactElement => {
 
   return (
     <>
-      {showForm && <SettingsForm initialState={showSetupWarning ? 0 : 1} />}
+      {showForm &&
+        <SettingsForm initialState={showSetupWarning ? 0 : 2} />
+      }
       <div className={classes.sticky}>
         <Header />
       </div>

ui/src/components/Header/Controller.tsx

@@ -25,10 +25,10 @@ import { ProgressButton } from '../Feedback';
 const EXCLUDED_ERROR_TOAST = ['INFO', 'WARN', 'DEBUG'];
 
 export const Controller = (): ReactElement => {
-  const { runConfigs, isLoading, createConfig } = useRunConfigs();
+  const { configData, isLoading, setRunningConfig: setBackendRunningConfig, createConfig } = useRunConfigs();
   const { data, mutate } = useLocalStack();
   const { user, os, hasSkippedConfiguration } = useMountPoint();
-  const [runningConfig, setRunningConfig] = useState<string>('Default');
+  const [runningConfig, setRunningConfig] = useState<string>(configData.runningConfig ?? DEFAULT_CONFIGURATION_ID);
   const [downloadProps, setDownloadProps] = useState({ open: false, image: IMAGE });
   const [isStarting, setIsStarting] = useState<boolean>(false);
   const [isStopping, setIsStopping] = useState<boolean>(false);
@@ -38,14 +38,18 @@ export const Controller = (): ReactElement => {
   const tooltipLabel = isUnhealthy ? 'Unhealthy' : 'Healthy';
 
   useEffect(() => {
-    if (!isLoading && (!runConfigs || !runConfigs.find(item => item.name === 'Default'))) {
+    if (!isLoading &&
+      (!configData?.configs || !configData.configs?.find(item => item.id === DEFAULT_CONFIGURATION_ID))) {
       createConfig({
         name: 'Default', id: DEFAULT_CONFIGURATION_ID, vars: [],
-      },
-      );
+      });
+    } 
+    if (!isLoading) {
+      setRunningConfig(configData.runningConfig ?? DEFAULT_CONFIGURATION_ID);
     }
   }, [isLoading]);
 
+
   const buildMountArg = () => {
     let location = 'LOCALSTACK_VOLUME_DIR=/tmp/localstack/volume';
 
@@ -69,7 +73,7 @@ export const Controller = (): ReactElement => {
 
     const corsArg = ['-e', `EXTRA_CORS_ALLOWED_ORIGINS=${CORS_ALLOW_DEFAULT}`];
 
-    const addedArgs = runConfigs.find(config => config.name === runningConfig)
+    const addedArgs = configData.configs.find(config => config.id === runningConfig)
       .vars.map(item => {
         if (item.variable === 'EXTRA_CORS_ALLOWED_ORIGINS') { // prevent overriding variable
           corsArg.slice(0, 0);
@@ -88,8 +92,8 @@ export const Controller = (): ReactElement => {
   const start = async () => {
     const images = await ddClient.docker.listImages() as [DockerImage];
 
-    const isPro = runConfigs.find(config => config.name === runningConfig)
-      .vars.some(item => item.variable === 'LOCALSTACK_API_KEY');
+    const isPro = configData.configs.find(config => config.id === runningConfig)
+      .vars.some(item => item.variable === 'LOCALSTACK_API_KEY' && item.value);
 
     const haveCommunity = images.some(image => image.RepoTags?.at(0) === IMAGE);
     if (!haveCommunity) {
@@ -180,11 +184,11 @@ export const Controller = (): ReactElement => {
             <FormControl sx={{ m: 1, minWidth: 120, border: 'none' }} size='small'>
               <Select
                 value={runningConfig}
-                onChange={({ target }) => setRunningConfig(target.value)}
+                onChange={({ target }) => setBackendRunningConfig(target.value)}
               >
                 {
-                  runConfigs?.map(config => (
-                    <MenuItem key={config.id} value={config.name}>{config.name}</MenuItem>
+                  configData?.configs?.map(config => (
+                    <MenuItem key={config.id} value={config.id}>{config.name}</MenuItem>
                   ))
                 }
               </Select>

ui/src/components/Views/Configs/ConfigPage.tsx

@@ -18,7 +18,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
 
 export const ConfigPage = (): ReactElement => {
 
-  const { runConfigs, deleteConfig } = useRunConfigs();
+  const { configData, deleteConfig } = useRunConfigs();
   const mountPoint = useMountPoint();
   const [openModal, setOpenModal] = useState<boolean>(false);
   const [targetConfig, setTargetConfig] = useState<RunConfig | null>(null);
@@ -89,7 +89,7 @@ export const ConfigPage = (): ReactElement => {
       <Box sx={{ marginTop: 3 }}>
         <DataGrid
           autoHeight
-          rows={runConfigs.filter(config => config.id !== DEFAULT_CONFIGURATION_ID)}
+          rows={configData?.configs?.filter(config => config.id !== DEFAULT_CONFIGURATION_ID) || []}
           columns={columns}
           getRowId={(row) => (row).id as string || uuid()}
           disableSelectionOnClick

ui/src/components/Views/Configs/SettingsForm.tsx

@@ -41,7 +41,7 @@ export const SettingsForm = ({ initialState }: MountPointFormProps): ReactElemen
   const { setMountPointData, user, os } = useMountPoint();
   const ddClient = useDDClient();
 
-  const steps = ['Enable Docker Desktop option', 'Set mount point'];
+  const steps = ['Enable Docker Desktop option', 'Launching pro container', 'Set mount point'];
 
   const handleNext = () => {
     if (activeStep !== steps.length - 1) {
@@ -158,7 +158,7 @@ export const SettingsForm = ({ initialState }: MountPointFormProps): ReactElemen
           )}
         </Stepper>
         <Box sx={{ margin: 5 }}>
-          {activeStep === 0 ?
+          {activeStep === 0 &&
             <>
               <Typography>
                 Make sure to have the option &quot;Show Docker Extensions system containers&quot; enabled.
@@ -171,7 +171,15 @@ export const SettingsForm = ({ initialState }: MountPointFormProps): ReactElemen
                 <li>In the bottom-right corner, select Apply & Restart</li>
               </ul>
             </>
-            :
+          }
+          {
+            activeStep === 1 &&
+            <Typography>
+              In order to start the Pro container, add a configuration with the variable LOCALSTACK_API_KEY 
+              set to your API key and select that configuration in the top right corner
+            </Typography>
+          }
+          {activeStep === 2 &&
             <>
               <Typography variant='h3'>
                 Default mount point settings

ui/src/components/Views/Configs/UpsertConfig.tsx

@@ -20,6 +20,12 @@ import { RunConfig } from '../../../types';
 
 const DEFAULT_COLUMN_WIDTH = 2000;
 
+const COMMON_CONFIGURATIONS = [
+  ['DEBUG', '0', 'Flag to increase log level and print more verbose logs'],
+  ['PERSISTENCE', '0', 'Enable persistence'],
+  ['LOCALSTACK_API_KEY', '', 'API key to activate LocalStack Pro.'],
+];
+
 type Props = {
   config?: RunConfig,
   open: boolean,
@@ -42,7 +48,14 @@ export const UpsertConfig = ({ config, open, onClose }: Props): ReactElement =>
   const [newVar, setNewVar] = useState<string>('');
   const [newValue, setNewValue] = useState<string>('');
   const [configName, setConfigName] = useState<string>(config?.name || '');
-  const [newConfig, setNewConfig] = useState<RunConfig>(config || { name: '', id: uuid(), vars: [] } as RunConfig);
+  const [newConfig, setNewConfig] = useState<RunConfig>(config ||
+    {
+      name: '',
+      id: uuid(),
+      vars: COMMON_CONFIGURATIONS.map(
+        ([variable, value, description]) => ({ variable, value, id: uuid(), description }),
+      ),
+    } as RunConfig);
   const classes = useStyles();
 
   const handleAddButtonPress = () => {
@@ -105,34 +118,41 @@ export const UpsertConfig = ({ config, open, onClose }: Props): ReactElement =>
             variant='outlined'
             label='Configuration Name'
             value={configName}
+            required
             onChange={(e) => setConfigName(e.target.value)}
           />
         </Box>
         <Box className={classes.emptyBox} />
         <List
           subheader={
-            <Typography>Environment Variables </Typography>
+            <Typography>Environment Variables</Typography>
           }
         >
           {newConfig?.vars.map(item => (
             <ListItem key={item.id} disableGutters>
-              <Box display='flex' width={DEFAULT_COLUMN_WIDTH} key={item.id}>
-                <TextField
-                  fullWidth
-                  variant='outlined'
-                  className={classes.textField}
-                  onChange={(e) => updateConfigKey(item.id, e.target.value.toLocaleUpperCase())}
-                  value={item.variable}
-                />
-                <TextField
-                  fullWidth
-                  variant='outlined'
-                  className={classes.textField}
-                  onChange={(e) => updateConfigValue(item.id, e.target.value)}
-                  value={item.value} />
-                <IconButton onClick={() => handleRemoveButtonPress(item.id)} >
-                  <Remove />
-                </IconButton>
+              <Box width={DEFAULT_COLUMN_WIDTH}>
+                <Box display='flex' key={item.id}>
+                  <TextField
+                    fullWidth
+                    variant='outlined'
+                    className={classes.textField}
+                    onChange={(e) => updateConfigKey(item.id, e.target.value.toLocaleUpperCase())}
+                    value={item.variable}
+                  />
+                  <TextField
+                    fullWidth
+                    variant='outlined'
+                    label='Value'
+                    className={classes.textField}
+                    onChange={(e) => updateConfigValue(item.id, e.target.value)}
+                    value={item.value} />
+                  <IconButton onClick={() => handleRemoveButtonPress(item.id)} >
+                    <Remove />
+                  </IconButton>
+                </Box>
+                {item.description &&
+                  <Typography variant='caption'>{item.description}</Typography>
+                }
               </Box>
             </ListItem>
           ))}
@@ -173,6 +193,7 @@ export const UpsertConfig = ({ config, open, onClose }: Props): ReactElement =>
         <Button
           variant='contained'
           onClick={handleSaveButtonPress}
+          disabled={!configName}
         >
           Save & Exit
         </Button>

ui/src/services/hooks/api.ts

@@ -1,12 +1,13 @@
 import useSWR from 'swr';
 import { STORAGE_KEY_ENVVARS, STORAGE_KEY_LOCALSTACK, STORAGE_KEY_MOUNT } from '../../constants';
-import { DockerContainer, mountPointData, RunConfig } from '../../types';
+import { ConfigData, DockerContainer, mountPointData, RunConfig } from '../../types';
 import { isALocalStackContainer, isJson } from '../util';
 import { useDDClient } from './utils';
 
 interface useRunConfigsReturn {
-  runConfigs: RunConfig[],
+  configData: ConfigData,
   isLoading: boolean,
+  setRunningConfig: (data: string) => unknown;
   createConfig: (data: RunConfig) => unknown;
   updateConfig: (data: RunConfig) => unknown;
   deleteConfig: (data: string) => unknown;
@@ -16,6 +17,17 @@ interface HTTPMessageBody {
   Message: string,
 }
 
+const adaptVersionData = (data: HTTPMessageBody, error: Error) => {
+  const newData = (!data || !data?.Message || error) ?
+    { configs: [], runningConfig: null }
+    :
+    JSON.parse(data?.Message);
+  if (Array.isArray(newData)) {
+    return { configs: newData, runningConfig: newData.at(0).id ?? null };
+  }
+  return newData;
+};
+
 export const useRunConfigs = (): useRunConfigsReturn => {
   const cacheKey = STORAGE_KEY_ENVVARS;
   const ddClient = useDDClient();
@@ -29,6 +41,11 @@ export const useRunConfigs = (): useRunConfigsReturn => {
     mutate();
   };
 
+  const setRunningConfig = async (configId: string) => {
+    await ddClient.extension.vm.service.put('/configs/running', { Data: JSON.stringify(configId) });
+    mutate();
+  };
+
   const createConfig = async (newData: RunConfig) => {
     await ddClient.extension.vm.service.post('/configs', { Data: JSON.stringify(newData) });
     mutate();
@@ -39,9 +56,11 @@ export const useRunConfigs = (): useRunConfigsReturn => {
     mutate();
   };
 
+
   return {
-    runConfigs: (!data || !data?.Message || error) ? [] : JSON.parse(data?.Message),
+    configData: adaptVersionData(data, error),
     isLoading: isValidating || (!error && !data),
+    setRunningConfig,
     createConfig,
     updateConfig,
     deleteConfig,
@@ -78,7 +97,7 @@ export const useMountPoint = (): useMountPointReturn => {
   return {
     user: mountPointData?.user,
     os: mountPointData?.os,
-    showForm: mountPointData?.showForm == null? true : mountPointData?.showForm,
+    showForm: mountPointData?.showForm == null ? true : mountPointData?.showForm,
     showSetupWarning: mountPointData?.showSetupWarning == null ? true : mountPointData?.showSetupWarning,
     hasSkippedConfiguration: mountPointData?.hasSkippedConfiguration || false,
     isLoading: isValidating || (!error && !data),
@@ -105,7 +124,7 @@ export const useLocalStack = (): useLocalStackReturn => {
       /*
        * compares whether the old (b) status aligns with that of new (a) status
        */
-      (a, b) => a?.Id === b?.Id && a?.Status.includes('unhealthy') === b?.Status.includes('unhealthy'), 
+      (a, b) => a?.Id === b?.Id && a?.Status.includes('unhealthy') === b?.Status.includes('unhealthy'),
     },
   );
 

ui/src/services/util/containers.ts

@@ -1,3 +1,4 @@
+import { PRO_IMAGE } from '../../constants';
 import { DockerContainer, DockerImage } from '../../types';
 
 /**
@@ -10,9 +11,23 @@ export function removeRepoFromImage(repoTag: string) {
   return repoTag.split('/').at(-1);
 }
 
+const removeDockerTag = (imageString:string ) => {
+  // Split the image string by ":" to check if it has a tag
+  const parts = imageString.split(':');
+  
+  // If there is no tag, return the original string as is
+  if (parts.length === 1) {
+    return imageString;
+  }
+  
+  // If there is a tag, return the part before the last ":" (image without tag)
+  return parts.slice(0, -1).join(':');
+};
 export function removeTagFromImage(image: DockerImage){
-  return image.RepoTags?.at(0)?.split(':').slice(0, -1).join(':');
+  return removeDockerTag(image.RepoTags?.at(0));
 }
 
-export const isALocalStackContainer = (container: DockerContainer) =>
-  (container.Image === 'localstack/localstack' || container.Image === 'localstack/localstack-pro');
+export const isALocalStackContainer = (container: DockerContainer) => {
+  const image = removeDockerTag(container.Image);
+  return image === 'localstack/localstack' || image === PRO_IMAGE;
+};