Item11729: Issues with WikiGroups topic loading on sites with many groups

I'm working with a site that has 100+ groups and in IE, the WikiGroups topic will not load without IE throwing up message that says: "Stop running this script? A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer might become unresponsive". After getting some feedback on irc, i tried loading the page with urlparam ?debugenableplugins to see which script might be getting hung. The first one I tried was TwistyPlugin since it gets used twice for each group. Sure enough, the page loaded quickly then.

MichaelDaum suggested that perhaps the page should be redesigned using modal dialog for the group actions. This would remove the need for all the separate forms for each group (each with their own scripts) and the twisties.

-- LynnwoodBrown - 05 Apr 2012

I worked on this today and have reworked GroupViewTemplate to replace all the twisties for group actions with modal dialog forms. I've tested it on a couple of sites for both the WikiGroups topic as well as individual group topics (since the same view template is used) and it seems to work nicely and greatly reduces the load time on sites with a lot of groups. I'd welcome someone else to double check the code before it gets checked in but I believe it works.

Here's the revised code for GroupViewTemplate.

%TMPL:INCLUDE{"view"}%

%TMPL:DEF{"content"}%<div class="foswikiTopicText">
%ADDTOZONE{"script" text="<script src='/pub/System/JavascriptFiles/strikeone.js'></script>"}%
---+!! %NOP%%TOPIC%
%TEXT%
---++ %MAKETEXT{"Members"}%
%INCLUDE{
   "%USERSWEB%.GroupViewTemplate"
   section="rendergroup"
   groupname="%TOPIC%"
   twisty="on"
}%%INCLUDE{
   "%USERSWEB%.GroupViewTemplate"
   section="groupactions"
   groupname="%TOPIC%"
   twisty="on"
}%

*%MAKETEXT{"Related topics:"}%* [[%SYSTEMWEB%.AccessControl][AccessControl]], [[%USERSWEB%.WikiGroups][WikiGroups]]
#TopicEnd
</div>%TMPL:END%

%TMPL:DEF{"topicactionbuttons__"}%%TMPL:END%

%TMPL:DEF{Named_sections_for_INCLUDE}%
---++ Named INCLUDE sections for use in both Group topics and the WikiGroups list
<verbatim>
<!--
  parameters: groupname, twisty
-->
%STARTSECTION{"rendergroup"}%
%GROUPINFO{"%groupname%"
  expand="0"
  format="$percntIF{\"istopic '%USERSWEB%.$wikiname'\" then=\"%USERSWEB%.$wikiname\" else=\"<nop>$wikiname\"}$percnt" 
  separator=", "
  zeroresults="%IF{"'%groupname%' != 'NobodyGroup'" then="%MAKETEXT{"No  members"}%$n()"}%"
}%
%ENDSECTION{"rendergroup"}%
</verbatim>

<verbatim>
<!--
  parameters: groupname, twisty
-->
%STARTSECTION{"groupactions"}%%ADDTOZONE{
"head"
id="WIKIGROUP::CSS" 
text="<style media='all'>
.wikiGroupsTable {
   width:100%;
   table-layout: fixed;
}
.wikiGroupsTable td,
.wikiGroupsTable th {
   vertical-align:top;
}
.wikiGroupsTable td.wikiGroupsActions {
   width:300px;
}
div.wikiGroupsAction {
       width:150px;
}
.wikiGroupsTable .foswikiFormSteps {
   margin:5px 0 10px 0;
}
.wikiGroupsAction {
   margin:1em 0;
}
.wikiGroupsNoAction {
   color:#888;
}
</style>"
}%<div class='wikiGroupsAction' >
%GROUPINFO{"%groupname%"
  expand="0"
  format="" 
  separator=""
  zeroresults="$percntINCLUDE{
    \"%WEB%.%TOPIC%\"
    section=\"%IF{
      "istopic '%USERSWEB%.%groupname%' AND
       $WIKINAME != 'WikiGuest' AND
       '%groupname%' != 'NobodyGroup' AND
       '%groupname%' != 'BaseGroup' AND
       '%maint%' != 'off' AND
       '%USERSWEB%.%groupname%' allows 'change'
      " 
      then="changegroup%IF{"'%twisty%' = 'off'" then="notwisty"}%" 
      else="nochange"
    }%\"
    groupname=\"%groupname%\"
    allowremove=\"0\"
    zeromembers=\"1\"
  }$percnt"
  footer="$percntINCLUDE{
    \"%WEB%.%TOPIC%\"
    section=\"%IF{
      "istopic '%USERSWEB%.%groupname%' AND 
       $WIKINAME != 'WikiGuest' AND
       '$wikiusername' != 'AdminUser' AND
       '%groupname%' != 'NobodyGroup' AND
       '%groupname%' != 'BaseGroup' AND
       '%maint%' != 'off' AND
       '%USERSWEB%.%groupname%' allows 'change'
      " 
      then="changegroup" 
      else="nochange"
    }%\"
    groupname=\"%groupname%\"
    allowremove=\"1\"
  }$percnt"
}%
</div>
%ENDSECTION{"groupactions"}%
</verbatim>

<verbatim>
<!--
  parameters: username, groupname
-->
%STARTSECTION{"nochange"}%%IF{
   "'%groupname%' = 'NobodyGroup'"
   then="<span class='wikiGroupsNoAction'>%MAKETEXT{"This group should not have members."}%$n()</span>"
   else="%IF{
      "'%groupname%' = 'BaseGroup'"
      then="<span class='wikiGroupsNoAction'>%MAKETEXT{"System user list."}%$n()</span>"
      else="%IF{
         "$WIKINAME = 'WikiGuest'"
         then="%MAKETEXT{"Log in to continue."}%$n()"
         else="%IF{
            "'%USERSWEB%.%groupname%' allows 'change'"
            else="<span class='wikiGroupsNoAction'>%MAKETEXT{"Only members or admins may update group."}%$n()</span>"
         }%"
      }%"
   }%"
}%%ENDSECTION{"nochange"}%
</verbatim>

<verbatim>
<!--
  parameters: groupname
-->
%STARTSECTION{"changegroup"}%%JQREQUIRE{"ui::dialog, textboxlist"}%
%IF{"'%BASEWEB%.%BASETOPIC%'='%USERSWEB%.%groupname%'"
then='
---++ %MAKETEXT{"Administration"}%
'}%
%ICON{"useradd"}% <a href='%SCRIPTURL{view}%/%WEB%/%TOPIC%?skin=text;section=group_add;groupname=%groupname%' alt='%MAKETEXT{"Add members..."}%' title='%MAKETEXT{"Add members..."}%' class='jqUIDialogLink  {cache:false}'>%MAKETEXT{"Add members..."}%</a>
%IF{"$allowremove"
   then='%BR%%ICON{"userdelete"}% <a href="%SCRIPTURL{view}%/%WEB%/%TOPIC%?skin=text;section=group_remove;groupname=%groupname%" alt="%MAKETEXT{"Remove members..."}%" title="%MAKETEXT{"Remove members..."}%" class="jqUIDialogLink {cache:false}">%MAKETEXT{"Remove members..."}%</a>'
}%
%IF{
   "$allowremove AND 
   istopic '%USERSWEB%.%groupname%' AND 
   not ( '%USERSWEB%.%groupname%'/preferences[name='VIEW_TEMPLATE'].value = 'GroupView' )
   "
   then='%BR%%ICON{"wrench"}% <a href="%SCRIPTURL{view}%/%WEB%/%TOPIC%?skin=text;section=group_upgrade;groupname=%groupname%" alt="%MAKETEXT{"Upgrade group topic..."}%" title="%MAKETEXT{"Upgrade group topic..."}%" class="jqUIDialogLink {cache:false}">%MAKETEXT{"Upgrade group topic..."}%</a>'
}%
%ENDSECTION{"changegroup"}%
</verbatim>

<verbatim>
<!--
  parameters: groupname
-->
%STARTSECTION{"group_upgrade"}%
<div id='manageGroup' title="Upgrade Group Topic" class="jqUIDialog { modal:true, resizable:false, draggable:false, width:400, autoCenter:true, cache:false}">
<form action="%SCRIPTURLPATH{"manage"}%/%WEB%/%TOPIC%" method="post">
<input type="hidden" name="groupname" value="%URLPARAM{"groupname" default="%groupname%"}%"/>
<input type="hidden" name="action" value="addUserToGroup"/>
<input type="hidden" name="create" value="1"/>
<div class="foswikiFormSteps">
<div class="foswikiFormStep">
<p>%MAKETEXT{"Add user management options to this topic."}%</p>
</div>
   <a class="jqUIDialogButton jqUIDialogSubmit jqUIDialogClose {icon:'ui-icon-circle-check'}" >%MAKETEXT{"Upgrade"}%</a>
   <a id='cancelLink' class="jqUIDialogButton jqUIDialogClose {icon:'ui-icon-cancel'}">%MAKETEXT{"Cancel"}%</a>
</div>
</form></div>
%ENDSECTION{"group_upgrade"}%
</verbatim>

<verbatim>
<!--
  parameters: groupname
-->
%STARTSECTION{"group_add"}%<sticky>
<div id='manageGroup' title="Add Group Members" class="jqUIDialog { modal:true, resizable:false, draggable:false, width:400, autoCenter:true, cache:false}">
<form id='addUser' action='%SCRIPTURLPATH{"manage"}%/%WEB%/%TOPIC%' method='post'> 
<input type='hidden' name='groupname' value='%URLPARAM{"groupname" default="%groupname%"}%'/> 
<input type='hidden' name='action' value='addUserToGroup'/>
<div class='foswikiFormSteps'>
  <div class='foswikiFormStep'>
     <h3>%MAKETEXT{"Enter users or groups to add to this group"}%</h3>
     <input type='text' name='username' value='' size='30' class='foswikiInputField jqTextboxList' autocomplete='%SCRIPTURL{"view"}%/%SYSTEMWEB%/JQueryAjaxHelper?section=user;skin=text;baseweb=%BASEWEB%;%IF{"defined EXCLUDE" then="exclude=%EXCLUDE%"}%' />
  </div>
   <a class="jqUIDialogButton jqUIDialogSubmit jqUIDialogClose {icon:'ui-icon-circle-check'}" >%MAKETEXT{"Add members"}%</a>
   <a id='cancelLink' class="jqUIDialogButton jqUIDialogClose {icon:'ui-icon-cancel'}">%MAKETEXT{"Cancel"}%</a>
</div>
</form></div>
</sticky>
%ENDSECTION{"group_add"}%
</verbatim>

<verbatim>
<!--
  parameters: groupname
-->
%STARTSECTION{"group_remove"}%
<div id='manageGroup' title="Remove Group Members" class="jqUIDialog { modal:true, resizable:false, draggable:false,  width:400, autoCenter:true,  cache:false }">
%GROUPINFO{
   "%URLPARAM{"groupname" default="%groupname%"}%"
   expand="0"
   header="<form action=\"%SCRIPTURLPATH{"manage"}%/%WEB%/%TOPIC%\" method=\"post\" >
     <input type=\"hidden\" name=\"groupname\" value=\"%URLPARAM{"groupname" default="%groupname%"}%\" />
     <input type=\"hidden\" name=\"action\" value=\"removeUserFromGroup\" />
     <div class=\"foswikiFormSteps\">
     <div class=\"foswikiFormStep\">
     <h3>%MAKETEXT{"Select members to remove from this group"}%:</h3>"
   format="<label style=\"display:block\">
      <input type=\"checkbox\" name=\"username\" value=\"$wikiname\" /> <nop>$wikiname
      </label>"
   footer="</div>
        <a class=\"jqUIDialogButton jqUIDialogSubmit jqUIDialogClose {icon:'ui-icon-circle-check'}\" >%MAKETEXT{"Remove selected members"}%</a>
       <a class=\"jqUIDialogButton jqUIDialogClose {icon:'ui-icon-cancel'}\">%MAKETEXT{"Cancel"}%</a>
        $percntCLEAR$percnt
      </div>
      </form>"
   separator="$n"
}%</div>
%ENDSECTION{"group_remove"}%
</verbatim>

%TMPL:END%

-- LynnwoodBrown - 05 Apr 2012

Hi Lynnwood,

NeedsMerge status is a new thing I added a few months ago that indicates a commit on trunk needs to be merged over to Release01x01.

Given that trunk doesn't have your changes yet, I'm setting this back to Confirmed.

Will you be committing your change to trunk?

-- PaulHarvey - 06 Apr 2012

I've committed the changes with revision 14571 and am resetting the status to NeedsMerge as instructed on irc by Paul last night.

-- LynnwoodBrown - 06 Apr 2012

Cool, thanks

-- PaulHarvey - 06 Apr 2012

There are two glitches:

• there's a spurious html comment showing up on the wiki groups page, something like !-- -->
• usability: the modal dialog doesn't say to which group members are added.

-- MichaelDaum - 10 Apr 2012

Sorry about the comment line. Odd that it did show up before. And thanks for the usability suggestion. Both changes are checked in now.

-- LynnwoodBrown - 11 Apr 2012

Lynnwood, is this ready for release?

-- GeorgeClark - 22 Dec 2014

I believe it is as there have been no further issues identified with it. I'm afraid I need to get up to date with git to revisit and test further.

-- LynnwoodBrown - 30 Dec 2014

Commenting is disabled while not logged in