• Icon: Task Task
    • Resolution: Fixed
    • Icon: L3 - Default L3 - Default
    • 2.2.0
    • None
    • frontend
    • None

      Currently, After using the EntityList for the alerts and the combined report, the entity list became very big and does many things.
      Therefore, The goal is to move extra functionalities that can be separated into other components or files.

        This is the controller panel for Smart Panels app

            [OPT-1420] Refactor EntityList component

            I am very happy with this refactoring. I was a bit concerned that we would need three different EntityLists for the different use cases, but your solution works well without having duplicate code and keeps the component complexity manageable

            Some review hints:

            • In my opinion, the property names of the DeleteModal should not repeat the component name. For example it's redundant to have a DeleteModal component with a property deleteModalVisible. I would just call the property visible or isVisible
            • When the delete modal is open, we have the entity to be deleted as deleteModalEntity state variable in the entityList. In my mind, there is no need to pass the id to the deleteEntity function, as deleteEntity can just get it from the state and the DeleteModal can be a bit simpler (onConfirm={deleteEntity}) instead of onConfirm={deleteEntity(deleteModalEntity.id)})
            • If the previous suggestion is implemented, the DeleteModal does not need the complete entity anymore but only the name.
            • I think the DeleteModal does not need a classname. For the EntityList test we can use the tag name instead.
            • The EntityItem does not need the mightFail and sortBy properties. Maybe we can pass the api and label props explicitely instead of just passing all props of the parent
            • Since the delete Modal is its own component now, I think we don't need the deleteModal variable in the EntityList render method anymore and can just use the markup inline

            Sebastian Stamm added a comment - I am very happy with this refactoring. I was a bit concerned that we would need three different EntityLists for the different use cases, but your solution works well without having duplicate code and keeps the component complexity manageable Some review hints: In my opinion, the property names of the DeleteModal should not repeat the component name. For example it's redundant to have a DeleteModal component with a property deleteModalVisible. I would just call the property visible or isVisible When the delete modal is open, we have the entity to be deleted as deleteModalEntity state variable in the entityList. In my mind, there is no need to pass the id to the deleteEntity function, as deleteEntity can just get it from the state and the DeleteModal can be a bit simpler (onConfirm={deleteEntity}) instead of onConfirm={deleteEntity(deleteModalEntity.id)}) If the previous suggestion is implemented, the DeleteModal does not need the complete entity anymore but only the name. I think the DeleteModal does not need a classname. For the EntityList test we can use the tag name instead. The EntityItem does not need the mightFail and sortBy properties. Maybe we can pass the api and label props explicitely instead of just passing all props of the parent Since the delete Modal is its own component now, I think we don't need the deleteModal variable in the EntityList render method anymore and can just use the markup inline

            • The close Button of the delete modal is now labeled onClose
            • Super minor but I noticed that the createEntity, deleteEntity, duplicateEntity and showDeleteModal do not use the evt argument. Theoretically we could remove it but I am also fine with having it there if you want to make it more explicit that they are event handler functions

            Sebastian Stamm added a comment - The close Button of the delete modal is now labeled onClose Super minor but I noticed that the createEntity, deleteEntity, duplicateEntity and showDeleteModal do not use the evt argument. Theoretically we could remove it but I am also fine with having it there if you want to make it more explicit that they are event handler functions

            I would prefer to keep them for the benefit you mentioned

            Omran Abazeed added a comment - I would prefer to keep them for the benefit you mentioned

            That's fine, but the close Button of the delete modal is still labeled onClose.

            Sebastian Stamm added a comment - That's fine, but the close Button of the delete modal is still labeled onClose.

              Unassigned Unassigned
              omran.abazeed Omran Abazeed
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Created:
                Updated:
                Resolved: